feat: hot module replacement

- now supports HMR
- limitations
  - in node_modules/* modules are not supported HMR yet.
- custom runtime module system by `swc-plugin-global-module`
  - https://github.com/leegeunhyeok/swc-plugin-global-module

close #38

.eslintrc.js

@@ -51,6 +51,17 @@ module.exports = {
         'no-console': 'off',
       },
     },
+    {
+      files: ['packages/hmr/lib/runtime/*.ts'],
+      rules: {
+        'no-console': 'off',
+        '@typescript-eslint/no-explicit-any': 'off',
+        '@typescript-eslint/no-unsafe-call': 'off',
+        '@typescript-eslint/no-unsafe-member-access': 'off',
+        '@typescript-eslint/no-unsafe-argument': 'off',
+        '@typescript-eslint/no-unsafe-assignment': 'off',
+      },
+    },
     {
       files: ['packages/jest/lib/**/*.ts'],
       rules: {

README.md

@@ -28,7 +28,7 @@
 - 💾 In-memory & Local File System Caching
 - 🎨 Flexible & Extensible
 - 🔥 Supports JSC & Hermes Runtime
-- 🔄 Supports Live Reload
+- 🔄 Supports HMR & Live Reload
 - 🐛 Supports Debugging(Flipper, Chrome Debugger)
 - 🌍 Supports All Platforms(Android, iOS, Web)
 - ✨ New Architecture Ready

docs/pages/configuration/basic-configuration.mdx

@@ -16,6 +16,9 @@ exports.default = {};
 By default, follow the configuration below.
 
 ```js
+/**
+ * @type {import('@react-native-esbuild/core').Config}
+ */
 exports.default = {
   cache: true,
   logger: {
@@ -28,13 +31,6 @@ exports.default = {
     assetExtensions: [/* internal/lib/defaults.ts */],
   },
   transformer: {
-    jsc: {
-      transform: {
-        react: {
-          runtime: 'automatic',
-        },
-      },
-    },
     stripFlowPackageNames: ['react-native'],
   },
   web: {
@@ -68,7 +64,6 @@ Resolver configurations.
 
 Transformer configurations.
 
-- `transformer.jsc`: [jsc](https://swc.rs/docs/configuration/compilation) config in swc.
 - `transformer.stripFlowPackageNames`: Package names to strip flow syntax from (Defaults to `['react-native']`)
 - `transformer.fullyTransformPackageNames`: Package names to fully transform with [metro-react-native-babel-preset](https://github.com/facebook/react-native/tree/main/packages/react-native-babel-preset) from
 - `transformer.additionalTransformRules`: Additional transform rules. This rules will be applied before phase of transform to es5
@@ -90,6 +85,15 @@ Additional Esbuild plugins.
 
 For more details, go to [Custom Plugins](/configuration/custom-plugins)
 
+### experimental
+
+<Callout>
+  Experimental configurations.
+</Callout>
+
+- `experimental.hmr`: Enable HMR(Hot Module Replacement) on development mode. (Defaults to `false`)
+  - For more details and limitations, go to [Hot Module Replacement](/limitations/hot-module-replacement).
+
 ## Types
 
 <details>
@@ -209,6 +213,17 @@ interface Config {
    * Additional Esbuild plugins.
    */
   plugins?: EsbuildPlugin[];
+  /**
+   * Experimental configurations
+   */
+  experimental?: {
+    /**
+     * Enable HMR(Hot Module Replacement) on development mode.
+     *
+     * Defaults to `false`.
+     */
+    hmr?: boolean;
+  };
   /**
    * Client event receiver
    */

docs/pages/getting-started/installation.md

@@ -31,7 +31,7 @@ And create `react-native-esbuild.js` to project root.
 exports.default = {};
 ```
 
-for more details, go to [Configuration](/configuration/basic).
+for more details, go to [Basic Configuration](/configuration/basic-configuration).
 
 ## Native Setup
 

docs/pages/limitations/hot-module-replacement.mdx

@@ -0,0 +1,30 @@
+import { Callout } from 'nextra/components'
+
+# Hot Module Replacement
+
+<Callout type="warning">
+  HMR(Hot Module Replacement) is experimental.
+</Callout>
+
+esbuild doesn't currently support Hot Module Replacement(HMR).
+
+So, I working hard for implement custom HMR and it's partially available as an experimental feature.
+
+You can enable HMR by `experimental.hmr` set to `true` in your configuration file.
+
+```js
+/**
+ * @type {import('@react-native-esbuild/core').Config}
+ */
+exports.default = {
+  // ...
+  experimental: {
+    hmr: true,
+  },
+};
+```
+
+and here are some limitations.
+
+- Detects changes in the `<projectRoot>/*` only.
+- Changes detected in `<projectRoot>/node_modules/*` will be ignored and fully refreshed after rebuild.

example/.gitignore

@@ -73,6 +73,9 @@ yarn-error.log
 !.yarn/sdks
 !.yarn/versions
 
+# @swc
+.swc
+
 # @react-native-esbuild
 .rne
 .swc

example/react-native-esbuild.config.js

@@ -29,4 +29,7 @@ exports.default = {
       ],
     },
   },
+  experimental: {
+    hmr: true,
+  },
 };

jest.config.ts

@@ -70,10 +70,10 @@ const config: Config = {
       setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
     },
     {
-      displayName: '@react-native-esbuild/utils',
+      displayName: '@react-native-esbuild/shared',
       transform,
       testEnvironment: 'node',
-      testMatch: ['<rootDir>/packages/utils/**/*.test.ts'],
+      testMatch: ['<rootDir>/packages/shared/**/*.test.ts'],
       setupFilesAfterEnv: ['<rootDir>/test/setup.ts'],
     },
   ],

packages/cli/lib/helpers/cli.ts

@@ -1,4 +1,4 @@
-import { colors } from '@react-native-esbuild/utils';
+import { colors } from '@react-native-esbuild/shared';
 import { logger } from '../shared';
 
 export const getCommand = <RawArgv extends { _: (string | number)[] }>(

packages/cli/lib/index.ts

@@ -1,5 +1,5 @@
 import { ReactNativeEsbuildBundler } from '@react-native-esbuild/core';
-import { LogLevel } from '@react-native-esbuild/utils';
+import { LogLevel } from '@react-native-esbuild/shared';
 import { cli } from './cli';
 import * as Commands from './commands';
 import { getCommand, handleUncaughtException } from './helpers';

packages/cli/lib/shared.ts

@@ -1,3 +1,3 @@
-import { Logger } from '@react-native-esbuild/utils';
+import { Logger } from '@react-native-esbuild/shared';
 
 export const logger = new Logger('cli');

packages/cli/package.json

@@ -43,7 +43,7 @@
     "@react-native-esbuild/core": "workspace:*",
     "@react-native-esbuild/dev-server": "workspace:*",
     "@react-native-esbuild/plugins": "workspace:*",
-    "@react-native-esbuild/utils": "workspace:*",
+    "@react-native-esbuild/shared": "workspace:*",
     "yargs": "^17.7.2",
     "zod": "^3.22.2"
   },