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