feat(bridge): framework ability (#2605)

Author: zhoushaw

.changeset/config.json

@@ -14,7 +14,11 @@
       "@module-federation/manifest",
       "@module-federation/dts-plugin",
       "@module-federation/third-party-dts-extractor",
-      "@module-federation/devtools"
+      "@module-federation/devtools",
+      "@module-federation/bridge-react",
+      "@module-federation/bridge-vue3",
+      "@module-federation/bridge-shared",
+      "@module-federation/bridge-react-webpack-plugin"
     ]
   ],
   "ignorePatterns": ["^alpha|^beta"],

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

@@ -38,34 +38,34 @@ jobs:
         run: npx nx format:check
 
       - name: Run Affected Build
-        run: pnpm run build:pkg
+        run: npx nx run-many --targets=build --projects=tag:type:pkg  --skip-nx-cache
 
       - name: Run Affected Lint
         run: npx nx affected -t lint --parallel=7 --exclude='*,!tag:type:pkg'
 
       - name: Run Affected Test
         run: npx nx affected -t test --parallel=3 --exclude='*,!tag:type:pkg' --skip-nx-cache
 
-      - name: E2E Test for Next.js Dev
-        run: |
-          pnpm run app:next:dev > /dev/null 2>&1 &
-          sleep 1 &&
-          npx wait-on tcp:3001 &&
-          npx wait-on tcp:3002 &&
-          npx wait-on tcp:3000 &&
-          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=3 &&
-          lsof -ti tcp:3000,3001,3002 | xargs kill
-
-      - name: E2E Test for Next.js Prod
-        run: |
-          pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build &&
-          pnpm run app:next:prod &
-          sleep 2 &&
-          npx wait-on tcp:3001 &&
-          npx wait-on tcp:3002 &&
-          npx wait-on tcp:3000 &&
-          npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
-          lsof -ti tcp:3000,3001,3002 | xargs kill
+      # - name: E2E Test for Next.js Dev
+      #   run: |
+      #     pnpm run app:next:dev > /dev/null 2>&1 &
+      #     sleep 1 &&
+      #     npx wait-on tcp:3001 &&
+      #     npx wait-on tcp:3002 &&
+      #     npx wait-on tcp:3000 &&
+      #     npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=3 &&
+      #     lsof -ti tcp:3000,3001,3002 | xargs kill
+
+      # - name: E2E Test for Next.js Prod
+      #   run: |
+      #     pnpm run --filter @module-federation/3002-checkout --filter @module-federation/3000-home --filter @module-federation/3001-shop build &&
+      #     pnpm run app:next:prod &
+      #     sleep 2 &&
+      #     npx wait-on tcp:3001 &&
+      #     npx wait-on tcp:3002 &&
+      #     npx wait-on tcp:3000 &&
+      #     npx nx run-many --target=test:e2e --projects=3000-home,3001-shop,3002-checkout --parallel=1 &&
+      #     lsof -ti tcp:3000,3001,3002 | xargs kill
 
       - name: E2E Test for ModernJS
         run: npx nx run-many --target=test:e2e --projects=modernjs --parallel=1 && lsof -ti tcp:4001 | xargs kill

.github/workflows/devtools.yml

@@ -35,12 +35,14 @@ jobs:
         run: pnpm install
 
       - name: Run Affected Build
-        run: npx nx build --parallel=10 --exclude='*,!tag:type:pkg'
+        run: npx nx run-many --targets=build --projects=tag:type:pkg  --skip-nx-cache
 
       - name: Configuration xvfb
         shell: bash
         run: sudo apt-get update && sudo apt-get install xvfb
 
       - name: E2E Chrome Devtools
-        run: |
-          pnpm run app:manifest:dev & echo "done" && sleep 50 && npx nx e2e:devtools chrome-devtools && lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill
+        run: pnpm run app:manifest:dev & echo "done" && sleep 50 && npx nx e2e:devtools chrome-devtools
+
+      - name: kill port
+        run: lsof -ti tcp:3008,3009,3010,3011,3012 | xargs kill

.gitignore

@@ -55,5 +55,6 @@ apps/**/dist
 !packages/enhanced/test/configCases/**/**/node_modules
 packages/enhanced/test/js
 .ignored
-/.mf
+**/.mf
+**/.mf/**
 

apps/manifest-demo/3008-webpack-host/@mf-types/index.d.ts

@@ -1,25 +1,29 @@
-import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './js-entry-provider/apis.d.ts';
-import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1 } from './manifest-provider/apis.d.ts';
+import type { PackageType as PackageType_0,RemoteKeys as RemoteKeys_0 } from './dynamic-remote/apis.d.ts';
+import type { PackageType as PackageType_1,RemoteKeys as RemoteKeys_1 } from './js-entry-provider/apis.d.ts';
+import type { PackageType as PackageType_2,RemoteKeys as RemoteKeys_2 } from './manifest-provider/apis.d.ts';
     declare module "@module-federation/runtime" {
-      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1 | RemoteKeys_2;
       type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
 T extends RemoteKeys_1 ? PackageType_1<T> :
+T extends RemoteKeys_2 ? PackageType_2<T> :
 Y ;
       export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
       export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
     }
 declare module "@module-federation/enhanced/runtime" {
-      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1 | RemoteKeys_2;
       type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
 T extends RemoteKeys_1 ? PackageType_1<T> :
+T extends RemoteKeys_2 ? PackageType_2<T> :
 Y ;
       export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
       export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;
     }
 declare module "@module-federation/runtime-tools" {
-      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1;
+      type RemoteKeys = RemoteKeys_0 | RemoteKeys_1 | RemoteKeys_2;
       type PackageType<T, Y=any> = T extends RemoteKeys_0 ? PackageType_0<T> :
 T extends RemoteKeys_1 ? PackageType_1<T> :
+T extends RemoteKeys_2 ? PackageType_2<T> :
 Y ;
       export function loadRemote<T extends RemoteKeys,Y>(packageName: T): Promise<PackageType<T, Y>>;
       export function loadRemote<T extends string,Y>(packageName: T): Promise<PackageType<T, Y>>;

apps/manifest-demo/3008-webpack-host/@mf-types/js-entry-provider/apis.d.ts

@@ -0,0 +1,21 @@
+## How to run the e2e project
+
+```bash
+# Root directory
+pnpm install
+pnpm run app:router:dev
+
+open http://localhost:2000/
+open http://localhost:2100/
+```
+
+## Function description
+
+> Scenario description
+
+* This demo mainly demonstrates how to use the mf bridge library to load a module with routing
+* How to load modules between vue and react projects
+
+## Test run
+
+* nx e2e router-host-2000 --watch

apps/manifest-demo/3008-webpack-host/@mf-types/manifest-provider/apis.d.ts

@@ -0,0 +1,29 @@
+# Rsbuild Project
+
+## Setup
+
+Install the dependencies:
+
+```bash
+pnpm install
+```
+
+## Get Started
+
+Start the dev server:
+
+```bash
+pnpm dev
+```
+
+Build the app for production:
+
+```bash
+pnpm build
+```
+
+Preview the production build locally:
+
+```bash
+pnpm preview
+```

apps/router-demo/README.md

@@ -0,0 +1,7 @@
+import { nxE2EPreset } from '@nx/cypress/plugins/cypress-preset';
+import { defineConfig } from 'cypress';
+
+export default defineConfig({
+  e2e: nxE2EPreset(__filename, { cypressDir: 'cypress' }),
+  defaultCommandTimeout: 20000,
+});