feat: introducing vercel deployments #18 (#20)

* chore: introducing vercel deployments #18 * chore: trying multiple vercel.json * chore: going back to classic * fix: add html deployment * fix: lint * fix: lint * fix: expose a factory * fix: expose a promise which returns a factory
MadaraUchiha-314 · Nov 11, 2023 · 60629ee · 60629ee
1 parent 94875f1
commit 60629ee
Show file tree

Hide file tree

Showing 9 changed files with 293 additions and 21 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/examples/project-a/package.json b/packages/examples/project-a/package.json
@@ -25,6 +25,8 @@
     "rollup": "3.23.0",
     "rollup-plugin-module-federation": "*",
     "webpack": "5.84.1",
-    "webpack-cli": "5.1.1"
+    "webpack-cli": "5.1.1",
+    "rollup-plugin-copy": "3.5.0",
+    "copy-webpack-plugin": "11.0.0"
   }
 }
diff --git a/packages/examples/project-a/public/index.html b/packages/examples/project-a/public/index.html
@@ -0,0 +1,48 @@
+<html>
+  <head>
+    <title>Module Federation Experiments</title>
+    <script type="module">
+      const sharedScope = {
+        /**
+         * In the base-example, we have declared uuid as import: false
+         * So we provide a fallback by directly registering it with the shared scope object.
+         */
+        uuid: {
+          '1.0.0': {
+            get: () => () => Promise.resolve({ v4: { mock: 'uuid' } }),
+          },
+        },
+      };
+
+      globalThis.sharedScope = sharedScope;
+
+      const basePath = window.location.href.slice(
+        0,
+        window.location.href.lastIndexOf('/'),
+      );
+      const remoteEntryUrl = `${basePath}/my-remote-entry.js`;
+      const container = await import(remoteEntryUrl);
+
+      console.log('doing container.init()');
+      await container.init(sharedScope);
+      console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));
+
+      console.log("doing container.get('./react')");
+      const react = (await container.get('./react'))();
+      console.log('exposed module ./react: ', react);
+      console.log('shared scope: ', JSON.stringify(sharedScope, null, 2));
+
+      console.log("doing container.get('./index')");
+      const index = (await container.get('./index'))();
+      console.log('exposed module ./index', index);
+    </script>
+  </head>
+  <body>
+    <h3>View page source to see what's happening</h3>
+    <h3>Open JS console to see logs.</h3>
+    <h4>
+      Type globalThis.shareScope in the JS console to check the current state of
+      shared scope object.
+    </h4>
+  </body>
+</html>
diff --git a/packages/examples/project-a/rollup.config.mjs b/packages/examples/project-a/rollup.config.mjs
@@ -1,14 +1,18 @@
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
-import { federationconfig } from './federation.config.js';
+import copy from 'rollup-plugin-copy';
 
 // import federation from '@originjs/vite-plugin-federation';
 import federation from 'rollup-plugin-module-federation';
 
+import { federationconfig } from './federation.config.js';
+
+const outputDir = 'dist/rollup';
+
 export default {
   output: {
-    dir: 'dist/rollup',
+    dir: outputDir,
     format: 'es',
   },
   plugins: [
@@ -19,5 +23,13 @@ export default {
     federation(federationconfig),
     nodeResolve(),
     commonjs(),
+    copy({
+      targets: [
+        {
+          src: './public/index.html',
+          dest: outputDir,
+        },
+      ],
+    }),
   ],
 };
diff --git a/packages/examples/project-a/webpack.config.mjs b/packages/examples/project-a/webpack.config.mjs
@@ -1,3 +1,4 @@
+import CopyPlugin from 'copy-webpack-plugin';
 import ModuleFederationPlugin from 'webpack/lib/container/ModuleFederationPlugin.js';
 import { federationconfig } from './federation.config.js';
 
@@ -18,5 +19,18 @@ export default {
   experiments: {
     outputModule: true,
   },
-  plugins: [new ModuleFederationPlugin(federationconfig)],
+  plugins: [
+    new ModuleFederationPlugin({
+      ...federationconfig,
+      /**
+       * Additional stuff for webpack.
+       */
+      library: {
+        type: 'module',
+      },
+    }),
+    new CopyPlugin({
+      patterns: [{ from: 'public/index.html' }],
+    }),
+  ],
 };
diff --git a/packages/rollup-plugin-module-federation/src/index.ts b/packages/rollup-plugin-module-federation/src/index.ts
@@ -251,7 +251,7 @@ export default function federation(
     const nearestPkgJson = getNearestPackageJson(resolvedModulePath);
     const resolvedModuleVersionInPkgJson: string =
       nearestPkgJson?.version ?? MODULE_VERSION_UNSPECIFIED;
-    
+
     if (Object.prototype.hasOwnProperty.call(shared, moduleNameOrPath)) {
       const versionInLocalPkgJson = pkgJson?.dependencies?.[moduleNameOrPath];
       return {
@@ -494,7 +494,7 @@ export default function federation(
                 .map(
                   ([key, exposedModule]) => `
                     case '${key}': {
-                      return import('${exposedModule}');
+                      return import('${exposedModule}').then((module) => () => module);
                     }
                   `,
                 )

diff --git a/packages/rollup-plugin-module-federation/src/utils.ts b/packages/rollup-plugin-module-federation/src/utils.ts
@@ -11,7 +11,13 @@ export function sanitizeModuleName(name: string): string {
   return name.replace(/\.|\//g, '_');
 }
 
-export function getChunkNameForModule({ sanitizedModuleNameOrPath, type }: {sanitizedModuleNameOrPath: string, type: 'shared' | 'exposed'}) {
+export function getChunkNameForModule({
+  sanitizedModuleNameOrPath,
+  type,
+}: {
+  sanitizedModuleNameOrPath: string;
+  type: 'shared' | 'exposed';
+}) {
   return `__federated__${type}__${sanitizedModuleNameOrPath}`;
 }