Supports hot reload

[leegeunhyeok]

Description

Supports hot reload on development environment.

Tasks

• [x] Implement custom file watcher instead esbuild.context.watch()
  • [x] On some files change, trigger rebuild() and get the metadata(path, etc..) of the changed module.
  • [x] Implement custom file system watcher using chokidar
• [x] Transformer
  • [x] Skip if file is not changed (transform changed file only)
  • [x] Wrap modules with react-refresh context boundary
  • [x] Implement swc plugin (https://github.com/leegeunhyeok/swc-plugin-react-refresh)
  • [x] Custom module system
  • [x] Send HMR update message to client via web socket
  • [x] Evaluate updated code on client runtime
• [x] Get updated module code from bundle
• [x] Add experimental config for toggle hot reload

---

• [ ] #41

References

• react-refresh
• https://swc.rs/docs/configuration/compilation#jsctransformreactrefresh
• https://github.com/FredKSchott/esm-hmr/blob/master/src/client.ts
• PoC: https://github.com/leegeunhyeok/esbuild-hmr

Limitations

• Esbuild isn't supports HMR(Hot Module Replacement).
• Cannot skip transform(js, ts) loader in Esbuild.

Notes

• 0.1.0-alpha.42

---

// before
var __commonJS = (cb, mod) => function __require2() {
  return mod || (0, cb[__getOwnPropNames(cb)[0]])((mod = { exports: {} }).exports, mod), mod.exports;
};

// after
global.cachedModule = {};
var __commonJS = (cb, mod) => {
  var name = __getOwnPropNames(cb)[0];
  Object.defineProperty(global.cachedModule, name, {
    get: () => mod
  });
  return function __require2() {
    return mod || (0, cb[name])((mod = { exports: {} }).exports, mod), mod.exports;
  };
};

// when file changes detected -> don't rebuild, just transform target file with swc only.
// `import { a, b, c } from 'module-path';`

try {
  const { a, b, c } = global.cachedModule['module-path'];

  // ...
} catch (error) {
  // hot reload failed. fully reload instead
}

// Esbuild metafile
interface Metafile {
  // `inputs` key is module file path.
  inputs: Record<string, {
    byte: number;
    imports: {
      path: string; // eg. 'node_modules/react/cjs/index.js'
      original: string; // eg. 'react'
      kind: '...',
    }[];
  }>[],
  // ...
}

// {
//   react: 'node_modules/react/cjs/index.js',
//   '../components': 'src/components/index.ts',
// }
const mappedModules = metafile.inputs[changedFilePath]?.imports.reduce((prev, curr) => {
  return { ...prev, [curr.original]: curr.path };
}, {});

// Example usage
import { transform } from '@swc/core';

await transform(code, {
  jsc: {
    experimental: {
      plugins: [
        // https://github.com/leegeunhyeok/swc-plugin-react-native-esbuild-module
        ['react-native-esbuild-module-plugin', {
          alias: mappedModules ?? {},
        }],
      ],
    },
  },
});

[leegeunhyeok]

Notes

1st PoC

https://github.com/leegeunhyeok/react-native-esbuild/assets/26512984/4ff44d54-57c7-4bbc-942f-4c2fb7b4e4fe

[leegeunhyeok]

Notes

• Implement swc plugin for react-refresh (https://github.com/leegeunhyeok/swc-plugin-react-refresh)
  • Register React components
  • Create signature when component is using hooks
• Find updated module and its transformed code
  • Enhance file system watcher
  • Enhance bundled code (add boundary to each modules for find it)
• And.. many things

https://github.com/leegeunhyeok/react-native-esbuild/assets/26512984/8249589c-ceba-43d9-a8e3-aa9e49d830d2

[leegeunhyeok]

Notes

• [x] Search reverse dependecies
• [x] Actual module path (eg. like a '../Component' to /path/to/source/Component.tsx)
• [ ] Custom Hot Module Replacement API

[leegeunhyeok]

Notes

https://github.com/leegeunhyeok/react-native-esbuild/assets/26512984/f384f89b-6766-4ad4-8291-d6cc3470e252

Reverse dependencies

---

• https://github.com/leegeunhyeok/swc-plugin-global-module
• Transform changed module only
• Send reverse dependencies information to client
  • accept changed module updates + accept on parent modules too

[leegeunhyeok]

Mistake > https://github.com/leegeunhyeok/react-native-esbuild/commit/de55ffb175d66437e18c8075122d94524eefdcb0

[leegeunhyeok]

Notes

• sideEffects: false issue > (https://github.com/evanw/esbuild/issues/2795)

[benjamin7zero]

please bring HMR to this project, it would be crazy

[laogui]

I have been waiting