@module-federation/bridge-react 0.0.0-next-20241119071808 → 0.0.0-next-20241120032055

package/CHANGELOG.md

@@ -1,13 +1,13 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20241119071808
+## 0.0.0-next-20241120032055
 
 ### Patch Changes
 
 - c7dbc4b: feat: mount bridge api to module instance
 - 0309fb5: fix: wrap try catch with react-router-dom path resolve
-  - @module-federation/sdk@0.0.0-next-20241119071808
-  - @module-federation/bridge-shared@0.0.0-next-20241119071808
+  - @module-federation/sdk@0.0.0-next-20241120032055
+  - @module-federation/bridge-shared@0.0.0-next-20241120032055
 
 ## 0.7.4
 

package/dist/index.cjs.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const context = require("./context-BcJ-YlNr.cjs");
 const ReactRouterDOM = require("react-router-dom");
+const plugin = require("./plugin.cjs.js");
 const ReactDOM = require("react-dom");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -132,9 +133,9 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
       className,
       style,
       fallback,
-      instance,
       ...resProps
     } = props;
+    const instance = plugin.federationRuntime.instance;
     const rootRef = ref && "current" in ref ? ref : React.useRef(null);
     const renderDom = React.useRef(null);
     const providerInfoRef = React.useRef(null);
@@ -305,7 +306,6 @@ function createLazyRemoteComponent(info) {
               exportName: info.export || "default",
               fallback: info.fallback,
               ref,
-              instance: info.instance,
               ...props
             }
           );
@@ -329,10 +329,13 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponentWithInstance(instance) {
-  return (info) => {
-    return createLazyRemoteComponent({ ...info, instance });
-  };
+function createRemoteComponent(info) {
+  return React.forwardRef(
+    (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
+      return /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React.createElement(React.Suspense, { fallback: info.loading }, /* @__PURE__ */ React.createElement(LazyComponent, { ...props, ref })));
+    }
+  );
 }
 var client = {};
 var m = ReactDOM;
@@ -361,7 +364,7 @@ if (process.env.NODE_ENV === "production") {
 function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const { instance } = bridgeInfo;
+    const instance = plugin.federationRuntime.instance;
     context.LoggerInstance.log(
       `createBridgeComponent instance from props >>>`,
       instance
@@ -444,21 +447,5 @@ function createBridgeComponent(bridgeInfo) {
     };
   };
 }
-function createBridgeComponentWithInstance(instance) {
-  return (bridgeInfo) => {
-    return createBridgeComponent({ ...bridgeInfo, instance });
-  };
-}
-exports.createRemoteComponent = void 0;
-exports.createBridgeComponent = void 0;
-function BridgeReactPlugin() {
-  return {
-    name: "bridge-react-plugin",
-    beforeInit(args) {
-      exports.createRemoteComponent = createRemoteComponentWithInstance(args.origin);
-      exports.createBridgeComponent = createBridgeComponentWithInstance(args.origin);
-      return args;
-    }
-  };
-}
-exports.BridgeReactPlugin = BridgeReactPlugin;
+exports.createBridgeComponent = createBridgeComponent;
+exports.createRemoteComponent = createRemoteComponent;

package/dist/index.d.ts

@@ -2,29 +2,17 @@ import { ComponentType } from 'react';
 import { default as default_2 } from 'react';
 import { default as default_3 } from 'react-dom/client';
 import { ErrorInfo } from 'react';
-import { FederationHost } from '@module-federation/runtime';
-import { FederationRuntimePlugin } from '@module-federation/runtime';
 import { PropsWithChildren } from 'react';
 import * as React_2 from 'react';
 
-export declare function BridgeReactPlugin(): FederationRuntimePlugin;
-
-declare type CreateBridgeComponent = typeof createBridgeComponent_2;
-
-export declare let createBridgeComponent: CreateBridgeComponent;
-
-declare function createBridgeComponent_2<T>(bridgeInfo: ProviderFnParams<T>): () => {
+export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
     destroy(info: DestroyParams): Promise<void>;
     rawComponent: React_2.ComponentType<T>;
     __BRIDGE_FN__: (_args: T) => void;
 };
 
-declare type CreateRemoteComponent = typeof createRemoteComponent_2;
-
-export declare let createRemoteComponent: CreateRemoteComponent;
-
-declare function createRemoteComponent_2<T, E extends keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
+export declare function createRemoteComponent<T, E extends keyof T>(info: LazyRemoteComponentInfo<T, E>): default_2.ForwardRefExoticComponent<default_2.PropsWithoutRef<ProviderParams & ("__BRIDGE_FN__" extends keyof (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never) ? (T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"] extends (...args: any) => any ? Parameters<(T[E] extends (...args: any) => any ? ReturnType<T[E]> : never)["__BRIDGE_FN__"]>[0] : {} : {})> & default_2.RefAttributes<HTMLDivElement>>;
 
 declare type DestroyParams = {
     moduleName: string;
@@ -60,13 +48,11 @@ declare type LazyRemoteComponentInfo<T, E extends keyof T> = {
     loading: default_2.ReactNode;
     fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
     export?: E;
-    instance?: FederationHost;
 };
 
 declare type ProviderFnParams<T> = {
     rootComponent: React_2.ComponentType<T>;
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
-    instance?: FederationHost;
 };
 
 export declare interface ProviderParams {

package/dist/index.es.js

@@ -2,6 +2,7 @@ import * as React from "react";
 import React__default, { createContext, Component, createElement, isValidElement, forwardRef, useRef, useEffect, useContext, useState } from "react";
 import { L as LoggerInstance, g as getRootDomDefaultClassName, p as pathJoin, a as atLeastReact18, R as RouterContext } from "./context-CUbFnlO5.js";
 import * as ReactRouterDOM from "react-router-dom";
+import { federationRuntime } from "./plugin.es.js";
 import ReactDOM from "react-dom";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {
@@ -113,9 +114,9 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
       className,
       style,
       fallback,
-      instance,
       ...resProps
     } = props;
+    const instance = federationRuntime.instance;
     const rootRef = ref && "current" in ref ? ref : useRef(null);
     const renderDom = useRef(null);
     const providerInfoRef = useRef(null);
@@ -286,7 +287,6 @@ function createLazyRemoteComponent(info) {
               exportName: info.export || "default",
               fallback: info.fallback,
               ref,
-              instance: info.instance,
               ...props
             }
           );
@@ -310,10 +310,13 @@ function createLazyRemoteComponent(info) {
     }
   });
 }
-function createRemoteComponentWithInstance(instance) {
-  return (info) => {
-    return createLazyRemoteComponent({ ...info, instance });
-  };
+function createRemoteComponent(info) {
+  return forwardRef(
+    (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
+      return /* @__PURE__ */ React__default.createElement(ErrorBoundary, { FallbackComponent: info.fallback }, /* @__PURE__ */ React__default.createElement(React__default.Suspense, { fallback: info.loading }, /* @__PURE__ */ React__default.createElement(LazyComponent, { ...props, ref })));
+    }
+  );
 }
 var client = {};
 var m = ReactDOM;
@@ -339,10 +342,10 @@ if (process.env.NODE_ENV === "production") {
     }
   };
 }
-function createBridgeComponent$1(bridgeInfo) {
+function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const { instance } = bridgeInfo;
+    const instance = federationRuntime.instance;
     LoggerInstance.log(
       `createBridgeComponent instance from props >>>`,
       instance
@@ -425,25 +428,7 @@ function createBridgeComponent$1(bridgeInfo) {
     };
   };
 }
-function createBridgeComponentWithInstance(instance) {
-  return (bridgeInfo) => {
-    return createBridgeComponent$1({ ...bridgeInfo, instance });
-  };
-}
-let createRemoteComponent;
-let createBridgeComponent;
-function BridgeReactPlugin() {
-  return {
-    name: "bridge-react-plugin",
-    beforeInit(args) {
-      createRemoteComponent = createRemoteComponentWithInstance(args.origin);
-      createBridgeComponent = createBridgeComponentWithInstance(args.origin);
-      return args;
-    }
-  };
-}
 export {
-  BridgeReactPlugin,
   createBridgeComponent,
   createRemoteComponent
 };

package/dist/plugin.cjs.js

@@ -1,3 +1,14 @@
 "use strict";
-const index = require("./index.cjs.js");
-module.exports = index.BridgeReactPlugin;
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
+const federationRuntime = { instance: null };
+function BridgeReactPlugin() {
+  return {
+    name: "bridge-react-plugin",
+    beforeInit(args) {
+      federationRuntime.instance = args.origin;
+      return args;
+    }
+  };
+}
+exports.default = BridgeReactPlugin;
+exports.federationRuntime = federationRuntime;

package/dist/plugin.d.ts

@@ -1,6 +1,13 @@
+import { FederationHost } from '@module-federation/runtime';
 import { FederationRuntimePlugin } from '@module-federation/runtime';
 
 declare function BridgeReactPlugin(): FederationRuntimePlugin;
 export default BridgeReactPlugin;
 
+export declare const federationRuntime: FederationRuntimeType;
+
+export declare type FederationRuntimeType = {
+    instance: FederationHost | null;
+};
+
 export { }

package/dist/plugin.es.js

@@ -1,4 +1,14 @@
-import { BridgeReactPlugin } from "./index.es.js";
+const federationRuntime = { instance: null };
+function BridgeReactPlugin() {
+  return {
+    name: "bridge-react-plugin",
+    beforeInit(args) {
+      federationRuntime.instance = args.origin;
+      return args;
+    }
+  };
+}
 export {
-  BridgeReactPlugin as default
+  BridgeReactPlugin as default,
+  federationRuntime
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241119071808",
+  "version": "0.0.0-next-20241120032055",
   "publishConfig": {
     "access": "public"
   },
@@ -46,8 +46,8 @@
   "dependencies": {
     "@loadable/component": "^5.16.4",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241119071808",
-    "@module-federation/sdk": "0.0.0-next-20241119071808"
+    "@module-federation/bridge-shared": "0.0.0-next-20241120032055",
+    "@module-federation/sdk": "0.0.0-next-20241120032055"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -68,7 +68,7 @@
     "typescript": "^5.2.2",
     "vite": "^5.2.14",
     "vite-plugin-dts": "^3.9.1",
-    "@module-federation/runtime": "0.0.0-next-20241119071808"
+    "@module-federation/runtime": "0.0.0-next-20241120032055"
   },
   "scripts": {
     "dev": "vite",

package/src/create.tsx

@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import type { FederationHost } from '@module-federation/runtime';
 import {
   ErrorBoundary,
   ErrorBoundaryPropsWithComponent,
@@ -24,7 +23,6 @@ type LazyRemoteComponentInfo<T, E extends keyof T> = {
   loading: React.ReactNode;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
   export?: E;
-  instance?: FederationHost;
 };
 
 function createLazyRemoteComponent<T, E extends keyof T>(
@@ -64,7 +62,6 @@ function createLazyRemoteComponent<T, E extends keyof T>(
               exportName={info.export || 'default'}
               fallback={info.fallback}
               ref={ref}
-              instance={info.instance}
               {...props}
             />
           );
@@ -116,13 +113,3 @@ export function createRemoteComponent<T, E extends keyof T>(
     },
   );
 }
-
-export function createRemoteComponentWithInstance<T, E extends keyof T>(
-  instance: FederationHost,
-) {
-  return (info: LazyRemoteComponentInfo<T, E>) => {
-    return createLazyRemoteComponent({ ...info, instance });
-  };
-}
-
-export type CreateRemoteComponent = typeof createRemoteComponent;

package/src/index.ts

@@ -1,24 +1,5 @@
-import type { FederationRuntimePlugin } from '@module-federation/runtime';
-import { createRemoteComponentWithInstance } from './create';
-import { createBridgeComponentWithInstance } from './provider';
-import type { CreateRemoteComponent } from './create';
-import type { CreateBridgeComponent } from './provider';
-
-let createRemoteComponent: CreateRemoteComponent;
-let createBridgeComponent: CreateBridgeComponent;
-function BridgeReactPlugin(): FederationRuntimePlugin {
-  return {
-    name: 'bridge-react-plugin',
-    beforeInit(args) {
-      // @ts-ignore
-      createRemoteComponent = createRemoteComponentWithInstance(args.origin);
-      createBridgeComponent = createBridgeComponentWithInstance(args.origin);
-      return args;
-    },
-  };
-}
-
-export { BridgeReactPlugin, createRemoteComponent, createBridgeComponent };
+export { createRemoteComponent } from './create';
+export { createBridgeComponent } from './provider';
 export type {
   ProviderParams,
   RenderFnParams,

package/src/plugin.ts

@@ -1,2 +1,20 @@
-import { BridgeReactPlugin } from './index';
+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;

package/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 type { FederationHost } from '@module-federation/runtime';
+import { federationRuntime } from './plugin';
 
 type RenderParams = RenderFnParams & {
   [key: string]: unknown;
@@ -20,19 +20,18 @@ type DestroyParams = {
 };
 type RootType = HTMLElement | ReactDOMClient.Root;
 
-type ProviderFnParams<T> = {
+export type ProviderFnParams<T> = {
   rootComponent: React.ComponentType<T>;
   render?: (
     App: React.ReactElement,
     id?: HTMLElement | string,
   ) => RootType | Promise<RootType>;
-  instance?: FederationHost;
 };
 
 export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
   return () => {
     const rootMap = new Map<any, RootType>();
-    const { instance } = bridgeInfo;
+    const instance = federationRuntime.instance;
     LoggerInstance.log(
       `createBridgeComponent instance from props >>>`,
       instance,
@@ -134,11 +133,3 @@ export function ShadowRoot(info: { children: () => JSX.Element }) {
 
   return <div ref={domRef}>{root && <info.children />}</div>;
 }
-
-export function createBridgeComponentWithInstance<T>(instance: FederationHost) {
-  return (bridgeInfo: ProviderFnParams<T>) => {
-    return createBridgeComponent({ ...bridgeInfo, instance });
-  };
-}
-
-export type CreateBridgeComponent = typeof createBridgeComponent;

package/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 type { FederationHost } from '@module-federation/runtime';
+import { federationRuntime } from '../plugin';
 
 declare const __APP_VERSION__: string;
 export interface RenderFnParams extends ProviderParams {
@@ -34,7 +34,6 @@ interface RemoteAppParams {
   providerInfo: NonNullable<RemoteModule['provider']>;
   exportName: string | number | symbol;
   fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-  instance: FederationHost;
 }
 
 const RemoteAppWrapper = forwardRef(function (
@@ -51,10 +50,10 @@ const RemoteAppWrapper = forwardRef(function (
       className,
       style,
       fallback,
-      instance,
       ...resProps
     } = props;
 
+    const instance = federationRuntime.instance;
     const rootRef: React.MutableRefObject<HTMLDivElement | null> =
       ref && 'current' in ref
         ? (ref as React.MutableRefObject<HTMLDivElement | null>)
@@ -62,6 +61,7 @@ const RemoteAppWrapper = forwardRef(function (
 
     const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
     const providerInfoRef = useRef<any>(null);
+
     LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
 
     useEffect(() => {