Merge branch 'main' into layers-support

# Conflicts:
#	pnpm-lock.yaml

.changeset/honest-yaks-smoke.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/dts-plugin': patch
+---
+
+ensure when dev is false that type generation only runs once

.changeset/small-bats-leave.md

@@ -0,0 +1,5 @@
+---
+'@module-federation/bridge-react': patch
+---
+
+feat: mount bridge api to module instance

.github/workflows/e2e-next-dev.yml

@@ -27,6 +27,9 @@ jobs:
       - name: Set SKIP_DEVTOOLS_POSTINSTALL environment variable
         run: echo "SKIP_DEVTOOLS_POSTINSTALL=true" >> $GITHUB_ENV
 
+      - name: Set local webpack
+        run: echo "NEXT_PRIVATE_LOCAL_WEBPACK=true" >> $GITHUB_ENV
+
       - name: Install Dependencies
         run: pnpm install
 

apps/modernjs/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @module-federation/modernjsapp
 
+## 0.1.69
+
+### Patch Changes
+
+- @module-federation/enhanced@0.7.6
+
 ## 0.1.68
 
 ### Patch Changes

apps/modernjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@module-federation/modernjsapp",
   "private": true,
-  "version": "0.1.68",
+  "version": "0.1.69",
   "scripts": {
     "reset": "npx rimraf ./**/node_modules",
     "dev": "modern dev",

apps/router-demo/router-host-2000/src/App.tsx

@@ -7,11 +7,13 @@ import Navigation from './navigation';
 import Detail from './pages/Detail';
 import Home from './pages/Home';
 import './App.css';
+import BridgeReactPlugin from '@module-federation/bridge-react/plugin';
 
 init({
   name: 'federation_consumer',
   remotes: [],
   plugins: [
+    BridgeReactPlugin(),
     RetryPlugin({
       fetch: {
         url: 'http://localhost:2008/not-exist-mf-manifest.json',

apps/router-demo/router-host-vue3-2100/package.json

@@ -11,7 +11,7 @@
     "@module-federation/bridge-vue3": "workspace:*",
     "@module-federation/enhanced": "workspace:*",
     "vue": "^3.4.19",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@module-federation/rsbuild-plugin": "workspace:*",

apps/router-demo/router-remote1-2001/rsbuild.config.ts

@@ -33,6 +33,9 @@ export default defineConfig({
     pluginReact(),
     pluginModuleFederation({
       name: 'remote1',
+      runtimePlugins: [
+        require.resolve('@module-federation/bridge-react/plugin'),
+      ],
       exposes: {
         './button': './src/button.tsx',
         './export-app': './src/export-App.tsx',

apps/router-demo/router-remote3-2003/package.json

@@ -11,7 +11,7 @@
     "@module-federation/bridge-vue3": "workspace:*",
     "@module-federation/rsbuild-plugin": "workspace:*",
     "vue": "^3.4.19",
-    "vue-router": "^4.3.2"
+    "vue-router": "^4.4.5"
   },
   "devDependencies": {
     "@rsbuild/core": "^1.0.19",

apps/rslib-module/package.json

@@ -28,7 +28,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "storybook": "^8.3.6",
-    "storybook-react-rsbuild": "^0.1.1",
+    "storybook-react-rsbuild": "^0.1.5",
     "storybook-addon-rslib": "^0.1.4"
   },
   "peerDependencies": {

apps/website-new/CHANGELOG.md

@@ -1,5 +1,11 @@
 # website-new
 
+## 1.0.11
+
+### Patch Changes
+
+- @module-federation/error-codes@0.7.6
+
 ## 1.0.10
 
 ### Patch Changes

apps/website-new/package.json

@@ -1,6 +1,6 @@
 {
   "name": "website-new",
-  "version": "1.0.10",
+  "version": "1.0.11",
   "private": true,
   "scripts": {
     "dev": "rspress dev",

package.json

@@ -184,7 +184,7 @@
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.1",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-qwik": "1.9.1",
+    "eslint-plugin-qwik": "1.10.0",
     "eslint-plugin-react": "7.37.1",
     "eslint-plugin-react-hooks": "5.0.0",
     "eslint-plugin-simple-import-sort": "12.1.1",

packages/bridge/bridge-react-webpack-plugin/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @module-federation/bridge-react-webpack-plugin
 
+## 0.7.6
+
+### Patch Changes
+
+- @module-federation/sdk@0.7.6
+
 ## 0.7.5
 
 ### Patch Changes

packages/bridge/bridge-react-webpack-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react-webpack-plugin",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "publishConfig": {
     "access": "public"
   },
@@ -35,6 +35,6 @@
   "devDependencies": {
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^4.3.0"
   }
 }

packages/bridge/bridge-react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @module-federation/bridge-react
 
+## 0.7.6
+
+### Patch Changes
+
+- @module-federation/runtime@0.7.6
+- @module-federation/sdk@0.7.6
+- @module-federation/bridge-shared@0.7.6
+
 ## 0.7.5
 
 ### Patch Changes

packages/bridge/bridge-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.7.5",
+  "version": "0.7.6",
   "publishConfig": {
     "access": "public"
   },
@@ -26,6 +26,11 @@
       "import": "./dist/router.es.js",
       "require": "./dist/router.cjs.js"
     },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.es.js",
+      "require": "./dist/plugin.es.js"
+    },
     "./router-v5": {
       "types": "./dist/router-v5.d.ts",
       "import": "./dist/router-v5.es.js",
@@ -47,8 +52,7 @@
     "@loadable/component": "^5.16.4",
     "@module-federation/bridge-shared": "workspace:*",
     "@module-federation/sdk": "workspace:*",
-    "react-error-boundary": "^4.0.13",
-    "@module-federation/runtime": "workspace:*"
+    "react-error-boundary": "^4.0.13"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,6 +72,7 @@
     "react-router-dom": "6.22.3",
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^4.3.0",
+    "@module-federation/runtime": "workspace:*"
   }
 }

packages/bridge/bridge-react/src/create.tsx

@@ -18,12 +18,16 @@ interface RemoteModule {
   };
 }
 
-function createLazyRemoteComponent<T, E extends keyof T>(info: {
+type LazyRemoteComponentInfo<T, E extends keyof T> = {
   loader: () => Promise<T>;
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-}) {
+};
+
+function createLazyRemoteComponent<T, E extends keyof T>(
+  info: LazyRemoteComponentInfo<T, E>,
+) {
   const exportName = info?.export || 'default';
   return React.lazy(async () => {
     LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
@@ -83,12 +87,9 @@ function createLazyRemoteComponent<T, E extends keyof T>(info: {
   });
 }
 
-export function createRemoteComponent<T, E extends keyof T>(info: {
-  loader: () => Promise<T>;
-  loading: React.ReactNode;
-  fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  export?: E;
-}) {
+export function createRemoteComponent<T, E extends keyof T>(
+  info: LazyRemoteComponentInfo<T, E>,
+) {
   type ExportType = T[E] extends (...args: any) => any
     ? ReturnType<T[E]>
     : never;

packages/bridge/bridge-react/src/plugin.ts

@@ -0,0 +1,20 @@
+import type { FederationRuntimePlugin } from '@module-federation/runtime';
+import type { FederationHost } from '@module-federation/runtime';
+
+export type FederationRuntimeType = {
+  instance: FederationHost | null;
+};
+
+export const federationRuntime: FederationRuntimeType = { instance: null };
+
+function BridgeReactPlugin(): FederationRuntimePlugin {
+  return {
+    name: 'bridge-react-plugin',
+    beforeInit(args) {
+      federationRuntime.instance = args.origin;
+      return args;
+    },
+  };
+}
+
+export default BridgeReactPlugin;

packages/bridge/bridge-react/src/provider.tsx

@@ -9,7 +9,7 @@ import type {
 import { ErrorBoundary } from 'react-error-boundary';
 import { RouterContext } from './context';
 import { LoggerInstance, atLeastReact18 } from './utils';
-import { getInstance } from '@module-federation/runtime';
+import { federationRuntime } from './plugin';
 
 type RenderParams = RenderFnParams & {
   [key: string]: unknown;
@@ -20,7 +20,7 @@ type DestroyParams = {
 };
 type RootType = HTMLElement | ReactDOMClient.Root;
 
-type ProviderFnParams<T> = {
+export type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
@@ -31,8 +31,11 @@ type ProviderFnParams<T> = {
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
-    const instance = getInstance();
-    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const instance = federationRuntime.instance;
+    LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance,
+    );
 
     const RawComponent = (info: { propsInfo: T; appInfo: ProviderParams }) => {
       const { appInfo, propsInfo, ...restProps } = info;
@@ -95,15 +98,13 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           const renderFn = bridgeInfo?.render || ReactDOM.render;
           renderFn?.(rootComponentWithErrorBoundary, info.dom);
         }
-
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
       },
 
       async destroy(info: DestroyParams) {
         LoggerInstance.log(`createBridgeComponent destroy Info`, {
           dom: info.dom,
         });
-
         instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit(info);
 
         // call destroy function

packages/bridge/bridge-react/src/remote/index.tsx

@@ -10,7 +10,7 @@ import type { ProviderParams } from '@module-federation/bridge-shared';
 import { dispatchPopstateEnv } from '@module-federation/bridge-shared';
 import { ErrorBoundaryPropsWithComponent } from 'react-error-boundary';
 import { LoggerInstance, pathJoin, getRootDomDefaultClassName } from '../utils';
-import { getInstance } from '@module-federation/runtime';
+import { federationRuntime } from '../plugin';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -53,15 +53,16 @@ const RemoteAppWrapper = forwardRef(function (
       ...resProps
     } = props;
 
+    const instance = federationRuntime.instance;
     const rootRef: React.MutableRefObject<HTMLDivElement | null> =
       ref && 'current' in ref
         ? (ref as React.MutableRefObject<HTMLDivElement | null>)
         : useRef(null);
 
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
-    const hostInstance = getInstance();
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+
+    LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
 
     useEffect(() => {
       const renderTimeout = setTimeout(() => {
@@ -84,18 +85,16 @@ const RemoteAppWrapper = forwardRef(function (
 
         LoggerInstance.log(
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance,
+          instance,
         );
         const beforeBridgeRenderRes =
-          hostInstance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
             renderProps,
           ) || {};
         // @ts-ignore
         renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
         providerReturn.render(renderProps);
-        hostInstance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(
-          renderProps,
-        );
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
       });
 
       return () => {
@@ -107,7 +106,7 @@ const RemoteAppWrapper = forwardRef(function (
               { moduleName, basename, dom: renderDom.current },
             );
 
-            hostInstance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+            instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,
@@ -121,7 +120,7 @@ const RemoteAppWrapper = forwardRef(function (
               dom: renderDom.current,
             });
 
-            hostInstance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+            instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
               moduleName,
               dom: renderDom.current,
               basename,

packages/bridge/bridge-react/vite.config.ts

@@ -21,6 +21,7 @@ export default defineConfig({
     lib: {
       entry: {
         index: path.resolve(__dirname, 'src/index.ts'),
+        plugin: path.resolve(__dirname, 'src/plugin.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
         'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
         'router-v6': path.resolve(__dirname, 'src/router-v6.tsx'),
@@ -36,7 +37,6 @@ export default defineConfig({
         'react-router-dom/',
         'react-router-dom/index.js',
         'react-router-dom/dist/index.js',
-        '@module-federation/runtime',
       ],
       plugins: [
         {