docs: improve README + fix typo (#109)

README.md

@@ -29,74 +29,90 @@ pnpm install && pnpm run preview-vv # vite+vite build demo
 
 https://module-federation.io/guide/basic/webpack.html
 
-```js
-// vite.config.js
+With **@module-federation/vite**, the process becomes delightfully simple, you will only find the differences from a normal Vite configuration.
+
+> This example is with Vue.js
+> The @module-federation/vite configuration remains the same for different frameworks.
+
+## The Remote Application configuration
+
+file: **remote/vite.config.ts**
+
+```ts
 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
-import { federation } from '@module-federation/vite';
-import topLevelAwait from 'vite-plugin-top-level-await';
+import { federation } from '@module-federation/vite'; 👈
 
-// https://vitejs.dev/config/
 export default defineConfig({
+  [...]
   plugins: [
-    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:xxxx/remoteEntry.js",
-        //   globalEntryName: "xxxx",
-        //   type: "module"
-        // }
-      },
+    [...]
+    federation({ 👈
+      name: "remote",
+      filename: "remoteEntry.js",
       exposes: {
-        './App': './src/App.vue',
+        "./remote-app": "./src/App.vue",
       },
-      filename: 'remoteEntry-[hash].js',
-      // https://github.com/module-federation/vite/issues/87
-      manifest: true,
-      shared: {
-        vue: {},
-        react: {
-          requiredVersion: '18',
-        },
-        'react-dom': {
-          requiredVersion: '18',
-        },
-        'react-dom/': {
-          requiredVersion: '18',
+      shared: ["vue"],
+    }),
+  ]
+  [...]
+});
+```
+
+In this remote app configuration, we define a remoteEntry.js file that will expose the App component.
+The shared property ensures that both host and remote applications use the same vue library.
+
+## The Host Application configuration
+
+file **host/vite.config.ts**
+
+```ts
+import { defineConfig } from 'vite';
+import { federation } from '@module-federation/vite'; 👈
+
+export default defineConfig({
+  [...]
+  plugins: [
+    [...]
+    federation({ 👈
+      name: "host",
+      remotes: {
+        remote: {
+          type: "module",
+          name: "remote",
+          entry: "https://[...]/remoteEntry.js",
+          entryGlobalName: "remote",
+          shareScope: "default",
         },
       },
+      filename: "remoteEntry.js",
+      shared: ["vue"],
     }),
-    // 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',
-  },
+  ]
+  [...]
 });
 ```
 
-## roadmap
+The host app configuration specifies its name, the filename of its exposed remote entry remoteEntry.js, and importantly, the configuration of the remote application to load.
+
+## Load the Remote App
 
-- ✅ ~~feat: generate mf-manifest.json~~
-- ✅ ~~feat: support chrome plugin~~
+In your host app, you can now import and use the remote app with **defineAsyncComponent**
 
-* ✅ ~~feat: support runtime plugins~~
-* feat: nuxt ssr
+file **host/src/App.vue**
 
-- 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)
+```ts
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+const RemoteMFE = defineAsyncComponent( 👈
+  () => import("remote/remote-app")
+);
+</script>
+
+<template>
+  <RemoteMFE v-if="!!RemoteMFE" /> 👈
+</template>
+```
 
 ### So far so good 🎉
 

src/virtualModules/virtualRemoteEntry.ts

@@ -143,7 +143,8 @@ export function generateRemoteEntry(options: NormalizedModuleFederationOptions):
       remotes: usedRemotes,
       shared: usedShared,
       plugins: [${pluginImportNames.map((item) => `${item[0]}()`).join(', ')}],
-      ${options.shareStrategy ? `shareStrategy: ${options.shareStrategy}` : ''});
+      ${options.shareStrategy ? `shareStrategy: ${options.shareStrategy}` : ''}
+    });
     initRes.initShareScopeMap('${options.shareScope}', shared);
     initResolve(initRes)
     return initRes