@module-federation/modern-js 0.14.3 → 0.15.0

package/dist/esm/runtime/createRemoteComponent.js

@@ -0,0 +1,417 @@
+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 _object_without_properties } from "@swc/helpers/_/_object_without_properties";
+import { _ as _sliced_to_array } from "@swc/helpers/_/_sliced_to_array";
+import { _ as _tagged_template_literal } from "@swc/helpers/_/_tagged_template_literal";
+import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+function _templateObject() {
+  var data = _tagged_template_literal([
+    "\n                  globalThis['",
+    "'] = globalThis['",
+    "'] || [];\n                  globalThis['",
+    "'].push(['",
+    "',",
+    "]);\n                  "
+  ]);
+  _templateObject = function _templateObject2() {
+    return data;
+  };
+  return data;
+}
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import React, { useEffect, useState } from "react";
+import logger from "../logger";
+import { getInstance } from "@module-federation/enhanced/runtime";
+import { AwaitDataFetch, transformError } from "./AwaitDataFetch";
+import { fetchData, getDataFetchItem, getDataFetchMapKey } from "../utils/dataFetch";
+import { getDataFetchInfo, getLoadedRemoteInfos, setDataFetchItemLoadedStatus, wrapDataFetchId } from "../utils";
+import { DATA_FETCH_ERROR_PREFIX, DATA_FETCH_FUNCTION, FS_HREF, LOAD_REMOTE_ERROR_PREFIX, MF_DATA_FETCH_TYPE } from "../constant";
+function getTargetModuleInfo(id) {
+  var instance = getInstance();
+  if (!instance) {
+    return;
+  }
+  var loadedRemoteInfo = getLoadedRemoteInfos(id, instance);
+  if (!loadedRemoteInfo) {
+    return;
+  }
+  var snapshot = loadedRemoteInfo.snapshot;
+  if (!snapshot) {
+    return;
+  }
+  var publicPath = "publicPath" in snapshot ? snapshot.publicPath : "getPublicPath" in snapshot ? new Function(snapshot.getPublicPath)() : "";
+  if (!publicPath) {
+    return;
+  }
+  var modules = "modules" in snapshot ? snapshot.modules : [];
+  var targetModule = modules.find(function(m) {
+    return m.modulePath === loadedRemoteInfo.expose;
+  });
+  if (!targetModule) {
+    return;
+  }
+  var remoteEntry = "remoteEntry" in snapshot ? snapshot.remoteEntry : "";
+  if (!remoteEntry) {
+    return;
+  }
+  return {
+    module: targetModule,
+    publicPath,
+    remoteEntry
+  };
+}
+function collectSSRAssets(options) {
+  var _ref = typeof options === "string" ? {
+    id: options
+  } : options, id = _ref.id, _ref_injectLink = _ref.injectLink, injectLink = _ref_injectLink === void 0 ? true : _ref_injectLink, _ref_injectScript = _ref.injectScript, injectScript = _ref_injectScript === void 0 ? false : _ref_injectScript;
+  var links = [];
+  var scripts = [];
+  var instance = getInstance();
+  if (!instance || !injectLink && !injectScript) {
+    return _to_consumable_array(scripts).concat(_to_consumable_array(links));
+  }
+  var moduleAndPublicPath = getTargetModuleInfo(id);
+  if (!moduleAndPublicPath) {
+    return _to_consumable_array(scripts).concat(_to_consumable_array(links));
+  }
+  var targetModule = moduleAndPublicPath.module, publicPath = moduleAndPublicPath.publicPath, remoteEntry = moduleAndPublicPath.remoteEntry;
+  if (injectLink) {
+    _to_consumable_array(targetModule.assets.css.sync).concat(_to_consumable_array(targetModule.assets.css.async)).sort().forEach(function(file, index) {
+      links.push(/* @__PURE__ */ _jsx("link", {
+        href: "".concat(publicPath).concat(file),
+        rel: "stylesheet",
+        type: "text/css"
+      }, "".concat(file.split(".")[0], "_").concat(index)));
+    });
+  }
+  if (injectScript) {
+    scripts.push(/* @__PURE__ */ _jsx("script", {
+      async: true,
+      src: "".concat(publicPath).concat(remoteEntry),
+      crossOrigin: "anonymous"
+    }, remoteEntry.split(".")[0]));
+    _to_consumable_array(targetModule.assets.js.sync).sort().forEach(function(file, index) {
+      scripts.push(/* @__PURE__ */ _jsx("script", {
+        async: true,
+        src: "".concat(publicPath).concat(file),
+        crossOrigin: "anonymous"
+      }, "".concat(file.split(".")[0], "_").concat(index)));
+    });
+  }
+  return _to_consumable_array(scripts).concat(_to_consumable_array(links));
+}
+function getServerNeedRemoteInfo(loadedRemoteInfo, id, noSSR) {
+  if (noSSR || typeof window !== "undefined" && window.location.href !== window[FS_HREF]) {
+    var _dataFetchItem_;
+    if (!(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.version)) {
+      throw new Error("".concat(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name, " version is empty"));
+    }
+    var snapshot = loadedRemoteInfo.snapshot;
+    if (!snapshot) {
+      throw new Error("".concat(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name, " snapshot is empty"));
+    }
+    var dataFetchItem = getDataFetchItem(id);
+    var isFetchServer = (dataFetchItem === null || dataFetchItem === void 0 ? void 0 : (_dataFetchItem_ = dataFetchItem[0]) === null || _dataFetchItem_ === void 0 ? void 0 : _dataFetchItem_[1]) === MF_DATA_FETCH_TYPE.FETCH_SERVER;
+    if (isFetchServer && (!("ssrPublicPath" in snapshot) || !snapshot.ssrPublicPath)) {
+      throw new Error("ssrPublicPath is required while fetching ".concat(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name, " data in SSR project!"));
+    }
+    if (isFetchServer && (!("ssrRemoteEntry" in snapshot) || !snapshot.ssrRemoteEntry)) {
+      throw new Error("ssrRemoteEntry is required while loading ".concat(loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.name, " data loader in SSR project!"));
+    }
+    return {
+      name: loadedRemoteInfo.name,
+      version: loadedRemoteInfo.version,
+      ssrPublicPath: "ssrPublicPath" in snapshot ? snapshot.ssrPublicPath || "" : "",
+      ssrRemoteEntry: "ssrRemoteEntry" in snapshot ? snapshot.ssrRemoteEntry || "" : "",
+      globalName: loadedRemoteInfo.entryGlobalName
+    };
+  }
+  return;
+}
+function createRemoteComponent(options) {
+  var exportName = (options === null || options === void 0 ? void 0 : options.export) || "default";
+  var callLoader = function() {
+    var _ref = _async_to_generator(function() {
+      var m;
+      return _ts_generator(this, function(_state) {
+        switch (_state.label) {
+          case 0:
+            logger.debug("callLoader start", Date.now());
+            return [
+              4,
+              options.loader()
+            ];
+          case 1:
+            m = _state.sent();
+            logger.debug("callLoader end", Date.now());
+            if (!m) {
+              throw new Error("load remote failed");
+            }
+            return [
+              2,
+              m
+            ];
+        }
+      });
+    });
+    return function callLoader2() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var getData = function() {
+    var _ref = _async_to_generator(function(noSSR) {
+      var loadedRemoteInfo, moduleId, instance, m, e, errMsg, dataFetchMapKey, data, err, errMsg1;
+      return _ts_generator(this, function(_state) {
+        switch (_state.label) {
+          case 0:
+            instance = getInstance();
+            _state.label = 1;
+          case 1:
+            _state.trys.push([
+              1,
+              3,
+              ,
+              4
+            ]);
+            return [
+              4,
+              callLoader()
+            ];
+          case 2:
+            m = _state.sent();
+            moduleId = m && m[Symbol.for("mf_module_id")];
+            if (!moduleId) {
+              throw new Error("moduleId is empty");
+            }
+            loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+            if (!loadedRemoteInfo) {
+              throw new Error("can not find loaded remote('".concat(moduleId, "') info!"));
+            }
+            return [
+              3,
+              4
+            ];
+          case 3:
+            e = _state.sent();
+            errMsg = "".concat(LOAD_REMOTE_ERROR_PREFIX).concat(e);
+            logger.debug(e);
+            throw new Error(errMsg);
+          case 4:
+            _state.trys.push([
+              4,
+              6,
+              ,
+              7
+            ]);
+            dataFetchMapKey = getDataFetchMapKey(getDataFetchInfo({
+              name: loadedRemoteInfo.name,
+              alias: loadedRemoteInfo.alias,
+              id: moduleId,
+              remoteSnapshot: loadedRemoteInfo.snapshot
+            }), {
+              name: instance.name,
+              version: instance === null || instance === void 0 ? void 0 : instance.options.version
+            });
+            logger.debug("getData dataFetchMapKey: ", dataFetchMapKey);
+            if (!dataFetchMapKey) {
+              return [
+                2
+              ];
+            }
+            return [
+              4,
+              fetchData(dataFetchMapKey, _object_spread_props(_object_spread({}, options.dataFetchParams), {
+                isDowngrade: false
+              }), getServerNeedRemoteInfo(loadedRemoteInfo, dataFetchMapKey, noSSR))
+            ];
+          case 5:
+            data = _state.sent();
+            setDataFetchItemLoadedStatus(dataFetchMapKey);
+            logger.debug("get data res: \n", data);
+            return [
+              2,
+              data
+            ];
+          case 6:
+            err = _state.sent();
+            errMsg1 = "".concat(DATA_FETCH_ERROR_PREFIX).concat(wrapDataFetchId(dataFetchMapKey)).concat(err);
+            logger.debug(errMsg1);
+            throw new Error(errMsg1);
+          case 7:
+            return [
+              2
+            ];
+        }
+      });
+    });
+    return function getData2(noSSR) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+  var LazyComponent = /* @__PURE__ */ React.lazy(/* @__PURE__ */ _async_to_generator(function() {
+    var m, moduleId, instance, loadedRemoteInfo, dataFetchMapKey, assets, Com;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          return [
+            4,
+            callLoader()
+          ];
+        case 1:
+          m = _state.sent();
+          moduleId = m && m[Symbol.for("mf_module_id")];
+          instance = getInstance();
+          loadedRemoteInfo = getLoadedRemoteInfos(moduleId, instance);
+          loadedRemoteInfo === null || loadedRemoteInfo === void 0 ? void 0 : loadedRemoteInfo.snapshot;
+          dataFetchMapKey = loadedRemoteInfo ? getDataFetchMapKey(getDataFetchInfo({
+            name: loadedRemoteInfo.name,
+            alias: loadedRemoteInfo.alias,
+            id: moduleId,
+            remoteSnapshot: loadedRemoteInfo.snapshot
+          }), {
+            name: instance.name,
+            version: instance === null || instance === void 0 ? void 0 : instance.options.version
+          }) : void 0;
+          logger.debug("LazyComponent dataFetchMapKey: ", dataFetchMapKey);
+          assets = collectSSRAssets({
+            id: moduleId
+          });
+          Com = m[exportName];
+          if (exportName in m && typeof Com === "function") {
+            return [
+              2,
+              {
+                default: function(props) {
+                  return /* @__PURE__ */ _jsxs(_Fragment, {
+                    children: [
+                      globalThis.FEDERATION_SSR && dataFetchMapKey && /* @__PURE__ */ _jsx("script", {
+                        suppressHydrationWarning: true,
+                        dangerouslySetInnerHTML: {
+                          __html: String.raw(_templateObject(), DATA_FETCH_FUNCTION, DATA_FETCH_FUNCTION, DATA_FETCH_FUNCTION, dataFetchMapKey, JSON.stringify(props.mfData))
+                        }
+                      }),
+                      globalThis.FEDERATION_SSR && assets,
+                      /* @__PURE__ */ _jsx(Com, _object_spread({}, props))
+                    ]
+                  });
+                }
+              }
+            ];
+          } else {
+            throw Error("Make sure that ".concat(moduleId, " has the correct export when export is ").concat(String(exportName)));
+          }
+          return [
+            2
+          ];
+      }
+    });
+  }));
+  return function(props) {
+    var key = props.key, args = _object_without_properties(props, [
+      "key"
+    ]);
+    if (globalThis.FEDERATION_SSR && !options.noSSR) {
+      var key1 = props.key, args1 = _object_without_properties(props, [
+        "key"
+      ]);
+      return /* @__PURE__ */ _jsx(AwaitDataFetch, {
+        resolve: getData(options.noSSR),
+        loading: options.loading,
+        errorElement: options.fallback,
+        children: function(data2) {
+          return /* @__PURE__ */ _jsx(LazyComponent, _object_spread_props(_object_spread({}, args1), {
+            mfData: data2
+          }));
+        }
+      });
+    } else {
+      var _useState = _sliced_to_array(useState(null), 2), data = _useState[0], setData = _useState[1];
+      var _useState1 = _sliced_to_array(useState(true), 2), loading = _useState1[0], setLoading = _useState1[1];
+      var _useState2 = _sliced_to_array(useState(null), 2), error = _useState2[0], setError = _useState2[1];
+      useEffect(function() {
+        var isMounted = true;
+        var fetchDataAsync = function() {
+          var _ref = _async_to_generator(function() {
+            var result, e;
+            return _ts_generator(this, function(_state) {
+              switch (_state.label) {
+                case 0:
+                  _state.trys.push([
+                    0,
+                    2,
+                    3,
+                    4
+                  ]);
+                  setLoading(true);
+                  return [
+                    4,
+                    getData(options.noSSR)
+                  ];
+                case 1:
+                  result = _state.sent();
+                  if (isMounted) {
+                    setData(result);
+                  }
+                  return [
+                    3,
+                    4
+                  ];
+                case 2:
+                  e = _state.sent();
+                  if (isMounted) {
+                    setError(transformError(e));
+                  }
+                  return [
+                    3,
+                    4
+                  ];
+                case 3:
+                  if (isMounted) {
+                    setLoading(false);
+                  }
+                  return [
+                    7
+                  ];
+                case 4:
+                  return [
+                    2
+                  ];
+              }
+            });
+          });
+          return function fetchDataAsync2() {
+            return _ref.apply(this, arguments);
+          };
+        }();
+        fetchDataAsync();
+        return function() {
+          isMounted = false;
+        };
+      }, []);
+      if (loading) {
+        return /* @__PURE__ */ _jsx(_Fragment, {
+          children: options.loading
+        });
+      }
+      if (error) {
+        return /* @__PURE__ */ _jsx(_Fragment, {
+          children: typeof options.fallback === "function" ? options.fallback(error) : options.fallback
+        });
+      }
+      return /* @__PURE__ */ _jsx(LazyComponent, _object_spread_props(_object_spread({}, args), {
+        mfData: data
+      }));
+    }
+  };
+}
+function createRemoteSSRComponent(options) {
+  logger.warn("createRemoteSSRComponent is deprecated, please use createRemoteComponent instead!");
+  return createRemoteComponent(options);
+}
+export {
+  collectSSRAssets,
+  createRemoteComponent,
+  createRemoteSSRComponent
+};

package/dist/esm/runtime/index.js

@@ -1,12 +1,22 @@
 export * from "@module-federation/enhanced/runtime";
+import { ERROR_TYPE } from "../constant";
 var kit = {
   get createRemoteSSRComponent() {
-    return require("./createRemoteSSRComponent").createRemoteSSRComponent;
+    return require("./createRemoteComponent").createRemoteSSRComponent;
+  },
+  get createRemoteComponent() {
+    return require("./createRemoteComponent").createRemoteComponent;
   },
   get collectSSRAssets() {
-    return require("./createRemoteSSRComponent").collectSSRAssets;
+    return require("./createRemoteComponent").collectSSRAssets;
+  },
+  get wrapNoSSR() {
+    return require("./wrapNoSSR").wrapNoSSR;
   }
 };
+import { setSSREnv } from "../ssr-runtime/injectDataFetchFunctionPlugin";
 export {
-  kit
+  ERROR_TYPE,
+  kit,
+  setSSREnv
 };

package/dist/esm/runtime/wrapNoSSR.js

@@ -0,0 +1,12 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+function wrapNoSSR(createComponentFn) {
+  return function(options) {
+    return createComponentFn(_object_spread_props(_object_spread({}, options), {
+      noSSR: true
+    }));
+  };
+}
+export {
+  wrapNoSSR
+};

package/dist/esm/ssr-runtime/{plugin.js → devPlugin.js}

@@ -3,7 +3,8 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { SSRLiveReload } from "./SSRLiveReload";
-var mfSSRPlugin = function() {
+import { flushDataFetch } from "../utils";
+var mfSSRDevPlugin = function() {
   return {
     name: "@module-federation/modern-js",
     setup: function(api) {
@@ -30,6 +31,7 @@ var mfSSRPlugin = function() {
               ];
             case 2:
               shouldUpdate = _state.sent();
+              console.log("shouldUpdate: ", shouldUpdate);
               if (!shouldUpdate)
                 return [
                   3,
@@ -42,6 +44,7 @@ var mfSSRPlugin = function() {
               ];
             case 3:
               _state.sent();
+              flushDataFetch();
               globalThis.shouldUpdate = true;
               _state.label = 4;
             case 4:
@@ -66,5 +69,5 @@ var mfSSRPlugin = function() {
   };
 };
 export {
-  mfSSRPlugin
+  mfSSRDevPlugin
 };

package/dist/esm/ssr-runtime/downgrade.js

@@ -0,0 +1,150 @@
+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 _type_of } from "@swc/helpers/_/_type_of";
+import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
+import { DATA_FETCH_QUERY, DOWNGRADE_KEY } from "../constant";
+import { MF_DATA_FETCH_STATUS, MF_DATA_FETCH_TYPE } from "../constant";
+import { getDataFetchMap } from "../utils";
+function getDowngradeTag() {
+  return globalThis[DOWNGRADE_KEY];
+}
+function callAllDowngrade() {
+  var dataFetchMap = getDataFetchMap();
+  if (!dataFetchMap) {
+    return;
+  }
+  Object.keys(dataFetchMap).forEach(function(key) {
+    callDowngrade(key);
+  });
+}
+function callDowngrade(id, params, remoteInfo) {
+  return _callDowngrade.apply(this, arguments);
+}
+function _callDowngrade() {
+  _callDowngrade = _async_to_generator(function(id, params, remoteInfo) {
+    var dataFetchMap, mfDataFetch, promise, res, rej, dataFetchType, currentUrl, fetchServerQuery, fetchUrl, data, e;
+    return _ts_generator(this, function(_state) {
+      switch (_state.label) {
+        case 0:
+          dataFetchMap = getDataFetchMap();
+          if (!dataFetchMap) {
+            return [
+              2
+            ];
+          }
+          mfDataFetch = dataFetchMap[id];
+          if (!((mfDataFetch === null || mfDataFetch === void 0 ? void 0 : mfDataFetch[2]) === MF_DATA_FETCH_STATUS.AWAIT))
+            return [
+              3,
+              6
+            ];
+          mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADING;
+          if (mfDataFetch[1]) {
+            promise = mfDataFetch[1][0];
+            res = mfDataFetch[1][1];
+            rej = mfDataFetch[1][2];
+          } else {
+            promise = new Promise(function(resolve, reject) {
+              res = resolve;
+              rej = reject;
+            });
+            mfDataFetch[1] = [
+              promise,
+              res,
+              rej
+            ];
+          }
+          dataFetchType = mfDataFetch[0][1];
+          if (!(dataFetchType === MF_DATA_FETCH_TYPE.FETCH_CLIENT))
+            return [
+              3,
+              1
+            ];
+          try {
+            mfDataFetch[0][0]().then(function(getDataFetchFn) {
+              return getDataFetchFn(_object_spread_props(_object_spread({}, params), {
+                isDowngrade: true
+              })).then(function(data2) {
+                mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
+                res(data2);
+              });
+            });
+          } catch (e2) {
+            mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
+            rej(e2);
+          }
+          return [
+            3,
+            5
+          ];
+        case 1:
+          if (!(dataFetchType === MF_DATA_FETCH_TYPE.FETCH_SERVER))
+            return [
+              3,
+              5
+            ];
+          _state.label = 2;
+        case 2:
+          _state.trys.push([
+            2,
+            4,
+            ,
+            5
+          ]);
+          currentUrl = new URL(window.location.href);
+          currentUrl.searchParams.set(DATA_FETCH_QUERY, encodeURIComponent(id));
+          if (params) {
+            currentUrl.searchParams.set("params", encodeURIComponent(JSON.stringify(params)));
+          }
+          if (remoteInfo) {
+            currentUrl.searchParams.set("remoteInfo", encodeURIComponent(JSON.stringify(remoteInfo)));
+          }
+          fetchServerQuery = globalThis.FEDERATION_SERVER_QUERY;
+          if (fetchServerQuery && (typeof fetchServerQuery === "undefined" ? "undefined" : _type_of(fetchServerQuery)) === "object") {
+            Object.keys(fetchServerQuery).forEach(function(key) {
+              currentUrl.searchParams.set(key, JSON.stringify(fetchServerQuery[key]));
+            });
+          }
+          fetchUrl = currentUrl.toString();
+          return [
+            4,
+            fetch(fetchUrl).then(function(res2) {
+              return res2.json();
+            })
+          ];
+        case 3:
+          data = _state.sent();
+          mfDataFetch[2] = MF_DATA_FETCH_STATUS.LOADED;
+          res(data);
+          return [
+            3,
+            5
+          ];
+        case 4:
+          e = _state.sent();
+          mfDataFetch[2] = MF_DATA_FETCH_STATUS.ERROR;
+          rej(e);
+          return [
+            3,
+            5
+          ];
+        case 5:
+          return [
+            2,
+            promise
+          ];
+        case 6:
+          return [
+            2
+          ];
+      }
+    });
+  });
+  return _callDowngrade.apply(this, arguments);
+}
+export {
+  callAllDowngrade,
+  callDowngrade,
+  getDowngradeTag
+};