@module-federation/bridge-react 0.18.0 → 0.18.1

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @module-federation/bridge-react
 
+## 0.18.1
+
+### Patch Changes
+
+- 8004e95: fix(bridge-react): correct createRemoteComponent warning info
+- 765b448: fix(bridge-react): call preloadAssets after getting assets
+- Updated dependencies [0bf3a3a]
+  - @module-federation/sdk@0.18.1
+  - @module-federation/bridge-shared@0.18.1
+
 ## 0.18.0
 
 ### Patch Changes

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

@@ -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-rAO0Wr0M.mjs";
 import { federationRuntime } from "./plugin.es.js";
 const ErrorBoundaryContext = createContext(null);
 const initialState = {

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

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

package/dist/data-fetch-server-middleware.cjs.js

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-iEVlDmyk.js");
-const index_esm = require("./index.esm-j_1sIRzg.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
+const index_esm = require("./index.esm-Ju4RY-yW.js");
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-server-middleware.es.js

@@ -1,5 +1,5 @@
-import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-C4oPJV34.mjs";
-import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-BCeUd-x9.mjs";
+import { D as DATA_FETCH_QUERY, l as logger, g as getDataFetchMap, i as initDataFetchMap, M as MF_DATA_FETCH_STATUS, f as fetchData, a as loadDataFetchModule } from "./utils-VSOJTX_o.mjs";
+import { M as MANIFEST_EXT, S as SEPARATOR } from "./index.esm-CtI0uQUR.mjs";
 function wrapSetTimeout(targetPromise, delay = 2e4, id) {
   if (targetPromise && typeof targetPromise.then === "function") {
     return new Promise((resolve, reject) => {

package/dist/data-fetch-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lazyUtils = require("./utils-iEVlDmyk.js");
-const prefetch = require("./prefetch-BdNDwnqI.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
+const prefetch = require("./prefetch-CzVHYHef.js");
 async function callDataFetch() {
   const dataFetch = globalThis[lazyUtils.DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/data-fetch-utils.es.js

@@ -1,7 +1,7 @@
-import { x as DATA_FETCH_FUNCTION } from "./utils-C4oPJV34.mjs";
-import { C, b, e, h, c, d, r } from "./utils-C4oPJV34.mjs";
-import { d as dataFetchFunction } from "./prefetch-DkCa_033.mjs";
-import { i, p } from "./prefetch-DkCa_033.mjs";
+import { x as DATA_FETCH_FUNCTION } from "./utils-VSOJTX_o.mjs";
+import { C, b, e, h, c, d, r } from "./utils-VSOJTX_o.mjs";
+import { d as dataFetchFunction } from "./prefetch-CEqDjW2R.mjs";
+import { i, p } from "./prefetch-CEqDjW2R.mjs";
 async function callDataFetch() {
   const dataFetch = globalThis[DATA_FETCH_FUNCTION];
   if (dataFetch) {

package/dist/{index-C0fDZB5b.js → index-eN2xRRXs.js}

@@ -1,6 +1,6 @@
 "use strict";
 const React = require("react");
-const index_esm = require("./index.esm-j_1sIRzg.js");
+const index_esm = require("./index.esm-Ju4RY-yW.js");
 const RouterContext = React.createContext(null);
 const LoggerInstance = index_esm.createLogger(
   "[ Module Federation Bridge React ]"

package/dist/{index-CqxytsLY.mjs → index-rAO0Wr0M.mjs}

@@ -1,5 +1,5 @@
 import React__default from "react";
-import { c as createLogger } from "./index.esm-BCeUd-x9.mjs";
+import { c as createLogger } from "./index.esm-CtI0uQUR.mjs";
 const RouterContext = React__default.createContext(null);
 const LoggerInstance = createLogger(
   "[ Module Federation Bridge React ]"

package/dist/index.cjs.js

@@ -1,15 +1,15 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const bridgeBase = require("./bridge-base-UGCwcMnG.js");
+const bridgeBase = require("./bridge-base-Ds850AOx.js");
 const ReactDOM = require("react-dom");
 const React = require("react");
-const index = require("./index-C0fDZB5b.js");
+const index = require("./index-eN2xRRXs.js");
 const ReactRouterDOM = require("react-router-dom");
 const plugin = require("./plugin.cjs.js");
-const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-BqBbq96C.js");
-const lazyUtils = require("./utils-iEVlDmyk.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CjgDjWep.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
 const dataFetchUtils = require("./data-fetch-utils.cjs.js");
-const prefetch = require("./prefetch-BdNDwnqI.js");
+const prefetch = require("./prefetch-CzVHYHef.js");
 function _interopNamespaceDefault(e2) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e2) {
@@ -70,6 +70,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     className,
     style,
     fallback,
+    loading,
     ...resProps
   } = props;
   const instance = plugin.federationRuntime.instance;
@@ -131,7 +132,7 @@ const RemoteAppWrapper = React.forwardRef(function(props, ref) {
     (_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 = `${index.getRootDomDefaultClassName(moduleName)} ${className || ""}`;
-  return /* @__PURE__ */ React.createElement("div", { className: rootComponentClassName, style, ref: rootRef });
+  return /* @__PURE__ */ React.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
 });
 function withRouterData(WrappedComponent) {
   const Component = React.forwardRef(function(props, ref) {
@@ -229,6 +230,7 @@ function createLazyRemoteComponent(info) {
               providerInfo: exportFn,
               exportName: info.export || "default",
               fallback: info.fallback,
+              loading: info.loading,
               ref,
               ...props
             }
@@ -267,7 +269,7 @@ function createRemoteAppComponent(info) {
 }
 function createRemoteComponent(info) {
   index.LoggerInstance.warn(
-    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
+    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
   );
   return createRemoteAppComponent(info);
 }

package/dist/index.es.js

@@ -1,13 +1,13 @@
-import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-BoshEggF.mjs";
+import { c as createBaseBridgeComponent, E as ErrorBoundary } from "./bridge-base-BwHtOqw_.mjs";
 import ReactDOM from "react-dom";
 import React__default, { forwardRef, useContext, useState, useEffect, useRef } from "react";
-import { p as pathJoin, L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-CqxytsLY.mjs";
+import { p as pathJoin, L as LoggerInstance, g as getRootDomDefaultClassName } from "./index-rAO0Wr0M.mjs";
 import * as ReactRouterDOM from "react-router-dom";
 import { federationRuntime } from "./plugin.es.js";
-import { b, a, c, l } from "./lazy-load-component-plugin-bvcZL_K6.mjs";
-import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-C4oPJV34.mjs";
+import { b, a, c, l } from "./lazy-load-component-plugin-B2SUeYm-.mjs";
+import { C, b as b2, E, e, h, c as c2, d, r, s } from "./utils-VSOJTX_o.mjs";
 import { callDataFetch } from "./data-fetch-utils.es.js";
-import { p } from "./prefetch-DkCa_033.mjs";
+import { p } from "./prefetch-CEqDjW2R.mjs";
 function createReact16Or17Root(container) {
   return {
     render(children) {
@@ -51,6 +51,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     className,
     style,
     fallback,
+    loading,
     ...resProps
   } = props;
   const instance = federationRuntime.instance;
@@ -112,7 +113,7 @@ const RemoteAppWrapper = forwardRef(function(props, ref) {
     (_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 });
+  return /* @__PURE__ */ React__default.createElement("div", { className: rootComponentClassName, style, ref: rootRef }, loading);
 });
 function withRouterData(WrappedComponent) {
   const Component = forwardRef(function(props, ref) {
@@ -210,6 +211,7 @@ function createLazyRemoteComponent(info) {
               providerInfo: exportFn,
               exportName: info.export || "default",
               fallback: info.fallback,
+              loading: info.loading,
               ref,
               ...props
             }
@@ -248,7 +250,7 @@ function createRemoteAppComponent(info) {
 }
 function createRemoteComponent(info) {
   LoggerInstance.warn(
-    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`
+    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`
   );
   return createRemoteAppComponent(info);
 }

package/dist/{index.esm-BCeUd-x9.mjs → index.esm-CtI0uQUR.mjs}

@@ -270,15 +270,22 @@ function loadScript(url2, info) {
     needAttach && document.head.appendChild(script2);
   });
 }
+const sdkImportCache = /* @__PURE__ */ new Map();
 function importNodeModule(name) {
   if (!name) {
     throw new Error("import specifier is required");
   }
+  if (sdkImportCache.has(name)) {
+    return sdkImportCache.get(name);
+  }
   const importModule = new Function("name", `return import(name)`);
-  return importModule(name).then((res2) => res2).catch((error) => {
+  const promise = importModule(name).then((res2) => res2).catch((error) => {
     console.error(`Error importing module ${name}:`, error);
+    sdkImportCache.delete(name);
     throw error;
   });
+  sdkImportCache.set(name, promise);
+  return promise;
 }
 const loadNodeFetch = async () => {
   const fetchModule = await importNodeModule("node-fetch");
@@ -386,7 +393,11 @@ const loadScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web"
 } : (url2, info) => {
   throw new Error("loadScriptNode is disabled in non-Node.js environment");
 };
+const esmModuleCache = /* @__PURE__ */ new Map();
 async function loadModule(url2, options) {
+  if (esmModuleCache.has(url2)) {
+    return esmModuleCache.get(url2);
+  }
   const { fetch: fetch1, vm: vm2 } = options;
   const response = await fetch1(url2);
   const code = await response.text();
@@ -397,6 +408,7 @@ async function loadModule(url2, options) {
       return loadModule(resolvedUrl, options);
     }
   });
+  esmModuleCache.set(url2, module);
   await module.link(async (specifier) => {
     const resolvedUrl = new URL(specifier, url2).href;
     const module2 = await loadModule(resolvedUrl, options);

package/dist/{index.esm-j_1sIRzg.js → index.esm-Ju4RY-yW.js}

@@ -271,15 +271,22 @@ function loadScript(url2, info) {
     needAttach && document.head.appendChild(script2);
   });
 }
+const sdkImportCache = /* @__PURE__ */ new Map();
 function importNodeModule(name) {
   if (!name) {
     throw new Error("import specifier is required");
   }
+  if (sdkImportCache.has(name)) {
+    return sdkImportCache.get(name);
+  }
   const importModule = new Function("name", `return import(name)`);
-  return importModule(name).then((res2) => res2).catch((error) => {
+  const promise = importModule(name).then((res2) => res2).catch((error) => {
     console.error(`Error importing module ${name}:`, error);
+    sdkImportCache.delete(name);
     throw error;
   });
+  sdkImportCache.set(name, promise);
+  return promise;
 }
 const loadNodeFetch = async () => {
   const fetchModule = await importNodeModule("node-fetch");
@@ -387,7 +394,11 @@ const loadScriptNode = typeof ENV_TARGET === "undefined" || ENV_TARGET !== "web"
 } : (url2, info) => {
   throw new Error("loadScriptNode is disabled in non-Node.js environment");
 };
+const esmModuleCache = /* @__PURE__ */ new Map();
 async function loadModule(url2, options) {
+  if (esmModuleCache.has(url2)) {
+    return esmModuleCache.get(url2);
+  }
   const { fetch: fetch1, vm: vm2 } = options;
   const response = await fetch1(url2);
   const code = await response.text();
@@ -398,6 +409,7 @@ async function loadModule(url2, options) {
       return loadModule(resolvedUrl, options);
     }
   });
+  esmModuleCache.set(url2, module2);
   await module2.link(async (specifier) => {
     const resolvedUrl = new URL(specifier, url2).href;
     const module3 = await loadModule(resolvedUrl, options);

package/dist/{lazy-load-component-plugin-bvcZL_K6.mjs → lazy-load-component-plugin-B2SUeYm-.mjs}

@@ -1,5 +1,5 @@
-import { i as injectDataFetch, p as prefetch } from "./prefetch-DkCa_033.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-C4oPJV34.mjs";
+import { i as injectDataFetch, p as prefetch } from "./prefetch-CEqDjW2R.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-VSOJTX_o.mjs";
 import React__default, { useRef, useState, Suspense, useEffect } from "react";
 const autoFetchData = () => {
   initDataFetchMap();

package/dist/{lazy-load-component-plugin-BqBbq96C.js → lazy-load-component-plugin-CjgDjWep.js}

@@ -1,6 +1,6 @@
 "use strict";
-const prefetch = require("./prefetch-BdNDwnqI.js");
-const lazyUtils = require("./utils-iEVlDmyk.js");
+const prefetch = require("./prefetch-CzVHYHef.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
 const React = require("react");
 const autoFetchData = () => {
   lazyUtils.initDataFetchMap();

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-BqBbq96C.js");
-require("./prefetch-BdNDwnqI.js");
+const lazyLoadComponentPlugin = require("./lazy-load-component-plugin-CjgDjWep.js");
+require("./prefetch-CzVHYHef.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-bvcZL_K6.mjs";
-import "./prefetch-DkCa_033.mjs";
+import { l, l as l2 } from "./lazy-load-component-plugin-B2SUeYm-.mjs";
+import "./prefetch-CEqDjW2R.mjs";
 export {
   l as default,
   l2 as lazyLoadComponentPlugin

package/dist/lazy-utils.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-require("./index.esm-j_1sIRzg.js");
-const lazyUtils = require("./utils-iEVlDmyk.js");
+require("./index.esm-Ju4RY-yW.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
 exports.callAllDowngrade = lazyUtils.callAllDowngrade;
 exports.callDowngrade = lazyUtils.callDowngrade;
 exports.fetchData = lazyUtils.fetchData;

package/dist/lazy-utils.es.js

@@ -1,5 +1,5 @@
-import "./index.esm-BCeUd-x9.mjs";
-import { G, H, f, J, I, u, k, n, g, m, B, y, i, q, j, t, a, z, s, w } from "./utils-C4oPJV34.mjs";
+import "./index.esm-CtI0uQUR.mjs";
+import { G, H, f, J, I, u, k, n, g, m, B, y, i, q, j, t, a, z, s, w } from "./utils-VSOJTX_o.mjs";
 export {
   G as callAllDowngrade,
   H as callDowngrade,

package/dist/{prefetch-DkCa_033.mjs → prefetch-CEqDjW2R.mjs}

@@ -1,5 +1,5 @@
-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-C4oPJV34.mjs";
-import { b as isDebugMode, c as createLogger, d as createLink, e as createScript, i as isBrowserEnv, a as composeKeyWithSeparator, l as loadScriptNode, f as loadScript } from "./index.esm-BCeUd-x9.mjs";
+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-VSOJTX_o.mjs";
+import { b as isDebugMode, c as createLogger, d as createLink, e as createScript, i as isBrowserEnv, a as composeKeyWithSeparator, l as loadScriptNode, f as loadScript } from "./index.esm-CtI0uQUR.mjs";
 const dataFetchFunction = async function(options) {
   var _a, _b;
   const [id, data, downgrade] = options;
@@ -270,7 +270,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.18.0";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.18.1";
   }
 }
 function getInfoWithoutType(target, key) {
@@ -1280,19 +1280,25 @@ async function prefetch(options) {
   });
   if (preloadComponentResource) {
     const remoteInfo = helpers.utils.getRemoteInfo(remote);
-    instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
-      origin: instance,
-      preloadOptions: {
+    Promise.resolve(
+      instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
+        origin: instance,
+        preloadOptions: {
+          remote,
+          preloadConfig: {
+            nameOrAlias: remote.name,
+            exposes: [expose]
+          }
+        },
         remote,
-        preloadConfig: {
-          nameOrAlias: remote.name,
-          exposes: [expose]
-        }
-      },
-      remote,
-      remoteInfo,
-      globalSnapshot,
-      remoteSnapshot
+        remoteInfo,
+        globalSnapshot,
+        remoteSnapshot
+      })
+    ).then((assets) => {
+      if (assets) {
+        helpers.utils.preloadAssets(remoteInfo, instance, assets);
+      }
     });
   }
   const dataFetchMap = getDataFetchMap();

package/dist/{prefetch-BdNDwnqI.js → prefetch-CzVHYHef.js}

@@ -1,6 +1,6 @@
 "use strict";
-const lazyUtils = require("./utils-iEVlDmyk.js");
-const index_esm = require("./index.esm-j_1sIRzg.js");
+const lazyUtils = require("./utils-vIpCrZmn.js");
+const index_esm = require("./index.esm-Ju4RY-yW.js");
 const dataFetchFunction = async function(options) {
   var _a, _b;
   const [id, data, downgrade] = options;
@@ -271,7 +271,7 @@ function getGlobalFederationConstructor() {
 function setGlobalFederationConstructor(FederationConstructor, isDebug = index_esm.isDebugMode()) {
   if (isDebug) {
     CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR__ = FederationConstructor;
-    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.18.0";
+    CurrentGlobal.__FEDERATION__.__DEBUG_CONSTRUCTOR_VERSION__ = "0.18.1";
   }
 }
 function getInfoWithoutType(target, key) {
@@ -1281,19 +1281,25 @@ async function prefetch(options) {
   });
   if (preloadComponentResource) {
     const remoteInfo = helpers.utils.getRemoteInfo(remote);
-    instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
-      origin: instance,
-      preloadOptions: {
+    Promise.resolve(
+      instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
+        origin: instance,
+        preloadOptions: {
+          remote,
+          preloadConfig: {
+            nameOrAlias: remote.name,
+            exposes: [expose]
+          }
+        },
         remote,
-        preloadConfig: {
-          nameOrAlias: remote.name,
-          exposes: [expose]
-        }
-      },
-      remote,
-      remoteInfo,
-      globalSnapshot,
-      remoteSnapshot
+        remoteInfo,
+        globalSnapshot,
+        remoteSnapshot
+      })
+    ).then((assets) => {
+      if (assets) {
+        helpers.utils.preloadAssets(remoteInfo, instance, assets);
+      }
     });
   }
   const dataFetchMap = lazyUtils.getDataFetchMap();

package/dist/router-v5.cjs.js

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const React = require("react");
 const ReactRouterDom$1 = require("react-router-dom/index.js");
-const index = require("./index-C0fDZB5b.js");
+const index = require("./index-eN2xRRXs.js");
 const ReactRouterDom = require("react-router-dom/index.js");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });

package/dist/router-v5.es.js

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

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 index = require("./index-C0fDZB5b.js");
+const index = require("./index-eN2xRRXs.js");
 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 "./index-CqxytsLY.mjs";
+import { R as RouterContext, L as LoggerInstance } from "./index-rAO0Wr0M.mjs";
 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 index = require("./index-C0fDZB5b.js");
+const index = require("./index-eN2xRRXs.js");
 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 "./index-CqxytsLY.mjs";
+import { R as RouterContext, L as LoggerInstance } from "./index-rAO0Wr0M.mjs";
 function WrapperRouter(props) {
   const { basename, ...propsRes } = props;
   const routerContextProps = useContext(RouterContext) || {};

package/dist/{utils-C4oPJV34.mjs → utils-VSOJTX_o.mjs}

@@ -18,7 +18,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   }
 });
 var _a, _constructing, _b, _c, _max, _maxSize, _dispose, _disposeAfter, _fetchMethod, _memoMethod, _size, _calculatedSize, _keyMap, _keyList, _valList, _next, _prev, _head, _tail, _free, _disposed, _sizes, _starts, _ttls, _hasDispose, _hasFetchMethod, _hasDisposeAfter, _LRUCache_instances, initializeTTLTracking_fn, _updateItemAge, _statusTTL, _setItemTTL, _isStale, initializeSizeTracking_fn, _removeItemSize, _addItemSize, _requireSize, indexes_fn, rindexes_fn, isValidIndex_fn, evict_fn, backgroundFetch_fn, isBackgroundFetch_fn, connect_fn, moveToTail_fn, delete_fn, clear_fn;
-import { c as createLogger, i as isBrowserEnv, a as composeKeyWithSeparator } from "./index.esm-BCeUd-x9.mjs";
+import { c as createLogger, i as isBrowserEnv, a as composeKeyWithSeparator } from "./index.esm-CtI0uQUR.mjs";
 const PLUGIN_IDENTIFIER = "[ Module Federation React ]";
 const DOWNGRADE_KEY = "_mfSSRDowngrade";
 const DATA_FETCH_FUNCTION = "_mfDataFetch";

package/dist/{utils-iEVlDmyk.js → utils-vIpCrZmn.js}

@@ -19,7 +19,7 @@ var __privateWrapper = (obj, member, setter, getter) => ({
   }
 });
 var _a, _constructing, _b, _c, _max, _maxSize, _dispose, _disposeAfter, _fetchMethod, _memoMethod, _size, _calculatedSize, _keyMap, _keyList, _valList, _next, _prev, _head, _tail, _free, _disposed, _sizes, _starts, _ttls, _hasDispose, _hasFetchMethod, _hasDisposeAfter, _LRUCache_instances, initializeTTLTracking_fn, _updateItemAge, _statusTTL, _setItemTTL, _isStale, initializeSizeTracking_fn, _removeItemSize, _addItemSize, _requireSize, indexes_fn, rindexes_fn, isValidIndex_fn, evict_fn, backgroundFetch_fn, isBackgroundFetch_fn, connect_fn, moveToTail_fn, delete_fn, clear_fn;
-const index_esm = require("./index.esm-j_1sIRzg.js");
+const index_esm = require("./index.esm-Ju4RY-yW.js");
 const PLUGIN_IDENTIFIER = "[ Module Federation React ]";
 const DOWNGRADE_KEY = "_mfSSRDowngrade";
 const DATA_FETCH_FUNCTION = "_mfDataFetch";

package/dist/v18.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-UGCwcMnG.js");
+const bridgeBase = require("./bridge-base-Ds850AOx.js");
 function createReact18Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v18.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-BoshEggF.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-BwHtOqw_.mjs";
 function createReact18Root(container, options) {
   return createRoot(container, options);
 }

package/dist/v19.cjs.js

@@ -1,7 +1,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const client = require("react-dom/client");
-const bridgeBase = require("./bridge-base-UGCwcMnG.js");
+const bridgeBase = require("./bridge-base-Ds850AOx.js");
 function createReact19Root(container, options) {
   return client.createRoot(container, options);
 }

package/dist/v19.es.js

@@ -1,5 +1,5 @@
 import { createRoot } from "react-dom/client";
-import { c as createBaseBridgeComponent } from "./bridge-base-BoshEggF.mjs";
+import { c as createBaseBridgeComponent } from "./bridge-base-BwHtOqw_.mjs";
 function createReact19Root(container, options) {
   return createRoot(container, options);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@module-federation/bridge-react",
-  "version": "0.18.0",
+  "version": "0.18.1",
   "sideEffects": false,
   "publishConfig": {
     "access": "public"
@@ -95,8 +95,8 @@
   "dependencies": {
     "react-error-boundary": "^4.1.2",
     "lru-cache": "^10.4.3",
-    "@module-federation/bridge-shared": "0.18.0",
-    "@module-federation/sdk": "0.18.0"
+    "@module-federation/bridge-shared": "0.18.1",
+    "@module-federation/sdk": "0.18.1"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
@@ -118,8 +118,8 @@
     "vite": "^5.4.18",
     "vite-plugin-dts": "^4.3.0",
     "hono": "3.12.12",
-    "@module-federation/runtime": "0.18.0",
-    "@module-federation/runtime-core": "0.18.0"
+    "@module-federation/runtime": "0.18.1",
+    "@module-federation/runtime-core": "0.18.1"
   },
   "scripts": {
     "dev": "vite",

package/src/lazy/data-fetch/prefetch.ts

@@ -44,19 +44,25 @@ export async function prefetch(options: PrefetchOptions) {
   if (preloadComponentResource) {
     const remoteInfo = helpers.utils.getRemoteInfo(remote);
 
-    instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
-      origin: instance,
-      preloadOptions: {
-        remote,
-        preloadConfig: {
-          nameOrAlias: remote.name,
-          exposes: [expose],
+    Promise.resolve(
+      instance.remoteHandler.hooks.lifecycle.generatePreloadAssets.emit({
+        origin: instance,
+        preloadOptions: {
+          remote,
+          preloadConfig: {
+            nameOrAlias: remote.name,
+            exposes: [expose],
+          },
         },
-      },
-      remote,
-      remoteInfo,
-      globalSnapshot,
-      remoteSnapshot,
+        remote,
+        remoteInfo,
+        globalSnapshot,
+        remoteSnapshot,
+      }),
+    ).then((assets) => {
+      if (assets) {
+        helpers.utils.preloadAssets(remoteInfo, instance, assets);
+      }
     });
   }
 

package/src/remote/component.tsx

@@ -23,6 +23,7 @@ const RemoteAppWrapper = forwardRef(function (
     className,
     style,
     fallback,
+    loading,
     ...resProps
   } = props;
 
@@ -104,7 +105,9 @@ const RemoteAppWrapper = forwardRef(function (
   // bridge-remote-root
   const rootComponentClassName = `${getRootDomDefaultClassName(moduleName)} ${className || ''}`;
   return (
-    <div className={rootComponentClassName} style={style} ref={rootRef}></div>
+    <div className={rootComponentClassName} style={style} ref={rootRef}>
+      {loading}
+    </div>
   );
 });
 

package/src/remote/create.tsx

@@ -44,6 +44,7 @@ function createLazyRemoteComponent<
               providerInfo={exportFn}
               exportName={info.export || 'default'}
               fallback={info.fallback}
+              loading={info.loading}
               ref={ref}
               {...props}
             />
@@ -96,7 +97,7 @@ export function createRemoteComponent<
   E extends keyof T = keyof T,
 >(info: LazyRemoteComponentInfo<T, E>) {
   LoggerInstance.warn(
-    `createRemoteAppComponent is deprecated, please use createRemoteAppComponent instead!`,
+    `createRemoteComponent is deprecated, please use createRemoteAppComponent instead!`,
   );
   return createRemoteAppComponent(info);
 }