Added shared part

README.md

@@ -21,6 +21,7 @@ This repository contains the following packages / code elements:
 - [mf-blue](./packages/mf-blue/): the MF with the buy and basket components from the blue team
 - [mf-green](./packages/mf-green/): the MF with the recommendations component from the green team
 - [mf-red](./packages/mf-red/): the MF with the product details component from the red team
+- [shared](./packages/shared/): the shared loader that enables cross-MF component sharing
 
 ## Publishing to a Discovery Service
 

package.json

@@ -7,7 +7,7 @@
   "scripts": {
     "build": "lerna run build",
     "publish:mf": "lerna run publish:mf",
-    "run:feed": "lerna run preview --stream --scope host-indirect",
+    "run:feed": "lerna run start --stream --scope host-indirect",
     "run:local": "lerna run start --stream --ignore host-indirect"
   },
   "devDependencies": {

packages/blue/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "start": "rspack serve",
     "preview": "npx http-server dist --port 2002 --cors",
-    "publish:mf": "npx publish-microfrontend --url http://localhost:9000/api/v1/pilet/module-demo --interactive",
+    "publish:mf": "npx publish-microfrontend --url https://feed.dev.piral.cloud/api/v1/pilet/module-demo --api-key 156ec80b17bb31b6cc304667af6bfaec97c8d2be77dd51f38edb85b6f04017ba",
     "build": "rspack build"
   },
   "dependencies": {

packages/blue/rspack.config.js

@@ -50,6 +50,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json", ".wasm"],
+    alias: {
+      '@shared/loader': path.resolve(__dirname, '../shared/loader.ts'),
+    },
   },
   devServer: {
     port: 2002,

packages/blue/src/main.ts

@@ -1,6 +1,9 @@
+import { setup } from "@shared/loader";
 import { renderBasketInfo } from "./basket-info";
 import { renderBuyButton } from "./buy-button";
 
+setup();
+
 const app = document.querySelector('#app');
 const basketInfo = app.appendChild(document.createElement('div'));
 const buyButton = app.appendChild(document.createElement('div'));

packages/blue/tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/green/package.json

@@ -9,7 +9,7 @@
   "scripts": {
     "start": "rspack serve",
     "preview": "npx http-server dist --port 2003 --cors",
-    "publish:mf": "npx publish-microfrontend --url http://localhost:9000/api/v1/pilet/module-demo --interactive",
+    "publish:mf": "npx publish-microfrontend --url https://feed.dev.piral.cloud/api/v1/pilet/module-demo --api-key 156ec80b17bb31b6cc304667af6bfaec97c8d2be77dd51f38edb85b6f04017ba",
     "build": "rspack build"
   },
   "dependencies": {

packages/green/rspack.config.js

@@ -49,6 +49,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json", ".wasm"],
+    alias: {
+      '@shared/loader': path.resolve(__dirname, '../shared/loader.ts'),
+    },
   },
   devServer: {
     port: 2003,

packages/green/src/main.ts

@@ -1,5 +1,8 @@
+import { setup } from "@shared/loader";
 import { renderRecommendations } from "./product-recommendations";
 
+setup();
+
 const app = document.querySelector('#app');
 const recommendations = app.appendChild(document.createElement('div'));
 

packages/green/tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/host-direct/rspack.config.js

@@ -2,9 +2,6 @@ const rspack = require("@rspack/core");
 const path = require("path");
 
 const mf = new rspack.container.ModuleFederationPlugin({
-  remotes: {
-    red: 'red@http://localhost:2001/remoteEntry.js'
-  },
   shared: {
     react: { singleton: true },
     "react-dom": { singleton: true },
@@ -50,6 +47,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json", ".wasm"],
+    alias: {
+      '@shared/loader': path.resolve(__dirname, '../shared/loader.ts'),
+    },
   },
   devServer: {
     port: 1234,

packages/host-direct/src/index.ts

@@ -1,6 +1,25 @@
+import { setup } from "@shared/loader";
 import "./style.css";
 
-import("red/product-page").then(({ renderProductPage }) => {
+setup({
+  name: "host",
+  remotes: [
+    {
+      name: "red",
+      entry: "http://localhost:2001/remoteEntry.js",
+    },
+    {
+      name: "blue",
+      entry: "http://localhost:2002/remoteEntry.js",
+    },
+    {
+      name: "green",
+      entry: "http://localhost:2003/remoteEntry.js",
+    },
+  ],
+});
+
+window.loadRemote("red/product-page").then(({ renderProductPage }) => {
   const root = document.querySelector("#app");
   renderProductPage(root);
 });

packages/host-direct/tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/host-indirect/rspack.config.js

@@ -48,6 +48,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json", ".wasm"],
+    alias: {
+      '@shared/loader': path.resolve(__dirname, '../shared/loader.ts'),
+    },
   },
   devServer: {
     port: 1234,

packages/host-indirect/src/index.ts

@@ -1,15 +1,19 @@
 import "./style.css";
-import { init, loadRemote } from "@module-federation/runtime";
+import { setup } from "@shared/loader";
 
-fetch("http://localhost:9000/api/v1/pilet/microfrontends")
+fetch("https://module-demo.my.dev.piral.cloud/api/v1/importmap")
   .then((res) => res.json())
-  .then(async ({ remotes }) => {
-    init({
+  .then(async ({ imports }) => {
+    const remotes = Object.entries(imports).map(
+      ([name, entry]: [string, string]) => ({ name, entry })
+    );
+
+    setup({
       name: "host",
       remotes, // array of objects: { name, entry }
     });
 
-    const { renderProductPage }: any = await loadRemote("red/product-page");
+    const { renderProductPage }: any = await window.loadRemote("red/product-page");
     const root = document.querySelector("#app");
     renderProductPage(root);
   });

packages/host-indirect/tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/red/package.json

@@ -1,6 +1,6 @@
 {
   "name": "red",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Micro frontend of the red team",
   "keywords": [],
   "author": "Florian Rappl",
@@ -9,7 +9,7 @@
   "scripts": {
     "start": "rspack serve",
     "preview": "npx http-server dist --port 2001 --cors",
-    "publish:mf": "npx publish-microfrontend --url http://localhost:9000/api/v1/pilet/module-demo --interactive",
+    "publish:mf": "npx publish-microfrontend --url https://feed.dev.piral.cloud/api/v1/pilet/module-demo --api-key 156ec80b17bb31b6cc304667af6bfaec97c8d2be77dd51f38edb85b6f04017ba",
     "build": "rspack build"
   },
   "dependencies": {

packages/red/rspack.config.js

@@ -7,10 +7,7 @@ const mf = new rspack.container.ModuleFederationPlugin({
   exposes: {
     "./product-page": "./src/product-page.tsx",
   },
-  remotes: {
-    blue: 'blue@http://localhost:2002/remoteEntry.js',
-    green: 'green@http://localhost:2003/remoteEntry.js',
-  },
+  remotes: {},
   shared: {
     react: { singleton: true },
     "react-dom": { singleton: true },
@@ -52,6 +49,9 @@ module.exports = {
   },
   resolve: {
     extensions: [".js", ".ts", ".tsx", ".json", ".wasm"],
+    alias: {
+      '@shared/loader': path.resolve(__dirname, '../shared/loader.ts'),
+    },
   },
   devServer: {
     port: 2001,

packages/red/src/main.ts

@@ -1,6 +1,21 @@
+import { setup } from "@shared/loader";
 import { renderProductPage } from "./product-page";
 
-const app = document.querySelector('#app');
-const page = app.appendChild(document.createElement('div'));
+setup({
+  name: "red",
+  remotes: [
+    {
+      name: "blue",
+      entry: "http://localhost:2002/remoteEntry.js",
+    },
+    {
+      name: "green",
+      entry: "http://localhost:2003/remoteEntry.js",
+    },
+  ],
+});
+
+const app = document.querySelector("#app");
+const page = app.appendChild(document.createElement("div"));
 
 renderProductPage(page);

packages/red/src/product-page.tsx

@@ -38,9 +38,11 @@ const product = {
   ],
 };
 
-const BasketInfo = React.lazy(() => import('blue/basketInfo'));
-const BuyButton = React.lazy(() => import('blue/buyButton'));
-const ProductRecommendations = React.lazy(() => import('green/recommendations'));
+const BasketInfo = React.lazy(() => window.loadRemote("blue/basketInfo"));
+const BuyButton = React.lazy(() => window.loadRemote("blue/buyButton"));
+const ProductRecommendations = React.lazy(() =>
+  window.loadRemote("green/recommendations")
+);
 
 function getCurrent(sku: string) {
   return product.variants.find((v) => v.sku === sku) || product.variants[0];

packages/red/tsconfig.json

@@ -9,7 +9,10 @@
     "esModuleInterop": true,
     "jsx": "react",
     "allowJs": true,
-    "checkJs": true
+    "checkJs": true,
+    "paths": {
+      "@shared/*": ["../shared/*"]
+    }
   },
   "include": ["src/**/*.ts", "src/**/*.tsx"]
 }

packages/shared/loader.ts

@@ -0,0 +1,15 @@
+import { init, loadRemote } from "@module-federation/runtime";
+
+export type SetupOptions = Parameters<typeof init>["0"];
+
+export function setup(options?: SetupOptions) {
+  init(options);
+
+  window.loadRemote = (moduleId) => loadRemote(moduleId);
+}
+
+declare global {
+  interface Window {
+    loadRemote(moduleId: string): Promise<any>;
+  }
+}

packages/shared/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "strict": false,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "esModuleInterop": true,
+    "jsx": "react",
+    "allowJs": true,
+    "checkJs": true
+  },
+  "include": ["*.ts", "*.tsx"]
+}