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

Comparing version 0.0.0-next-20241118091452 to 0.0.0-next-20241118092546

CHANGELOG.md

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

dist/index.cjs.js

 "use strict";
 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 runtime = require("@module-federation/runtime");
-const ReactDOM = require("react-dom");
-function _interopNamespaceDefault(e2) {
-  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
-  if (e2) {
-    for (const k in e2) {
-      if (k !== "default") {
-        const d = Object.getOwnPropertyDescriptor(e2, k);
-        Object.defineProperty(n, k, d.get ? d : {
-          enumerable: true,
-          get: () => e2[k]
-        });
-      }
-    }
-  }
-  n.default = e2;
-  return Object.freeze(n);
-}
-const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
-const ReactRouterDOM__namespace = /* @__PURE__ */ _interopNamespaceDefault(ReactRouterDOM);
-const ErrorBoundaryContext = React.createContext(null);
-const initialState = {
-  didCatch: false,
-  error: null
-};
-class ErrorBoundary extends React.Component {
-  constructor(props) {
-    super(props);
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      didCatch: true,
-      error
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error
-    } = this.state;
-    if (error !== null) {
-      var _this$props$onReset, _this$props;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
-        args,
-        reason: "imperative-api"
-      });
-      this.setState(initialState);
-    }
-  }
-  componentDidCatch(error, info) {
-    var _this$props$onError, _this$props2;
-    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      didCatch
-    } = this.state;
-    const {
-      resetKeys
-    } = this.props;
-    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-      var _this$props$onReset2, _this$props3;
-      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys"
-      });
-      this.setState(initialState);
-    }
-  }
-  render() {
-    const {
-      children,
-      fallbackRender,
-      FallbackComponent,
-      fallback
-    } = this.props;
-    const {
-      didCatch,
-      error
-    } = this.state;
-    let childToRender = children;
-    if (didCatch) {
-      const props = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = React.createElement(FallbackComponent, props);
-      } else if (fallback === null || React.isValidElement(fallback)) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-    return React.createElement(ErrorBoundaryContext.Provider, {
-      value: {
-        didCatch,
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, childToRender);
-  }
-}
-function hasArrayChanged() {
-  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
-}
-function e() {
-  const t = new PopStateEvent("popstate", { state: window.history.state });
-  window.dispatchEvent(t);
-}
-const RemoteAppWrapper = React.forwardRef(function(props, ref) {
-  const RemoteApp2 = () => {
-    context.LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
-    const {
-      moduleName,
-      memoryRoute,
-      basename,
-      providerInfo,
-      className,
-      style,
-      fallback,
-      ...resProps
-    } = props;
-    const rootRef = ref && "current" in ref ? ref : React.useRef(null);
-    const renderDom = React.useRef(null);
-    const providerInfoRef = React.useRef(null);
-    const hostInstance = runtime.getInstance();
-    context.LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
-    React.useEffect(() => {
-      const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const providerReturn = providerInfo();
-        providerInfoRef.current = providerReturn;
-        let renderProps = {
-          moduleName,
-          dom: rootRef.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        };
-        renderDom.current = rootRef.current;
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent render >>>`,
-          renderProps
-        );
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
-        );
-        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(
-          renderProps
-        )) || {};
-        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-        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
-        );
-      });
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
-          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-            context.LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { moduleName, basename, dom: renderDom.current }
-            );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-              moduleName,
-              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({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-          }
-        });
-      };
-    }, []);
-    const rootComponentClassName = `${context.getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
-    return /* @__PURE__ */ React.createElement(
-      "div",
-      {
-        className: rootComponentClassName,
-        style: props == null ? void 0 : props.style,
-        ref: rootRef
-      }
-    );
-  };
-  RemoteApp2["__APP_VERSION__"] = "0.7.4";
-  return /* @__PURE__ */ React.createElement(RemoteApp2, null);
-});
-function withRouterData(WrappedComponent) {
-  const Component = React.forwardRef(function(props, ref) {
-    var _a;
-    let enableDispathPopstate = false;
-    let routerContextVal;
-    try {
-      ReactRouterDOM__namespace.useLocation();
-      enableDispathPopstate = true;
-    } catch {
-      enableDispathPopstate = false;
-    }
-    let basename = "/";
-    if (!props.basename && enableDispathPopstate) {
-      const ReactRouterDOMAny = ReactRouterDOM__namespace;
-      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
-      const useHistory = ReactRouterDOMAny["useHistory"];
-      const useHref = ReactRouterDOMAny["useHref"];
-      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
-      if (UNSAFE_RouteContext) {
-        if (useHref) {
-          basename = useHref == null ? void 0 : useHref("/");
-        }
-        routerContextVal = React.useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
-          basename = context.pathJoin(basename, pathnameBase || "/");
-        }
-      } else {
-        const match = useRouteMatch == null ? void 0 : useRouteMatch();
-        if (useHistory) {
-          const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
-        }
-        if (match) {
-          basename = context.pathJoin(basename, (match == null ? void 0 : match.path) || "/");
-        }
-      }
-    }
-    context.LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate
-    });
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM__namespace.useLocation();
-      const [pathname, setPathname] = React.useState(location.pathname);
-      React.useEffect(() => {
-        if (pathname !== "" && pathname !== location.pathname) {
-          context.LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            name: props.name,
-            pathname: location.pathname
-          });
-          e();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-    return /* @__PURE__ */ React.createElement(WrappedComponent, { ...props, basename, ref });
-  });
-  return React.forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React.createElement(Component, { ...props, ref });
-  });
-}
-const RemoteApp = withRouterData(RemoteAppWrapper);
-function createLazyRemoteComponent(info) {
-  const exportName = (info == null ? void 0 : info.export) || "default";
-  return React.lazy(async () => {
-    context.LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName
-    });
-    try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-      context.LoggerInstance.log(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
-      );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = React.forwardRef((props, ref) => {
-          return /* @__PURE__ */ React.createElement(
-            RemoteApp,
-            {
-              moduleName,
-              providerInfo: exportFn,
-              exportName: info.export || "default",
-              fallback: info.fallback,
-              ref,
-              ...props
-            }
-          );
-        });
-        return {
-          default: RemoteAppComponent
-        };
-      } else {
-        context.LoggerInstance.log(
-          `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName
-          )}`
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-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;
-if (process.env.NODE_ENV === "production") {
-  client.createRoot = m.createRoot;
-  client.hydrateRoot = m.hydrateRoot;
-} else {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  client.createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  client.hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
-function createBridgeComponent(bridgeInfo) {
-  return () => {
-    const rootMap = /* @__PURE__ */ new Map();
-    const instance = runtime.getInstance();
-    context.LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-    const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React__namespace.createElement(context.RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React__namespace.createElement(
-        bridgeInfo.rootComponent,
-        {
-          ...propsInfo,
-          basename,
-          ...restProps
-        }
-      ));
-    };
-    return {
-      async render(info) {
-        var _a, _b, _c, _d, _e, _f;
-        context.LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          ...propsInfo
-        } = info;
-        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(info)) || {};
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          /* @__PURE__ */ React__namespace.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React__namespace.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-            }
-          ))
-        );
-        if (context.atLeastReact18(React__namespace)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
-          }
-        } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
-        }
-        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
-      },
-      async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
-        context.LoggerInstance.log(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
-        if (context.atLeastReact18(React__namespace)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
-          rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
-        }
-        (_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);
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
-      }
-    };
-  };
-}
-exports.createBridgeComponent = createBridgeComponent;
-exports.createRemoteComponent = createRemoteComponent;
+const plugin = require("./plugin-CfJaHqe4.cjs");
+exports.BridgeReactPlugin = plugin.BridgeReactPlugin;
+exports.createBridgeComponent = plugin.createBridgeComponent;
+exports.createRemoteComponent = plugin.createRemoteComponent;

dist/index.d.ts

@@ -5,5 +5,9 @@ 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;
+
 export declare function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>): () => {
@@ -16,8 +20,3 @@ render(info: RenderParams): 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>>;
+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>>;
 
@@ -53,5 +52,14 @@ declare type DestroyParams = {
 
+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 +66,0 @@

dist/index.es.js

@@ -1,431 +0,6 @@
-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 { getInstance } from "@module-federation/runtime";
-import ReactDOM from "react-dom";
-const ErrorBoundaryContext = createContext(null);
-const initialState = {
-  didCatch: false,
-  error: null
-};
-class ErrorBoundary extends Component {
-  constructor(props) {
-    super(props);
-    this.resetErrorBoundary = this.resetErrorBoundary.bind(this);
-    this.state = initialState;
-  }
-  static getDerivedStateFromError(error) {
-    return {
-      didCatch: true,
-      error
-    };
-  }
-  resetErrorBoundary() {
-    const {
-      error
-    } = this.state;
-    if (error !== null) {
-      var _this$props$onReset, _this$props;
-      for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-        args[_key] = arguments[_key];
-      }
-      (_this$props$onReset = (_this$props = this.props).onReset) === null || _this$props$onReset === void 0 ? void 0 : _this$props$onReset.call(_this$props, {
-        args,
-        reason: "imperative-api"
-      });
-      this.setState(initialState);
-    }
-  }
-  componentDidCatch(error, info) {
-    var _this$props$onError, _this$props2;
-    (_this$props$onError = (_this$props2 = this.props).onError) === null || _this$props$onError === void 0 ? void 0 : _this$props$onError.call(_this$props2, error, info);
-  }
-  componentDidUpdate(prevProps, prevState) {
-    const {
-      didCatch
-    } = this.state;
-    const {
-      resetKeys
-    } = this.props;
-    if (didCatch && prevState.error !== null && hasArrayChanged(prevProps.resetKeys, resetKeys)) {
-      var _this$props$onReset2, _this$props3;
-      (_this$props$onReset2 = (_this$props3 = this.props).onReset) === null || _this$props$onReset2 === void 0 ? void 0 : _this$props$onReset2.call(_this$props3, {
-        next: resetKeys,
-        prev: prevProps.resetKeys,
-        reason: "keys"
-      });
-      this.setState(initialState);
-    }
-  }
-  render() {
-    const {
-      children,
-      fallbackRender,
-      FallbackComponent,
-      fallback
-    } = this.props;
-    const {
-      didCatch,
-      error
-    } = this.state;
-    let childToRender = children;
-    if (didCatch) {
-      const props = {
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      };
-      if (typeof fallbackRender === "function") {
-        childToRender = fallbackRender(props);
-      } else if (FallbackComponent) {
-        childToRender = createElement(FallbackComponent, props);
-      } else if (fallback === null || isValidElement(fallback)) {
-        childToRender = fallback;
-      } else {
-        throw error;
-      }
-    }
-    return createElement(ErrorBoundaryContext.Provider, {
-      value: {
-        didCatch,
-        error,
-        resetErrorBoundary: this.resetErrorBoundary
-      }
-    }, childToRender);
-  }
-}
-function hasArrayChanged() {
-  let a = arguments.length > 0 && arguments[0] !== void 0 ? arguments[0] : [];
-  let b = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : [];
-  return a.length !== b.length || a.some((item, index) => !Object.is(item, b[index]));
-}
-function e() {
-  const t = new PopStateEvent("popstate", { state: window.history.state });
-  window.dispatchEvent(t);
-}
-const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const RemoteApp2 = () => {
-    LoggerInstance.log(`RemoteAppWrapper RemoteApp props >>>`, { props });
-    const {
-      moduleName,
-      memoryRoute,
-      basename,
-      providerInfo,
-      className,
-      style,
-      fallback,
-      ...resProps
-    } = props;
-    const rootRef = ref && "current" in ref ? ref : useRef(null);
-    const renderDom = useRef(null);
-    const providerInfoRef = useRef(null);
-    const hostInstance = getInstance();
-    LoggerInstance.log(`RemoteAppWrapper hostInstance >>>`, hostInstance);
-    useEffect(() => {
-      const renderTimeout = setTimeout(() => {
-        var _a, _b, _c, _d, _e, _f;
-        const providerReturn = providerInfo();
-        providerInfoRef.current = providerReturn;
-        let renderProps = {
-          moduleName,
-          dom: rootRef.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        };
-        renderDom.current = rootRef.current;
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent render >>>`,
-          renderProps
-        );
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent hostInstance >>>`,
-          hostInstance
-        );
-        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(
-          renderProps
-        )) || {};
-        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-        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
-        );
-      });
-      return () => {
-        clearTimeout(renderTimeout);
-        setTimeout(() => {
-          var _a, _b, _c, _d, _e, _f, _g, _h;
-          if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-            LoggerInstance.log(
-              `createRemoteComponent LazyComponent destroy >>>`,
-              { moduleName, basename, dom: renderDom.current }
-            );
-            (_d = (_c = (_b = hostInstance == null ? void 0 : hostInstance.bridgeHook) == null ? void 0 : _b.lifecycle) == null ? void 0 : _c.beforeBridgeDestroy) == null ? void 0 : _d.emit({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-            (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-              moduleName,
-              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({
-              moduleName,
-              dom: renderDom.current,
-              basename,
-              memoryRoute,
-              fallback,
-              ...resProps
-            });
-          }
-        });
-      };
-    }, []);
-    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props == null ? void 0 : props.className}`;
-    return /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: rootComponentClassName,
-        style: props == null ? void 0 : props.style,
-        ref: rootRef
-      }
-    );
-  };
-  RemoteApp2["__APP_VERSION__"] = "0.7.4";
-  return /* @__PURE__ */ React__default.createElement(RemoteApp2, null);
-});
-function withRouterData(WrappedComponent) {
-  const Component2 = forwardRef(function(props, ref) {
-    var _a;
-    let enableDispathPopstate = false;
-    let routerContextVal;
-    try {
-      ReactRouterDOM.useLocation();
-      enableDispathPopstate = true;
-    } catch {
-      enableDispathPopstate = false;
-    }
-    let basename = "/";
-    if (!props.basename && enableDispathPopstate) {
-      const ReactRouterDOMAny = ReactRouterDOM;
-      const useRouteMatch = ReactRouterDOMAny["useRouteMatch"];
-      const useHistory = ReactRouterDOMAny["useHistory"];
-      const useHref = ReactRouterDOMAny["useHref"];
-      const UNSAFE_RouteContext = ReactRouterDOMAny["UNSAFE_RouteContext"];
-      if (UNSAFE_RouteContext) {
-        if (useHref) {
-          basename = useHref == null ? void 0 : useHref("/");
-        }
-        routerContextVal = useContext(UNSAFE_RouteContext);
-        if (routerContextVal && routerContextVal.matches && routerContextVal.matches.length > 0) {
-          const matchIndex = routerContextVal.matches.length - 1;
-          const pathnameBase = routerContextVal.matches[matchIndex].pathnameBase;
-          basename = pathJoin(basename, pathnameBase || "/");
-        }
-      } else {
-        const match = useRouteMatch == null ? void 0 : useRouteMatch();
-        if (useHistory) {
-          const history = useHistory == null ? void 0 : useHistory();
-          basename = (_a = history == null ? void 0 : history.createHref) == null ? void 0 : _a.call(history, { pathname: "/" });
-        }
-        if (match) {
-          basename = pathJoin(basename, (match == null ? void 0 : match.path) || "/");
-        }
-      }
-    }
-    LoggerInstance.log(`createRemoteComponent withRouterData >>>`, {
-      ...props,
-      basename,
-      routerContextVal,
-      enableDispathPopstate
-    });
-    if (enableDispathPopstate) {
-      const location = ReactRouterDOM.useLocation();
-      const [pathname, setPathname] = useState(location.pathname);
-      useEffect(() => {
-        if (pathname !== "" && pathname !== location.pathname) {
-          LoggerInstance.log(`createRemoteComponent dispatchPopstateEnv >>>`, {
-            name: props.name,
-            pathname: location.pathname
-          });
-          e();
-        }
-        setPathname(location.pathname);
-      }, [location]);
-    }
-    return /* @__PURE__ */ React__default.createElement(WrappedComponent, { ...props, basename, ref });
-  });
-  return forwardRef(function(props, ref) {
-    return /* @__PURE__ */ React__default.createElement(Component2, { ...props, ref });
-  });
-}
-const RemoteApp = withRouterData(RemoteAppWrapper);
-function createLazyRemoteComponent(info) {
-  const exportName = (info == null ? void 0 : info.export) || "default";
-  return React__default.lazy(async () => {
-    LoggerInstance.log(`createRemoteComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName
-    });
-    try {
-      const m2 = await info.loader();
-      const moduleName = m2 && m2[Symbol.for("mf_module_id")];
-      LoggerInstance.log(
-        `createRemoteComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m2, exportName }
-      );
-      const exportFn = m2[exportName];
-      if (exportName in m2 && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, ref) => {
-          return /* @__PURE__ */ React__default.createElement(
-            RemoteApp,
-            {
-              moduleName,
-              providerInfo: exportFn,
-              exportName: info.export || "default",
-              fallback: info.fallback,
-              ref,
-              ...props
-            }
-          );
-        });
-        return {
-          default: RemoteAppComponent
-        };
-      } else {
-        LoggerInstance.log(
-          `createRemoteComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m2, exportName }
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName
-          )}`
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-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;
-if (process.env.NODE_ENV === "production") {
-  client.createRoot = m.createRoot;
-  client.hydrateRoot = m.hydrateRoot;
-} else {
-  var i = m.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED;
-  client.createRoot = function(c, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.createRoot(c, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-  client.hydrateRoot = function(c, h, o) {
-    i.usingClientEntryPoint = true;
-    try {
-      return m.hydrateRoot(c, h, o);
-    } finally {
-      i.usingClientEntryPoint = false;
-    }
-  };
-}
-function createBridgeComponent(bridgeInfo) {
-  return () => {
-    const rootMap = /* @__PURE__ */ new Map();
-    const instance = getInstance();
-    LoggerInstance.log(`createBridgeComponent remote instance`, instance);
-    const RawComponent = (info) => {
-      const { appInfo, propsInfo, ...restProps } = info;
-      const { moduleName, memoryRoute, basename = "/" } = appInfo;
-      return /* @__PURE__ */ React.createElement(RouterContext.Provider, { value: { moduleName, basename, memoryRoute } }, /* @__PURE__ */ React.createElement(
-        bridgeInfo.rootComponent,
-        {
-          ...propsInfo,
-          basename,
-          ...restProps
-        }
-      ));
-    };
-    return {
-      async render(info) {
-        var _a, _b, _c, _d, _e, _f;
-        LoggerInstance.log(`createBridgeComponent render Info`, info);
-        const {
-          moduleName,
-          dom,
-          basename,
-          memoryRoute,
-          fallback,
-          ...propsInfo
-        } = info;
-        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(info)) || {};
-        const rootComponentWithErrorBoundary = (
-          // set ErrorBoundary for RawComponent rendering error, usually caused by user app rendering error
-          /* @__PURE__ */ React.createElement(ErrorBoundary, { FallbackComponent: fallback }, /* @__PURE__ */ React.createElement(
-            RawComponent,
-            {
-              appInfo: {
-                moduleName,
-                basename,
-                memoryRoute
-              },
-              propsInfo: { ...propsInfo, ...beforeBridgeRenderRes == null ? void 0 : beforeBridgeRenderRes.extraProps }
-            }
-          ))
-        );
-        if (atLeastReact18(React)) {
-          if (bridgeInfo == null ? void 0 : bridgeInfo.render) {
-            Promise.resolve(
-              bridgeInfo == null ? void 0 : bridgeInfo.render(rootComponentWithErrorBoundary, dom)
-            ).then((root) => rootMap.set(info.dom, root));
-          } else {
-            const root = client.createRoot(info.dom);
-            root.render(rootComponentWithErrorBoundary);
-            rootMap.set(info.dom, root);
-          }
-        } else {
-          const renderFn = (bridgeInfo == null ? void 0 : bridgeInfo.render) || ReactDOM.render;
-          renderFn == null ? void 0 : renderFn(rootComponentWithErrorBoundary, info.dom);
-        }
-        ((_f = (_e = (_d = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _d.lifecycle) == null ? void 0 : _e.afterBridgeRender) == null ? void 0 : _f.emit(info)) || {};
-      },
-      async destroy(info) {
-        var _a, _b, _c, _d, _e, _f;
-        LoggerInstance.log(`createBridgeComponent destroy Info`, {
-          dom: info.dom
-        });
-        (_c = (_b = (_a = instance == null ? void 0 : instance.bridgeHook) == null ? void 0 : _a.lifecycle) == null ? void 0 : _b.beforeBridgeDestroy) == null ? void 0 : _c.emit(info);
-        if (atLeastReact18(React)) {
-          const root = rootMap.get(info.dom);
-          root == null ? void 0 : root.unmount();
-          rootMap.delete(info.dom);
-        } else {
-          ReactDOM.unmountComponentAtNode(info.dom);
-        }
-        (_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);
-      },
-      rawComponent: bridgeInfo.rootComponent,
-      __BRIDGE_FN__: (_args) => {
-      }
-    };
-  };
-}
+import { B, a, c } from "./plugin-qjDRExZS.js";
 export {
-  createBridgeComponent,
-  createRemoteComponent
+  B as BridgeReactPlugin,
+  a as createBridgeComponent,
+  c as 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-20241118091452",
+  "version": "0.0.0-next-20241118092546",
   "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-20241118091452",
-    "@module-federation/sdk": "0.0.0-next-20241118091452",
-    "@module-federation/runtime": "0.0.0-next-20241118091452"
+    "@module-federation/bridge-shared": "0.0.0-next-20241118092546",
+    "@module-federation/sdk": "0.0.0-next-20241118092546"
   },
@@ -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-20241118092546"
   },
@@ -71,0 +76,0 @@ "scripts": {

src/index.ts

 export { createRemoteComponent } from './create';
 export { createBridgeComponent } from './provider';
+export { default as BridgeReactPlugin } from './plugin';
+
 export type {
@@ -4,0 +6,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

118417

increased by3.28%

Dependency count

7

decreased by-12.5%

Number of package files

43

increased by16.22%

Lines of code

3224

increased by3.8%

Worsened metrics

Dev dependency count

14

increased by7.69%

Dependency changes

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

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

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

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

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

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

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

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

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