slawekkolodziej/esbuild-module-federation-plugin

esbuild module federation plugin

This module is not ready for production. It is more of an experiment with module federation and esbuild.

TODO:

• Lazy load remotes
• Set up proper testing environment
• Convert code to TypeScript?
• Replace Babel with SWC or other, faster tool After initial work it seems that SWC Visitor is buggy. It does not visit all CallExpression statements. Possibly related issue: swc-project/swc#1623
• Call initSharing inside entrypoints
• Use this plugin inside esbuild-host code
• Add support for node builds
• Add proper support for CSS chunks
• Experiment with node MF streaming with hot code reload controlled by sockets

Using esbuild module as remote in webpack app

function esmRemote(name, url) {
  return `promise new Promise(resolve => {
    const script = document.createElement('script');
    script.src = '${url}';
    script.type = 'module';
    script.onload = () => {
      const proxy = {
        get: (request) => window.${name}.get(request),
        init: (arg) => {
          try {
            return window.${name}.init(arg);
          } catch(e) {
            console.log('remote container already initialized')
          }
        }
      }
      resolve(proxy)
    }
    document.head.appendChild(script);
  })`;
}

// later in your webpack config:
new webpack.container.ModuleFederationPlugin({
  name: "main_app",
  remotes: {
    'esbuildRemote': esmRemote(
      'esbuildRemote',
      'http://localhost:3002/build/remote-entry.js'
    )
  }
})