feat: updated examples (#50)

module-federation · Aug 11, 2024 · def937d · def937d
1 parent 10dfd75
commit def937d
Show file tree

Hide file tree

Showing 17 changed files with 1,491 additions and 1,015 deletions.
diff --git a/examples/vite-vite/vite-host/index.html b/examples/vite-vite/vite-host/index.html
@@ -4,8 +4,9 @@
     <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>
+    <title>Vite React Host</title>
   </head>
+
   <body>
     <div id="app"></div>
     <script type="module" src="/src/main.jsx"></script>

diff --git a/examples/vite-vite/vite-host/package.json b/examples/vite-vite/vite-host/package.json
@@ -3,22 +3,22 @@
   "version": "0.0.3",
   "type": "module",
   "scripts": {
-    "dev": "vite --force",
+    "dev": "vite --force --port 5175",
     "build": "vite build",
-    "preview": "vite build && http-server --cors -p 5173 dist"
+    "preview": "vite build && http-server --cors -p 5175 dist"
   },
   "dependencies": {
     "@module-federation/vite": "workspace:*",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.0"
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@swc/core": "~1.6.0",
+    "@swc/core": "~1.7.10",
     "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.3.1",
-    "vite-plugin-top-level-await": "^1.4.1",
+    "vite": "^5.4.0",
+    "vite-plugin-top-level-await": "^1.4.4",
     "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
@@ -1,10 +1,33 @@
-import RemoteApp from "@namespace/viteViteRemote";
+import Mfapp01App from 'mfapp01/App';
+import R from 'react';
+import RD from 'react-dom/client';
+import Remote2App from 'remote2/App';
+import Button from 'remote3/button';
+
+import { AgGridDemo } from 'viteViteRemote/AgGridDemo';
+import App1 from 'viteViteRemote/App1';
+import { App2 } from 'viteViteRemote/App2';
+import { ref } from 'vue';
+
+console.log('share vue', ref);
+console.log('share React', R, RD);
 
 export default function () {
   return (
     <div>
-      vite host
-      <RemoteApp />
+      Vite React
+      <h2>Button</h2>
+      <Button />
+      <h2>Remote2App</h2>
+      <Remote2App />
+      <h2>Mfapp01App</h2>
+      <Mfapp01App />
+      <h2>Vite Remote App1</h2>
+      <App1 />
+      <h2>Vite Remote App2</h2>
+      <App2 />
+      <h2>Vite Remote AgGridDemo</h2>
+      <AgGridDemo />
     </div>
   );
 }
diff --git a/examples/vite-vite/vite-host/src/main.jsx b/examples/vite-vite/vite-host/src/main.jsx
@@ -1,11 +1,13 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import ReactDOM from 'react-dom/client';
 import App from './App';
+import './style.css';
 
 //@ts-ignore
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(
   <React.StrictMode>
+    <h1>MF HOST Demo</h1>
     <App />
   </React.StrictMode>
 );
diff --git a/examples/vite-vite/vite-host/vite.config.js b/examples/vite-vite/vite-host/vite.config.js
@@ -9,27 +9,32 @@ export default defineConfig({
     open: true,
     port: 5175,
   },
-  base: 'http://localhost:5175',
+  // base: 'http://localhost:5175',
   plugins: [
     react(),
     federation({
       name: 'viteViteHost',
       remotes: {
-        '@namespace/viteViteRemote': {
-          entry: 'http://localhost:5176/remoteEntry.js',
-          type: 'module',
+        mfapp01: 'mfapp01@https://unpkg.com/[email protected]/dist/remoteEntry.js',
+        remote2: 'mfapp02@https://unpkg.com/mf-app-02/dist/remoteEntry.js',
+        remote3:
+          'remote1@https://unpkg.com/[email protected]/dist/mf-manifest.json',
+        'viteViteRemote': {
+          '@namespace/viteViteRemote': {
+            entry: 'http://localhost:5176/remoteEntry.js',
+            type: 'module',
+          },
         },
-      },
-      filename: 'remoteEntry.js',
-      shared: {
-        vue: {},
-        react: {
-          requiredVersion: '18',
+        filename: 'remoteEntry.js',
+        shared: {
+          vue: {},
+          react: {
+            requiredVersion: '18',
+          },
+          'react-dom': {},
         },
-        'react-dom': {},
-      },
-      runtimePlugins: ['./src/mfPlugins'],
-    }),
+        runtimePlugins: ['./src/mfPlugins'],
+      }),
     // If you set build.target: "chrome89", you can remove this plugin
     false && topLevelAwait(),
   ],

diff --git a/examples/vite-vite/vite-remote/index.html b/examples/vite-vite/vite-remote/index.html
@@ -1,13 +1,16 @@
 <!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>
+
+<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 React Remote</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
@@ -3,23 +3,25 @@
   "version": "0.0.3",
   "type": "module",
   "scripts": {
-    "dev": "vite --force",
+    "dev": "vite --force --port 5176",
     "build": "vite build",
     "preview": "vite build && http-server --cors -p 5176 dist"
   },
   "dependencies": {
     "@module-federation/vite": "workspace:*",
-    "ag-grid-react": "^32.1.0",
+    "ag-grid-community": "^30.2.0",
+    "ag-grid-react": "^30.2.0",
     "react": "^18.3.1",
     "react-dom": "^18.2.0",
-    "vue": "^3.4.35",
-    "vue-router": "^4.4.0"
+    "sass-embedded": "^1.77.8",
+    "vue": "^3.4.37",
+    "vue-router": "^4.4.3"
   },
   "devDependencies": {
-    "@swc/core": "~1.6.0",
+    "@swc/core": "~1.7.10",
     "@vitejs/plugin-react": "^4.3.1",
-    "vite": "^5.3.1",
-    "vite-plugin-top-level-await": "^1.4.1",
-    "http-server": "^14.1.1"
+    "http-server": "^14.1.1",
+    "vite": "^5.4.0",
+    "vite-plugin-top-level-await": "^1.4.4"
   }
-}
+}
diff --git a/examples/vite-vite/vite-remote/src/AgGridDemo.jsx b/examples/vite-vite/vite-remote/src/AgGridDemo.jsx
@@ -0,0 +1,36 @@
+import 'ag-grid-community/styles/ag-grid.css';
+import 'ag-grid-community/styles/ag-theme-alpine.css';
+import { AgGridReact } from 'ag-grid-react';
+import { useState } from 'react';
+
+
+export const AgGridDemo = ({  }) => {
+  const [rowData] = useState([
+    { make: 'Toyota', model: 'Celica', price: 35000 },
+    { make: 'Ford', model: 'Mondeo', price: 32000 },
+    { make: 'Porsche', model: 'Boxter', price: 72000 },
+  ]);
+
+  const [columnDefs] = useState([{ field: 'make' }, { field: 'model' }, { field: 'price' }]);
+
+  return (
+    <div className="App">
+      <div style={{ display: 'flex', flexDirection: 'row' }}>
+        <div
+          id="grid1"
+          className="ag-theme-alpine"
+          style={{ height: 400, width: 600, margin: '20px' }}
+        >
+          <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
+        </div>
+        <div
+          id="grid2"
+          className="ag-theme-alpine"
+          style={{ height: 400, width: 600, margin: '20px' }}
+        >
+          <AgGridReact rowData={rowData} columnDefs={columnDefs}></AgGridReact>
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/examples/vite-vite/vite-remote/src/App.jsx b/examples/vite-vite/vite-remote/src/App.jsx
diff --git a/examples/vite-vite/vite-remote/src/App1.jsx b/examples/vite-vite/vite-remote/src/App1.jsx
@@ -0,0 +1,9 @@
+import React from 'react';
+
+export default function () {
+  return (
+    <div style={{ background: 'yellow', padding: 30 }}>
+      Vite react App1 as default export via remote
+    </div>
+  );
+}
diff --git a/examples/vite-vite/vite-remote/src/App2.jsx b/examples/vite-vite/vite-remote/src/App2.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import "./app2.sass";
+
+console.log("App2 shared React", React, ReactDOM)
+export function App2() {
+    return (
+        <div class="container">
+            Vite react App2 as named export via remote with Sass use
+        </div>
+    );
+}
diff --git a/examples/vite-vite/vite-remote/src/app2.sass b/examples/vite-vite/vite-remote/src/app2.sass
@@ -0,0 +1,4 @@
+.container
+    background-image: url(./assets/viteback.png)
+    height: 200px
+    color: orange
diff --git a/examples/vite-vite/vite-remote/src/assets/viteback.png b/examples/vite-vite/vite-remote/src/assets/viteback.png
diff --git a/examples/vite-vite/vite-remote/src/main.jsx b/examples/vite-vite/vite-remote/src/main.jsx
@@ -1,11 +1,22 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import App from './App';
+import { AgGridDemo } from './AgGridDemo';
+import App1 from './App1';
+import { App2 } from './App2';
 
-//@ts-ignore
 const root = ReactDOM.createRoot(document.getElementById('app'));
 root.render(
   <React.StrictMode>
-    <App />
+    <h1>MF Remote as standalone app</h1>
+
+    <h2>App1</h2>
+    <App1 />
+
+    <h2>App2</h2>
+    <App2 />
+
+    <h2>AgGridDemo</h2>
+    <AgGridDemo />
+
   </React.StrictMode>
 );
diff --git a/examples/vite-vite/vite-remote/vite.config.js b/examples/vite-vite/vite-remote/vite.config.js
@@ -14,9 +14,12 @@ export default defineConfig({
     react(),
     federation({
       name: '@namespace/viteViteRemote',
+      // name: 'viteViteRemote',
       exposes: {
-        './App': './src/App.jsx',
-        '.': './src/App.jsx',
+        './App1': './src/App1.jsx',
+        './App2': './src/App2.jsx',
+        './AgGridDemo': './src/AgGridDemo.jsx',
+        '.': './src/App1.jsx',
       },
       filename: 'remoteEntry.js',
       shared: {

diff --git a/package.json b/package.json
@@ -38,19 +38,19 @@
   "homepage": "https://github.com/module-federation/vite#readme",
   "packageManager": "[email protected]",
   "dependencies": {
-    "@module-federation/runtime": "^0.2.8",
+    "@module-federation/runtime": "^0.3.5",
     "@rollup/pluginutils": "^5.1.0",
     "an-empty-js-file": "1.0.0",
     "estree-walker": "^2",
-    "magic-string": "^0.30.10",
+    "magic-string": "^0.30.11",
     "pathe": "^1.1.2"
   },
   "devDependencies": {
     "husky": "^8.0.3",
     "microbundle": "^0.15.1",
     "mime-types": "^2.1.35",
-    "pretty-quick": "^3.1.3",
-    "rimraf": "^5.0.1",
-    "vite": "^4.4.9"
+    "pretty-quick": "^4.0.0",
+    "rimraf": "^6.0.1",
+    "vite": "^5.4.0"
   }
-}
+}