feat: add improvements (#86)

* fix: Remote virtual module path

* examples: nuxt(Unfinished)

* feat: mf-manifest; Register remote on demand

* doc: roadmap

* doc: npm url

* Delete src/utils/getLocalSharedImportMap_windows.ts

---------

Co-authored-by: 张洪恩 <[email protected]>

.gitignore

@@ -1,5 +1,4 @@
 node_modules
-/lib
 dist
 .DS_Store
 .idea

README.md

@@ -1,5 +1,7 @@
 # Vite plugin for Module Federation
 
+[![npm](https://img.shields.io/npm/v/@module-federation/vite.svg)](https://www.npmjs.com/package/@module-federation/vite)
+
 ## Reason why 🤔
 
 [Microservices](https://martinfowler.com/articles/microservices.html) nowadays is a well-known concept and maybe you are using it in your current company.
@@ -15,6 +17,14 @@ This plugin makes Module Federation work together with [Vite](https://vitejs.dev
 
 ### [More examples here](https://github.com/module-federation/vite/tree/main/examples)<br>
 
+```
+pnpm install && pnpm run dev-vv # vite+vite dev demo
+```
+
+```
+pnpm install && pnpm run preview-vv # vite+vite build demo
+```
+
 ## Getting started 🚀
 
 https://module-federation.io/guide/basic/webpack.html
@@ -69,10 +79,11 @@ export default defineConfig({
 
 ## roadmap
 
-- feat: generate mf-manifest.json
-- feat: support chrome plugin
+- ✅ ~~feat: generate mf-manifest.json~~
+- ✅ ~~feat: support chrome plugin~~
 
 * ✅ ~~feat: support runtime plugins~~
+* feat: nuxt ssr
 
 - feat: download remote d.ts
 - feat: generate d.ts

examples/nuxt-vite/nuxt-host/app.vue

@@ -3,7 +3,7 @@
     <h1>Nuxt host</h1>
 
     <p>
-      Mode: <i> {{ runtimeConfig.app.buildId ? ' dev ' : ' prod ' }} mode </i>
+      Mode1: <i> {{ runtimeConfig.app.buildId ? ' dev ' : ' prod ' }} mode </i>
     </p>
     <hr />
   </div>

examples/nuxt-vite/nuxt-host/nuxt.config.ts

@@ -1,24 +1,30 @@
 import { federation } from '@module-federation/vite';
+import TopAwait from 'vite-plugin-top-level-await';
 
 export default defineNuxtConfig({
   compatibilityDate: '2024-04-03',
+  debug: true,
   devtools: { enabled: true },
   vite: {
     plugins: [
       federation({
-        name: 'viteViteHost',
+        name: 'nuxhost',
         remotes: {
-          '@namespace/viteViteRemote': {
-            entry: 'http://localhost:5176/remoteEntry.js',
-            type: 'module',
-          },
+          '@namespace/viteViteRemote': 'viteRemote@http://localhost:3000/_nuxt/mf-manifest.json',
         },
         filename: 'remoteEntry.js',
         shared: {
-          vue: {},
+          // vue: {},
         },
         runtimePlugins: ['./utils/mfPlugins'],
+        // exposes: {
+        //   "./App": "./App.vue"
+        // }
+        // manifest: {
+        //   fileName: "_nuxt/mf-manifest.json",
+        // }
       }),
+      new TopAwait(),
     ],
     build: {
       target: 'chrome89',

examples/nuxt-vite/nuxt-host/package.json

@@ -4,14 +4,17 @@
   "type": "module",
   "scripts": {
     "build": "nuxt build",
-    "dev": "nuxt dev",
+    "dev": "NODE_OPTIONS=--experimental-vm-modules nuxt dev --experimental-vm-modules --port=3001",
     "generate": "nuxt generate",
-    "preview": "nuxt preview",
+    "preview": "NITRO_PORT=3001 nuxt preview",
     "postinstall": "nuxt prepare"
   },
   "dependencies": {
     "nuxt": "^3.13.0",
     "vue": "latest",
     "@module-federation/vite": "workspace:*"
+  },
+  "devDependencies": {
+    "vite-plugin-top-level-await": "^1.4.4"
   }
 }

examples/nuxt-vite/nuxt-remote/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

examples/nuxt-vite/nuxt-remote/app.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <h1>Nuxt host</h1>
+
+    <p>
+      Mode: <i> {{ runtimeConfig.app.buildId ? ' dev ' : ' prod ' }} mode </i>
+    </p>
+    <hr />
+  </div>
+</template>
+
+<script setup>
+const runtimeConfig = useRuntimeConfig();
+</script>

examples/nuxt-vite/nuxt-remote/nuxt.config.ts

@@ -0,0 +1,30 @@
+import { federation } from '@module-federation/vite';
+import TopAwait from 'vite-plugin-top-level-await';
+
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  debug: true,
+  devtools: { enabled: true },
+  vite: {
+    plugins: [
+      federation({
+        name: 'nuxremote',
+        filename: 'remoteEntry.js',
+        shared: {
+          // vue: {},
+        },
+        runtimePlugins: ['./utils/mfPlugins'],
+        exposes: {
+          './app': './app.vue',
+        },
+        manifest: {
+          fileName: '_nuxt/mf-manifest.json',
+        },
+      }),
+      new TopAwait(),
+    ],
+    build: {
+      target: 'chrome89',
+    },
+  },
+});

examples/nuxt-vite/nuxt-remote/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "examples-nuxt-vite-remote",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "NODE_OPTIONS=--experimental-vm-modules nuxt dev --experimental-vm-modules",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview --port=3001",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "@module-federation/vite": "workspace:*",
+    "nuxt": "^3.13.0",
+    "vue": "latest"
+  },
+  "devDependencies": {
+    "vite-plugin-top-level-await": "^1.4.4"
+  }
+}

examples/nuxt-vite/nuxt-remote/public/robots.txt

@@ -0,0 +1 @@
+

examples/nuxt-vite/nuxt-remote/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

examples/nuxt-vite/nuxt-remote/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

examples/vite-vite/vite-host/vite.config.js

@@ -22,15 +22,13 @@ export default defineConfig({
         remote2: 'mfapp02@https://unpkg.com/mf-app-02/dist/remoteEntry.js',
         remote3:
           'remote1@https://unpkg.com/[email protected]/dist/mf-manifest.json',
-        '@namespace/viteViteRemote': {
-          entry: 'http://localhost:5176/remoteEntry.js',
-          type: 'module',
-        },
+        '@namespace/viteViteRemote': 'http://localhost:5176/mf-manifest.json',
       },
-      filename: 'remoteEntry.js',
+      filename: 'remoteEntry-[hash].js',
+      manifest: true,
       shared: {
         vue: {},
-        react: {
+        'react/': {
           requiredVersion: '18',
         },
         'react-dom': {},

examples/vite-vite/vite-remote/vite.config.js

@@ -15,22 +15,25 @@ export default defineConfig({
   },
   // base: 'http://localhost:5176',
   experimental: {
-    renderBuiltUrl() { return { relative: true } }
+    renderBuiltUrl() {
+      return { relative: true };
+    },
   },
   plugins: [
     react({ jsxImportSource: '@emotion/react' }),
     federation({
       name: '@namespace/viteViteRemote',
       exposes: {
-        './App1': './src/App1.jsx',
+        './App1': './src/App1',
         './App2': './src/App2.jsx',
         './AgGridDemo': './src/AgGridDemo.jsx',
         './MuiDemo': './src/MuiDemo.jsx',
         './StyledDemo': './src/StyledDemo.jsx',
         './EmotionDemo': './src/EmotionDemo.jsx',
         '.': './src/App.jsx',
       },
-      filename: 'remoteEntry.js',
+      filename: 'remoteEntry-[hash].js',
+      manifest: true,
       shared: {
         vue: {},
         'react/': {},
@@ -52,5 +55,12 @@ export default defineConfig({
   ],
   build: {
     target: 'chrome89',
+    rollupOptions: {
+      output: {
+        chunkFileNames: 'static/js/[name]-[hash].js',
+        entryFileNames: 'static/js/[name]-[hash].js',
+        assetFileNames: 'static/[ext]/[name]-[hash].[ext]',
+      },
+    },
   },
 });