feat(esbuild): Esbuild support (#2473)

Co-authored-by: ScriptedAlchemy <[email protected]>

Author: ScriptedAlchemy

.changeset/brown-apricots-study.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/esbuild': patch
+---
+
+Esbuild federation plugin

.changeset/sweet-mangos-do.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/esbuild': patch
+---
+
+update skip share of internals

.cursorignore

@@ -8,3 +8,6 @@
 ./packages/typescript
 ./packages/native-*
 ./apps
+**/configCases
+apps/**
+*.snap

apps/esbuild/build.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 };

apps/esbuild/build/build-common.js

@@ -0,0 +1,4 @@
+const { buildProject } = require('./build-common');
+
+const watch = process.argv.includes('--watch');
+buildProject('mfe1', watch);

apps/esbuild/build/build-mfe1.js

@@ -0,0 +1,4 @@
+const { buildProject } = require('./build-common');
+
+const watch = process.argv.includes('--watch');
+buildProject('shell', watch);

apps/esbuild/build/build-shell.js

@@ -0,0 +1,9 @@
+var _data = '';
+
+export function setData(data: string): void {
+  _data = data;
+}
+
+export function getData(): string {
+  return _data;
+}

apps/esbuild/libs/shared-lib/index.ts

@@ -0,0 +1,5 @@
+{
+  "name": "shared-lib",
+  "version": "0.0.1",
+  "main": "./index.ts"
+}

apps/esbuild/libs/shared-lib/package.json

@@ -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>
+  );
+}