@module-federation/bridge-react 0.0.0-next-20250223132729 → 0.0.0-next-20250224065053

package/dist/router-v6.cjs.js

@@ -2,7 +2,7 @@
 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-BwD5jfgB.cjs");
+const context = require("./context-CRuF6Lwb.cjs");
 const ReactRouterDom = require("react-router-dom/dist/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v6.es.js

@@ -1,6 +1,6 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom$1 from "react-router-dom/dist/index.js";
-import { R as RouterContext, L as LoggerInstance } from "./context-BwUPFSB2.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-xD9r7Htw.js";
 export * from "react-router-dom/dist/index.js";
 function WraperRouter(props) {
   const { basename, ...propsRes } = props;

package/dist/router.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom = require("react-router-dom/");
-const context = require("./context-BwD5jfgB.cjs");
+const context = require("./context-CRuF6Lwb.cjs");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {

package/dist/router.es.js

@@ -1,7 +1,7 @@
 import React__default, { useContext } from "react";
 import * as ReactRouterDom from "react-router-dom/";
 export * from "react-router-dom/";
-import { R as RouterContext, L as LoggerInstance } from "./context-BwUPFSB2.js";
+import { R as RouterContext, L as LoggerInstance } from "./context-xD9r7Htw.js";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/package.json

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

package/src/provider/create.tsx

@@ -86,13 +86,9 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
             bridgeInfo?.render(rootComponentWithErrorBoundary, dom),
           ).then((root: RootType) => rootMap.set(info.dom, root));
         } else {
-          console.log('--------createBridgeComponent render Info', info);
-          let root = rootMap.get(info.dom);
-          if (!root) {
-            root = createRoot(info.dom);
-            rootMap.set(info.dom, root);
-          }
+          const root = createRoot(info.dom);
           root.render(rootComponentWithErrorBoundary);
+          rootMap.set(info.dom, root);
         }
 
         instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(info) || {};
@@ -101,7 +97,6 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
       destroy(info: DestroyParams) {
         LoggerInstance.debug(`createBridgeComponent destroy Info`, info);
         const root = rootMap.get(info.dom);
-        console.log('--------createBridgeComponent destroy Info', info);
         if (root) {
           if ('unmount' in root) {
             root.unmount();
@@ -110,7 +105,7 @@ export function createBridgeComponent<T>(bridgeInfo: ProviderFnParams<T>) {
           }
           rootMap.delete(info.dom);
         }
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit(info);
+        instance?.bridgeHook?.lifecycle?.destroyBridge?.emit(info);
       },
     };
   };

package/src/remote/component.tsx

@@ -40,98 +40,112 @@ const RemoteAppWrapper = forwardRef(function (
   props: RemoteAppParams & RenderFnParams,
   ref,
 ) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    ...resProps
-  } = props;
-
-  const instance = federationRuntime.instance;
-  const rootRef: React.MutableRefObject<HTMLDivElement | null> =
-    ref && 'current' in ref
-      ? (ref as React.MutableRefObject<HTMLDivElement | null>)
-      : useRef(null);
-
-  const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
-  const providerInfoRef = useRef<any>(null);
-  const [initialized, setInitialized] = useState(false);
-
-  LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
-
-  // 初始化远程组件
-  useEffect(() => {
-    if (initialized) return;
-
-    const providerReturn = providerInfo();
-    providerInfoRef.current = providerReturn;
-    setInitialized(true);
-
-    return () => {
-      if (providerInfoRef.current?.destroy) {
-        LoggerInstance.debug(
-          `createRemoteComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current },
-        );
+  const RemoteApp = () => {
+    LoggerInstance.debug(`RemoteAppWrapper RemoteApp props >>>`, { props });
+    const {
+      moduleName,
+      memoryRoute,
+      basename,
+      providerInfo,
+      className,
+      style,
+      fallback,
+      ...resProps
+    } = props;
 
-        instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
-          moduleName,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps,
-        });
+    const instance = federationRuntime.instance;
+    const rootRef: React.MutableRefObject<HTMLDivElement | null> =
+      ref && 'current' in ref
+        ? (ref as React.MutableRefObject<HTMLDivElement | null>)
+        : useRef(null);
 
-        providerInfoRef.current?.destroy({
-          moduleName,
-          dom: renderDom.current,
-        });
+    const renderDom: React.MutableRefObject<HTMLElement | null> = useRef(null);
+    const providerInfoRef = useRef<any>(null);
 
-        instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+    LoggerInstance.debug(`RemoteAppWrapper instance from props >>>`, instance);
+
+    useEffect(() => {
+      const renderTimeout = setTimeout(() => {
+        const providerReturn = providerInfo();
+        providerInfoRef.current = providerReturn;
+
+        let renderProps = {
           moduleName,
-          dom: renderDom.current,
+          dom: rootRef.current,
           basename,
           memoryRoute,
           fallback,
           ...resProps,
-        });
-      }
-    };
-  }, [moduleName]);
+        };
+        renderDom.current = rootRef.current;
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent render >>>`,
+          renderProps,
+        );
 
-  // 处理 props 更新
-  useEffect(() => {
-    if (!initialized || !providerInfoRef.current) return;
+        LoggerInstance.debug(
+          `createRemoteComponent LazyComponent hostInstance >>>`,
+          instance,
+        );
+        const beforeBridgeRenderRes =
+          instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(
+            renderProps,
+          ) || {};
+        // @ts-ignore
+        renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
+        providerReturn.render(renderProps);
+        instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
+      });
+
+      return () => {
+        clearTimeout(renderTimeout);
+        setTimeout(() => {
+          if (providerInfoRef.current?.destroy) {
+            LoggerInstance.debug(
+              `createRemoteComponent LazyComponent destroy >>>`,
+              { moduleName, basename, dom: renderDom.current },
+            );
+
+            instance?.bridgeHook?.lifecycle?.beforeBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
+
+            providerInfoRef.current?.destroy({
+              moduleName,
+              dom: renderDom.current,
+            });
+
+            instance?.bridgeHook?.lifecycle?.afterBridgeDestroy?.emit({
+              moduleName,
+              dom: renderDom.current,
+              basename,
+              memoryRoute,
+              fallback,
+              ...resProps,
+            });
+          }
+        });
+      };
+    }, []);
+
+    // bridge-remote-root
+    const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${props?.className}`;
+    return (
+      <div
+        className={rootComponentClassName}
+        style={props?.style}
+        ref={rootRef}
+      ></div>
+    );
+  };
 
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps,
-    };
-    renderDom.current = rootRef.current;
-
-    const beforeBridgeRenderRes =
-      instance?.bridgeHook?.lifecycle?.beforeBridgeRender?.emit(renderProps) ||
-      {};
-    // @ts-ignore
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(renderProps);
-    instance?.bridgeHook?.lifecycle?.afterBridgeRender?.emit(renderProps);
-  }, [initialized, ...Object.values(props)]);
-
-  // bridge-remote-root
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
-  return (
-    <div className={rootComponentClassName} style={style} ref={rootRef}></div>
-  );
+  (RemoteApp as any)['__APP_VERSION__'] = __APP_VERSION__;
+  return <RemoteApp />;
 });
 
 interface ExtraDataProps {

package/src/remote/create.tsx

@@ -100,9 +100,9 @@ export function createRemoteComponent<T, E extends keyof T>(
       : {}
     : {};
 
-  const LazyComponent = createLazyRemoteComponent(info);
   return forwardRef<HTMLDivElement, ProviderParams & RawComponentType>(
     (props, ref) => {
+      const LazyComponent = createLazyRemoteComponent(info);
       return (
         <ErrorBoundary FallbackComponent={info.fallback}>
           <React.Suspense fallback={info.loading}>

package/dist/context-BwD5jfgB.cjs

@@ -1,364 +0,0 @@
-"use strict";
-const React = require("react");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var browser_exports = {};
-__export(browser_exports, {
-  createLogger: () => createLogger2,
-  logger: () => logger
-});
-var browser = __toCommonJS(browser_exports);
-var supportsSubstitutions = void 0;
-var supportColor = () => {
-  if (typeof supportsSubstitutions !== "undefined") {
-    return supportsSubstitutions;
-  }
-  const originalConsoleLog = console.log;
-  try {
-    const testString = "color test";
-    const css = "color: red;";
-    supportsSubstitutions = false;
-    console.log = (...args) => {
-      if (args[0] === `%c${testString}` && args[1] === css) {
-        supportsSubstitutions = true;
-      }
-    };
-    console.log(`%c${testString}`, css);
-  } catch (e) {
-    supportsSubstitutions = false;
-  } finally {
-    console.log = originalConsoleLog;
-  }
-  return supportsSubstitutions;
-};
-var ansiToCss = {
-  "bold": "font-weight: bold;",
-  "red": "color: red;",
-  "green": "color: green;",
-  "orange": "color: orange;",
-  "dodgerblue": "color: dodgerblue;",
-  "magenta": "color: magenta;",
-  "gray": "color: gray;"
-};
-var formatter = (key) => supportColor() ? (input) => {
-  if (Array.isArray(input)) {
-    const [label, style] = input;
-    return [`%c${label.replace("%c", "")}`, style ? `${ansiToCss[key]}${style}` : `${ansiToCss[key] || ""}`];
-  }
-  return [`%c${String(input).replace("%c", "")}`, ansiToCss[key] || ""];
-} : (input) => [String(input)];
-var bold = formatter("bold");
-var red = formatter("red");
-var green = formatter("green");
-var orange = formatter("orange");
-var dodgerblue = formatter("dodgerblue");
-var magenta = formatter("magenta");
-formatter("gray");
-function getLabel(type, logType, labels) {
-  let label = [""];
-  if ("label" in logType) {
-    const labelText = type !== "log" ? labels[type] : void 0;
-    label = [labelText || logType.label || ""];
-    if (logType.color) {
-      const colorResult = logType.color(label[0]);
-      if (Array.isArray(colorResult) && colorResult.length === 2) {
-        label = bold([colorResult[0], colorResult[1]]);
-      } else {
-        label = bold(colorResult[0] || "");
-      }
-    } else {
-      label = bold(label[0]);
-    }
-  }
-  label = label.filter(Boolean);
-  return label;
-}
-function finalLog(label, text, args, message) {
-  if (label.length) {
-    if (Array.isArray(message)) {
-      console.log(...label, ...message, ...args);
-    } else {
-      console.log(...label, text, ...args);
-    }
-  } else {
-    Array.isArray(message) ? console.log(...message) : console.log(text, ...args);
-  }
-}
-var LOG_LEVEL = {
-  error: 0,
-  warn: 1,
-  info: 2,
-  log: 3,
-  verbose: 4
-};
-var errorStackRegExp = /at\s.*:\d+:\d+[\s\)]*$/;
-var anonymousErrorStackRegExp = /at\s.*\(<anonymous>\)$/;
-var isErrorStackMessage = (message) => errorStackRegExp.test(message) || anonymousErrorStackRegExp.test(message);
-function validateOptions(options) {
-  const validatedOptions = { ...options };
-  if (options.labels && typeof options.labels !== "object") {
-    throw new Error("Labels must be an object");
-  }
-  if (options.level && typeof options.level !== "string") {
-    throw new Error("Level must be a string");
-  }
-  return validatedOptions;
-}
-var createLogger$1 = (options = {}, { getLabel: getLabel2, handleError, finalLog: finalLog2, greet, LOG_TYPES: LOG_TYPES2 }) => {
-  const validatedOptions = validateOptions(options);
-  let maxLevel = validatedOptions.level || "log";
-  let customLabels = validatedOptions.labels || {};
-  let log = (type, message, ...args) => {
-    if (LOG_LEVEL[LOG_TYPES2[type].level] > LOG_LEVEL[maxLevel]) {
-      return;
-    }
-    if (message === void 0 || message === null) {
-      return console.log();
-    }
-    let logType = LOG_TYPES2[type];
-    let text = "";
-    const label = getLabel2(type, logType, customLabels);
-    if (message instanceof Error) {
-      if (message.stack) {
-        let [name, ...rest] = message.stack.split("\n");
-        if (name.startsWith("Error: ")) {
-          name = name.slice(7);
-        }
-        text = `${name}
-${handleError(rest.join("\n"))}`;
-      } else {
-        text = message.message;
-      }
-    } else if (logType.level === "error" && typeof message === "string") {
-      let lines = message.split("\n");
-      text = lines.map((line) => isErrorStackMessage(line) ? handleError(line) : line).join("\n");
-    } else {
-      text = `${message}`;
-    }
-    finalLog2(label, text, args, message);
-  };
-  let logger2 = {
-    // greet
-    greet: (message) => log("log", greet(message))
-  };
-  Object.keys(LOG_TYPES2).forEach((key) => {
-    logger2[key] = (...args) => log(key, ...args);
-  });
-  Object.defineProperty(logger2, "level", {
-    get: () => maxLevel,
-    set(val) {
-      maxLevel = val;
-    }
-  });
-  Object.defineProperty(logger2, "labels", {
-    get: () => customLabels,
-    set(val) {
-      customLabels = val;
-    }
-  });
-  logger2.override = (customLogger) => {
-    Object.assign(logger2, customLogger);
-  };
-  return logger2;
-};
-var startColor = [189, 255, 243];
-var endColor = [74, 194, 154];
-var isWord = (char) => !/[\s\n]/.test(char);
-function gradient(message) {
-  if (!supportColor()) {
-    return [message];
-  }
-  const chars = [...message];
-  const words = chars.filter(isWord);
-  const steps = words.length - 1;
-  if (steps === 0) {
-    console.log(`%c${message}`, `color: rgb(${startColor.join(",")}); font-weight: bold;`);
-    return [message];
-  }
-  let output = "";
-  let styles = [];
-  chars.forEach((char) => {
-    if (isWord(char)) {
-      const progress = words.indexOf(char) / steps;
-      const r = Math.round(startColor[0] + (endColor[0] - startColor[0]) * progress);
-      const g = Math.round(startColor[1] + (endColor[1] - startColor[1]) * progress);
-      const b = Math.round(startColor[2] + (endColor[2] - startColor[2]) * progress);
-      output += `%c${char}`;
-      styles.push(`color: rgb(${r},${g},${b}); font-weight: bold;`);
-    } else {
-      output += char;
-    }
-  });
-  return [output, ...styles];
-}
-var LOG_TYPES = {
-  // Level error
-  error: {
-    label: "error",
-    level: "error",
-    color: red
-  },
-  // Level warn
-  warn: {
-    label: "warn",
-    level: "warn",
-    color: orange
-  },
-  // Level info
-  info: {
-    label: "info",
-    level: "info",
-    color: dodgerblue
-  },
-  start: {
-    label: "start",
-    level: "info",
-    color: dodgerblue
-  },
-  ready: {
-    label: "ready",
-    level: "info",
-    color: green
-  },
-  success: {
-    label: "success",
-    level: "info",
-    color: green
-  },
-  // Level log
-  log: {
-    level: "log"
-  },
-  // Level debug
-  debug: {
-    label: "debug",
-    level: "verbose",
-    color: magenta
-  }
-};
-function createLogger2(options = {}) {
-  return createLogger$1(options, {
-    handleError: (msg) => msg,
-    getLabel,
-    gradient,
-    finalLog,
-    LOG_TYPES,
-    greet: (msg) => {
-      return gradient(msg);
-    }
-  });
-}
-var logger = createLogger2();
-const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
-const BROWSER_LOG_VALUE = "1";
-function isBrowserEnv() {
-  return typeof window !== "undefined";
-}
-function isBrowserDebug() {
-  try {
-    if (isBrowserEnv() && window.localStorage) {
-      return localStorage.getItem(BROWSER_LOG_KEY) === BROWSER_LOG_VALUE;
-    }
-  } catch (error) {
-    return false;
-  }
-  return false;
-}
-function isDebugMode() {
-  if (typeof process !== "undefined" && process.env && process.env["FEDERATION_DEBUG"]) {
-    return Boolean(process.env["FEDERATION_DEBUG"]);
-  }
-  if (typeof FEDERATION_DEBUG !== "undefined" && Boolean(FEDERATION_DEBUG)) {
-    return true;
-  }
-  return isBrowserDebug();
-}
-const PREFIX = "[ Module Federation ]";
-function setDebug(loggerInstance) {
-  if (isDebugMode()) {
-    loggerInstance.level = "verbose";
-  }
-}
-function setPrefix(loggerInstance, prefix) {
-  loggerInstance.labels = {
-    warn: `${prefix} Warn`,
-    error: `${prefix} Error`,
-    success: `${prefix} Success`,
-    info: `${prefix} Info`,
-    ready: `${prefix} Ready`,
-    debug: `${prefix} Debug`
-  };
-}
-function createLogger(prefix) {
-  const loggerInstance = browser.createLogger({
-    labels: {
-      warn: `${PREFIX} Warn`,
-      error: `${PREFIX} Error`,
-      success: `${PREFIX} Success`,
-      info: `${PREFIX} Info`,
-      ready: `${PREFIX} Ready`,
-      debug: `${PREFIX} Debug`
-    }
-  });
-  setDebug(loggerInstance);
-  setPrefix(loggerInstance, prefix);
-  return loggerInstance;
-}
-createLogger(PREFIX);
-const LoggerInstance = createLogger(
-  "[ Module Federation Bridge React ]"
-);
-function pathJoin(...args) {
-  const res = args.reduce((res2, path) => {
-    let nPath = path;
-    if (!nPath || typeof nPath !== "string") {
-      return res2;
-    }
-    if (nPath[0] !== "/") {
-      nPath = `/${nPath}`;
-    }
-    const lastIndex = nPath.length - 1;
-    if (nPath[lastIndex] === "/") {
-      nPath = nPath.substring(0, lastIndex);
-    }
-    return res2 + nPath;
-  }, "");
-  return res || "/";
-}
-const getModuleName = (id) => {
-  if (!id) {
-    return id;
-  }
-  const idArray = id.split("/");
-  if (idArray.length < 2) {
-    return id;
-  }
-  return idArray[0] + "/" + idArray[1];
-};
-const getRootDomDefaultClassName = (moduleName) => {
-  if (!moduleName) {
-    return "";
-  }
-  const name = getModuleName(moduleName).replace(/\@/, "").replace(/\//, "-");
-  return `bridge-root-component-${name}`;
-};
-const RouterContext = React.createContext(null);
-exports.LoggerInstance = LoggerInstance;
-exports.RouterContext = RouterContext;
-exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
-exports.pathJoin = pathJoin;