@module-federation/bridge-react 0.0.0-next-20250630125121 → 0.0.0-next-20250701070959

package/CHANGELOG.md

@@ -1,16 +1,20 @@
 # @module-federation/bridge-react
 
-## 0.0.0-next-20250630125121
+## 0.0.0-next-20250701070959
 
-### Minor Changes
+### Patch Changes
+
+- chore: bump next
+  - @module-federation/sdk@0.0.0-next-20250701070959
+  - @module-federation/bridge-shared@0.0.0-next-20250701070959
 
-- eb0d1dc: refactor(bridge-react): rename createRemoteComponent as createRemoteAppComponent
+## 0.16.0
 
 ### Patch Changes
 
-- eb0d1dc: feat(bridge-react): export createLazyCompoent api
-  - @module-federation/sdk@0.0.0-next-20250630125121
-  - @module-federation/bridge-shared@0.0.0-next-20250630125121
+- Updated dependencies [1485fcf]
+  - @module-federation/sdk@0.16.0
+  - @module-federation/bridge-shared@0.16.0
 
 ## 0.15.0
 

package/__tests__/bridge.spec.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { assert, describe, it } from 'vitest';
-import { createBridgeComponent, createRemoteAppComponent } from '../src';
+import { createBridgeComponent, createRemoteComponent } from '../src';
 import {
   act,
   fireEvent,
@@ -44,14 +44,14 @@ describe('bridge', () => {
     expect(document.querySelector('#container')!.innerHTML).toContain('');
   });
 
-  it('createRemoteAppComponent', async () => {
+  it('createRemoteComponent', async () => {
     function Component({ props }: { props?: Record<string, any> }) {
       return <div>life cycle render {props?.msg}</div>;
     }
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteAppComponent({
+    const RemoteComponent = createRemoteComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -71,7 +71,7 @@ describe('bridge', () => {
     expect(getHtml(container)).toMatch('hello world');
   });
 
-  it('createRemoteAppComponent and obtain ref property', async () => {
+  it('createRemoteComponent and obtain ref property', async () => {
     const ref = {
       current: null,
     };
@@ -82,7 +82,7 @@ describe('bridge', () => {
     const BridgeComponent = createBridgeComponent({
       rootComponent: Component,
     });
-    const RemoteComponent = createRemoteAppComponent({
+    const RemoteComponent = createRemoteComponent({
       loader: async () => {
         return {
           default: BridgeComponent,
@@ -103,7 +103,7 @@ describe('bridge', () => {
     expect(ref.current).not.toBeNull();
   });
 
-  it('createRemoteAppComponent with custom createRoot prop', async () => {
+  it('createRemoteComponent with custom createRoot prop', async () => {
     const renderMock = vi.fn();
 
     function Component({ props }: { props?: Record<string, any> }) {
@@ -118,7 +118,7 @@ describe('bridge', () => {
         };
       },
     });
-    const RemoteComponent = createRemoteAppComponent({
+    const RemoteComponent = createRemoteComponent({
       loader: async () => {
         return {
           default: BridgeComponent,

package/dist/{bridge-base-UGCwcMnG.js → bridge-base-BBH982Tz.cjs}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index = require("./index-C0fDZB5b.js");
+const index = require("./index-Cv3p6r66.cjs");
 const plugin = require("./plugin.cjs.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/{bridge-base-BoshEggF.mjs → bridge-base-P6pEjY1q.js}

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Component, createElement, createContext } from "react";
-import { L as LoggerInstance, R as RouterContext } from "./index-CqxytsLY.mjs";
+import { L as LoggerInstance, R as RouterContext } from "./index-D4yt7Udv.js";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {

package/dist/index-Cv3p6r66.cjs

@@ -0,0 +1,235 @@
+"use strict";
+const React = require("react");
+const RouterContext = React.createContext(null);
+const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
+function isBrowserEnv() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+}
+function isBrowserDebug() {
+  try {
+    if (isBrowserEnv() && window.localStorage) {
+      return Boolean(localStorage.getItem(BROWSER_LOG_KEY));
+    }
+  } 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();
+}
+let Logger = class Logger2 {
+  setPrefix(prefix) {
+    this.prefix = prefix;
+  }
+  log(...args) {
+    console.log(this.prefix, ...args);
+  }
+  warn(...args) {
+    console.log(this.prefix, ...args);
+  }
+  error(...args) {
+    console.log(this.prefix, ...args);
+  }
+  success(...args) {
+    console.log(this.prefix, ...args);
+  }
+  info(...args) {
+    console.log(this.prefix, ...args);
+  }
+  ready(...args) {
+    console.log(this.prefix, ...args);
+  }
+  debug(...args) {
+    if (isDebugMode()) {
+      console.log(this.prefix, ...args);
+    }
+  }
+  constructor(prefix) {
+    this.prefix = prefix;
+  }
+};
+function createLogger(prefix) {
+  return new Logger(prefix);
+}
+function importNodeModule(name) {
+  if (!name) {
+    throw new Error("import specifier is required");
+  }
+  const importModule = new Function("name", `return import(name)`);
+  return importModule(name).then((res2) => res2).catch((error) => {
+    console.error(`Error importing module ${name}:`, error);
+    throw error;
+  });
+}
+const loadNodeFetch = async () => {
+  const fetchModule = await importNodeModule("node-fetch");
+  return fetchModule.default || fetchModule;
+};
+const lazyLoaderHookFetch = async (input, init, loaderHook2) => {
+  const hook = (url2, init2) => {
+    return loaderHook2.lifecycle.fetch.emit(url2, init2);
+  };
+  const res2 = await hook(input, init || {});
+  if (!res2 || !(res2 instanceof Response)) {
+    const fetchFunction = typeof fetch === "undefined" ? await loadNodeFetch() : fetch;
+    return fetchFunction(input, init || {});
+  }
+  return res2;
+};
+const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url, cb, attrs, loaderHook) => {
+  if (loaderHook == null ? void 0 : loaderHook.createScriptHook) {
+    const hookResult = loaderHook.createScriptHook(url);
+    if (hookResult && typeof hookResult === "object" && "url" in hookResult) {
+      url = hookResult.url;
+    }
+  }
+  let urlObj;
+  try {
+    urlObj = new URL(url);
+  } catch (e) {
+    console.error("Error constructing URL:", e);
+    cb(new Error(`Invalid URL: ${e}`));
+    return;
+  }
+  const getFetch = async () => {
+    if (loaderHook == null ? void 0 : loaderHook.fetch) {
+      return (input, init) => lazyLoaderHookFetch(input, init, loaderHook);
+    }
+    return typeof fetch === "undefined" ? loadNodeFetch() : fetch;
+  };
+  const handleScriptFetch = async (f, urlObj) => {
+    try {
+      var _vm_constants;
+      const res = await f(urlObj.href);
+      const data = await res.text();
+      const [path, vm] = await Promise.all([
+        importNodeModule("path"),
+        importNodeModule("vm")
+      ]);
+      const scriptContext = {
+        exports: {},
+        module: {
+          exports: {}
+        }
+      };
+      const urlDirname = urlObj.pathname.split("/").slice(0, -1).join("/");
+      const filename = path.basename(urlObj.pathname);
+      var _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER;
+      const script = new vm.Script(`(function(exports, module, require, __dirname, __filename) {${data}
+})`, {
+        filename,
+        importModuleDynamically: (_vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER = (_vm_constants = vm.constants) == null ? void 0 : _vm_constants.USE_MAIN_CONTEXT_DEFAULT_LOADER) != null ? _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER : importNodeModule
+      });
+      script.runInThisContext()(scriptContext.exports, scriptContext.module, eval("require"), urlDirname, filename);
+      const exportedInterface = scriptContext.module.exports || scriptContext.exports;
+      if (attrs && exportedInterface && attrs["globalName"]) {
+        const container = exportedInterface[attrs["globalName"]] || exportedInterface;
+        cb(void 0, container);
+        return;
+      }
+      cb(void 0, exportedInterface);
+    } catch (e) {
+      cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
+    }
+  };
+  getFetch().then(async (f2) => {
+    if ((attrs == null ? void 0 : attrs["type"]) === "esm" || (attrs == null ? void 0 : attrs["type"]) === "module") {
+      return loadModule(urlObj.href, {
+        fetch: f2,
+        vm: await importNodeModule("vm")
+      }).then(async (module2) => {
+        await module2.evaluate();
+        cb(void 0, module2.namespace);
+      }).catch((e) => {
+        cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
+      });
+    }
+    handleScriptFetch(f2, urlObj);
+  }).catch((err) => {
+    cb(err);
+  });
+} : (url2, cb2, attrs2, loaderHook2) => {
+  cb2(new Error("createScriptNode is disabled in non-Node.js environment"));
+};
+typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url2, info) => {
+  return new Promise((resolve, reject) => {
+    createScriptNode(url2, (error, scriptContext2) => {
+      if (error) {
+        reject(error);
+      } else {
+        var _info_attrs, _info_attrs1;
+        const remoteEntryKey = (info == null ? void 0 : (_info_attrs = info.attrs) == null ? void 0 : _info_attrs["globalName"]) || `__FEDERATION_${info == null ? void 0 : (_info_attrs1 = info.attrs) == null ? void 0 : _info_attrs1["name"]}:custom__`;
+        const entryExports = globalThis[remoteEntryKey] = scriptContext2;
+        resolve(entryExports);
+      }
+    }, info.attrs, info.loaderHook);
+  });
+} : (url2, info) => {
+  throw new Error("loadScriptNode is disabled in non-Node.js environment");
+};
+async function loadModule(url2, options) {
+  const { fetch: fetch1, vm: vm2 } = options;
+  const response = await fetch1(url2);
+  const code = await response.text();
+  const module2 = new vm2.SourceTextModule(code, {
+    // @ts-ignore
+    importModuleDynamically: async (specifier, script2) => {
+      const resolvedUrl = new URL(specifier, url2).href;
+      return loadModule(resolvedUrl, options);
+    }
+  });
+  await module2.link(async (specifier) => {
+    const resolvedUrl = new URL(specifier, url2).href;
+    const module3 = await loadModule(resolvedUrl, options);
+    return module3;
+  });
+  return module2;
+}
+const LoggerInstance = createLogger(
+  "[ Module Federation Bridge React ]"
+);
+function pathJoin(...args) {
+  const res2 = args.reduce((res22, path2) => {
+    let nPath = path2;
+    if (!nPath || typeof nPath !== "string") {
+      return res22;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res22 + nPath;
+  }, "");
+  return res2 || "/";
+}
+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}`;
+};
+exports.LoggerInstance = LoggerInstance;
+exports.RouterContext = RouterContext;
+exports.getRootDomDefaultClassName = getRootDomDefaultClassName;
+exports.pathJoin = pathJoin;

package/dist/index-D4yt7Udv.js

@@ -0,0 +1,236 @@
+import React__default from "react";
+const RouterContext = React__default.createContext(null);
+const BROWSER_LOG_KEY = "FEDERATION_DEBUG";
+function isBrowserEnv() {
+  return typeof window !== "undefined" && typeof window.document !== "undefined";
+}
+function isBrowserDebug() {
+  try {
+    if (isBrowserEnv() && window.localStorage) {
+      return Boolean(localStorage.getItem(BROWSER_LOG_KEY));
+    }
+  } 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();
+}
+let Logger = class Logger2 {
+  setPrefix(prefix) {
+    this.prefix = prefix;
+  }
+  log(...args) {
+    console.log(this.prefix, ...args);
+  }
+  warn(...args) {
+    console.log(this.prefix, ...args);
+  }
+  error(...args) {
+    console.log(this.prefix, ...args);
+  }
+  success(...args) {
+    console.log(this.prefix, ...args);
+  }
+  info(...args) {
+    console.log(this.prefix, ...args);
+  }
+  ready(...args) {
+    console.log(this.prefix, ...args);
+  }
+  debug(...args) {
+    if (isDebugMode()) {
+      console.log(this.prefix, ...args);
+    }
+  }
+  constructor(prefix) {
+    this.prefix = prefix;
+  }
+};
+function createLogger(prefix) {
+  return new Logger(prefix);
+}
+function importNodeModule(name) {
+  if (!name) {
+    throw new Error("import specifier is required");
+  }
+  const importModule = new Function("name", `return import(name)`);
+  return importModule(name).then((res2) => res2).catch((error) => {
+    console.error(`Error importing module ${name}:`, error);
+    throw error;
+  });
+}
+const loadNodeFetch = async () => {
+  const fetchModule = await importNodeModule("node-fetch");
+  return fetchModule.default || fetchModule;
+};
+const lazyLoaderHookFetch = async (input, init, loaderHook2) => {
+  const hook = (url2, init2) => {
+    return loaderHook2.lifecycle.fetch.emit(url2, init2);
+  };
+  const res2 = await hook(input, init || {});
+  if (!res2 || !(res2 instanceof Response)) {
+    const fetchFunction = typeof fetch === "undefined" ? await loadNodeFetch() : fetch;
+    return fetchFunction(input, init || {});
+  }
+  return res2;
+};
+const createScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url, cb, attrs, loaderHook) => {
+  if (loaderHook == null ? void 0 : loaderHook.createScriptHook) {
+    const hookResult = loaderHook.createScriptHook(url);
+    if (hookResult && typeof hookResult === "object" && "url" in hookResult) {
+      url = hookResult.url;
+    }
+  }
+  let urlObj;
+  try {
+    urlObj = new URL(url);
+  } catch (e) {
+    console.error("Error constructing URL:", e);
+    cb(new Error(`Invalid URL: ${e}`));
+    return;
+  }
+  const getFetch = async () => {
+    if (loaderHook == null ? void 0 : loaderHook.fetch) {
+      return (input, init) => lazyLoaderHookFetch(input, init, loaderHook);
+    }
+    return typeof fetch === "undefined" ? loadNodeFetch() : fetch;
+  };
+  const handleScriptFetch = async (f, urlObj) => {
+    try {
+      var _vm_constants;
+      const res = await f(urlObj.href);
+      const data = await res.text();
+      const [path, vm] = await Promise.all([
+        importNodeModule("path"),
+        importNodeModule("vm")
+      ]);
+      const scriptContext = {
+        exports: {},
+        module: {
+          exports: {}
+        }
+      };
+      const urlDirname = urlObj.pathname.split("/").slice(0, -1).join("/");
+      const filename = path.basename(urlObj.pathname);
+      var _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER;
+      const script = new vm.Script(`(function(exports, module, require, __dirname, __filename) {${data}
+})`, {
+        filename,
+        importModuleDynamically: (_vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER = (_vm_constants = vm.constants) == null ? void 0 : _vm_constants.USE_MAIN_CONTEXT_DEFAULT_LOADER) != null ? _vm_constants_USE_MAIN_CONTEXT_DEFAULT_LOADER : importNodeModule
+      });
+      script.runInThisContext()(scriptContext.exports, scriptContext.module, eval("require"), urlDirname, filename);
+      const exportedInterface = scriptContext.module.exports || scriptContext.exports;
+      if (attrs && exportedInterface && attrs["globalName"]) {
+        const container = exportedInterface[attrs["globalName"]] || exportedInterface;
+        cb(void 0, container);
+        return;
+      }
+      cb(void 0, exportedInterface);
+    } catch (e) {
+      cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
+    }
+  };
+  getFetch().then(async (f2) => {
+    if ((attrs == null ? void 0 : attrs["type"]) === "esm" || (attrs == null ? void 0 : attrs["type"]) === "module") {
+      return loadModule(urlObj.href, {
+        fetch: f2,
+        vm: await importNodeModule("vm")
+      }).then(async (module) => {
+        await module.evaluate();
+        cb(void 0, module.namespace);
+      }).catch((e) => {
+        cb(e instanceof Error ? e : new Error(`Script execution error: ${e}`));
+      });
+    }
+    handleScriptFetch(f2, urlObj);
+  }).catch((err) => {
+    cb(err);
+  });
+} : (url2, cb2, attrs2, loaderHook2) => {
+  cb2(new Error("createScriptNode is disabled in non-Node.js environment"));
+};
+typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web" ? (url2, info) => {
+  return new Promise((resolve, reject) => {
+    createScriptNode(url2, (error, scriptContext2) => {
+      if (error) {
+        reject(error);
+      } else {
+        var _info_attrs, _info_attrs1;
+        const remoteEntryKey = (info == null ? void 0 : (_info_attrs = info.attrs) == null ? void 0 : _info_attrs["globalName"]) || `__FEDERATION_${info == null ? void 0 : (_info_attrs1 = info.attrs) == null ? void 0 : _info_attrs1["name"]}:custom__`;
+        const entryExports = globalThis[remoteEntryKey] = scriptContext2;
+        resolve(entryExports);
+      }
+    }, info.attrs, info.loaderHook);
+  });
+} : (url2, info) => {
+  throw new Error("loadScriptNode is disabled in non-Node.js environment");
+};
+async function loadModule(url2, options) {
+  const { fetch: fetch1, vm: vm2 } = options;
+  const response = await fetch1(url2);
+  const code = await response.text();
+  const module = new vm2.SourceTextModule(code, {
+    // @ts-ignore
+    importModuleDynamically: async (specifier, script2) => {
+      const resolvedUrl = new URL(specifier, url2).href;
+      return loadModule(resolvedUrl, options);
+    }
+  });
+  await module.link(async (specifier) => {
+    const resolvedUrl = new URL(specifier, url2).href;
+    const module2 = await loadModule(resolvedUrl, options);
+    return module2;
+  });
+  return module;
+}
+const LoggerInstance = createLogger(
+  "[ Module Federation Bridge React ]"
+);
+function pathJoin(...args) {
+  const res2 = args.reduce((res22, path2) => {
+    let nPath = path2;
+    if (!nPath || typeof nPath !== "string") {
+      return res22;
+    }
+    if (nPath[0] !== "/") {
+      nPath = `/${nPath}`;
+    }
+    const lastIndex = nPath.length - 1;
+    if (nPath[lastIndex] === "/") {
+      nPath = nPath.substring(0, lastIndex);
+    }
+    return res22 + nPath;
+  }, "");
+  return res2 || "/";
+}
+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}`;
+};
+export {
+  LoggerInstance as L,
+  RouterContext as R,
+  getRootDomDefaultClassName as g,
+  pathJoin as p
+};