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

Comparing version 0.0.0-next-20241118100312 to 0.0.0-next-20241119071808

CHANGELOG.md

 # @module-federation/bridge-react
 
-## 0.0.0-next-20241118100312
+## 0.0.0-next-20241119071808
 
 ### Patch Changes
 
-- @module-federation/runtime@0.0.0-next-20241118100312
-- @module-federation/sdk@0.0.0-next-20241118100312
-- @module-federation/bridge-shared@0.0.0-next-20241118100312
+- 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
 
@@ -11,0 +12,0 @@ ## 0.7.4

dist/index.cjs.js

@@ -6,3 +6,2 @@ "use strict";
 const ReactRouterDOM = require("react-router-dom");
-const runtime = require("@module-federation/runtime");
 const ReactDOM = require("react-dom");
@@ -137,2 +136,3 @@ function _interopNamespaceDefault(e2) {
       fallback,
+      instance,
       ...resProps
@@ -143,4 +143,3 @@ } = props;
     const providerInfoRef = React.useRef(null);
-    const hostInstance = runtime.getInstance();
-    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+    context.LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
     React.useEffect(() => {
@@ -166,5 +165,5 @@ const renderTimeout = setTimeout(() => {
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
+          instance
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
           renderProps
@@ -174,5 +173,3 @@ )) || {};
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          renderProps
-        );
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
       });
@@ -188,3 +185,3 @@ return () => {
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
               moduleName,
@@ -201,3 +198,3 @@ dom: renderDom.current,
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
               moduleName,
@@ -318,2 +315,3 @@ dom: renderDom.current,
               ref,
+              instance: info.instance,
               ...props
@@ -342,9 +340,6 @@ }
 }
-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 })));
-    }
-  );
+function createRemoteComponentWithInstance(instance) {
+  return (info) => {
+    return createLazyRemoteComponent({ ...info, instance });
+  };
 }
@@ -378,4 +373,7 @@ var client = {};
     const rootMap = /* @__PURE__ */ new Map();
-    const instance = runtime.getInstance();
-    context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const { instance } = bridgeInfo;
+    context.LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
     const RawComponent = (info) => {
@@ -449,3 +447,5 @@ const { appInfo, propsInfo, ...restProps } = info;
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(
+          info
+        );
       },
@@ -458,3 +458,19 @@ rawComponent: bridgeInfo.rootComponent,
 }
-exports.createBridgeComponent = createBridgeComponent;
-exports.createRemoteComponent = createRemoteComponent;
+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;

dist/index.d.ts

@@ -5,6 +5,14 @@ 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 createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
+export declare function BridgeReactPlugin(): FederationRuntimePlugin;
+
+declare type CreateBridgeComponent = typeof createBridgeComponent_2;
+
+export declare let createBridgeComponent: CreateBridgeComponent;
+
+declare function createBridgeComponent_2<T>(bridgeInfo: ProviderFnParams<T>): () => {
     render(info: RenderParams): Promise<void>;
@@ -16,9 +24,8 @@ destroy(info: DestroyParams): Promise<void>;
 
-export declare function createRemoteComponent<T, E extends keyof T>(info: {
-    loader: () => Promise<T>;
-    loading: default_2.ReactNode;
-    fallback: ErrorBoundaryPropsWithComponent['FallbackComponent'];
-    export?: 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 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>>;
+
 declare type DestroyParams = {
@@ -53,5 +60,14 @@ moduleName: string;
 
+declare type LazyRemoteComponentInfo<T, E extends keyof T> = {
+    loader: () => Promise<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;
 };
@@ -58,0 +74,0 @@

dist/index.es.js

@@ -5,3 +5,2 @@ import * as React from "react";
 import * as ReactRouterDOM from "react-router-dom";
-import { getInstance } from "@module-federation/runtime";
 import ReactDOM from "react-dom";
@@ -118,2 +117,3 @@ const ErrorBoundaryContext = createContext(null);
       fallback,
+      instance,
       ...resProps
@@ -124,4 +124,3 @@ } = props;
     const providerInfoRef = useRef(null);
-    const hostInstance = getInstance();
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
+    LoggerInstance.log(`RemoteAppWrapper instance from props >>>`, instance);
     useEffect(() => {
@@ -147,5 +146,5 @@ const renderTimeout = setTimeout(() => {
           `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
+          instance
         );
-        const beforeBridgeRenderRes = ((_c = (_b = (_a = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
+        const beforeBridgeRenderRes = ((_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeRender) == null ? void 0 : _c.emit(
           renderProps
@@ -155,5 +154,3 @@ )) || {};
         providerReturn.render(renderProps);
-        (_f = (_e = (_d = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(
-          renderProps
-        );
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(renderProps);
       });
@@ -169,3 +166,3 @@ return () => {
             );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
+            (_d = (_c = (_b = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
               moduleName,
@@ -182,3 +179,3 @@ dom: renderDom.current,
             });
-            (_h = (_g = (_f = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
+            (_h = (_g = (_f = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _f.lifecycle) == null ? void 0 : _g.afterBridgeDestroy) == null ? void 0 : _h.emit({
               moduleName,
@@ -299,2 +296,3 @@ dom: renderDom.current,
               ref,
+              instance: info.instance,
               ...props
@@ -323,9 +321,6 @@ }
 }
-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 })));
-    }
-  );
+function createRemoteComponentWithInstance(instance) {
+  return (info) => {
+    return createLazyRemoteComponent({ ...info, instance });
+  };
 }
@@ -356,7 +351,10 @@ var client = {};
 }
-function createBridgeComponent(bridgeInfo) {
+function createBridgeComponent$1(bridgeInfo) {
   return () => {
     const rootMap = /* @__PURE__ */ new Map();
-    const instance = getInstance();
-    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
+    const { instance } = bridgeInfo;
+    LoggerInstance.log(
+      `createBridgeComponent instance from props >>>`,
+      instance
+    );
     const RawComponent = (info) => {
@@ -430,3 +428,5 @@ const { appInfo, propsInfo, ...restProps } = info;
         }
-        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(info);
+        (_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeDestroy) == null ? void 0 : _f.emit(
+          info
+        );
       },
@@ -439,5 +439,23 @@ rawComponent: bridgeInfo.rootComponent,
 }
+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/router-v6.cjs.js

 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
+const ReactRouterDom$1 = require("react-router-dom/dist/index.js");
+const context = require("./context-BcJ-YlNr.cjs");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
-const context = require("./context-BcJ-YlNr.cjs");
 function _interopNamespaceDefault(e) {
@@ -22,3 +23,3 @@ const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
 }
-const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom);
+const ReactRouterDom__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDom$1);
 function WraperRouter(props) {
@@ -25,0 +26,0 @@ const { basename, ...propsRes } = props;

dist/router-v6.d.ts

@@ -9,4 +9,4 @@ import { default as default_2 } from 'react';
 
-export * from "react-router-dom/dist/index.js";
+export * from "react-router-dom/";
 
 export { }

dist/router-v6.es.js

 import React__default, { useContext } from "react";
-import * as ReactRouterDom from "react-router-dom/dist/index.js";
+import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
 export * from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-CUbFnlO5.js";
 function WraperRouter(props) {
@@ -15,3 +15,3 @@ const { basename, ...propsRes } = props;
     return /* @__PURE__ */ React__default.createElement(
-      ReactRouterDom.MemoryRouter,
+      ReactRouterDom$1.MemoryRouter,
       {
@@ -24,3 +24,3 @@ ...props,
   return /* @__PURE__ */ React__default.createElement(
-    ReactRouterDom.BrowserRouter,
+    ReactRouterDom$1.BrowserRouter,
     {
@@ -42,5 +42,5 @@ ...propsRes,
   });
-  const RouterProvider = ReactRouterDom["RouterProvider"];
-  const createMemoryRouter = ReactRouterDom["createMemoryRouter"];
-  const createBrowserRouter = ReactRouterDom["createBrowserRouter"];
+  const RouterProvider = ReactRouterDom$1["RouterProvider"];
+  const createMemoryRouter = ReactRouterDom$1["createMemoryRouter"];
+  const createBrowserRouter = ReactRouterDom$1["createBrowserRouter"];
   if (routerContextProps.memoryRoute) {
@@ -47,0 +47,0 @@ const MemeoryRouterInstance = createMemoryRouter(routers, {

package.json

 {
   "name": "@module-federation/bridge-react",
-  "version": "0.0.0-next-20241118100312",
+  "version": "0.0.0-next-20241119071808",
   "publishConfig": {
@@ -29,2 +29,7 @@ "access": "public"
     },
+    "./plugin": {
+      "types": "./dist/plugin.d.ts",
+      "import": "./dist/plugin.es.js",
+      "require": "./dist/plugin.es.js"
+    },
     "./router-v5": {
@@ -45,5 +50,4 @@ "types": "./dist/router-v5.d.ts",
     "react-error-boundary": "^4.0.13",
-    "@module-federation/bridge-shared": "0.0.0-next-20241118100312",
-    "@module-federation/sdk": "0.0.0-next-20241118100312",
-    "@module-federation/runtime": "0.0.0-next-20241118100312"
+    "@module-federation/bridge-shared": "0.0.0-next-20241119071808",
+    "@module-federation/sdk": "0.0.0-next-20241119071808"
   },
@@ -68,3 +72,4 @@ "peerDependencies": {
     "vite": "^5.2.14",
-    "vite-plugin-dts": "^3.9.1"
+    "vite-plugin-dts": "^3.9.1",
+    "@module-federation/runtime": "0.0.0-next-20241119071808"
   },
@@ -71,0 +76,0 @@ "scripts": {

src/index.ts

@@ -1,3 +0,22 @@
-export { createRemoteComponent } from './create';
-export { createBridgeComponent } from './provider';
+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 type {
@@ -4,0 +23,0 @@ ProviderParams,

src/utils.ts

 import React from 'react';
-import { FederationHost } from '@module-federation/runtime';
 import { createLogger } from '@module-federation/sdk';
@@ -4,0 +3,0 @@

vite.config.ts

 import { defineConfig } from 'vite';
-import vue from '@vitejs/plugin-vue';
+// import vue from '@vitejs/plugin-vue';
 import path from 'path';
 import dts from 'vite-plugin-dts';
-import react from '@vitejs/plugin-react';
+// import react from '@vitejs/plugin-react';
 import packageJson from './package.json';
@@ -24,2 +24,3 @@
         index: path.resolve(__dirname, 'src/index.ts'),
+        plugin: path.resolve(__dirname, 'src/plugin.ts'),
         router: path.resolve(__dirname, 'src/router.tsx'),
@@ -40,3 +41,2 @@ 'router-v5': path.resolve(__dirname, 'src/router-v5.tsx'),
         'react-router-dom/dist/index.js',
-        '@module-federation/runtime',
       ],
@@ -49,9 +49,9 @@ plugins: [
               const chunk = bundle[fileName];
-              // if (fileName.includes('router-v6') && chunk.type === 'chunk') {
-              //   chunk.code = chunk.code.replace(
-              //     // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
-              //     /react-router-dom\/(?=[\'\"\`])/g,
-              //     'react-router-dom/dist/index.js',
-              //   );
-              // }
+              if (fileName.includes('router-v6') && chunk.type === 'chunk') {
+                chunk.code = chunk.code.replace(
+                  // Match 'react-router-dom/' followed by single quotes, double quotes, or backticks, replacing only 'react-router-dom/' to react-router-v6 dist file structure
+                  /react-router-dom\/(?=[\'\"\`])/g,
+                  'react-router-dom/dist/index.js',
+                );
+              }
 
@@ -58,0 +58,0 @@ if (fileName.includes('router-v5') && chunk.type === 'chunk') {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

117776

increased by2.72%

Dependency count

7

decreased by-12.5%

Number of package files

41

increased by10.81%

Lines of code

3202

increased by3.09%

Worsened metrics

Dev dependency count

14

increased by7.69%

Dependency changes

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

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

• - Removed@module-federation/runtime@0.0.0-next-20241118100312

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

• - Removed@module-federation/error-codes@0.0.0-next-20241118100312(transitive)

• - Removed@module-federation/runtime@0.0.0-next-20241118100312(transitive)

• - Removed@module-federation/runtime-core@0.0.0-next-20241118100312(transitive)

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

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

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