feat: integrate metro package into release pipeline and changesets

.changeset/config.json

@@ -28,7 +28,10 @@
       "@module-federation/runtime-core",
       "create-module-federation",
       "@module-federation/cli",
-      "@module-federation/rspress-plugin"
+      "@module-federation/rspress-plugin",
+      "@module-federation/metro",
+      "@module-federation/metro-plugin-rnef",
+      "@module-federation/metro-plugin-rnc-cli"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

.changeset/metro-package-integration.md

@@ -0,0 +1,7 @@
+---
+'@module-federation/metro-plugin-rnc-cli': patch
+'@module-federation/metro-plugin-rnef': patch
+'@module-federation/metro': patch
+---
+
+Initial Release of Metro package

.github/workflows/build-and-test.yml

@@ -1,5 +1,8 @@
 name: Build Affected Packages
 
+permissions:
+  contents: read
+
 on:
   pull_request:
     branches: [main, '**']
@@ -72,7 +75,10 @@ jobs:
                [ "$pkg" != "packages/core" ] && \
                [ "$pkg" != "packages/esbuild" ] && \
                [ "$pkg" != "packages/modernjs" ] && \
-               [ "$pkg" != "packages/utilities" ]; then
+               [ "$pkg" != "packages/utilities" ] && \
+               [ "$pkg" != "packages/metro-core" ] && \
+               [ "$pkg" != "packages/metro-plugin-rnef" ] && \
+               [ "$pkg" != "packages/metro-plugin-rnc-cli" ]; then
               echo "Checking $pkg..."
               npx publint "$pkg"
             fi
@@ -134,3 +140,8 @@ jobs:
     needs: checkout-install
     uses: ./.github/workflows/e2e-router.yml
     secrets: inherit
+
+  build-metro:
+    needs: checkout-install
+    uses: ./.github/workflows/build-metro.yml
+    secrets: inherit

.github/workflows/build-metro.yml

@@ -0,0 +1,57 @@
+name: Build Metro Packages
+
+on:
+  workflow_call:
+
+permissions:
+  contents: read
+
+jobs:
+  build-metro:
+    runs-on: ubuntu-latest
+    timeout-minutes: 15
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+
+      - name: Install Pnpm
+        run: |
+          corepack prepare pnpm@8.11.0 --activate
+          corepack enable
+
+      - name: Setup Node.js 18
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+          cache: 'pnpm'
+
+      - name: Set Nx SHA
+        uses: nrwl/nx-set-shas@v3
+
+      - name: Install Dependencies
+        run: pnpm install
+
+      - name: Build All Required Packages
+        run: |
+          npx nx run-many --targets=build --projects=tag:type:pkg,tag:type:metro --parallel=4
+
+      - name: Test Metro Packages
+        uses: nick-fields/retry@v3
+        with:
+          max_attempts: 2
+          timeout_minutes: 5
+          command: npx nx affected -t test --parallel=2 --exclude='*,!tag:type:metro'
+
+      - name: Lint Metro Packages
+        run: npx nx run-many --targets=lint --projects=tag:type:metro --parallel=2
+
+      - name: Check Metro Package Publishing Compatibility
+        run: |
+          for pkg in packages/metro-*; do
+            if [ -f "$pkg/package.json" ]; then
+              echo "Checking $pkg..."
+              npx publint "$pkg"
+            fi
+          done

.github/workflows/release.yml

@@ -49,6 +49,7 @@ jobs:
         run: |
           git fetch origin main
           npx nx run-many --targets=build --projects=tag:type:pkg --skip-nx-cache
+          npx nx run-many --targets=build --projects=tag:type:metro
           ls -l packages/*/dist packages/*/package.json
 
       - name: Release

apps/modernjs-ssr/dynamic-nested-remote/cypress.config.ts

@@ -0,0 +1,15 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: {
+    ...nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+    baseUrl: 'http://localhost:8080',
+    injectDocumentDomain: true,
+  },
+  defaultCommandTimeout: 20000,
+  retries: {
+    runMode: 2,
+    openMode: 1,
+  },
+});

apps/modernjs-ssr/dynamic-nested-remote/cypress/e2e/app.cy.ts

@@ -0,0 +1,6 @@
+describe('ModernJS SSR Dynamic Nested Remote', () => {
+  it('should load the app', () => {
+    cy.visit('http://localhost:8080');
+    cy.contains('dynamic-nested-remote');
+  });
+});

apps/modernjs-ssr/dynamic-nested-remote/cypress/support/e2e.ts

@@ -0,0 +1,4 @@
+// This file is processed and loaded automatically before your test files.
+// You can change the location of this file or turn off processing it by setting the
+// "supportFile" option to false.
+// You can read more here: https://on.cypress.io/configuration

apps/modernjs-ssr/dynamic-nested-remote/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-dynamic-nested-remote",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-dynamic-nested-remote/src",
+  "sourceRoot": "apps/modernjs-ssr/dynamic-nested-remote/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["typescript"],
@@ -43,7 +43,7 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/modernjs-ssr/modernjs-ssr-dynamic-nested-remote/cypress.config.ts",
+        "cypressConfig": "apps/modernjs-ssr/dynamic-nested-remote/cypress.config.ts",
         "testingType": "e2e",
         "baseUrl": "http://localhost:4001",
         "browser": "chrome"

apps/modernjs-ssr/dynamic-remote-new-version/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-dynamic-remote-new-version",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-dynamic-remote-new-version/src",
+  "sourceRoot": "apps/modernjs-ssr/dynamic-remote-new-version/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["typescript"],
@@ -43,7 +43,7 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/modernjs-ssr/modernjs-ssr-dynamic-remote-new-version/cypress.config.ts",
+        "cypressConfig": "apps/modernjs-ssr/dynamic-remote-new-version/cypress.config.ts",
         "testingType": "e2e",
         "baseUrl": "http://localhost:4001",
         "browser": "chrome"

apps/modernjs-ssr/dynamic-remote/package.json

@@ -12,6 +12,7 @@
   "types": "./dist/cjs/index.d.ts",
   "devDependencies": {
     "@module-federation/enhanced": "workspace:*",
+    "@module-federation/modern-js": "workspace:*",
     "@module-federation/rsbuild-plugin": "workspace:*",
     "@rsbuild/plugin-react": "^1.3.1",
     "@rslib/core": "^0.9.0",

apps/modernjs-ssr/dynamic-remote/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-dynamic-remote",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-dynamic-remote/src",
+  "sourceRoot": "apps/modernjs-ssr/dynamic-remote/src",
   "projectType": "application",
   "tags": [],
   "targets": {
@@ -43,7 +43,7 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/modernjs-ssr/modernjs-ssr-dynamic-remote/cypress.config.ts",
+        "cypressConfig": "apps/modernjs-ssr/dynamic-remote/cypress.config.ts",
         "testingType": "e2e",
         "baseUrl": "http://localhost:4001",
         "browser": "chrome"

apps/modernjs-ssr/host/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-host",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-host/src",
+  "sourceRoot": "apps/modernjs-ssr/host/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["typescript"],

apps/modernjs-ssr/nested-remote/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-nested-remote",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-nested-remote/src",
+  "sourceRoot": "apps/modernjs-ssr/nested-remote/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["typescript"],

apps/modernjs-ssr/remote-new-version/project.json

@@ -1,7 +1,7 @@
 {
   "name": "modernjs-ssr-remote-new-version",
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
-  "sourceRoot": "apps/modernjs-ssr/modernjs-ssr-remote-new-version/src",
+  "sourceRoot": "apps/modernjs-ssr/remote-new-version/src",
   "projectType": "application",
   "tags": [],
   "implicitDependencies": ["typescript"],
@@ -43,7 +43,7 @@
     "e2e": {
       "executor": "@nx/cypress:cypress",
       "options": {
-        "cypressConfig": "apps/modernjs-ssr/modernjs-ssr-remote-new-version/cypress.config.ts",
+        "cypressConfig": "apps/modernjs-ssr/remote-new-version/cypress.config.ts",
         "testingType": "e2e",
         "baseUrl": "http://localhost:4001",
         "browser": "chrome"

package.json

@@ -52,7 +52,7 @@
     "prepare": "husky install",
     "changeset": "changeset",
     "build:packages": "npx nx affected -t build --parallel=10 --exclude='*,!tag:type:pkg'",
-    "changegen": "./changeset-gen.js --path ./packages/runtime && ./changeset-gen.js --path ./packages/runtime-core && ./changeset-gen.js --path ./packages/sdk &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/enhanced && ./changeset-gen.js --path ./packages/node && ./changeset-gen.js --path ./packages/data-prefetch && ./changeset-gen.js --path ./packages/nextjs-mf && ./changeset-gen.js --path ./packages/dts-plugin",
+    "changegen": "./changeset-gen.js --path ./packages/runtime && ./changeset-gen.js --path ./packages/runtime-core && ./changeset-gen.js --path ./packages/sdk &&./changeset-gen.js --path ./packages/cli --staged && ./changeset-gen.js --path ./packages/enhanced && ./changeset-gen.js --path ./packages/node && ./changeset-gen.js --path ./packages/data-prefetch && ./changeset-gen.js --path ./packages/nextjs-mf && ./changeset-gen.js --path ./packages/dts-plugin && ./changeset-gen.js --path ./packages/metro-core",
     "commitgen:staged": "./commit-gen.js --path ./packages --staged",
     "commitgen:main": "./commit-gen.js --path ./packages",
     "changeset:status": "changeset status",

packages/metro-core/.eslintrc.json

@@ -34,6 +34,26 @@
         ]
       }
     },
+    {
+      "files": ["src/runtime/*.js"],
+      "globals": {
+        "__ENTRYPOINT_IMPORT__": "readonly",
+        "__PLUGINS__": "readonly",
+        "__REMOTES__": "readonly",
+        "__SHARED__": "readonly",
+        "__NAME__": "readonly",
+        "__SHARE_STRATEGY__": "readonly",
+        "__EARLY_REMOTES__": "readonly",
+        "__EARLY_SHARED__": "readonly",
+        "__EXPOSES_MAP__": "readonly",
+        "__DEV__": "readonly",
+        "__METRO_GLOBAL_PREFIX__": "readonly",
+        "__EARLY_MODULE_TEST__": "readonly",
+        "__MODULE_ID__": "readonly",
+        "globalThis": "readonly",
+        "plugins": "readonly"
+      }
+    },
     {
       "files": ["*.js", "*.jsx"]
     }

packages/metro-core/project.json

@@ -3,8 +3,15 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "packages/metro-core/src",
   "projectType": "library",
-  "tags": ["type:pkg"],
+  "tags": ["type:metro"],
   "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "options": {
+        "cwd": "packages/metro-core",
+        "commands": ["pnpm build"]
+      }
+    },
     "lint": {
       "executor": "@nx/eslint:lint",
       "outputs": ["{options.outputFile}"],

packages/metro-core/rslib.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
       },
       output: {
         externals: ({ request }, callback) =>
+          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           callback(undefined, externalizeMetroImports(request!)),
       },
       shims: {

packages/metro-core/src/babel/transformer.js

@@ -1,5 +1,7 @@
+/* eslint-disable no-undef */
 const babelTransformer = require('__BABEL_TRANSFORMER_PATH__');
 const babelPlugins = __BABEL_PLUGINS__;
+/* eslint-enable no-undef */
 
 function transform(config) {
   return babelTransformer.transform({

packages/metro-core/src/commands/bundle-host/index.ts

@@ -12,10 +12,15 @@ import { saveBundleAndMap } from '../utils/save-bundle-and-map';
 import type { BundleFederatedHostArgs } from './types';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_CONFIG: ModuleFederationConfigNormalized;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_ORIGINAL_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_HOST_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_REMOTE_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_MANIFEST_PATH: string | undefined;
 }
 

packages/metro-core/src/commands/bundle-remote/index.ts

@@ -18,9 +18,13 @@ import type { BundleFederatedRemoteArgs } from './types';
 const DEFAULT_OUTPUT = 'dist';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_CONFIG: ModuleFederationConfigNormalized;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_ORIGINAL_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_REMOTE_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_MANIFEST_PATH: string | undefined;
 }
 
@@ -173,6 +177,7 @@ async function bundleFederatedRemote(
       // ending up in the bundles e.g. ../../node_modules/lodash.js -> shared/lodash.js
       resolveRequest: (context, moduleName, platform) => {
         // always defined since we define it in the MF plugin
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         const originalResolveRequest = rawConfig.resolver!.resolveRequest!;
         const res = originalResolveRequest(context, moduleName, platform);
         return modulePathRemapper.remap(res);

packages/metro-core/src/modules/asyncStartup.tsx

@@ -2,10 +2,15 @@ import type { Federation } from '@module-federation/runtime';
 import React from 'react';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __DEV__: boolean;
+  // eslint-disable-next-line no-var
   var __METRO_GLOBAL_PREFIX__: string;
+  // eslint-disable-next-line no-var
   var __FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__: boolean;
+  // eslint-disable-next-line no-var
   var __loadBundleAsync: (entry: string) => Promise<void>;
+  // eslint-disable-next-line no-var
   var __FEDERATION__: Federation;
 }
 

packages/metro-core/src/modules/metroCorePlugin.ts

@@ -4,10 +4,15 @@ import type {
 } from '@module-federation/runtime';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __DEV__: boolean;
+  // eslint-disable-next-line no-var
   var __METRO_GLOBAL_PREFIX__: string;
+  // eslint-disable-next-line no-var
   var __FUSEBOX_HAS_FULL_CONSOLE_SUPPORT__: boolean;
+  // eslint-disable-next-line no-var
   var __loadBundleAsync: (entry: string) => Promise<void>;
+  // eslint-disable-next-line no-var
   var __FEDERATION__: Federation;
 }
 

packages/metro-core/src/plugin/index.ts

@@ -25,9 +25,13 @@ import { getModuleFederationSerializer } from './serializer';
 import { validateOptions } from './validate-options';
 
 declare global {
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_CONFIG: ModuleFederationConfigNormalized;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_ORIGINAL_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_REMOTE_ENTRY_PATH: string | undefined;
+  // eslint-disable-next-line no-var
   var __METRO_FEDERATION_MANIFEST_PATH: string | undefined;
 }