Supports hot reload

[leegeunhyeok]

Description

Supports hot reload on development environment.

Tasks

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

---

• Supports hot reload for web #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

Screen.Recording.2023-10-20.at.12.50.02.AM.mov

[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

Screen.Recording.2023-10-23.at.1.34.59.AM.mov

[leegeunhyeok]

Notes

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

[leegeunhyeok]

Notes

Screen.Recording.2023-12-14.at.22.23.52.mov

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 > de55ffb

[leegeunhyeok]

Notes

• sideEffects: false issue > (sideEffects and export * from  evanw/esbuild#2795)

[benjamin7zero]

please bring HMR to this project, it would be crazy

[laogui]

I have been waiting