esbuild-hmr

PoC of Hot Module Replacement(HMR) on esbuild.
(For @react-native-esbuild)

• Custom Fils System Watcher
• Transform code to follow custom module system
  • Transform import & export statements
  • swc-plugin-global-esm

Preview

Note

See HMR timestamp in page and console logs carefully.

Start

yarn start

and visit http://localhost:8080.

Overview

// sub.ts
var __hmr0 = window.__modules.hot.register('client/sub.ts');

export const getMessage = () => 'Hello';
global.__modules.export('client/sub.ts', {
  "getMessage": getMessage,
});

__hmr0.accept(...);
__hmr0.dispose(...);

// main.ts
var __hmr1 = window.__modules.hot.register('client/main.ts');
var getMessage = global.__module.import('client/sub.ts').getMessage; // `import { getMessage } from './sub';`

console.log(getMessage());

document.getElementById('hmr_date').innerHTML = new Date().toISOString();

__hmr1.accept(...);
__hmr1.dispose(...);

when file changes detected, transform target file and send it to client via web socket.

// On hmr message (client-side web socket message handler)
disposeCallbacks.forEach((callback) => callback());
try {
  eval(payload.body);
  acceptCallbacks.forEach((callback) => callback({ body: payload.body }));
} catch {
  // When some error occurs, fallback to fully reload.
  window.location.reload();
}

• Register and get modules to global context with window.__modules.import, window.__modules.export.
• window.__modules.hot.register('...') is create HMR context.
  • Can be store accept or dispose callbacks for side-effects.