Investigate: Strong typing across microfrontends

.github/workflows/cd.yml

@@ -29,13 +29,19 @@ jobs:
           working_directory: ${{env.working-directory}}
       - run: pnpm config set enable-pre-post-scripts true
         working-directory: ${{env.working-directory}}
+      - run: pnpm --filter microfrontends build
+        working-directory: ${{env.working-directory}}
+      - run: pnpm -r --parallel run create:manifest
+        working-directory: ${{env.working-directory}}
       - run: |
           echo "PUBLIC_URL=/x-microfrontends" >> chassis/.env
-          pnpm run -r build
+          pnpm -r --parallel run build
+        working-directory: ${{env.working-directory}}
+      - run: pnpm -r --parallel run build
         working-directory: ${{env.working-directory}}
-      - run: pnpm run -r copy:build
+      - run: pnpm -r --parallel run copy:build
         working-directory: ${{env.working-directory}}
-      - run: pnpm run -r copy:manifests
+      - run: pnpm -r --parallel run copy:manifests
         working-directory: ${{env.working-directory}}
       - run: ls -ah chassis/build
         working-directory: ${{env.working-directory}}

.github/workflows/ci.yml

@@ -29,11 +29,15 @@ jobs:
           working_directory: ${{env.working-directory}}
       - run: pnpm config set enable-pre-post-scripts true
         working-directory: ${{env.working-directory}}
-      - run: pnpm run -r build
+      - run: pnpm --filter microfrontends build
         working-directory: ${{env.working-directory}}
-      - run: pnpm run -r copy:build
+      - run: pnpm -r --parallel run create:manifest
         working-directory: ${{env.working-directory}}
-      - run: pnpm run -r copy:manifests
+      - run: pnpm -r --parallel run build
+        working-directory: ${{env.working-directory}}
+      - run: pnpm -r --parallel run copy:build
+        working-directory: ${{env.working-directory}}
+      - run: pnpm -r --parallel run copy:manifests
         working-directory: ${{env.working-directory}}
       - run: ls -ah chassis/build
         working-directory: ${{env.working-directory}}

.gitignore

@@ -132,4 +132,5 @@ dist
 build/
 /tailwind.config.js
 
-*.json.d.ts
+*.json.d.ts
+mf-*/public/microfrontend-manifest.json

mf-communities/config-overrides.js

@@ -2,6 +2,7 @@
 const path = require("path");
 const ModuleFederationPlugin = require("webpack").container
   .ModuleFederationPlugin;
+const HookShellScriptPlugin = require('hook-shell-script-webpack-plugin');
 
 const pkg = require("./package.json");
 const getVersion = (name) => pkg.dependencies[name] || pkg.peerDependencies[name];
@@ -43,6 +44,13 @@ module.exports = function override(config, env) {
       }
     })
   );
+  const shellScriptPlugin = new HookShellScriptPlugin({
+    beforeCompile: ['npm run create:manifest'],
+  });
+  shellScriptPlugin._onScriptError = () => {};
+  config.plugins.push(
+    shellScriptPlugin
+  );
 
   config.resolve = {
     fallback: {

mf-communities/package.json

@@ -10,7 +10,8 @@
     "copy:build": "cpx \"build/**/*\" ../chassis/build/mfs/communities",
     "copy:env": "cpx .env.sample .env",
     "start": "craco start",
-    "test": "craco test"
+    "test": "craco test",
+    "create:manifest": "tsx ./src/manifests.ts > ./public/microfrontend-manifest.json"
   },
   "keywords": [],
   "author": "mykeels",

mf-communities/src/main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { MicrofrontendContext, register } from "microfrontends";
+import { MicrofrontendContext, register, z } from "microfrontends";
 
 import pkg from "../package.json";
 
@@ -64,4 +64,5 @@ export default register(pkg.name, "./main", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-communities/src/manifests.ts

@@ -0,0 +1,40 @@
+import { config } from "dotenv";
+import { MicrofrontendManifest } from "microfrontends";
+
+import Main from "./main.tsx";
+import NavCommunities from "./nav-communities.tsx";
+
+config();
+
+const manifest = {
+  scope: Main.scope,
+  module: "./unused-root-module.js",
+  entry: `http://localhost:${process.env.PORT}/remoteEntry.js`,
+  events: {
+    consumes: [],
+  },
+  slots: {
+    routes: [],
+    "nav:item": [
+      {
+        name: "Communities",
+        module: NavCommunities.module,
+        props: NavCommunities.props,
+        priority: 4,
+      },
+    ],
+    "main:content": [
+      {
+        name: "Main",
+        module: Main.module,
+        props: Main.props,
+        route: "/communities/*",
+      },
+    ],
+  },
+  auth: {},
+} satisfies MicrofrontendManifest;
+
+export default manifest;
+
+console.log(JSON.stringify(manifest, null, 2));

mf-communities/src/nav-communities.tsx

@@ -1,4 +1,4 @@
-import { MicrofrontendContext, register } from "microfrontends";
+import { MicrofrontendContext, register, z } from "microfrontends";
 import React, { useContext } from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -58,4 +58,5 @@ export default register(pkg.name, "./nav-communities", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-explore/config-overrides.js

@@ -2,6 +2,7 @@
 const path = require("path");
 const ModuleFederationPlugin = require("webpack").container
   .ModuleFederationPlugin;
+const HookShellScriptPlugin = require('hook-shell-script-webpack-plugin');
 
 const pkg = require("./package.json");
 const getVersion = (name) => pkg.dependencies[name] || pkg.peerDependencies[name];
@@ -45,6 +46,13 @@ module.exports = function override(config, env) {
       }
     })
   );
+  const shellScriptPlugin = new HookShellScriptPlugin({
+    beforeCompile: ['npm run create:manifest'],
+  });
+  shellScriptPlugin._onScriptError = () => {};
+  config.plugins.push(
+    shellScriptPlugin
+  );
 
   config.resolve = {
     fallback: {

mf-explore/package.json

@@ -10,7 +10,8 @@
     "copy:build": "cpx \"build/**/*\" ../chassis/build/mfs/explore",
     "copy:env": "cpx .env.sample .env",
     "start": "craco start",
-    "test": "craco test"
+    "test": "craco test",
+    "create:manifest": "tsx ./src/manifests.ts > ./public/microfrontend-manifest.json"
   },
   "keywords": [],
   "author": "mykeels",

mf-explore/src/aside-search.tsx

@@ -1,4 +1,4 @@
-import { register } from "microfrontends";
+import { register, z } from "microfrontends";
 import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -52,4 +52,5 @@ export default register(pkg.name, "./aside-search", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-explore/src/aside-waddup.tsx

@@ -1,4 +1,4 @@
-import { MicrofrontendContext, register } from "microfrontends";
+import { MicrofrontendContext, register, z } from "microfrontends";
 import React, { useContext } from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -74,4 +74,5 @@ export default register(pkg.name, "./aside-waddup", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-explore/src/main.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
 import { QueryClient, QueryClientProvider } from "react-query";
-import { MicrofrontendContext, register } from "microfrontends";
+import { MicrofrontendContext, register, z } from "microfrontends";
 
 import pkg from "../package.json";
 
@@ -64,4 +64,5 @@ export default register(pkg.name, "./main", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-explore/src/manifests.ts

@@ -0,0 +1,56 @@
+import { config } from "dotenv";
+import { MicrofrontendManifest } from "microfrontends";
+
+import Main from "./main.tsx";
+import NavExplore from "./nav-explore.tsx";
+import AsideSearch from "./aside-search.tsx";
+import AsideWaddup from "./aside-waddup.tsx";
+
+config();
+
+const manifest = {
+  scope: Main.scope,
+  module: "./unused-root-module.js",
+  entry: `http://localhost:${process.env.PORT}/remoteEntry.js`,
+  events: {
+    consumes: [],
+  },
+  slots: {
+    routes: [],
+    "nav:item": [
+      {
+        name: "Explore",
+        module: NavExplore.module,
+        props: NavExplore.props,
+        priority: 1,
+      },
+    ],
+    "aside:item": [
+      {
+        name: "Search",
+        module: AsideSearch.module,
+        props: AsideSearch.props,
+        priority: 0,
+      },
+      {
+        name: "What's happening",
+        module: AsideWaddup.module,
+        props: AsideWaddup.props,
+        priority: 2,
+      },
+    ],
+    "main:content": [
+      {
+        name: "Main",
+        module: Main.module,
+        props: Main.props,
+        route: "/explore/*",
+      },
+    ],
+  },
+  auth: {},
+} satisfies MicrofrontendManifest;
+
+export default manifest;
+
+console.log(JSON.stringify(manifest, null, 2));

mf-explore/src/nav-explore.tsx

@@ -1,4 +1,4 @@
-import { MicrofrontendContext, register } from "microfrontends";
+import { MicrofrontendContext, register, z } from "microfrontends";
 import React, { useContext } from "react";
 import ReactDOM from "react-dom";
 import { createRoot } from "react-dom/client";
@@ -59,4 +59,5 @@ export default register(pkg.name, "./nav-explore", {
   unmount: (containerRef) => {
     ReactDOM.unmountComponentAtNode(getHTMLElement(containerRef)!);
   },
+  props: z.object({}),
 });

mf-messages/config-overrides.js

@@ -2,6 +2,7 @@
 const path = require("path");
 const ModuleFederationPlugin = require("webpack").container
   .ModuleFederationPlugin;
+const HookShellScriptPlugin = require('hook-shell-script-webpack-plugin');
 
 const pkg = require("./package.json");
 const getVersion = (name) => pkg.dependencies[name] || pkg.peerDependencies[name];
@@ -43,6 +44,13 @@ module.exports = function override(config, env) {
       }
     })
   );
+  const shellScriptPlugin = new HookShellScriptPlugin({
+    beforeCompile: ['npm run create:manifest'],
+  });
+  shellScriptPlugin._onScriptError = () => {};
+  config.plugins.push(
+    shellScriptPlugin
+  );
 
   config.resolve = {
     fallback: {

mf-messages/package.json

@@ -10,7 +10,8 @@
     "copy:build": "cpx \"build/**/*\" ../chassis/build/mfs/messages",
     "copy:env": "cpx .env.sample .env",
     "start": "craco start",
-    "test": "craco test"
+    "test": "craco test",
+    "create:manifest": "tsx ./src/manifests.ts > ./public/microfrontend-manifest.json"
   },
   "keywords": [],
   "author": "mykeels",