Merge pull request #34 from module-federation/v1.0.0

* feat: new plugin configuration (#28) * init ts (#29) * fix: tsconfig * fix: issues 2 3 * feat: rust demo build and preview --------- Co-authored-by: 张洪恩 <[email protected]> * feat: support runtime plugins (#30) Co-authored-by: Sergey Melukov <[email protected]> * fix: Ensure @module-federation/runtime singleton (#31) * fix: Ensure @module-federation/runtime singleton * fix: build preview --------- Co-authored-by: 张洪恩 <[email protected]> * feat: add packageManager * fix: remoteEntry support hash; format dynamic es module (#35) * 1.0.0-alpha-7c3ba59 * fix: remove default export (#37) * fix: remove pkg-pr-new * chore: add PR title check * 1.0.0-alpha-ffc6e23 * fix: #36 and dynamic import (#38) * fix: dynamic import * fix: #36 * 1.0.0-alpha-54ad191 * 1.0.0-alpha-80b7215 * fix: #39 #44 #45 (#46) * fix: pre-bunding * feat: add pre-bunding subdependencies demo * fix: exposes . * fix: remotes support namespace * 1.0.0-alpha-4a73cd4 * fix: windows remoteEntry error (#48) Co-authored-by: 张洪恩 <[email protected]> * feat: updated examples (#50) * 1.0.0-alpha-def937d * fix updated examples (#51) * fix: #47 (#53) * 1.0.0-alpha-10e1f83 * improved examples with MUI and etc (#55) * fix: #56 #41 (#58) * 1.0.0-alpha-6cae9ab * mfruntime update and new examples (#62) * fix: #61 (#63) Co-authored-by: 张洪恩 <[email protected]> * 1.0.0-alpha-51eeeb6 * feat: shared-slash (#67) * feat: shared slash * feat: shared slash * feat: preview examples * feat: remove an-empty-js-file * fix: remove console * optimization: reduce dev mode page reload * Optimize code and comments * fix: 64 * fix: only slash --------- Co-authored-by: 张洪恩 <[email protected]> * 1.0.0-alpha-f87d7d3 * fix: nx #40 (#69) * 1.0.0-alpha-661e052 * fix: #68 (#71) * fix: #68 * fix: #68 * fix: windows Multi-Pack * Optimization: Reduce file writing * Optimization: code format * fix: support nx monorepo --------- Co-authored-by: 张洪恩 <[email protected]> * 1.0.0-alpha-1aa30c0 * fix: monorepo (#72) Co-authored-by: 张洪恩 <[email protected]> * feat: add Nuxt example (#75) * Add Nuxt host example * Gitignore generated .__mf__win folder --------- Co-authored-by: David Sellén <[email protected]> Co-authored-by: David Sellén <[email protected]> * chore: update module federation and more examples (#81) * fix: #78 (#79) * fix: #78 * Update src/utils/normalizeOptimizeDeps.ts Co-authored-by: Sergey Melyukov <[email protected]> --------- Co-authored-by: 张洪恩 <[email protected]> Co-authored-by: Sergey Melyukov <[email protected]> * fix: #77 (#82) * 1.0.0-alpha-2f53b4e * docs: update Vue example link * docs: update React example link * docs: update README * fix: Remote virtual module path (#84) Co-authored-by: 张洪恩 <[email protected]> * 1.0.0-alpha-c13dc95 * 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]> --------- Co-authored-by: zhn <[email protected]> Co-authored-by: 张洪恩 <[email protected]> Co-authored-by: Sergey Melyukov <[email protected]> Co-authored-by: Sergey Melukov <[email protected]> Co-authored-by: HG <[email protected]> Co-authored-by: David sellén <[email protected]> Co-authored-by: David Sellén <[email protected]> Co-authored-by: David Sellén <[email protected]>
module-federation · Sep 15, 2024 · b1bba84 · b1bba84
1 parent 8a734d4
commit b1bba84
Show file tree

Hide file tree

Showing 123 changed files with 19,450 additions and 4,428 deletions.
diff --git a/.github/workflows/CI-CD.yml b/.github/workflows/CI-CD.yml
diff --git a/.github/workflows/pr.yml b/.github/workflows/pr.yml
@@ -0,0 +1,19 @@
+name: Validate PR title
+
+on:
+  pull_request:
+    branches:
+      - main
+
+permissions:
+  pull-requests: read
+
+jobs:
+  ############ SEMANTIC PR TITLE VALIDATION ############
+  semantic-pr:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    steps:
+      - uses: amannn/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
diff --git a/.gitignore b/.gitignore
@@ -1,2 +1,5 @@
 node_modules
-/lib
+dist
+.DS_Store
+.idea
+.__mf__win
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true,
-    "source.fixAll": true
+    "source.organizeImports": "explicit",
+    "source.fixAll": "explicit"
   },
   "editor.formatOnSave": true
 }
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,13 @@
 # Changelog
 
+## [1.0.0-alpha-7c3ba59]
+
+### Features
+
+- new configuration based on Module Federation 2.0 via @module-federation/runtime library
+
+# Changelog
+
 ## [0.2.8]
 
 ### Chores

diff --git a/README.md b/README.md
@@ -1,4 +1,6 @@
-# Vite/Rollup plugin for Module Federation
+# 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 🤔
 
@@ -9,65 +11,85 @@ This plugin makes Module Federation work together with [Vite](https://vitejs.dev
 
 ## Working implementations
 
-### [React](https://github.com/module-federation/module-federation-examples/tree/master/vite-react-microfrontends)<br>
-### [Svelte](https://github.com/module-federation/module-federation-examples/tree/master/vite-svelte-microfrontends)<br>
-### [Vue](https://github.com/module-federation/module-federation-examples/tree/master/vite-vue-microfrontends)
+### [Vue](https://github.com/gioboa/vue-microfrontend-demo)
 
+### [React](https://github.com/gioboa/react-microfrontend-demo)<br>
 
-## Getting started 🚀
+### [More examples here](https://github.com/module-federation/vite/tree/main/examples)<br>
+
+```
+pnpm install && pnpm run dev-vv # vite+vite dev demo
+```
 
-This plugin is based on top of [native-federation](https://www.npmjs.com/package/@softarc/native-federation) so this library is a [peer dependency](https://docs.npmjs.com/cli/v8/configuring-npm/package-json#peerdependencies).
+```
+pnpm install && pnpm run preview-vv # vite+vite build demo
+```
 
-You need to extend the Vite configuration with this plugin:
+## Getting started 🚀
 
-```typescript
+https://module-federation.io/guide/basic/webpack.html
+
+```js
+// vite.config.js
 import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
 import { federation } from '@module-federation/vite';
-import { createEsBuildAdapter } from '@softarc/native-federation-esbuild';
+import topLevelAwait from 'vite-plugin-top-level-await';
 
 // https://vitejs.dev/config/
-export default defineConfig(async ({ command }) => ({
-  server: {
-    fs: {
-      allow: ['.', '../shared'],
-    },
-  },
+export default defineConfig({
   plugins: [
-    await federation({
-      options: {
-        workspaceRoot: __dirname,
-        outputPath: 'dist',
-        tsConfig: 'tsconfig.json',
-        federationConfig: 'module-federation/federation.config.cjs',
-        verbose: false,
-        dev: command === 'serve',
+    federation({
+      name: 'bbc',
+      remotes: {
+        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',
+        // "remote4": {
+        //   entry: "http://localhost:5174/dd/remoteEntry.js",
+        //   globalEntryName: "bb",
+        //   type: "esm"
+        // }
+      },
+      exposes: {
+        './App': './src/App.vue',
+      },
+      filename: 'dd/remoteEntry.js',
+      shared: {
+        vue: {},
+        react: {
+          requiredVersion: '18',
+        },
       },
-      adapter: createEsBuildAdapter({ plugins: [...], }),
     }),
-    [...]
+    // If you set build.target: "chrome89", you can remove this plugin
+    // topLevelAwait(),
   ],
-}));
+  server: {
+    port: 5173,
+    // dev mode please set origin
+    origin: 'http://localhost:5173',
+  },
+  build: {
+    target: 'chrome89',
+  },
+});
 ```
 
-<br>
+## roadmap
 
-### Define configs
+- ✅ ~~feat: generate mf-manifest.json~~
+- ✅ ~~feat: support chrome plugin~~
 
-You need to define two different configurations in the `federationConfig` property.<br>
-Here are two examples:
+* ✅ ~~feat: support runtime plugins~~
+* feat: nuxt ssr
 
-- [host](https://www.npmjs.com/package/@softarc/native-federation#configuring-hosts)
-- [remote](https://www.npmjs.com/package/@softarc/native-federation#configuring-remotes)
-  <br><br>
+- feat: download remote d.ts
+- feat: generate d.ts
+- feat: support @vitejs/plugin-legacy
+- feat: Another plugin, when only some remote modules are started, automatically completes HMR[（#54）](https://github.com/module-federation/vite/issues/54)
 
 ### So far so good 🎉
 
 Now you are ready to use Module Federation in Vite!
-
-## Thanks 🤝
-
-Big thanks to:
-
-[Manfred Steyer](https://twitter.com/manfredsteyer), Speaker, Trainer, Consultant and Author with focus on Angular. Google Developer Expert (GDE) and Microsoft MVP.
-
-who collaborate with me to make this possible.
diff --git a/examples/nuxt-vite/nuxt-host/.gitignore b/examples/nuxt-vite/nuxt-host/.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
diff --git a/examples/nuxt-vite/nuxt-host/app.vue b/examples/nuxt-vite/nuxt-host/app.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <h1>Nuxt host</h1>
+
+    <p>
+      Mode1: <i> {{ runtimeConfig.app.buildId ? ' dev ' : ' prod ' }} mode </i>
+    </p>
+    <hr />
+  </div>
+</template>
+
+<script setup>
+const runtimeConfig = useRuntimeConfig();
+
+if (process.client) {
+  // Load remote app on client side
+  import('@namespace/viteViteRemote/App1').then((app) => {
+    console.log(app);
+  });
+}
+</script>
diff --git a/examples/nuxt-vite/nuxt-host/nuxt.config.ts b/examples/nuxt-vite/nuxt-host/nuxt.config.ts
@@ -0,0 +1,33 @@
+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: 'nuxhost',
+        remotes: {
+          '@namespace/viteViteRemote': 'viteRemote@http://localhost:3000/_nuxt/mf-manifest.json',
+        },
+        filename: 'remoteEntry.js',
+        shared: {
+          // vue: {},
+        },
+        runtimePlugins: ['./utils/mfPlugins'],
+        // exposes: {
+        //   "./App": "./App.vue"
+        // }
+        // manifest: {
+        //   fileName: "_nuxt/mf-manifest.json",
+        // }
+      }),
+      new TopAwait(),
+    ],
+    build: {
+      target: 'chrome89',
+    },
+  },
+});
diff --git a/examples/nuxt-vite/nuxt-host/package.json b/examples/nuxt-vite/nuxt-host/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "examples-nuxt-vite-host",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "NODE_OPTIONS=--experimental-vm-modules nuxt dev --experimental-vm-modules --port=3001",
+    "generate": "nuxt generate",
+    "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"
+  }
+}
diff --git a/examples/nuxt-vite/nuxt-host/public/favicon.ico b/examples/nuxt-vite/nuxt-host/public/favicon.ico
diff --git a/examples/nuxt-vite/nuxt-host/public/robots.txt b/examples/nuxt-vite/nuxt-host/public/robots.txt
@@ -0,0 +1 @@
+
diff --git a/examples/nuxt-vite/nuxt-host/server/tsconfig.json b/examples/nuxt-vite/nuxt-host/server/tsconfig.json
@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}
diff --git a/examples/nuxt-vite/nuxt-host/tsconfig.json b/examples/nuxt-vite/nuxt-host/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}
diff --git a/examples/nuxt-vite/nuxt-host/utils/mfPlugins.js b/examples/nuxt-vite/nuxt-host/utils/mfPlugins.js
@@ -0,0 +1,22 @@
+const runtimePlugin = () => {
+  return {
+    name: 'module-federation-example-plugin',
+    beforeInit(args) {
+      return args;
+    },
+    init(args) {
+      console.log('init: ', args);
+      return args;
+    },
+    beforeLoadShare(args) {
+      console.log('beforeLoadShare: ', args);
+      return args;
+    },
+    beforeRequest(args) {
+      console.log('before request hook', args);
+      return args;
+    },
+  };
+};
+
+export default runtimePlugin;
diff --git a/examples/nuxt-vite/nuxt-remote/.gitignore b/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
diff --git a/examples/nuxt-vite/nuxt-remote/app.vue b/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>