feat: shared-directory

shared-directory/README.md

@@ -0,0 +1,19 @@
+# React host and remote
+
+## Getting started
+
+From this directory execute:
+
+- npm run install:deps
+- npm run dev
+- npm run preview
+
+### host
+http://localhost:5172/
+
+### remote
+http://localhost:5176/
+
+Open your browser at http://localhost:5172/ to see the amazing result
+
+![alt text](image.png)

shared-directory/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "module-federation-vite-react",
+  "version": "1.0.0",
+  "description": "Module Federation Vite + React is now possible",
+  "scripts": {
+    "install:deps": "pnpm --filter shared-directory-* install",
+    "postinstall:deps": "pnpm --filter shared-directory-* run build",
+    "dev": "pnpm --filter shared-directory-* dev",
+    "build": "pnpm --filter shared-directory-* build",
+    "preview": "pnpm --filter shared-directory-* preview"
+  },
+  "author": {
+    "name": "Giorgio Boa",
+    "email": "[email protected]",
+    "url": "https://github.com/gioboa"
+  },
+  "license": "ISC"
+}

shared-directory/rust-host/README.md

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

shared-directory/rust-host/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "shared-directory-rust-host",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "rsbuild dev",
+    "build": "rsbuild build",
+    "preview": "npm run build && rsbuild preview"
+  },
+  "dependencies": {
+    "@module-federation/enhanced": "0.2.5",
+    "@module-federation/runtime": "^0.6.13",
+    "antd": "^5.16.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.22.3",
+    "vue": "^3.4.29"
+  },
+  "devDependencies": {
+    "@rsbuild/core": "0.7.10",
+    "@rsbuild/plugin-react": "0.7.10",
+    "@types/react": "18.3.3",
+    "@types/react-dom": "18.3.0",
+    "typescript": "5.5.3"
+  }
+}

shared-directory/rust-host/rsbuild.config.ts

@@ -0,0 +1,38 @@
+import { ModuleFederationPlugin } from '@module-federation/enhanced/rspack';
+import { defineConfig } from '@rsbuild/core';
+import { pluginReact } from '@rsbuild/plugin-react';
+
+export default defineConfig({
+  server: {
+    port: 5172,
+    open: true,
+  },
+  dev: {
+    // It is necessary to configure assetPrefix, and in the production environment, you need to configure output.assetPrefix
+    assetPrefix: 'http://localhost:5172',
+  },
+  tools: {
+    rspack: (config, { appendPlugins }) => {
+      config.output!.uniqueName = 'examples_rust';
+      appendPlugins([
+        new ModuleFederationPlugin({
+          name: 'examples_rust',
+          remotes: {
+            viteRemote: 'viteRemote@http://localhost:5176/mf-manifest.json',
+            shared: 'shared@https://shared.js',
+          },
+          implementation: require.resolve('@module-federation/runtime'),
+          runtimePlugins: ['./src/shared/plugin'],
+        }),
+      ]);
+    },
+  },
+  plugins: [
+    pluginReact({
+      splitChunks: {
+        react: false,
+        router: false,
+      },
+    }),
+  ],
+});

shared-directory/rust-host/src/bootstrap.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import file1Default from "shared/dir1/file1";
+import {A} from "shared/file2";
+import ViteApp from "viteRemote/App1"
+
+//@ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('root')!);
+root.render(
+  <React.StrictMode>
+    <div style={{ background: 'yellow', padding: 30 }}>
+      host:
+      <br />
+      shared/{file1Default}
+      <br />
+      shared/file2{A}
+    </div>
+    <hr />
+    <ViteApp />
+  </React.StrictMode>
+);

shared-directory/rust-host/src/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="@rsbuild/core/types" />

shared-directory/rust-host/src/index.tsx

@@ -0,0 +1 @@
+import('./bootstrap');

shared-directory/rust-host/src/shared/dir1/file1.js

@@ -0,0 +1,2 @@
+export default "dir1/file1 default(host)"
+export const A = "file2 A(host)"

shared-directory/rust-host/src/shared/file2.js

@@ -0,0 +1,2 @@
+export default "file2 default(host)"
+export const A = "file2 A(host)"

shared-directory/rust-host/src/shared/plugin.js

@@ -0,0 +1,20 @@
+export default function () {
+  return {
+    name: 'delegate-modules-plugin',
+    loadEntry({ remoteInfo }) {
+      if (remoteInfo.name === 'shared') {
+        return {
+          init() {},
+          async get(path) {
+            path = path.replace('./', '');
+            const result = await import(`./${path}`);
+            return () => ({
+              ...result,
+              __esModule: true
+            });
+          },
+        };
+      }
+    },
+  };
+}

shared-directory/rust-host/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "compilerOptions": {
+    "baseUrl": "./",
+    "target": "ES2020",
+    "lib": ["DOM", "ES2020"],
+    "module": "ESNext",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "resolveJsonModule": true,
+    "moduleResolution": "bundler",
+    "useDefineForClassFields": true
+  },
+  "include": ["src"]
+}

shared-directory/vite-remote/.__mf__temp/_mf_0_namespace_mf_1_viteViteRemote/localSharedImportMap.js

@@ -0,0 +1,178 @@
+
+// Windows temporarily needs this file, https://github.com/module-federation/vite/issues/68
+
+    const importMap = {
+
+        "react": async () => {
+          let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react__prebuild__.js")
+          return pkg
+        }
+      ,
+        "react/jsx-dev-runtime": async () => {
+          let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_1_jsx_mf_2_dev_mf_2_runtime__prebuild__.js")
+          return pkg
+        }
+      ,
+        "react/jsx-runtime": async () => {
+          let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_1_jsx_mf_2_runtime__prebuild__.js")
+          return pkg
+        }
+      ,
+        "react-dom/client": async () => {
+          let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_2_dom_mf_1_client__prebuild__.js")
+          return pkg
+        }
+      ,
+        "react-dom": async () => {
+          let pkg = await import("__mf__virtual/_mf_0_namespace_mf_1_viteViteRemote__prebuild__react_mf_2_dom__prebuild__.js")
+          return pkg
+        }
+
+    }
+      const usedShared = {
+
+          "react": {
+            name: "react",
+            version: "18.3.1",
+            scope: ["default"],
+            loaded: false,
+            from: "@namespace/viteViteRemote",
+            async get () {
+              usedShared["react"].loaded = true
+              const {"react": pkgDynamicImport} = importMap 
+              const res = await pkgDynamicImport()
+              const exportModule = {...res}
+              // All npm packages pre-built by vite will be converted to esm
+              Object.defineProperty(exportModule, "__esModule", {
+                value: true,
+                enumerable: false
+              })
+              return function () {
+                return exportModule
+              }
+            },
+            shareConfig: {
+              singleton: false,
+              requiredVersion: "18"
+            }
+          }
+        ,
+          "react/jsx-dev-runtime": {
+            name: "react/jsx-dev-runtime",
+            version: "18.3.1",
+            scope: ["default"],
+            loaded: false,
+            from: "@namespace/viteViteRemote",
+            async get () {
+              usedShared["react/jsx-dev-runtime"].loaded = true
+              const {"react/jsx-dev-runtime": pkgDynamicImport} = importMap 
+              const res = await pkgDynamicImport()
+              const exportModule = {...res}
+              // All npm packages pre-built by vite will be converted to esm
+              Object.defineProperty(exportModule, "__esModule", {
+                value: true,
+                enumerable: false
+              })
+              return function () {
+                return exportModule
+              }
+            },
+            shareConfig: {
+              singleton: false,
+              requiredVersion: "18"
+            }
+          }
+        ,
+          "react/jsx-runtime": {
+            name: "react/jsx-runtime",
+            version: "18.3.1",
+            scope: ["default"],
+            loaded: false,
+            from: "@namespace/viteViteRemote",
+            async get () {
+              usedShared["react/jsx-runtime"].loaded = true
+              const {"react/jsx-runtime": pkgDynamicImport} = importMap 
+              const res = await pkgDynamicImport()
+              const exportModule = {...res}
+              // All npm packages pre-built by vite will be converted to esm
+              Object.defineProperty(exportModule, "__esModule", {
+                value: true,
+                enumerable: false
+              })
+              return function () {
+                return exportModule
+              }
+            },
+            shareConfig: {
+              singleton: false,
+              requiredVersion: "18"
+            }
+          }
+        ,
+          "react-dom/client": {
+            name: "react-dom/client",
+            version: "18.3.1",
+            scope: ["default"],
+            loaded: false,
+            from: "@namespace/viteViteRemote",
+            async get () {
+              usedShared["react-dom/client"].loaded = true
+              const {"react-dom/client": pkgDynamicImport} = importMap 
+              const res = await pkgDynamicImport()
+              const exportModule = {...res}
+              // All npm packages pre-built by vite will be converted to esm
+              Object.defineProperty(exportModule, "__esModule", {
+                value: true,
+                enumerable: false
+              })
+              return function () {
+                return exportModule
+              }
+            },
+            shareConfig: {
+              singleton: false,
+              requiredVersion: "^18.3.1"
+            }
+          }
+        ,
+          "react-dom": {
+            name: "react-dom",
+            version: "18.3.1",
+            scope: ["default"],
+            loaded: false,
+            from: "@namespace/viteViteRemote",
+            async get () {
+              usedShared["react-dom"].loaded = true
+              const {"react-dom": pkgDynamicImport} = importMap 
+              const res = await pkgDynamicImport()
+              const exportModule = {...res}
+              // All npm packages pre-built by vite will be converted to esm
+              Object.defineProperty(exportModule, "__esModule", {
+                value: true,
+                enumerable: false
+              })
+              return function () {
+                return exportModule
+              }
+            },
+            shareConfig: {
+              singleton: false,
+              requiredVersion: "^18.3.1"
+            }
+          }
+
+    }
+      const usedRemotes = [
+                {
+                  entryGlobalName: "shared",
+                  name: "shared",
+                  type: "var",
+                  entry: "https://shared.js",
+                }
+
+      ]
+      export {
+        usedShared,
+        usedRemotes
+      }
+