feat: v1.0.0

.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 }}

.gitignore

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

.vscode/settings.json

@@ -1,7 +1,7 @@
 {
   "editor.codeActionsOnSave": {
-    "source.organizeImports": true,
-    "source.fixAll": true
+    "source.organizeImports": "explicit",
+    "source.fixAll": "explicit"
   },
   "editor.formatOnSave": true
 }

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

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.

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

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>

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',
+    },
+  },
+});

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"
+  }
+}

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

@@ -0,0 +1 @@
+

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

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

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

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

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;

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>