module-federation · gioboa · Aug 10, 2024 · Aug 10, 2024 · Aug 10, 2024 · Aug 10, 2024
diff --git a/examples/rust/README.md → examples/rust-vite/rust-host/README.md b/examples/rust/README.md → examples/rust-vite/rust-host/README.md
diff --git a/examples/rust/package.json → examples/rust-vite/rust-host/package.json b/examples/rust/package.json → examples/rust-vite/rust-host/package.json
@@ -1,5 +1,5 @@
 {
- "name": "examples-rust",
+ "name": "examples-rust-vite-rust",
  "version": "1.0.0",
  "scripts": {
  "dev": "rsbuild dev",

diff --git a/examples/rust/rsbuild.config.ts → ...les/rust-vite/rust-host/rsbuild.config.ts b/examples/rust/rsbuild.config.ts → ...les/rust-vite/rust-host/rsbuild.config.ts
@@ -4,12 +4,12 @@ import { pluginReact } from '@rsbuild/plugin-react';
 
 export default defineConfig({
  server: {
- port: 5176,
+ 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:5176',
+ assetPrefix: 'http://localhost:5172',
  },
  tools: {
  rspack: (config, { appendPlugins }) => {

diff --git a/examples/rust/src/App.tsx → examples/rust-vite/rust-host/src/App.tsx b/examples/rust/src/App.tsx → examples/rust-vite/rust-host/src/App.tsx
diff --git a/examples/rust/src/bootstrap.tsx → ...les/rust-vite/rust-host/src/bootstrap.tsx b/examples/rust/src/bootstrap.tsx → ...les/rust-vite/rust-host/src/bootstrap.tsx
diff --git a/examples/rust/src/env.d.ts → examples/rust-vite/rust-host/src/env.d.ts b/examples/rust/src/env.d.ts → examples/rust-vite/rust-host/src/env.d.ts
diff --git a/examples/rust/src/index.tsx → examples/rust-vite/rust-host/src/index.tsx b/examples/rust/src/index.tsx → examples/rust-vite/rust-host/src/index.tsx
diff --git a/examples/rust/tsconfig.json → examples/rust-vite/rust-host/tsconfig.json b/examples/rust/tsconfig.json → examples/rust-vite/rust-host/tsconfig.json
diff --git a/examples/vite/.gitignore → examples/rust-vite/vite-remote/.gitignore b/examples/vite/.gitignore → examples/rust-vite/vite-remote/.gitignore
diff --git a/examples/vite/index.html → examples/rust-vite/vite-remote/index.html b/examples/vite/index.html → examples/rust-vite/vite-remote/index.html
diff --git a/examples/vite/package.json → examples/rust-vite/vite-remote/package.json b/examples/vite/package.json → examples/rust-vite/vite-remote/package.json
@@ -1,5 +1,5 @@
 {
- "name": "examples-vite",
+ "name": "examples-rust-vite-vite",
  "version": "0.0.3",
  "type": "module",
  "scripts": {

diff --git a/examples/vite/src/App.jsx → examples/rust-vite/vite-remote/src/App.jsx b/examples/vite/src/App.jsx → examples/rust-vite/vite-remote/src/App.jsx
diff --git a/examples/vite/src/assets/vue.svg → .../rust-vite/vite-remote/src/assets/vue.svg b/examples/vite/src/assets/vue.svg → .../rust-vite/vite-remote/src/assets/vue.svg
diff --git a/examples/vite/src/main.jsx → examples/rust-vite/vite-remote/src/main.jsx b/examples/vite/src/main.jsx → examples/rust-vite/vite-remote/src/main.jsx
diff --git a/examples/vite/src/mfPlugins.js → ...es/rust-vite/vite-remote/src/mfPlugins.js b/examples/vite/src/mfPlugins.js → ...es/rust-vite/vite-remote/src/mfPlugins.js
diff --git a/examples/vite/src/style.css → examples/rust-vite/vite-remote/src/style.css b/examples/vite/src/style.css → examples/rust-vite/vite-remote/src/style.css
diff --git a/examples/vite/vite.config.js → ...ples/rust-vite/vite-remote/vite.config.js b/examples/vite/vite.config.js → ...ples/rust-vite/vite-remote/vite.config.js
@@ -7,6 +7,7 @@ import topLevelAwait from 'vite-plugin-top-level-await';
 export default defineConfig({
  server: {
  open: true,
+ port: 5173,
  },
  base: 'http://localhost:5173',
  plugins: [
@@ -20,7 +21,7 @@ export default defineConfig({
  'remote1@https://unpkg.com/react-manifest-example_remote1@1.0.6/dist/mf-manifest.json',
  },
  exposes: {
- App: './src/App.jsx',
+ './App': './src/App.jsx',
  },
  filename: 'dd/remoteEntry.js',
  shared: {

diff --git a/examples/vite-vite/vite-host/.gitignore b/examples/vite-vite/vite-host/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+pnpm-lock.yaml
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vite-vite/vite-host/index.html b/examples/vite-vite/vite-host/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + Vue</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.jsx"></script>
+ </body>
+</html>
diff --git a/examples/vite-vite/vite-host/package.json b/examples/vite-vite/vite-host/package.json
@@ -0,0 +1,24 @@
+{
+ "name": "examples-vite-vite-host",
+ "version": "0.0.3",
+ "type": "module",
+ "scripts": {
+ "dev": "vite --force",
+ "build": "vite build",
+ "preview": "vite build && http-server --cors -p 5173 dist"
+ },
+ "dependencies": {
+ "@module-federation/vite": "workspace:*",
+ "react": "^18.3.1",
+ "react-dom": "^18.2.0",
+ "vue": "^3.4.35",
+ "vue-router": "^4.4.0"
+ },
+ "devDependencies": {
+ "@swc/core": "~1.6.0",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.1",
+ "vite-plugin-top-level-await": "^1.4.1",
+ "http-server": "^14.1.1"
+ }
+}
diff --git a/examples/vite-vite/vite-host/src/App.jsx b/examples/vite-vite/vite-host/src/App.jsx
@@ -0,0 +1,10 @@
+import RemoteApp from "@namespace/viteViteRemote";
+
+export default function () {
+ return (
+ <div>
+ vite host
+ <RemoteApp />
+ </div>
+ );
+}
diff --git a/examples/vite-vite/vite-host/src/assets/vue.svg b/examples/vite-vite/vite-host/src/assets/vue.svg
diff --git a/examples/vite-vite/vite-host/src/main.jsx b/examples/vite-vite/vite-host/src/main.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+//@ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
diff --git a/examples/vite-vite/vite-host/src/mfPlugins.js b/examples/vite-vite/vite-host/src/mfPlugins.js
@@ -0,0 +1,11 @@
+const runtimePlugin = () => {
+ return {
+ name: 'module-federation-example-plugin',
+ beforeRequest(args) {
+ console.log('before request hook');
+ return args;
+ },
+ };
+};
+
+export default runtimePlugin;
diff --git a/examples/vite-vite/vite-host/src/style.css b/examples/vite-vite/vite-host/src/style.css
@@ -0,0 +1,79 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+ font-weight: 500;
+ color: #646cff;
+ text-decoration: inherit;
+}
+a:hover {
+ color: #535bf2;
+}
+
+body {
+ margin: 0;
+ display: flex;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+}
+
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+
+.card {
+ padding: 2em;
+}
+
+#app {
+ max-width: 1280px;
+ margin: 0 auto;
+ padding: 2rem;
+ text-align: center;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/examples/vite-vite/vite-host/vite.config.js b/examples/vite-vite/vite-host/vite.config.js
@@ -0,0 +1,39 @@
+import { federation } from '@module-federation/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ server: {
+ open: true,
+ port: 5175,
+ },
+ base: 'http://localhost:5175',
+ plugins: [
+ react(),
+ federation({
+ name: 'viteViteHost',
+ remotes: {
+ '@namespace/viteViteRemote': {
+ entry: 'http://localhost:5176/remoteEntry.js',
+ type: 'module',
+ },
+ },
+ filename: 'remoteEntry.js',
+ shared: {
+ vue: {},
+ react: {
+ requiredVersion: '18',
+ },
+ 'react-dom': {},
+ },
+ runtimePlugins: ['./src/mfPlugins'],
+ }),
+ // If you set build.target: "chrome89", you can remove this plugin
+ false && topLevelAwait(),
+ ],
+ build: {
+ target: 'chrome89',
+ },
+});
diff --git a/examples/vite-vite/vite-remote/.gitignore b/examples/vite-vite/vite-remote/.gitignore
@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+pnpm-lock.yaml
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/examples/vite-vite/vite-remote/index.html b/examples/vite-vite/vite-remote/index.html
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vite + Vue</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.jsx"></script>
+ </body>
+</html>
diff --git a/examples/vite-vite/vite-remote/package.json b/examples/vite-vite/vite-remote/package.json
@@ -0,0 +1,25 @@
+{
+ "name": "examples-vite-vite-remote",
+ "version": "0.0.3",
+ "type": "module",
+ "scripts": {
+ "dev": "vite --force",
+ "build": "vite build",
+ "preview": "vite build && http-server --cors -p 5176 dist"
+ },
+ "dependencies": {
+ "@module-federation/vite": "workspace:*",
+ "ag-grid-react": "^32.1.0",
+ "react": "^18.3.1",
+ "react-dom": "^18.2.0",
+ "vue": "^3.4.35",
+ "vue-router": "^4.4.0"
+ },
+ "devDependencies": {
+ "@swc/core": "~1.6.0",
+ "@vitejs/plugin-react": "^4.3.1",
+ "vite": "^5.3.1",
+ "vite-plugin-top-level-await": "^1.4.1",
+ "http-server": "^14.1.1"
+ }
+}
diff --git a/examples/vite-vite/vite-remote/src/App.jsx b/examples/vite-vite/vite-remote/src/App.jsx
@@ -0,0 +1,10 @@
+import { AgGridReact } from "ag-grid-react";
+
+export default function () {
+ return (
+ <div>
+ vite-remote
+ <AgGridReact />
+ </div>
+ );
+}
diff --git a/examples/vite-vite/vite-remote/src/assets/vue.svg b/examples/vite-vite/vite-remote/src/assets/vue.svg
diff --git a/examples/vite-vite/vite-remote/src/main.jsx b/examples/vite-vite/vite-remote/src/main.jsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+//@ts-ignore
+const root = ReactDOM.createRoot(document.getElementById('app'));
+root.render(
+ <React.StrictMode>
+ <App />
+ </React.StrictMode>
+);
diff --git a/examples/vite-vite/vite-remote/vite.config.js b/examples/vite-vite/vite-remote/vite.config.js
@@ -0,0 +1,36 @@
+import { federation } from '@module-federation/vite';
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+import topLevelAwait from 'vite-plugin-top-level-await';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ server: {
+ open: true,
+ port: 5176,
+ },
+ base: 'http://localhost:5176',
+ plugins: [
+ react(),
+ federation({
+ name: '@namespace/viteViteRemote',
+ exposes: {
+ './App': './src/App.jsx',
+ '.': './src/App.jsx',
+ },
+ filename: 'remoteEntry.js',
+ shared: {
+ vue: {},
+ react: {
+ requiredVersion: '18',
+ },
+ 'react-dom': {},
+ },
+ }),
+ // If you set build.target: "chrome89", you can remove this plugin
+ false && topLevelAwait(),
+ ],
+ build: {
+ target: 'chrome89',
+ },
+});