chore: varFilename example

Author: crutch12

examples/vite-vite/vite-host/src/App.jsx

@@ -13,9 +13,16 @@ import { MuiDemo } from '@namespace/viteViteRemote/MuiDemo';
 import StyledDemo from '@namespace/viteViteRemote/StyledDemo';
 import { ref } from 'vue';
 
+import { mf } from './mf';
+
 console.log('Share Vue', ref);
 console.log('Share React', R, RD);
 
+// @namespace/viteViteRemote is not valid name variable, thus we have to load it with loadRemote instaed of basic usage
+const LazyVarApp = R.lazy(() => {
+  return mf.loadRemote('@namespace/viteViteRemote')
+})
+
 export default function () {
   return (
     <div style={{ background: "lightgray" }}>
@@ -58,6 +65,13 @@ export default function () {
 
       <h2>Mfapp01App</h2>
       <Mfapp01App />
+
+      <hr />
+
+      <h2>LazyVarApp</h2>
+      <R.Suspense fallback="loading...">
+        <LazyVarApp />
+      </R.Suspense>
     </div>
   );
 }

examples/vite-vite/vite-host/src/mf.js

@@ -0,0 +1,25 @@
+import { createInstance } from '@module-federation/runtime';
+import React from 'react';
+
+const mf = createInstance({
+  name: 'viteViteHost',
+  remotes: [
+    {
+      name: '@namespace/viteViteRemote',
+      entry: 'http://localhost:5176/testbase/varRemoteEntry.js',
+      type: 'var',
+    },
+  ],
+  shared: {
+    react: {
+      version: React.version,
+      lib: () => React,
+      shareConfig: {
+        singleton: true,
+        requiredVersion: false,
+      },
+    },
+  },
+});
+
+export { mf };

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

@@ -25,6 +25,7 @@ export default defineConfig({
         '@namespace/viteViteRemote': 'http://localhost:5176/testbase/mf-manifest.json',
       },
       filename: 'remoteEntry-[hash].js',
+      varFilename: 'varRemoteEntry.js',
       manifest: true,
       shared: {
         vue: {},

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

@@ -28,6 +28,7 @@ export default defineConfig({
         '.': './src/App.jsx',
       },
       filename: 'remoteEntry-[hash].js',
+      varFilename: 'varRemoteEntry.js',
       manifest: true,
       shared: {
         vue: {},