@module-federation/bridge-react 0.21.5 → 0.22.0

package/dist/index.es.js

@@ -1,120 +1,16 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-CPSTBjEp.mjs";
-import ReactDOM from "react-dom";
-import { L as LoggerInstance, p as pathJoin, g as getRootDomDefaultClassName } from "./index-DyQNwY2M.mjs";
-import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
+import { R as RemoteAppWrapper, c as createDeprecatedRemoteComponentFactory, a as createRemoteAppComponentFactory } from "./createHelpers-Ui5pt7je.mjs";
+import { b } from "./createHelpers-Ui5pt7je.mjs";
+import { b as b2, a, c, l } from "./lazy-load-component-plugin-BkcO9pUC.mjs";
+import React__default, { forwardRef, useContext, useState, useEffect } from "react";
 import * as ReactRouterDOM from "react-router-dom";
-import { federationRuntime } from "./plugin.es.js";
-import { b, a, c, l } from "./lazy-load-component-plugin-BbiXdUFQ.mjs";
-import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-Bx_8GGd-.mjs";
+import { p as pathJoin, L as LoggerInstance } from "./index-DyQNwY2M.mjs";
+import { C, a as a2, E, b as b3, d, c as c2, g, r, s } from "./utils-dUgb9Jkm.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-yYPFtZpU.mjs";
-function createReact16Or17Root(container) {
-  return {
-    render(children) {
-      const reactVersion = ReactDOM.version || "";
-      const isReact18 = reactVersion.startsWith("18");
-      const isReact19 = reactVersion.startsWith("19");
-      if (isReact19) {
-        throw new Error(
-          `React 19 detected in legacy mode. This is not supported. Please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v19'`
-        );
-      }
-      if (isReact18) {
-        LoggerInstance.warn(
-          `[Bridge-React] React 18 detected in legacy mode. For better compatibility, please use the version-specific import: import { createBridgeComponent } from '@module-federation/bridge-react/v18'`
-        );
-      }
-      ReactDOM.render(children, container);
-    },
-    unmount() {
-      ReactDOM.unmountComponentAtNode(container);
-    }
-  };
-}
-function createBridgeComponent(bridgeInfo) {
-  const fullBridgeInfo = {
-    createRoot: createReact16Or17Root,
-    ...bridgeInfo
-  };
-  return createBaseBridgeComponent(fullBridgeInfo);
-}
-function e2() {
+import { p } from "./prefetch-DAwiqbcO.mjs";
+function e() {
   const t = new PopStateEvent("popstate", { state: window.history.state });
   window.dispatchEvent(t);
 }
-const RemoteAppWrapper = forwardRef(function(props, ref) {
-  const {
-    moduleName,
-    memoryRoute,
-    basename,
-    providerInfo,
-    className,
-    style,
-    fallback,
-    loading,
-    ...resProps
-  } = props;
-  const instance = federationRuntime.instance;
-  const rootRef = ref && "current" in ref ? ref : useRef(null);
-  const renderDom = useRef(null);
-  const providerInfoRef = useRef(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 () => {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
-      if ((_a = providerInfoRef.current) == null ? void 0 : _a.destroy) {
-        LoggerInstance.debug(
-          `createRemoteAppComponent LazyComponent destroy >>>`,
-          { moduleName, basename, dom: renderDom.current }
-        );
-        (_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,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        });
-        (_e = providerInfoRef.current) == null ? void 0 : _e.destroy({
-          moduleName,
-          dom: renderDom.current
-        });
-        (_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,
-          dom: renderDom.current,
-          basename,
-          memoryRoute,
-          fallback,
-          ...resProps
-        });
-      }
-    };
-  }, [moduleName]);
-  useEffect(() => {
-    var _a, _b, _c, _d, _e, _f;
-    if (!initialized || !providerInfoRef.current) return;
-    let renderProps = {
-      moduleName,
-      dom: rootRef.current,
-      basename,
-      memoryRoute,
-      fallback,
-      ...resProps
-    };
-    renderDom.current = rootRef.current;
-    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)) || {};
-    renderProps = { ...renderProps, ...beforeBridgeRenderRes.extraProps };
-    providerInfoRef.current.render(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);
-  }, [initialized, ...Object.values(props)]);
-  const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ""}`;
-  return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
-});
 function withRouterData(WrappedComponent) {
   const Component = forwardRef(function(props, ref) {
     var _a;
@@ -175,7 +71,7 @@ function withRouterData(WrappedComponent) {
               pathname: location.pathname
             }
           );
-          e2();
+          e();
         }
         setPathname(location.pathname);
       }, [location]);
@@ -187,88 +83,25 @@ function withRouterData(WrappedComponent) {
   });
 }
 const RemoteApp = withRouterData(RemoteAppWrapper);
-function createLazyRemoteComponent(info) {
-  const exportName = (info == null ? void 0 : info.export) || "default";
-  return React__default.lazy(async () => {
-    LoggerInstance.debug(`createRemoteAppComponent LazyComponent create >>>`, {
-      lazyComponent: info.loader,
-      exportName
-    });
-    try {
-      const m = await info.loader();
-      const moduleName = m && m[Symbol.for("mf_module_id")];
-      LoggerInstance.debug(
-        `createRemoteAppComponent LazyComponent loadRemote info >>>`,
-        { name: moduleName, module: m, exportName }
-      );
-      const exportFn = m[exportName];
-      if (exportName in m && typeof exportFn === "function") {
-        const RemoteAppComponent = forwardRef((props, ref) => {
-          return /* @__PURE__ */ React__default.createElement(
-            RemoteApp,
-            {
-              moduleName,
-              providerInfo: exportFn,
-              exportName: info.export || "default",
-              fallback: info.fallback,
-              loading: info.loading,
-              ref,
-              ...props
-            }
-          );
-        });
-        return {
-          default: RemoteAppComponent
-        };
-      } else {
-        LoggerInstance.debug(
-          `createRemoteAppComponent LazyComponent module not found >>>`,
-          { name: moduleName, module: m, exportName }
-        );
-        throw Error(
-          `Make sure that ${moduleName} has the correct export when export is ${String(
-            exportName
-          )}`
-        );
-      }
-    } catch (error) {
-      throw error;
-    }
-  });
-}
-function createRemoteAppComponent(info) {
-  const LazyComponent = createLazyRemoteComponent(info);
-  return forwardRef((props, ref) => {
-    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 createRemoteComponent(info) {
-  LoggerInstance.warn(
-    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
-  );
-  return createRemoteAppComponent(info);
-}
+const createRemoteAppComponent = createRemoteAppComponentFactory(RemoteApp);
+const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent
+);
 export {
   C as CacheSize,
-  b2 as CacheTime,
+  a2 as CacheTime,
   E as ERROR_TYPE,
-  b as autoFetchDataPlugin,
-  e as cache,
+  b2 as autoFetchDataPlugin,
+  b3 as cache,
   callDataFetch,
-  h as clearStore,
+  d as clearStore,
   a as collectSSRAssets,
   c2 as configureCache,
-  createBridgeComponent,
+  b as createBridgeComponent,
   c as createLazyComponent,
   createRemoteAppComponent,
   createRemoteComponent,
-  d as generateKey,
+  g as generateKey,
   l as lazyLoadComponentPlugin,
   p as prefetch,
   r as revalidateTag,

package/dist/{lazy-load-component-plugin-BbiXdUFQ.mjs → lazy-load-component-plugin-BkcO9pUC.mjs}

@@ -1,5 +1,5 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-yYPFtZpU.mjs";
-import { i as initDataFetchMap, j as isDataLoaderExpose, k as getDataFetchInfo, m as getDataFetchMapKey, l as logger, n as getDataFetchItem, o as DATA_FETCH_CLIENT_SUFFIX, p as MF_DATA_FETCH_TYPE, q as isCSROnly, a as loadDataFetchModule, M as MF_DATA_FETCH_STATUS, g as getDataFetchMap, t as isServerEnv, u as getDataFetchIdWithErrorMsgs, v as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, x as DATA_FETCH_FUNCTION, y as getLoadedRemoteInfos, f as fetchData$1, z as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-Bx_8GGd-.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-DAwiqbcO.mjs";
+import { i as initDataFetchMap, j as isDataLoaderExpose, k as getDataFetchInfo, m as getDataFetchMapKey, l as logger, n as getDataFetchItem, o as DATA_FETCH_CLIENT_SUFFIX, p as MF_DATA_FETCH_TYPE, q as isCSROnly, h as loadDataFetchModule, M as MF_DATA_FETCH_STATUS, e as getDataFetchMap, t as isServerEnv, u as getDataFetchIdWithErrorMsgs, v as DATA_FETCH_ERROR_PREFIX, E as ERROR_TYPE, w as wrapDataFetchId, L as LOAD_REMOTE_ERROR_PREFIX, x as DATA_FETCH_FUNCTION, y as getLoadedRemoteInfos, f as fetchData$1, z as setDataFetchItemLoadedStatus, F as FS_HREF } from "./utils-dUgb9Jkm.mjs";
 import React__default, { useRef, useState, Suspense, useEffect } from "react";
 const autoFetchData = () => {
   initDataFetchMap();

package/dist/{lazy-load-component-plugin-2wIGAon4.js → lazy-load-component-plugin-Bt990iJq.js}

@@ -1,5 +1,5 @@
 "use strict";
-const prefetch = require("./prefetch-CBwY1k41.js");
+const prefetch = require("./prefetch-D-d4LlJ3.js");
 const lazyUtils = require("./utils-tM9yE73c.js");
 const React = require("react");
 const autoFetchData = () => {

package/dist/lazy-load-component-plugin.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-2wIGAon4.js");
-require("./prefetch-CBwY1k41.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-Bt990iJq.js");
+require("./prefetch-D-d4LlJ3.js");
 exports.default = lazyLoadComponentPlugin.lazyLoadComponentPlugin;
 exports.lazyLoadComponentPlugin = lazyLoadComponentPlugin.lazyLoadComponentPlugin;

package/dist/lazy-load-component-plugin.es.js

@@ -1,5 +1,5 @@
-import { l, l as l2 } from "./lazy-load-component-plugin-BbiXdUFQ.mjs";
-import "./prefetch-yYPFtZpU.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-BkcO9pUC.mjs";
+import "./prefetch-DAwiqbcO.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/lazy-utils.es.js

@@ -1,5 +1,5 @@
 import "./index.esm-CPwSeCvw.mjs";
-import { G, H, f, J, I, u, k, n, g, m, B, y, i, q, j, t, a, z, s, w } from "./utils-Bx_8GGd-.mjs";
+import { G, H, f, J, I, u, k, n, e, m, B, y, i, q, j, t, h, z, s, w } from "./utils-dUgb9Jkm.mjs";
 export {
   G as callAllDowngrade,
   H as callDowngrade,
@@ -9,7 +9,7 @@ export {
   u as getDataFetchIdWithErrorMsgs,
   k as getDataFetchInfo,
   n as getDataFetchItem,
-  g as getDataFetchMap,
+  e as getDataFetchMap,
   m as getDataFetchMapKey,
   B as getDowngradeTag,
   y as getLoadedRemoteInfos,
@@ -17,7 +17,7 @@ export {
   q as isCSROnly,
   j as isDataLoaderExpose,
   t as isServerEnv,
-  a as loadDataFetchModule,
+  h as loadDataFetchModule,
   z as setDataFetchItemLoadedStatus,
   s as setSSREnv,
   w as wrapDataFetchId

package/dist/{prefetch-CBwY1k41.js → prefetch-D-d4LlJ3.js}

@@ -211,7 +211,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = index_esm.isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.5";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.22.0";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/{prefetch-yYPFtZpU.mjs → prefetch-DAwiqbcO.mjs}

@@ -1,4 +1,4 @@
-import { x as DATA_FETCH_FUNCTION, F as FS_HREF, l as logger$1, g as getDataFetchMap, i as initDataFetchMap, n as getDataFetchItem, M as MF_DATA_FETCH_STATUS, p as MF_DATA_FETCH_TYPE, A as DOWNGRADE_KEY, B as getDowngradeTag, G as callAllDowngrade, H as callDowngrade, k as getDataFetchInfo, m as getDataFetchMapKey } from "./utils-Bx_8GGd-.mjs";
+import { x as DATA_FETCH_FUNCTION, F as FS_HREF, l as logger$1, e as getDataFetchMap, i as initDataFetchMap, n as getDataFetchItem, M as MF_DATA_FETCH_STATUS, p as MF_DATA_FETCH_TYPE, A as DOWNGRADE_KEY, B as getDowngradeTag, G as callAllDowngrade, H as callDowngrade, k as getDataFetchInfo, m as getDataFetchMapKey } from "./utils-dUgb9Jkm.mjs";
 import { i as isDebugMode, a as createLink, b as createScript, d as isBrowserEnv, c as createLogger, e as composeKeyWithSeparator, l as loadScriptNode, f as loadScript } from "./index.esm-CPwSeCvw.mjs";
 const dataFetchFunction = async function(options) {
   var _a, _b;
@@ -210,7 +210,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.21.5";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.22.0";
   }
 }
 function getInfoWithoutType(target, key) {

package/dist/{utils-Bx_8GGd-.mjs → utils-dUgb9Jkm.mjs}

@@ -1987,14 +1987,14 @@ export {
   flushDataFetch as J,
   LOAD_REMOTE_ERROR_PREFIX as L,
   MF_DATA_FETCH_STATUS as M,
-  loadDataFetchModule as a,
-  CacheTime as b,
+  CacheTime as a,
+  cache as b,
   configureCache as c,
-  generateKey as d,
-  cache as e,
+  clearStore as d,
+  getDataFetchMap as e,
   fetchData as f,
-  getDataFetchMap as g,
-  clearStore as h,
+  generateKey as g,
+  loadDataFetchModule as h,
   initDataFetchMap as i,
   isDataLoaderExpose as j,
   getDataFetchInfo as k,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.21.5",
+  "version": "0.22.0",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -21,6 +21,11 @@
       "import": "./dist/index.es.js",
       "require": "./dist/index.cjs.js"
     },
+    "./base": {
+      "types": "./dist/base.d.ts",
+      "import": "./dist/base.es.js",
+      "require": "./dist/base.cjs.js"
+    },
     "./v18": {
       "types": "./dist/v18.d.ts",
       "import": "./dist/v18.es.js",
@@ -83,6 +88,9 @@
       ".": [
         "./dist/index.d.ts"
       ],
+      "base": [
+        "./dist/base.d.ts"
+      ],
       "v18": [
         "./dist/v18.d.ts"
       ],
@@ -121,8 +129,8 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/bridge-shared": "0.21.5",
-    "@module-federation/sdk": "0.21.5"
+    "@module-federation/bridge-shared": "0.22.0",
+    "@module-federation/sdk": "0.22.0"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -154,8 +162,8 @@
     "vite": "^5.4.21",
     "vite-plugin-dts": "^4.3.0",
     "hono": "4.10.3",
-    "@module-federation/runtime": "0.21.5",
-    "@module-federation/runtime-core": "0.21.5"
+    "@module-federation/runtime": "0.22.0",
+    "@module-federation/runtime-core": "0.22.0"
   },
   "scripts": {
     "dev": "vite",

package/src/base.ts

@@ -0,0 +1,50 @@
+export { createBridgeComponent } from './provider/versions/legacy';
+
+// Export router-free versions of remote component creators
+export {
+  createRemoteComponent,
+  createRemoteAppComponent,
+} from './remote/base-component';
+export type { LazyRemoteComponentInfo } from './remote/base-component';
+
+// Export all lazy loading and data fetching utilities (no router dependencies)
+export {
+  ERROR_TYPE,
+  createLazyComponent,
+  collectSSRAssets,
+  callDataFetch,
+  setSSREnv,
+  autoFetchDataPlugin,
+  CacheSize,
+  CacheTime,
+  configureCache,
+  generateKey,
+  cache,
+  revalidateTag,
+  clearStore,
+  prefetch,
+} from './lazy';
+
+export { lazyLoadComponentPlugin } from './plugins/lazy-load-component-plugin';
+
+// Export all types
+export type { CreateRootOptions, Root } from './provider/versions/legacy';
+export type {
+  ProviderParams,
+  ProviderFnParams,
+  RootType,
+  DestroyParams,
+  RenderParams,
+  RemoteComponentParams,
+  RenderFnParams,
+  RemoteComponentProps,
+  RemoteModule,
+} from './types';
+export type {
+  DataFetchParams,
+  NoSSRRemoteInfo,
+  CollectSSRAssetsOptions,
+  CreateLazyComponentOptions,
+  CacheStatus,
+  CacheStatsInfo,
+} from './lazy';

package/src/index.ts

@@ -6,8 +6,8 @@ export { createBridgeComponent } from './provider/versions/legacy';
 export {
   createRemoteComponent,
   createRemoteAppComponent,
-} from './remote/create';
-export type { LazyRemoteComponentInfo } from './remote/create';
+} from './remote/router-component';
+export type { LazyRemoteComponentInfo } from './remote/router-component';
 export {
   ERROR_TYPE,
   createLazyComponent,

package/src/remote/RemoteAppWrapper.tsx

@@ -0,0 +1,108 @@
+/**
+ * Shared RemoteAppWrapper component used by both base and router versions
+ * This component handles the lifecycle of remote Module Federation apps
+ */
+import React, { useEffect, useRef, useState, forwardRef } from 'react';
+import { LoggerInstance, getRootDomDefaultClassName } from '../utils';
+import { federationRuntime } from '../provider/plugin';
+import { RemoteComponentProps, RemoteAppParams } from '../types';
+
+export const RemoteAppWrapper = forwardRef(function (
+  props: RemoteAppParams & RemoteComponentProps,
+  ref,
+) {
+  const {
+    moduleName,
+    memoryRoute,
+    basename,
+    providerInfo,
+    className,
+    style,
+    fallback,
+    loading,
+    ...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(
+          `createRemoteAppComponent 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,
+        });
+      }
+    };
+  }, [moduleName]);
+
+  // trigger render after props updated
+  useEffect(() => {
+    if (!initialized || !providerInfoRef.current) return;
+
+    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}>
+      {loading}
+    </div>
+  );
+});

package/src/remote/base-component/component.tsx

@@ -0,0 +1,2 @@
+import { RemoteAppWrapper } from '../RemoteAppWrapper';
+export default RemoteAppWrapper;

package/src/remote/base-component/create.tsx

@@ -0,0 +1,23 @@
+import RemoteApp from './component';
+import {
+  createLazyRemoteComponentFactory,
+  createRemoteAppComponentFactory,
+  createDeprecatedRemoteComponentFactory,
+  type LazyRemoteComponentInfo,
+} from '../createHelpers';
+
+export type { LazyRemoteComponentInfo };
+
+const createLazyRemoteComponent = createLazyRemoteComponentFactory(RemoteApp);
+
+export const createRemoteAppComponent =
+  createRemoteAppComponentFactory(RemoteApp);
+
+/**
+ * @deprecated createRemoteComponent is deprecated, please use createRemoteAppComponent instead!
+ */
+export const createRemoteComponent = createDeprecatedRemoteComponentFactory(
+  createRemoteAppComponent,
+);
+
+export { createLazyRemoteComponent };

package/src/remote/base-component/index.tsx

@@ -0,0 +1,10 @@
+/**
+ * Base entry point without React Router dependencies
+ * Re-exports from base/create.tsx
+ */
+export {
+  createRemoteAppComponent,
+  createRemoteComponent,
+  createLazyRemoteComponent,
+  type LazyRemoteComponentInfo,
+} from './create';