@module-federation/bridge-react - npm Package Compare versions

Comparing version 0.0.0-next-20241119071808 to 0.0.0-next-20241120032055

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20241119071808
+## 0.0.0-next-20241120032055
 
@@ -9,4 +9,4 @@ ### Patch Changes
 - 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
 
@@ -13,0 +13,0 @@ ## 0.7.4

dist/index.cjs.js

@@ -6,2 +6,3 @@ "use strict";
 const ReactRouterDOM = require("react-router-dom");
+const plugin = require("./plugin.cjs.js");
 const ReactDOM = require("react-dom");
@@ -136,5 +137,5 @@ function _interopNamespaceDefault(e2) {
       fallback,
-      instance,
       ...resProps
     } = props;
+    const instance = plugin.federationRuntime.instance;
     const rootRef = ref && "current" in ref ? ref : React.useRef(null);
@@ -310,3 +311,2 @@ const renderDom = React.useRef(null);
               ref,
-              instance: info.instance,
               ...props
@@ -335,6 +335,9 @@ }
 }
-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 })));
+    }
+  );
 }
@@ -368,3 +371,3 @@ var client = {};
     const rootMap = /* @__PURE__ */ new Map();
-    const { instance } = bridgeInfo;
+    const instance = plugin.federationRuntime.instance;
     context.LoggerInstance.log(
@@ -452,19 +455,3 @@ `createBridgeComponent instance from props >>>`,
 }
-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;

dist/index.d.ts

@@ -5,14 +5,6 @@ import { ComponentType } from 'react';
 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>;
@@ -24,8 +16,4 @@ destroy(info: DestroyParams): Promise<void>;
 
-declare type CreateRemoteComponent = typeof createRemoteComponent_2;
+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>>;
 
-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>>;
-
 declare type DestroyParams = {
@@ -65,3 +53,2 @@ moduleName: string;
     export?: E;
-    instance?: FederationHost;
 };
@@ -72,3 +59,2 @@
     render?: (App: React_2.ReactElement, id?: HTMLElement | string) => RootType | Promise<RootType>;
-    instance?: FederationHost;
 };
@@ -75,0 +61,0 @@

dist/index.es.js

@@ -5,2 +5,3 @@ import * as React from "react";
 import * as ReactRouterDOM from "react-router-dom";
+import { federationRuntime } from "./plugin.es.js";
 import ReactDOM from "react-dom";
@@ -117,5 +118,5 @@ const ErrorBoundaryContext = createContext(null);
       fallback,
-      instance,
       ...resProps
     } = props;
+    const instance = federationRuntime.instance;
     const rootRef = ref && "current" in ref ? ref : useRef(null);
@@ -291,3 +292,2 @@ const renderDom = useRef(null);
               ref,
-              instance: info.instance,
               ...props
@@ -316,6 +316,9 @@ }
 }
-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 })));
+    }
+  );
 }
@@ -346,6 +349,6 @@ var client = {};
 }
-function createBridgeComponent$1(bridgeInfo) {
+function createBridgeComponent(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const { instance } = bridgeInfo;
+    const instance = federationRuntime.instance;
     LoggerInstance.log(
@@ -433,23 +436,5 @@ `createBridgeComponent instance from props >>>`,
 }
-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
 };

dist/plugin.cjs.js

 "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;

dist/plugin.d.ts

@@ -0,1 +1,2 @@
+import { FederationHost } from '@module-federation/runtime';
 import { FederationRuntimePlugin } from '@module-federation/runtime';
@@ -6,2 +7,8 @@
 
+export declare const federationRuntime: FederationRuntimeType;
+
+export declare type FederationRuntimeType = {
+    instance: FederationHost | null;
+};
+
 export { }

dist/plugin.es.js

@@ -1,4 +0,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.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241119071808",
+  "version": "0.0.0-next-20241120032055",
   "publishConfig": {
@@ -49,4 +49,4 @@ "access": "public"
     "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"
   },
@@ -72,3 +72,3 @@ "peerDependencies": {
     "vite-plugin-dts": "^3.9.1",
-    "@module-federation/runtime": "0.0.0-next-20241119071808"
+    "@module-federation/runtime": "0.0.0-next-20241120032055"
   },
@@ -75,0 +75,0 @@ "scripts": {

src/index.ts

@@ -1,22 +0,3 @@
-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 {
@@ -23,0 +4,0 @@ ProviderParams,

src/plugin.ts

@@ -1,2 +0,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;

No alert changes

Worsened metrics

Total package byte prevSize

116691

decreased by-0.92%

Lines of code

3170

decreased by-1%

Dependency changes

• + Added@module-federation/bridge-shared@0.0.0-next-20241120032055(transitive)

• + Added@module-federation/sdk@0.0.0-next-20241120032055(transitive)

• - Removed@module-federation/bridge-shared@0.0.0-next-20241119071808(transitive)

• - Removed@module-federation/sdk@0.0.0-next-20241119071808(transitive)

• Updated@module-federation/bridge-shared@0.0.0-next-20241120032055

• Updated@module-federation/sdk@0.0.0-next-20241120032055