module-federation · ScriptedAlchemy · Nov 7, 2023 · Nov 7, 2023 · Nov 7, 2023 · Nov 9, 2023
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/remix-rspack/app1/.gitignore b/remix-rspack/app1/.gitignore
@@ -0,0 +1,5 @@
+.DS_Store
+.cache
+node_modules
+build
+public/build
diff --git a/remix-rspack/app1/app/root.tsx b/remix-rspack/app1/app/root.tsx
@@ -0,0 +1,29 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+export function loader() {
+  return "Hello, World!";
+}
+
+export default function App() {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        <Outlet />
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/remix-rspack/app1/app/routes/_index.tsx b/remix-rspack/app1/app/routes/_index.tsx
@@ -0,0 +1,14 @@
+import { useLoaderData } from "@remix-run/react";
+export function loader() {
+  return { message: "Hello, World!" };
+}
+// const Button = lazy(() => import('app2/button'));
+export default function Home() {
+  const { message } = useLoaderData();
+  return (
+    <div>
+      <h1>Home</h1>
+      <p>{message}</p>
+    </div>
+  );
+}
diff --git a/remix-rspack/app1/components/Button.jsx b/remix-rspack/app1/components/Button.jsx
@@ -0,0 +1,3 @@
+export default () => {
+  return <button>Federated Button from App1</button>
+}
diff --git a/remix-rspack/app1/package.json b/remix-rspack/app1/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "rspack-remix-app1",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "build:browser": "rspack --mode=development --config webpack.browser.js",
+    "build:server": "rspack --mode=development --config webpack.server.js",
+    "start": "rm -rf ./public/build; pnpm run build:browser && pnpm run build:server && node ./build/index.js",
+    "server": "node ./build/index.js"
+  },
+  "author": "Jacob Ebey",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.23.3",
+    "@remix-run/dev": "^2.2.0",
+    "@rspack/cli": "^0.3.12",
+    "@rspack/core": "^0.3.12",
+    "@types/express": "^4.17.21",
+    "@types/react": "^18.2.37",
+    "@types/react-dom": "^18.2.15",
+    "babel-loader": "^9.1.3",
+    "babel-plugin-eliminator": "^1.0.1",
+    "esbuild": "^0.19.5",
+    "esbuild-loader": "^4.0.2",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "dependencies": {
+    "@remix-run/express": "^2.2.0",
+    "@remix-run/node": "^2.2.0",
+    "@remix-run/react": "^2.2.0",
+    "cors": "2.8.5",
+    "express": "^4.18.2",
+    "isbot": "^3.7.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/remix-rspack/app1/remix-parts.js b/remix-rspack/app1/remix-parts.js
@@ -0,0 +1,75 @@
+import * as path from "node:path";
+
+/**
+ *
+ * @param {import("@remix-run/dev").ResolvedRemixConfig} config
+ * @param {import("@remix-run/dev").AssetsManifest} manifest
+ * @returns
+ */
+export function createServerBuildEntry(config, manifest) {
+  const routeImports = Object.values(config.routes).map((route, index) => {
+    return `import * as route${index} from "${path
+      .relative(
+        path.resolve("./.cache"),
+        path.resolve(config.appDirectory, route.file)
+      )
+      .replace(/\\/g, "/")}";`;
+  });
+  const routes = Object.entries(config.routes).map(
+    ([routeId, route], index) => {
+      return `${JSON.stringify(routeId)}: {
+      id: ${JSON.stringify(route.id)},
+      parentId: ${JSON.stringify(route.parentId)},
+      path: ${JSON.stringify(route.path)},
+      index: ${JSON.stringify(route.index)},
+      caseSensitive: ${JSON.stringify(route.caseSensitive)},
+      module: route${index}
+    }`;
+    }
+  );
+
+  return `
+  import * as entryServer from "${config.entryServerFilePath.replace(
+    /\\/g,
+    "/"
+  )}";
+  ${routeImports.join("\n")}
+  export const entry = { module: entryServer };
+  export const routes = {
+    ${routes.join(",\n  ")}
+  };
+  export const assets = ${JSON.stringify(manifest)};
+  export const future = ${JSON.stringify(config.future)};
+  export const publicPath = ${JSON.stringify(config.publicPath)};
+`;
+}
+export class HoistContainerReferences {
+  apply(compiler) {
+    compiler.hooks.thisCompilation.tap('stuff', (compilation) => {
+      compilation.hooks.afterOptimizeChunks.tap(
+        'EmbeddedContainerPlugin',
+        (chunks) => {
+          const chunkSet = new Map()
+          const externalRequests = new Set()
+          for (const chunk of chunks) {
+            chunkSet.set(chunk.id || chunk.name, chunk)
+          }
+          // console.log(chunkSet)
+          for (const chunk of chunks) {
+            const remoteModules = compilation.chunkGraph.getChunkModulesIterableBySourceType(chunk,'remote');
+            if(!remoteModules) continue
+            for (const remoteModule of remoteModules) {
+              remoteModule.dependencies.forEach((dep) => {
+                const mod = compilation.moduleGraph.getModule(dep)
+                externalRequests.add(mod);
+                const runtimeChunk = chunkSet.get(chunk.runtime)
+                compilation.chunkGraph.connectChunkAndModule(runtimeChunk, mod)
+              })
+            }
+          }
+           console.log(externalRequests);
+        }
+      );
+    })
+  }
+}
diff --git a/remix-rspack/app1/remix.config.js b/remix-rspack/app1/remix.config.js
@@ -0,0 +1,5 @@
+/** @type {import("@remix-run/dev").AppConfig} */
+export default {
+  server: "server.ts",
+  serverModuleFormat: 'commonjs'
+};
diff --git a/remix-rspack/app1/server.ts b/remix-rspack/app1/server.ts
@@ -0,0 +1,15 @@
+import express from "express";
+import { createRequestHandler } from "@remix-run/express";
+import cors from 'cors';
+
+import * as build from "@remix-run/dev/server-build.js";
+
+const app = express();
+app.use(cors());
+app.use(express.static("public"));
+app.use('/server', express.static("build"));
+app.all("*", createRequestHandler({ build }));
+
+app.listen(3000, () => {
+  console.log(`Server started at http://localhost:3000`);
+});
diff --git a/remix-rspack/app1/tsconfig.json b/remix-rspack/app1/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "module": "Node16",
+    "moduleResolution": "Node16",
+    "strict": true,
+    "jsx": "react-jsx"
+  }
+}
diff --git a/remix-rspack/app1/utils/get-exports.js b/remix-rspack/app1/utils/get-exports.js
@@ -0,0 +1,25 @@
+import os from "os";
+import esbuild from "esbuild";
+
+export function getExports(routePath, remixConfig) {
+  const { metafile, errors } = esbuild.buildSync({
+    sourceRoot: remixConfig.appDirectory,
+    entryPoints: [routePath],
+    target: "esnext",
+    bundle: false,
+    metafile: true,
+    write: false,
+    outdir: os.tmpdir(),
+  });
+  if ((errors === null || errors === void 0 ? void 0 : errors.length) > 0) {
+    throw new Error(
+      esbuild.formatMessagesSync(errors, { kind: "error" }).join("\n")
+    );
+  }
+  const outputs = Object.values(metafile.outputs);
+  if (outputs.length !== 1) {
+    throw Error();
+  }
+  const output = outputs[0];
+  return output.exports;
+}
diff --git a/remix-rspack/app1/utils/manifest.js b/remix-rspack/app1/utils/manifest.js
@@ -0,0 +1,142 @@
+import * as fs from "node:fs";
+import * as path from "node:path";
+
+import { getExports } from "./get-exports.js";
+
+function createUrl(publicPath, file) {
+  return (
+    publicPath.split(path.win32.sep).join("/") +
+    (file || "").split(path.win32.sep).join("/")
+  );
+}
+
+/**
+ *
+ * @param {import("webpack").StatsCompilation} stats
+ * @param {string} publicPath
+ * @returns {(group: string) => string[]}
+ */
+function createNamedChunkGroupFactory(stats, publicPath) {
+  const chunksById = new Map(stats.chunks?.map((chunk) => [chunk.id, chunk]));
+  return (group) => {
+    /** @type {Set<string>} */
+    const files = new Set();
+    stats.namedChunkGroups?.[group].chunks?.forEach((chunkId) => {
+      const chunk = chunksById.get(chunkId);
+      chunk?.files?.forEach((file) => files.add(createUrl(publicPath, file)));
+    });
+    return [...files];
+  };
+}
+
+/**
+ * @param {webpack.StatsCompilation} param0
+ * @param {string} entrypointId
+ */
+const getAssets = ({ entrypoints }, entrypointId) => {
+  if (entrypoints === undefined) throw Error("todo");
+  const { assets } = entrypoints[entrypointId];
+  if (assets === undefined) throw Error("todo");
+  return assets;
+};
+
+/**
+ * @param {import("@remix-run/dev").ResolvedRemixConfig} remixConfig
+ * @param {import("webpack").Stats} stats
+ * @returns {import("@remix-run/dev").AssetsManifest}
+ */
+export async function toManifest(remixConfig, stats) {
+  const compilationStats = stats.toJson({
+    modules: true,
+    entrypoints: true,
+    assets: true,
+    groupAssetsByChunk: true,
+    hash: true,
+  });
+  const getByNamedChunkGroup = createNamedChunkGroupFactory(
+    compilationStats,
+    remixConfig.publicPath
+  );
+
+  const entryImports = getByNamedChunkGroup("entry.client");
+  const entryModule = createUrl(
+    remixConfig.publicPath,
+    getAssets(compilationStats, "entry.client").slice(-1)[0].name
+  );
+  const rootImports = getByNamedChunkGroup("root");
+
+  // TODO: what are runtime imports? dynamic imports?
+  // let runtimeImports = compilationStats.assetsByChunkName["runtime"].map(
+  //   (asset) => createUrl(remixConfig.publicPath, asset)
+  // );
+
+  const routes = Object.fromEntries(
+    Object.entries(remixConfig.routes).map(([routeId, route]) => {
+      const assets = getAssets(compilationStats, routeId);
+      const routeImports = assets
+        .slice(0, -1)
+        .map((asset) => createUrl(remixConfig.publicPath, asset.name));
+      const routeModule = createUrl(
+        remixConfig.publicPath,
+        assets.slice(-1)[0].name
+      );
+      const routePath = path.resolve(remixConfig.appDirectory, route.file);
+      const routeExports = getExports(routePath, remixConfig);
+      return [
+        routeId,
+        {
+          id: route.id,
+          parentId: route.parentId,
+          path: route.path,
+          index: route.index,
+          caseSensitive: route.caseSensitive,
+          module: routeModule,
+          imports: routeImports,
+          hasAction: routeExports.includes("action"),
+          hasLoader: routeExports.includes("loader"),
+          hasCatchBoundary: routeExports.includes("CatchBoundary"),
+          hasErrorBoundary: routeExports.includes("ErrorBoundary"),
+        },
+      ];
+    })
+  );
+
+  const version = compilationStats.hash;
+  if (version === undefined) throw Error("todo");
+  return {
+    version,
+    url: createUrl(
+      remixConfig.publicPath,
+      `manifest-${version.toUpperCase()}.js`
+    ),
+    entry: {
+      imports: [
+        ...new Set([/* ...runtimeImports, */ ...entryImports, ...rootImports]),
+      ],
+      module: entryModule,
+    },
+    routes,
+  };
+}
+
+export function writeManifest(config, manifest) {
+  fs.mkdirSync("./.cache", { recursive: true });
+  fs.writeFileSync(
+    "./.cache/manifest.json",
+    JSON.stringify(manifest, null, 2),
+    "utf8"
+  );
+
+  fs.mkdirSync(config.assetsBuildDirectory, { recursive: true });
+  fs.writeFileSync(
+    path.resolve(config.assetsBuildDirectory, path.basename(manifest.url)),
+    `window.__remixManifest=${JSON.stringify(manifest)};`
+  );
+}
+
+/**
+ * @returns {import("@remix-run/dev").AssetsManifest}
+ */
+export function getManifest() {
+  return JSON.parse(fs.readFileSync("./.cache/manifest.json", "utf8"));
+}