feat(esbuild): Esbuild support (#2473)

Co-authored-by: ScriptedAlchemy <zackaryjackson@bytedance.com>
module-federation · Jun 27, 2024 · 99ecb31 · 99ecb31
1 parent 45f0d80
commit 99ecb31
Show file tree

Hide file tree

Showing 72 changed files with 4,553 additions and 205 deletions.
diff --git a/.changeset/brown-apricots-study.md b/.changeset/brown-apricots-study.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/esbuild': patch
+---
+
+Esbuild federation plugin
diff --git a/.changeset/sweet-mangos-do.md b/.changeset/sweet-mangos-do.md
@@ -0,0 +1,5 @@
+---
+'@module-federation/esbuild': patch
+---
+
+update skip share of internals
diff --git a/.cursorignore b/.cursorignore
@@ -8,3 +8,6 @@
 ./packages/typescript
 ./packages/native-*
 ./apps
+**/configCases
+apps/**
+*.snap
diff --git a/apps/esbuild/build.js b/apps/esbuild/build.js
diff --git a/apps/esbuild/build/build-common.js b/apps/esbuild/build/build-common.js
@@ -0,0 +1,39 @@
+//@ts-nocheck
+
+const esbuild = require('esbuild');
+const path = require('path');
+const fs = require('fs');
+const { moduleFederationPlugin } = require('@module-federation/esbuild/plugin');
+
+async function buildProject(projectName, watch) {
+  const tsConfig = 'tsconfig.json';
+  const outputPath = path.join('dist', projectName);
+
+  fs.rmSync(outputPath, { force: true, recursive: true });
+
+  await esbuild.build({
+    entryPoints: [path.join(projectName, 'main.ts')],
+    outdir: outputPath,
+    bundle: true,
+    platform: 'browser',
+    format: 'esm',
+    mainFields: ['es2020', 'browser', 'module', 'main'],
+    conditions: ['es2022', 'es2015', 'module'],
+    resolveExtensions: ['.ts', '.tsx', '.mjs', '.js'],
+    loader: { '.ts': 'ts' },
+    tsconfig: tsConfig,
+    splitting: true,
+    plugins: [
+      moduleFederationPlugin(
+        require(path.join('../', projectName, 'federation.config.js')),
+      ),
+    ],
+    watch,
+  });
+
+  ['index.html', 'favicon.ico', 'styles.css'].forEach((file) => {
+    fs.copyFileSync(path.join(projectName, file), path.join(outputPath, file));
+  });
+}
+
+module.exports = { buildProject };
diff --git a/apps/esbuild/build/build-mfe1.js b/apps/esbuild/build/build-mfe1.js
@@ -0,0 +1,4 @@
+const { buildProject } = require('./build-common');
+
+const watch = process.argv.includes('--watch');
+buildProject('mfe1', watch);
diff --git a/apps/esbuild/build/build-shell.js b/apps/esbuild/build/build-shell.js
@@ -0,0 +1,4 @@
+const { buildProject } = require('./build-common');
+
+const watch = process.argv.includes('--watch');
+buildProject('shell', watch);
diff --git a/apps/esbuild/libs/shared-lib/index.ts b/apps/esbuild/libs/shared-lib/index.ts
@@ -0,0 +1,9 @@
+var _data = '';
+
+export function setData(data: string): void {
+  _data = data;
+}
+
+export function getData(): string {
+  return _data;
+}
diff --git a/apps/esbuild/libs/shared-lib/package.json b/apps/esbuild/libs/shared-lib/package.json
@@ -0,0 +1,5 @@
+{
+  "name": "shared-lib",
+  "version": "0.0.1",
+  "main": "./index.ts"
+}
diff --git a/apps/esbuild/mfe1/app.tsx b/apps/esbuild/mfe1/app.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+export function App() {
+  const [state, setState] = React.useState(null);
+  React.useEffect(() => {
+    setState('Hooks work');
+  });
+
+  return (
+    <div id="container">
+      <h1>Flights</h1>
+      <div>
+        <input type="text" placeholder="From"></input>
+      </div>
+      <div>
+        <input type="text" placeholder="To"></input>
+      </div>
+      <div>
+        <button id="search">Search!</button>
+        <button id="terms">Terms...</button>
+      </div>
+      <p>testing hooks: {state}</p>
+    </div>
+  );
+}
diff --git a/apps/esbuild/mfe1/bootstrap.tsx b/apps/esbuild/mfe1/bootstrap.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
diff --git a/apps/esbuild/mfe1/favicon.ico b/apps/esbuild/mfe1/favicon.ico
diff --git a/apps/esbuild/mfe1/federation.config.js b/apps/esbuild/mfe1/federation.config.js
@@ -0,0 +1,26 @@
+const {
+  withFederation,
+  shareAll,
+} = require('@module-federation/esbuild/build');
+
+module.exports = withFederation({
+  name: 'mfe1',
+  filename: './mfe1/remoteEntry.js',
+  exposes: {
+    './component': './mfe1/app',
+  },
+  shared: {
+    react: {
+      singleton: true,
+      version: '^18.2.0',
+    },
+    'react-dom': {
+      singleton: true,
+      version: '^18.2.0',
+    },
+    rxjs: {
+      singleton: true,
+      version: '^7.8.1',
+    },
+  },
+});
diff --git a/apps/esbuild/mfe1/federationInit.js b/apps/esbuild/mfe1/federationInit.js
@@ -0,0 +1 @@
+export default 'FEDERATIONINININININT';
diff --git a/apps/esbuild/mfe1/index.html b/apps/esbuild/mfe1/index.html
@@ -0,0 +1,19 @@
+<html>
+  <head>
+    <title>Microfrontend 1</title>
+  </head>
+  <body>
+    <link rel="stylesheet" href="styles.css" />
+
+    <div id="root"></div>
+
+    <script type="esms-options">
+      {
+          "shimMode": true
+      }
+    </script>
+
+    <script src="https://ga.jspm.io/npm:es-module-shims@1.5.17/dist/es-module-shims.js"></script>
+    <script type="module-shim" src="main.js"></script>
+  </body>
+</html>
diff --git a/apps/esbuild/mfe1/main.ts b/apps/esbuild/mfe1/main.ts
@@ -0,0 +1,3 @@
+(async () => {
+  await import('./bootstrap');
+})();
diff --git a/apps/esbuild/mfe1/styles.css b/apps/esbuild/mfe1/styles.css
@@ -0,0 +1,32 @@
+input[type='text'] {
+  width: 100%;
+  max-width: 400px;
+  box-sizing: border-box;
+  border: none;
+  border-bottom: 2px solid silver;
+  font-size: 20px;
+  margin-bottom: 20px;
+  margin-top: 20px;
+}
+
+button {
+  border: 2px solid silver;
+  background-color: white;
+  font-size: 16px;
+  padding: 10px;
+  padding-left: 40px;
+  padding-right: 40px;
+  border-radius: 10px;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  cursor: pointer;
+}
+
+button:active {
+  border-color: black;
+}
+
+#container {
+  border: 2px green dashed;
+  padding: 20px;
+}
diff --git a/apps/esbuild/package.json b/apps/esbuild/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "federation-demo1",
+  "private": true,
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "build:remote": "node build/build-mfe1.js",
+    "build:host": "node build/build-shell.js",
+    "build": "rm -rf ./node_modules/.cache && npm run build:remote && npm run build:host",
+    "watch": "concurrently \"npm run build:remote -- --watch\" \"npm run build:host -- --watch\"",
+    "start:remote": "live-server dist/mfe1 --port=3001 --cors",
+    "start:host": "live-server dist/shell --port=3000",
+    "start": "pnpm run build && concurrently \"npm run start:remote\" \"npm run start:host\""
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@chialab/cjs-to-esm": "^0.18.0",
+    "@module-federation/webpack-bundler-runtime": "workspace:*",
+    "@module-federation/esbuild": "workspace:*",
+    "@module-federation/runtime": "workspace:*",
+    "@types/node": "^18.7.13",
+    "concurrently": "^5.3.0",
+    "esbuild": "^0.15.5",
+    "json5": "^2.2.1",
+    "live-server": "^1.1.0",
+    "typescript": "^4.8.2"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "rxjs": "^7.8.1"
+  }
+}
diff --git a/apps/esbuild/shell/app.tsx b/apps/esbuild/shell/app.tsx
@@ -0,0 +1,23 @@
+//@ts-nocheck
+
+import React from 'react';
+import { App as RemoteApp } from 'mfe1/component';
+
+export function App() {
+  return (
+    <div className="App">
+      <ul>
+        <li>
+          <a>Home</a>
+        </li>
+        <li>
+          <a>Flights</a>
+        </li>
+      </ul>
+
+      <React.Suspense fallback="...">
+        <RemoteApp />
+      </React.Suspense>
+    </div>
+  );
+}
diff --git a/apps/esbuild/shell/bootstrap.tsx b/apps/esbuild/shell/bootstrap.tsx
@@ -0,0 +1,16 @@
+//@ts-nocheck
+
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { App } from './app';
+
+import { of } from 'rxjs';
+
+console.log(of);
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
diff --git a/apps/esbuild/shell/decl.ts b/apps/esbuild/shell/decl.ts
@@ -0,0 +1 @@
+declare module 'mfe1/*';
diff --git a/apps/esbuild/shell/favicon.ico b/apps/esbuild/shell/favicon.ico
diff --git a/apps/esbuild/shell/federation.config.js b/apps/esbuild/shell/federation.config.js
@@ -0,0 +1,28 @@
+// shell\federation.config.js
+
+const {
+  withFederation,
+  shareAll,
+} = require('@module-federation/esbuild/build');
+
+module.exports = withFederation({
+  name: 'host',
+  filename: './shell/remoteEntry.js',
+  remotes: {
+    mfe1: 'http://localhost:3001/remoteEntry.js',
+  },
+  shared: {
+    react: {
+      singleton: true,
+      version: '^18.2.0',
+    },
+    'react-dom': {
+      singleton: true,
+      version: '^18.2.0',
+    },
+    rxjs: {
+      singleton: true,
+      version: '^7.8.1',
+    },
+  },
+});
diff --git a/apps/esbuild/shell/index.html b/apps/esbuild/shell/index.html
@@ -0,0 +1,23 @@
+<html>
+  <head>
+    <title>Shell</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Comfortaa"
+      rel="stylesheet"
+      type="text/css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <script type="esms-options">
+      {
+          "shimMode": true
+      }
+    </script>
+
+    <script src="https://ga.jspm.io/npm:es-module-shims@1.5.17/dist/es-module-shims.js"></script>
+    <script type="module-shim" src="main.js"></script>
+
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/apps/esbuild/shell/main.ts b/apps/esbuild/shell/main.ts
@@ -0,0 +1,5 @@
+//@ts-nocheck
+
+(async () => {
+  import('./bootstrap');
+})();
diff --git a/apps/esbuild/shell/styles.css b/apps/esbuild/shell/styles.css
@@ -0,0 +1,41 @@
+body {
+  font-family: 'Comfortaa', cursive;
+  padding-top: 80px;
+  padding-left: 10px;
+}
+
+ul {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  overflow: hidden;
+  background-color: #333;
+
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+}
+
+li {
+  float: left;
+}
+
+li a {
+  display: block;
+  color: white;
+  text-align: center;
+  padding: 14px 16px;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+/* Change the link color to #111 (black) on hover */
+li a:hover {
+  background-color: #111;
+}
+
+#container {
+  border: 2px green dashed;
+  padding: 20px;
+}