@modern-js/runtime 2.54.6 → 2.55.0

package/dist/esm/cli/index.js

@@ -1,13 +1,19 @@
 import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import { isReact18, cleanRequireCache } from "@modern-js/utils";
+import path from "path";
+import { isReact18 as checkIsReact18, cleanRequireCache, createRuntimeExportsUtils } from "@modern-js/utils";
+import { rspack } from "@rsbuild/core";
 import { statePlugin } from "../state/cli";
-import { ssrPlugin } from "../ssr/cli";
 import { routerPlugin } from "../router/cli";
 import { documentPlugin } from "../document/cli";
+import { ssrPlugin } from "./ssr";
 import { isRuntimeEntry } from "./entry";
+import { ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME } from "./constants";
+import { generateCode } from "./code";
+import { builderPluginAlias } from "./alias";
 import { isRuntimeEntry as isRuntimeEntry2 } from "./entry";
-var runtimePlugin = function() {
+var runtimePlugin = function(params) {
   return {
     name: "@modern-js/runtime",
     post: [
@@ -18,36 +24,94 @@ var runtimePlugin = function() {
       "@modern-js/plugin-design-token"
     ],
     // the order of runtime plugins is affected by runtime hooks, mainly `init` and `hoc` hooks
-    usePlugins: [
+    usePlugins: (params === null || params === void 0 ? void 0 : params.plugins) || [
       ssrPlugin(),
-      statePlugin(),
       routerPlugin(),
+      statePlugin(),
       documentPlugin()
     ],
     setup: function(api) {
       return {
         checkEntryPoint: function checkEntryPoint(param) {
-          var path = param.path, entry = param.entry;
+          var path2 = param.path, entry = param.entry;
+          return {
+            path: path2,
+            entry: entry || isRuntimeEntry(path2)
+          };
+        },
+        modifyEntrypoints: function modifyEntrypoints(param) {
+          var entrypoints = param.entrypoints;
+          var internalDirectory = api.useAppContext().internalDirectory;
+          var _api_useResolvedConfigContext = api.useResolvedConfigContext(), enableAsyncEntry = _api_useResolvedConfigContext.source.enableAsyncEntry;
+          var newEntryPoints = entrypoints.map(function(entrypoint) {
+            if (entrypoint.isAutoMount) {
+              entrypoint.internalEntry = path.resolve(internalDirectory, "./".concat(entrypoint.entryName, "/").concat(enableAsyncEntry ? ENTRY_BOOTSTRAP_FILE_NAME : ENTRY_POINT_FILE_NAME));
+            }
+            return entrypoint;
+          });
           return {
-            path,
-            entry: entry || isRuntimeEntry(path)
+            entrypoints: newEntryPoints
           };
         },
+        generateEntryCode: function generateEntryCode(param) {
+          var entrypoints = param.entrypoints;
+          return _async_to_generator(function() {
+            var appContext, resolvedConfig, runners;
+            return _ts_generator(this, function(_state) {
+              switch (_state.label) {
+                case 0:
+                  appContext = api.useAppContext();
+                  resolvedConfig = api.useResolvedConfigContext();
+                  runners = api.useHookRunners();
+                  return [
+                    4,
+                    generateCode(entrypoints, appContext, resolvedConfig, runners._internalRuntimePlugins)
+                  ];
+                case 1:
+                  _state.sent();
+                  return [
+                    2
+                  ];
+              }
+            });
+          })();
+        },
+        /* Note that the execution time of the config hook is before prepare.
+        /* This means that the entry information cannot be obtained in the config hook.
+        /* Therefore, aliases cannot be set directly in the config.
+        */
+        prepare: function prepare() {
+          var _api_useAppContext = api.useAppContext(), builder = _api_useAppContext.builder, entrypoints = _api_useAppContext.entrypoints, internalDirectory = _api_useAppContext.internalDirectory, metaName = _api_useAppContext.metaName;
+          builder === null || builder === void 0 ? void 0 : builder.addPlugins([
+            builderPluginAlias({
+              entrypoints,
+              internalDirectory,
+              metaName
+            })
+          ]);
+        },
         config: function config() {
-          var appDir = api.useAppContext().appDirectory;
-          process.env.IS_REACT18 = isReact18(appDir).toString();
+          var _api_useAppContext = api.useAppContext(), appDirectory = _api_useAppContext.appDirectory, metaName = _api_useAppContext.metaName, internalDirectory = _api_useAppContext.internalDirectory;
+          var isReact18 = checkIsReact18(appDirectory);
+          process.env.IS_REACT18 = isReact18.toString();
+          var pluginsExportsUtils = createRuntimeExportsUtils(internalDirectory, "plugins");
           return {
             runtime: {},
             runtimeByEntries: {},
             source: {
-              alias: {
+              alias: (
                 /**
-                * twin.macro inserts styled-components into the code during the compilation process
-                * But it will not be installed under the user project.
-                * So need to add alias
+                * Compatible with the reference path of the old version of the plugin.
                 */
-                "styled-components": require.resolve("styled-components")
-              },
+                _define_property({
+                  /**
+                  * twin.macro inserts styled-components into the code during the compilation process
+                  * But it will not be installed under the user project.
+                  * So need to add alias
+                  */
+                  "styled-components": require.resolve("styled-components")
+                }, "@".concat(metaName, "/runtime/plugins"), pluginsExportsUtils.getPath())
+              ),
               globalVars: {
                 "process.env.IS_REACT18": process.env.IS_REACT18
               }
@@ -58,6 +122,31 @@ var runtimePlugin = function() {
                 topLevelImportPaths: [
                   "@modern-js/runtime/styled"
                 ]
+              },
+              /**
+              * Add IgnorePlugin to fix react-dom/client import error when use react17
+              */
+              webpackChain: function(chain, param) {
+                var webpack = param.webpack;
+                if (!isReact18) {
+                  chain.plugin("ignore-plugin").use(webpack.IgnorePlugin, [
+                    {
+                      resourceRegExp: /^react-dom\/client$/,
+                      contextRegExp: /./
+                    }
+                  ]);
+                }
+              },
+              rspack: function(_config, param) {
+                var appendPlugins = param.appendPlugins;
+                if (!isReact18) {
+                  appendPlugins([
+                    new rspack.IgnorePlugin({
+                      resourceRegExp: /^react-dom\/client$/,
+                      contextRegExp: /./
+                    })
+                  ]);
+                }
               }
             }
           };
@@ -68,7 +157,7 @@ var runtimePlugin = function() {
               cleanRequireCache([
                 require.resolve("../state/cli"),
                 require.resolve("../router/cli"),
-                require.resolve("../ssr/cli")
+                require.resolve("./ssr")
               ]);
               return [
                 2
@@ -83,6 +172,10 @@ var runtimePlugin = function() {
 var cli_default = runtimePlugin;
 export {
   cli_default as default,
+  documentPlugin,
   isRuntimeEntry2 as isRuntimeEntry,
-  runtimePlugin
+  routerPlugin,
+  runtimePlugin,
+  ssrPlugin,
+  statePlugin
 };

package/dist/esm/{ssr/cli → cli/ssr}/babel-plugin-ssr-loader-id.js

@@ -7,7 +7,7 @@ import { Buffer as Buffer2 } from "buffer";
 import * as t from "@babel/types";
 import { get } from "@modern-js/utils/lodash";
 var require_babel_plugin_ssr_loader_id = __commonJS({
-  "src/ssr/cli/babel-plugin-ssr-loader-id.ts"(exports, module) {
+  "src/cli/ssr/babel-plugin-ssr-loader-id.ts"(exports, module) {
     var RUNTIME_PACKAGE_NAMES = [
       "@modern-js/runtime"
     ];

package/dist/esm/cli/ssr/index.js

@@ -0,0 +1,110 @@
+import path from "path";
+import { LOADABLE_STATS_FILE, isUseSSRBundle } from "@modern-js/utils";
+var hasStringSSREntry = function(userConfig) {
+  var isStreaming = function(ssr) {
+    return ssr && typeof ssr === "object" && ssr.mode === "stream";
+  };
+  var server = userConfig.server, output = userConfig.output;
+  if (((server === null || server === void 0 ? void 0 : server.ssr) || output.ssg) && !isStreaming(server.ssr)) {
+    return true;
+  }
+  if ((server === null || server === void 0 ? void 0 : server.ssrByEntries) && typeof server.ssrByEntries === "object") {
+    var _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
+    try {
+      for (var _iterator = Object.keys(server.ssrByEntries)[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
+        var name = _step.value;
+        if (server.ssrByEntries[name] && !isStreaming(server.ssrByEntries[name])) {
+          return true;
+        }
+      }
+    } catch (err) {
+      _didIteratorError = true;
+      _iteratorError = err;
+    } finally {
+      try {
+        if (!_iteratorNormalCompletion && _iterator.return != null) {
+          _iterator.return();
+        }
+      } finally {
+        if (_didIteratorError) {
+          throw _iteratorError;
+        }
+      }
+    }
+  }
+  return false;
+};
+var checkUseStringSSR = function(config) {
+  var output = config.output;
+  return Boolean(output === null || output === void 0 ? void 0 : output.ssg) || hasStringSSREntry(config);
+};
+var ssrPlugin = function() {
+  return {
+    name: "@modern-js/plugin-ssr",
+    required: [
+      "@modern-js/runtime"
+    ],
+    setup: function(api) {
+      return {
+        // for bundle
+        config: function config() {
+          var _api_useAppContext = api.useAppContext(), _api_useAppContext_bundlerType = _api_useAppContext.bundlerType, bundlerType = _api_useAppContext_bundlerType === void 0 ? "webpack" : _api_useAppContext_bundlerType;
+          var babelHandler = function() {
+            if (bundlerType === "webpack") {
+              return function(config2) {
+                var _config_plugins;
+                var userConfig = api.useResolvedConfigContext();
+                (_config_plugins = config2.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
+                if (isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig)) {
+                  var _config_plugins1;
+                  (_config_plugins1 = config2.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+                }
+              };
+            } else if (bundlerType === "rspack") {
+              return function(config2) {
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig)) {
+                  var _config_plugins, _config_plugins1;
+                  (_config_plugins = config2.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
+                  (_config_plugins1 = config2.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+                }
+              };
+            }
+          }();
+          return {
+            source: {
+              alias: {
+                // ensure that all packages use the same storage in @modern-js/runtime-utils/node
+                "@modern-js/runtime-utils/node$": require.resolve("@modern-js/runtime-utils/node")
+              },
+              globalVars: function(values, param) {
+                var target = param.target;
+                values["process.env.MODERN_TARGET"] = target === "node" || target === "service-worker" ? "node" : "browser";
+              }
+            },
+            tools: {
+              bundlerChain: function bundlerChain(chain, param) {
+                var isServer = param.isServer, isServiceWorker = param.isServiceWorker;
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
+                  var LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
+                  chain.plugin("loadable").use(LoadableBundlerPlugin, [
+                    {
+                      filename: LOADABLE_STATS_FILE
+                    }
+                  ]);
+                }
+              },
+              babel: babelHandler
+            }
+          };
+        }
+      };
+    }
+  };
+};
+var ssr_default = ssrPlugin;
+export {
+  ssr_default as default,
+  ssrPlugin
+};

package/dist/esm/{ssr/cli → cli/ssr}/loadable-bundler-plugin.js

@@ -9,7 +9,7 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import path from "path";
 import { fs } from "@modern-js/utils";
 var require_loadable_bundler_plugin = __commonJS({
-  "src/ssr/cli/loadable-bundler-plugin.ts"(exports, module) {
+  "src/cli/ssr/loadable-bundler-plugin.ts"(exports, module) {
     var LoadablePlugin = /* @__PURE__ */ function() {
       "use strict";
       function LoadablePlugin2() {

package/dist/esm/cli/template.js

@@ -0,0 +1,53 @@
+import path from "path";
+import { JS_EXTENSIONS, findExists, formatImportPath } from "@modern-js/utils";
+import { ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME } from "./constants";
+var genRenderCode = function(param) {
+  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId;
+  if (customEntry) {
+    return "import '".concat(formatImportPath(entry.replace(srcDirectory, internalSrcAlias)), "'");
+  }
+  return "import { createRoot } from '@".concat(metaName, "/runtime/react';\nimport { render } from '@").concat(metaName, "/runtime/browser';\n").concat(customBootstrap ? "import customBootstrap from '".concat(formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias)), "';") : "", "\n\nconst ModernRoot = createRoot();\n\n").concat(customBootstrap ? "customBootstrap(ModernRoot, () => render(<ModernRoot />, '".concat(mountId || "root", "'));") : "render(<ModernRoot />, '".concat(mountId || "root", "');"));
+};
+var index = function(param) {
+  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, entryName = param.entryName, customEntry = param.customEntry, customBootstrap = param.customBootstrap, mountId = param.mountId;
+  return "import '@".concat(metaName, "/runtime/registry/").concat(entryName, "';\n").concat(genRenderCode({
+    srcDirectory,
+    internalSrcAlias,
+    metaName,
+    entry,
+    customEntry,
+    customBootstrap,
+    mountId
+  }), "\n");
+};
+var register = function() {
+  return "import './".concat(ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, "';\nimport './").concat(ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME, "';\n");
+};
+var getImportRuntimeConfigCode = function(srcDirectory, internalSrcAlias, runtimeConfigFile) {
+  if (runtimeConfigFile && findExists(JS_EXTENSIONS.map(function(ext) {
+    return path.resolve(srcDirectory, "".concat(runtimeConfigFile).concat(ext));
+  }))) {
+    return "import runtimeConfig from '".concat(internalSrcAlias, "/").concat(runtimeConfigFile, "';");
+  }
+  return "let runtimeConfig;";
+};
+var getRegisterRuntimePluginCode = function(entryName, name, config) {
+  return "plugins.push(".concat(name, "Plugin(mergeConfig(").concat(JSON.stringify(config), ", (runtimeConfig || {})['").concat(name, "'], ((runtimeConfig || {})['").concat(name, "ByEntries'] || {})['").concat(entryName, "'], (getGlobalAppConfig() || {})['").concat(name, "'])));");
+};
+var runtimeRegister = function(param) {
+  var entryName = param.entryName, srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, runtimeConfigFile = param.runtimeConfigFile, runtimePlugins = param.runtimePlugins;
+  return "import { registerPlugin, mergeConfig } from '@".concat(metaName, "/runtime/plugin';\nimport { getGlobalAppConfig, getGlobalLayoutApp } from '@").concat(metaName, "/runtime/context';\n").concat(getImportRuntimeConfigCode(srcDirectory, internalSrcAlias, runtimeConfigFile), "\n\nconst plugins = [];\n\n").concat(runtimePlugins.map(function(param2) {
+    var name = param2.name, path2 = param2.path, config = param2.config;
+    return "import { ".concat(name, "Plugin } from '").concat(path2, "';\n\n").concat(getRegisterRuntimePluginCode(entryName, name, config), "\n");
+  }).join("\n"), "\nregisterPlugin(plugins, runtimeConfig);\n");
+};
+var runtimeGlobalContext = function(param) {
+  var srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias, metaName = param.metaName, entry = param.entry, customEntry = param.customEntry;
+  return "import { setGlobalContext } from '@".concat(metaName, "/runtime/context'\n\nimport App from '").concat(formatImportPath(customEntry ? entry.replace("entry.tsx", "App.tsx").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias)), "';\n\nsetGlobalContext({\n  App,\n});");
+};
+export {
+  index,
+  register,
+  runtimeGlobalContext,
+  runtimeRegister
+};

package/dist/esm/cli/template.server.js

@@ -0,0 +1,26 @@
+import { formatImportPath } from "@modern-js/utils";
+var SERVER_ENTRY = "\nimport {\n  #render,\n  createRequestHandler,\n} from '@#metaName/runtime/ssr/server';\n\nconst handleRequest = async (request, ServerRoot, options) => {\n\n  const body = await #render(request, <ServerRoot />, options);\n\n  return new Response(body, {\n    headers: {\n      'content-type': 'text/html; charset=utf-8',\n      #headers\n    },\n  })\n};\n\nexport const requestHandler = createRequestHandler(handleRequest);\n";
+var serverIndex = function(options) {
+  var _options_metaName = options.metaName, metaName = _options_metaName === void 0 ? "modern-js" : _options_metaName, entryName = options.entryName;
+  return "\n    import '@".concat(metaName, "/runtime/registry/").concat(entryName, "';\n    ").concat(genHandlerCode(options), "\n  ");
+};
+function genHandlerCode(param) {
+  var mode = param.mode, metaName = param.metaName, customServerEntry = param.customServerEntry, srcDirectory = param.srcDirectory, internalSrcAlias = param.internalSrcAlias;
+  if (customServerEntry) {
+    return "export { default as requestHandler } from '".concat(formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias)), "'");
+  } else {
+    var serverEntry = transformServerEntry(SERVER_ENTRY, {
+      metaName: metaName || "modern-js",
+      mode
+    });
+    return serverEntry;
+  }
+}
+function transformServerEntry(source, options) {
+  var _options_metaName = options.metaName, metaName = _options_metaName === void 0 ? "modern-js" : _options_metaName, mode = options.mode;
+  var output = source.replace(/#metaName/g, metaName).replace(/#render/g, mode === "string" ? "renderString" : "renderStreaming").replace(/#headers/g, mode === "string" ? "" : "'transfer-encoding': 'chunked',");
+  return output;
+}
+export {
+  serverIndex
+};

package/dist/esm/core/browser/hydrate.js

@@ -0,0 +1,88 @@
+import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
+import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { normalizePathname } from "@modern-js/runtime-utils/url";
+import { loadableReady } from "@loadable/component";
+import React from "react";
+import { RenderLevel } from "../constants";
+import { WithCallback } from "./withCallback";
+var isReact18 = function() {
+  return process.env.IS_REACT18 === "true";
+};
+function hydrateRoot(App, context, ModernRender, ModernHydrate) {
+  var _window__SSR_DATA, _window, _window__SSR_DATA1, _window1;
+  var hydrateContext = _object_spread_props(_object_spread({}, context), {
+    get routes() {
+      return context.routes;
+    },
+    _hydration: true
+  });
+  var ssrContext = hydrateContext.ssrContext;
+  var currentPathname = normalizePathname(window.location.pathname);
+  var initialPathname = normalizePathname(ssrContext.request.pathname);
+  if (initialPathname !== currentPathname && context.router) {
+    var errorMsg = "The initial URL ".concat(initialPathname, " and the URL ").concat(currentPathname, " to be hydrated do not match, reload.");
+    console.error(errorMsg);
+    window.location.reload();
+  }
+  var callback = function() {
+    delete hydrateContext._hydration;
+  };
+  var renderLevel = ((_window = window) === null || _window === void 0 ? void 0 : (_window__SSR_DATA = _window._SSR_DATA) === null || _window__SSR_DATA === void 0 ? void 0 : _window__SSR_DATA.renderLevel) || RenderLevel.CLIENT_RENDER;
+  var renderMode = ((_window1 = window) === null || _window1 === void 0 ? void 0 : (_window__SSR_DATA1 = _window1._SSR_DATA) === null || _window__SSR_DATA1 === void 0 ? void 0 : _window__SSR_DATA1.mode) || "string";
+  if (isReact18() && renderMode === "stream") {
+    return streamSSRHydrate();
+  }
+  function streamSSRHydrate() {
+    if (renderLevel === RenderLevel.SERVER_RENDER) {
+      var SSRApp = function() {
+        return /* @__PURE__ */ _jsx(WithCallback, {
+          callback,
+          children: /* @__PURE__ */ React.cloneElement(App, {
+            _internal_context: hydrateContext
+          })
+        });
+      };
+      return ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {}));
+    } else {
+      return ModernRender(App);
+    }
+  }
+  return stringSSRHydrate();
+  function stringSSRHydrate() {
+    if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
+      return ModernRender(App);
+    } else if (renderLevel === RenderLevel.SERVER_RENDER) {
+      return new Promise(function(resolve) {
+        if (isReact18()) {
+          loadableReady(function() {
+            var SSRApp = function() {
+              return /* @__PURE__ */ _jsx(WithCallback, {
+                callback,
+                children: /* @__PURE__ */ React.cloneElement(App, {
+                  _internal_context: hydrateContext
+                })
+              });
+            };
+            ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {})).then(function(root) {
+              resolve(root);
+            });
+          });
+        } else {
+          loadableReady(function() {
+            ModernHydrate(App, callback).then(function(root) {
+              resolve(root);
+            });
+          });
+        }
+      });
+    } else {
+      console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
+      return ModernRender(App);
+    }
+  }
+}
+export {
+  hydrateRoot,
+  isReact18
+};