@module-federation/modern-js 0.14.3 → 0.16.0

package/dist/esm/cli/server/data-fetch-server-plugin.js

@@ -0,0 +1,237 @@
+import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { DATA_FETCH_QUERY, MF_DATA_FETCH_STATUS } from "../../constant";
+import logger from "../../logger";
+import { getDataFetchMap } from "../../utils";
+import { fetchData, initDataFetchMap, loadDataFetchModule } from "../../utils/dataFetch";
+import { SEPARATOR, MANIFEST_EXT } from "@module-federation/sdk";
+function wrapSetTimeout(targetPromise) {
+  var delay = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : 2e4, id = arguments.length > 2 ? arguments[2] : void 0;
+  if (targetPromise && typeof targetPromise.then === "function") {
+    return new Promise(function(resolve, reject) {
+      var timeoutId = setTimeout(function() {
+        logger.warn("Data fetch for ID ".concat(id, " timed out after 20 seconds."));
+        reject(new Error("Data fetch for ID ".concat(id, " timed out after 20 seconds")));
+      }, delay);
+      targetPromise.then(function(value) {
+        clearTimeout(timeoutId);
+        resolve(value);
+      }).catch(function(err) {
+        clearTimeout(timeoutId);
+        reject(err);
+      });
+    });
+  }
+}
+function addProtocol(url) {
+  if (url.startsWith("//")) {
+    return "https:" + url;
+  }
+  return url;
+}
+var getDecodeQuery = function(url, name) {
+  var res = url.searchParams.get(name);
+  if (!res) {
+    return null;
+  }
+  return decodeURIComponent(res);
+};
+var middleware = function() {
+  var _ref = _async_to_generator(function(ctx, next) {
+    var _globalThis___FEDERATION__, url, dataFetchId, params, remoteInfo, remoteInfoQuery, _dataFetchMap_dataFetchId, _dataFetchMap_dataFetchId1, dataFetchMap, fetchDataPromise, targetPromise, wrappedPromise, res, hostInstance, remoteEntry, remote, _hostInstance_snapshotHandler_getGlobalRemoteInfo, hostGlobalSnapshot, remoteSnapshot, dataFetchItem, callFetchDataPromise, wrappedPromise1, res1, remoteId, hostInstance1, dataFetchFn, data, e;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          try {
+            url = new URL(ctx.req.url);
+            dataFetchId = getDecodeQuery(url, DATA_FETCH_QUERY);
+            params = JSON.parse(getDecodeQuery(url, "params") || "{}");
+            remoteInfoQuery = getDecodeQuery(url, "remoteInfo");
+            remoteInfo = remoteInfoQuery ? JSON.parse(remoteInfoQuery) : null;
+          } catch (e2) {
+            logger.error("fetch data from server, error: ", e2);
+            return [
+              2,
+              next()
+            ];
+          }
+          if (!dataFetchId) {
+            return [
+              2,
+              next()
+            ];
+          }
+          logger.log("fetch data from server, dataFetchId: ", dataFetchId);
+          logger.debug("fetch data from server, moduleInfo: ", (_globalThis___FEDERATION__ = globalThis.__FEDERATION__) === null || _globalThis___FEDERATION__ === void 0 ? void 0 : _globalThis___FEDERATION__.moduleInfo);
+          _state.label = 1;
+        case 1:
+          _state.trys.push([
+            1,
+            9,
+            ,
+            10
+          ]);
+          dataFetchMap = getDataFetchMap();
+          if (!dataFetchMap) {
+            initDataFetchMap();
+          }
+          fetchDataPromise = (_dataFetchMap_dataFetchId = dataFetchMap[dataFetchId]) === null || _dataFetchMap_dataFetchId === void 0 ? void 0 : _dataFetchMap_dataFetchId[1];
+          logger.debug("fetch data from server, fetchDataPromise: ", fetchDataPromise);
+          if (!(fetchDataPromise && ((_dataFetchMap_dataFetchId1 = dataFetchMap[dataFetchId]) === null || _dataFetchMap_dataFetchId1 === void 0 ? void 0 : _dataFetchMap_dataFetchId1[2]) !== MF_DATA_FETCH_STATUS.ERROR))
+            return [
+              3,
+              4
+            ];
+          targetPromise = fetchDataPromise[0];
+          wrappedPromise = wrapSetTimeout(targetPromise, 2e4, dataFetchId);
+          if (!wrappedPromise)
+            return [
+              3,
+              3
+            ];
+          return [
+            4,
+            wrappedPromise
+          ];
+        case 2:
+          res = _state.sent();
+          logger.log("fetch data from server, fetchDataPromise res: ", res);
+          return [
+            2,
+            ctx.json(res)
+          ];
+        case 3:
+          logger.error("Expected a Promise from fetchDataPromise[0] for dataFetchId ".concat(dataFetchId, ", but received:"), targetPromise, "Will try call new dataFetch again...");
+          _state.label = 4;
+        case 4:
+          if (remoteInfo) {
+            try {
+              hostInstance = globalThis.__FEDERATION__.__INSTANCES__[0];
+              remoteEntry = "".concat(addProtocol(remoteInfo.ssrPublicPath) + remoteInfo.ssrRemoteEntry);
+              if (!hostInstance) {
+                throw new Error("host instance not found!");
+              }
+              remote = hostInstance.options.remotes.find(function(remote2) {
+                return remote2.name === remoteInfo.name;
+              });
+              logger.debug("find remote: ", JSON.stringify(remote));
+              if (!remote) {
+                hostInstance.registerRemotes([
+                  {
+                    name: remoteInfo.name,
+                    entry: remoteEntry,
+                    entryGlobalName: remoteInfo.globalName
+                  }
+                ]);
+              } else if (!("entry" in remote) || !remote.entry.includes(MANIFEST_EXT)) {
+                _hostInstance_snapshotHandler_getGlobalRemoteInfo = hostInstance.snapshotHandler.getGlobalRemoteInfo(remoteInfo), hostGlobalSnapshot = _hostInstance_snapshotHandler_getGlobalRemoteInfo.hostGlobalSnapshot, remoteSnapshot = _hostInstance_snapshotHandler_getGlobalRemoteInfo.remoteSnapshot;
+                logger.debug("find hostGlobalSnapshot: ", JSON.stringify(hostGlobalSnapshot));
+                logger.debug("find remoteSnapshot: ", JSON.stringify(remoteSnapshot));
+                if (!hostGlobalSnapshot || !remoteSnapshot) {
+                  if ("version" in remote) {
+                    delete remote.version;
+                  }
+                  remote.entry = remoteEntry;
+                  remote.entryGlobalName = remoteInfo.globalName;
+                }
+              }
+            } catch (e2) {
+              ctx.status(500);
+              return [
+                2,
+                ctx.text("failed to fetch ".concat(remoteInfo.name, " data, error:\n ").concat(e2))
+              ];
+            }
+          }
+          dataFetchItem = dataFetchMap[dataFetchId];
+          logger.debug("fetch data from server, dataFetchItem: ", dataFetchItem);
+          if (!dataFetchItem)
+            return [
+              3,
+              6
+            ];
+          callFetchDataPromise = fetchData(dataFetchId, _object_spread_props(_object_spread({}, params), {
+            isDowngrade: !remoteInfo
+          }));
+          wrappedPromise1 = wrapSetTimeout(callFetchDataPromise, 2e4, dataFetchId);
+          if (!wrappedPromise1)
+            return [
+              3,
+              6
+            ];
+          return [
+            4,
+            wrappedPromise1
+          ];
+        case 5:
+          res1 = _state.sent();
+          logger.log("fetch data from server, dataFetchItem res: ", res1);
+          return [
+            2,
+            ctx.json(res1)
+          ];
+        case 6:
+          remoteId = dataFetchId.split(SEPARATOR)[0];
+          hostInstance1 = globalThis.__FEDERATION__.__INSTANCES__[0];
+          if (!hostInstance1) {
+            throw new Error("host instance not found!");
+          }
+          return [
+            4,
+            loadDataFetchModule(hostInstance1, remoteId)
+          ];
+        case 7:
+          dataFetchFn = _state.sent();
+          return [
+            4,
+            dataFetchFn(_object_spread_props(_object_spread({}, params), {
+              isDowngrade: !remoteInfo
+            }))
+          ];
+        case 8:
+          data = _state.sent();
+          logger.log("fetch data from server, loadDataFetchModule res: ", data);
+          return [
+            2,
+            ctx.json(data)
+          ];
+        case 9:
+          e = _state.sent();
+          logger.error("server plugin data fetch error: ", e);
+          ctx.status(500);
+          return [
+            2,
+            ctx.text("failed to fetch ".concat(remoteInfo.name, " data, error:\n ").concat(e))
+          ];
+        case 10:
+          return [
+            2
+          ];
+      }
+    });
+  });
+  return function middleware2(ctx, next) {
+    return _ref.apply(this, arguments);
+  };
+}();
+var dataFetchServePlugin = function() {
+  return {
+    name: "mf-data-fetch-server-plugin",
+    setup: function(api) {
+      api.onPrepare(function() {
+        var middlewares = api.getServerContext().middlewares;
+        middlewares.push({
+          name: "module-federation-serve-manifest",
+          // @ts-ignore type error
+          handler: middleware
+        });
+      });
+    }
+  };
+};
+var data_fetch_server_plugin_default = dataFetchServePlugin;
+export {
+  data_fetch_server_plugin_default as default
+};

package/dist/esm/cli/ssrPlugin.js

@@ -6,9 +6,9 @@ import fs from "fs-extra";
 import { ModuleFederationPlugin } from "@module-federation/enhanced/webpack";
 import { ModuleFederationPlugin as RspackModuleFederationPlugin } from "@module-federation/enhanced/rspack";
 import UniverseEntryChunkTrackerPlugin from "@module-federation/node/universe-entry-chunk-tracker-plugin";
-import { updateStatsAndManifest } from "./manifest";
-import { isDev } from "./constant";
-import logger from "./logger";
+import logger from "../logger";
+import { isDev } from "./utils";
+import { updateStatsAndManifest } from "@module-federation/rsbuild-plugin/utils";
 import { isWebTarget, skipByTarget } from "./utils";
 function setEnv() {
   process.env["MF_DISABLE_EMIT_STATS"] = "true";
@@ -85,15 +85,23 @@ var moduleFederationSSRPlugin = function(pluginOptions) {
           setEnv();
           api._internalRuntimePlugins(function(param) {
             var entrypoint = param.entrypoint, plugins = param.plugins;
-            if (!isDev) {
+            var fetchServerQuery = pluginOptions.fetchServerQuery;
+            plugins.push({
+              name: "injectDataFetchFunction",
+              path: "@module-federation/modern-js/ssr-inject-data-fetch-function-plugin",
+              config: {
+                fetchServerQuery
+              }
+            });
+            if (!isDev()) {
               return {
                 entrypoint,
                 plugins
               };
             }
             plugins.push({
-              name: "mfSSR",
-              path: "@module-federation/modern-js/ssr-runtime",
+              name: "mfSSRDev",
+              path: "@module-federation/modern-js/ssr-dev-plugin",
               config: {}
             });
             return {
@@ -101,6 +109,18 @@ var moduleFederationSSRPlugin = function(pluginOptions) {
               plugins
             };
           });
+          if (pluginOptions.ssrConfig.remotes) {
+            api._internalServerPlugins(function(param) {
+              var plugins = param.plugins;
+              plugins.push({
+                name: "@module-federation/modern-js/data-fetch-server-plugin",
+                options: {}
+              });
+              return {
+                plugins
+              };
+            });
+          }
           api.modifyBundlerChain(function(chain) {
             var target = chain.get("target");
             if (skipByTarget(target)) {
@@ -121,7 +141,7 @@ var moduleFederationSSRPlugin = function(pluginOptions) {
             }
             if (!isWeb) {
               chain.target("async-node");
-              if (isDev) {
+              if (isDev()) {
                 chain.plugin("UniverseEntryChunkTrackerPlugin").use(UniverseEntryChunkTrackerPlugin);
               }
               var userSSRConfig = pluginOptions.userConfig.ssr ? _type_of(pluginOptions.userConfig.ssr) === "object" ? pluginOptions.userConfig.ssr : {} : {};
@@ -130,7 +150,7 @@ var moduleFederationSSRPlugin = function(pluginOptions) {
                 chain.output.publicPath("".concat(publicPath).concat(userSSRConfig.distOutputDir, "/"));
               }
             }
-            if (isDev && isWeb) {
+            if (isDev() && isWeb) {
               chain.externals({
                 "@module-federation/node/utils": "NOT_USED_IN_BROWSER"
               });

package/dist/esm/cli/utils.js

@@ -42,8 +42,12 @@ var skipByTarget = function(target) {
   }
   return false;
 };
+function isDev() {
+  return process.env.NODE_ENV === "development";
+}
 export {
   getIPV4,
+  isDev,
   isWebTarget,
   skipByTarget
 };

package/dist/esm/constant.js

@@ -1,6 +1,42 @@
 var LOCALHOST = "localhost";
 var PLUGIN_IDENTIFIER = "[ Modern.js Module Federation ]";
+var DATA_FETCH_QUERY = "x-mf-data-fetch";
+var DATA_FETCH_ERROR_PREFIX = "caught the following error during dataFetch: ";
+var LOAD_REMOTE_ERROR_PREFIX = "caught the following error during loadRemote: ";
+var DOWNGRADE_KEY = "_mfSSRDowngrade";
+var DATA_FETCH_MAP_KEY = "__MF_DATA_FETCH_MAP__";
+var DATA_FETCH_FUNCTION = "_mfDataFetch";
+var FS_HREF = "_mfFSHref";
+var ERROR_TYPE = {
+  DATA_FETCH: 1,
+  LOAD_REMOTE: 2,
+  UNKNOWN: 3
+};
+var WRAP_DATA_FETCH_ID_IDENTIFIER = "wrap_dfip_identifier";
+var MF_DATA_FETCH_TYPE;
+(function(MF_DATA_FETCH_TYPE2) {
+  MF_DATA_FETCH_TYPE2[MF_DATA_FETCH_TYPE2["FETCH_SERVER"] = 1] = "FETCH_SERVER";
+  MF_DATA_FETCH_TYPE2[MF_DATA_FETCH_TYPE2["FETCH_CLIENT"] = 2] = "FETCH_CLIENT";
+})(MF_DATA_FETCH_TYPE || (MF_DATA_FETCH_TYPE = {}));
+var MF_DATA_FETCH_STATUS;
+(function(MF_DATA_FETCH_STATUS2) {
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["LOADED"] = 1] = "LOADED";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["LOADING"] = 2] = "LOADING";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["AWAIT"] = 0] = "AWAIT";
+  MF_DATA_FETCH_STATUS2[MF_DATA_FETCH_STATUS2["ERROR"] = 3] = "ERROR";
+})(MF_DATA_FETCH_STATUS || (MF_DATA_FETCH_STATUS = {}));
 export {
+  DATA_FETCH_ERROR_PREFIX,
+  DATA_FETCH_FUNCTION,
+  DATA_FETCH_MAP_KEY,
+  DATA_FETCH_QUERY,
+  DOWNGRADE_KEY,
+  ERROR_TYPE,
+  FS_HREF,
+  LOAD_REMOTE_ERROR_PREFIX,
   LOCALHOST,
-  PLUGIN_IDENTIFIER
+  MF_DATA_FETCH_STATUS,
+  MF_DATA_FETCH_TYPE,
+  PLUGIN_IDENTIFIER,
+  WRAP_DATA_FETCH_ID_IDENTIFIER
 };

package/dist/esm/{cli/logger.js → logger.js}

@@ -1,5 +1,5 @@
 import { createLogger } from "@module-federation/sdk";
-import { PLUGIN_IDENTIFIER } from "../constant";
+import { PLUGIN_IDENTIFIER } from "./constant";
 var logger = createLogger(PLUGIN_IDENTIFIER);
 var logger_default = logger;
 export {

package/dist/esm/runtime/AwaitDataFetch.js

@@ -0,0 +1,131 @@
+import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
+import { _ as _tagged_template_literal } from "@swc/helpers/_/_tagged_template_literal";
+import { _ as _type_of } from "@swc/helpers/_/_type_of";
+function _templateObject() {
+  var data = _tagged_template_literal([
+    "\n                  globalThis['",
+    "'] = globalThis['",
+    "']  || []\n                  globalThis['",
+    "'].push([",
+    ",",
+    ",true]);"
+  ]);
+  _templateObject = function _templateObject2() {
+    return data;
+  };
+  return data;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Suspense, useRef } from "react";
+import logger from "../logger";
+import { DATA_FETCH_ERROR_PREFIX, LOAD_REMOTE_ERROR_PREFIX, ERROR_TYPE, DATA_FETCH_FUNCTION } from "../constant";
+import { getDataFetchIdWithErrorMsgs, wrapDataFetchId } from "../utils";
+function isPromise(obj) {
+  return !!obj && ((typeof obj === "undefined" ? "undefined" : _type_of(obj)) === "object" || typeof obj === "function") && typeof obj.then === "function";
+}
+var AWAIT_ERROR_PREFIX = "<Await /> caught the following error during render: ";
+var transformError = function(err) {
+  var errMsg = _instanceof(err, Error) ? err.message : err;
+  var originalMsg = errMsg.replace(AWAIT_ERROR_PREFIX, "");
+  var dataFetchMapKey = getDataFetchIdWithErrorMsgs(originalMsg);
+  if (originalMsg.indexOf(DATA_FETCH_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(originalMsg.replace(DATA_FETCH_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")),
+      errorType: ERROR_TYPE.DATA_FETCH,
+      dataFetchMapKey
+    };
+  }
+  if (originalMsg.indexOf(LOAD_REMOTE_ERROR_PREFIX) === 0) {
+    return {
+      error: new Error(originalMsg.replace(LOAD_REMOTE_ERROR_PREFIX, "").replace(wrapDataFetchId(dataFetchMapKey), "")),
+      errorType: ERROR_TYPE.LOAD_REMOTE,
+      dataFetchMapKey
+    };
+  }
+  return {
+    error: new Error(originalMsg.replace(wrapDataFetchId(dataFetchMapKey), "")),
+    errorType: ERROR_TYPE.UNKNOWN,
+    dataFetchMapKey
+  };
+};
+var DefaultLoading = /* @__PURE__ */ _jsx(_Fragment, {});
+var DefaultErrorElement = function(_data) {
+  return /* @__PURE__ */ _jsx("div", {
+    children: "Error"
+  });
+};
+function AwaitDataFetch(param) {
+  var resolve = param.resolve, _param_loading = param.loading, loading = _param_loading === void 0 ? DefaultLoading : _param_loading, _param_errorElement = param.errorElement, errorElement = _param_errorElement === void 0 ? DefaultErrorElement : _param_errorElement, children = param.children, params = param.params;
+  var dataRef = useRef();
+  var data = dataRef.current || resolve;
+  var getData = isPromise(data) ? fetchData(data, dataRef) : function() {
+    return data;
+  };
+  return /* @__PURE__ */ _jsx(AwaitSuspense, {
+    params,
+    loading,
+    errorElement,
+    // @ts-ignore
+    resolve: getData,
+    children
+  });
+}
+function AwaitSuspense(param) {
+  var resolve = param.resolve, children = param.children, _param_loading = param.loading, loading = _param_loading === void 0 ? DefaultLoading : _param_loading, _param_errorElement = param.errorElement, errorElement = _param_errorElement === void 0 ? DefaultErrorElement : _param_errorElement;
+  return /* @__PURE__ */ _jsx(Suspense, {
+    fallback: loading,
+    children: /* @__PURE__ */ _jsx(ResolveAwait, {
+      resolve,
+      errorElement,
+      children
+    })
+  });
+}
+function ResolveAwait(param) {
+  var children = param.children, resolve = param.resolve, errorElement = param.errorElement, params = param.params;
+  var data = resolve();
+  logger.debug("resolve data: ", data);
+  if (typeof data === "string" && data.indexOf(AWAIT_ERROR_PREFIX) === 0) {
+    var transformedError = transformError(data);
+    return /* @__PURE__ */ _jsx(_Fragment, {
+      children: typeof errorElement === "function" ? /* @__PURE__ */ _jsxs(_Fragment, {
+        children: [
+          globalThis.FEDERATION_SSR && /* @__PURE__ */ _jsx("script", {
+            suppressHydrationWarning: true,
+            dangerouslySetInnerHTML: {
+              __html: String.raw(_templateObject(), DATA_FETCH_FUNCTION, DATA_FETCH_FUNCTION, DATA_FETCH_FUNCTION, transformedError.dataFetchMapKey ? "'".concat(transformedError.dataFetchMapKey, "'") : "", params ? JSON.stringify(params) : null)
+            }
+          }),
+          errorElement(transformedError)
+        ]
+      }) : errorElement
+    });
+  }
+  var toRender = typeof children === "function" ? children(data) : children;
+  return /* @__PURE__ */ _jsx(_Fragment, {
+    children: toRender
+  });
+}
+var fetchData = function(promise, ref) {
+  var data;
+  var status = "pending";
+  var suspender = promise.then(function(res) {
+    status = "success";
+    data = res;
+    ref.current = res;
+  }).catch(function(e) {
+    status = "success";
+    console.warn(e);
+    data = AWAIT_ERROR_PREFIX + e;
+  });
+  return function() {
+    if (status === "pending") {
+      throw suspender;
+    }
+    return data;
+  };
+};
+export {
+  AwaitDataFetch,
+  transformError
+};