@modern-js/runtime 2.54.6 → 2.56.0

package/dist/esm-node/cli/code.js

@@ -0,0 +1,90 @@
+import path from "path";
+import { MAIN_ENTRY_NAME, fs } from "@modern-js/utils";
+import { INDEX_FILE_NAME, ENTRY_BOOTSTRAP_FILE_NAME, ENTRY_POINT_FILE_NAME, ENTRY_POINT_REGISTER_FILE_NAME, ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME, ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME, SERVER_ENTRY_POINT_FILE_NAME } from "./constants";
+import * as template from "./template";
+import * as serverTemplate from "./template.server";
+function getSSRMode(entry = MAIN_ENTRY_NAME, config) {
+  const { ssr, ssrByEntries } = config.server;
+  if (config.output.ssg) {
+    return "string";
+  }
+  return checkSSRMode((ssrByEntries === null || ssrByEntries === void 0 ? void 0 : ssrByEntries[entry]) || ssr);
+  function checkSSRMode(ssr2) {
+    if (!ssr2) {
+      return false;
+    }
+    if (typeof ssr2 === "boolean") {
+      return ssr2 ? "string" : false;
+    }
+    return ssr2.mode === "stream" ? "stream" : "string";
+  }
+}
+const generateCode = async (entrypoints, appContext, config, onCollectRuntimePlugins) => {
+  const { mountId } = config.html;
+  const { enableAsyncEntry } = config.source;
+  const { runtimeConfigFile, internalDirectory, internalSrcAlias, metaName, srcDirectory } = appContext;
+  await Promise.all(entrypoints.map(async (entrypoint) => {
+    const { entryName, isAutoMount, entry, customEntry, customBootstrap, customServerEntry } = entrypoint;
+    const { plugins: runtimePlugins } = await onCollectRuntimePlugins({
+      entrypoint,
+      plugins: []
+    });
+    if (isAutoMount) {
+      const indexCode = template.index({
+        srcDirectory,
+        internalSrcAlias,
+        metaName,
+        entry,
+        entryName,
+        customEntry,
+        customBootstrap,
+        mountId
+      });
+      const indexFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_FILE_NAME}`);
+      fs.outputFileSync(indexFile, indexCode, "utf8");
+      if (enableAsyncEntry) {
+        const bootstrapFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_BOOTSTRAP_FILE_NAME}`);
+        fs.outputFileSync(bootstrapFile, `import('./${INDEX_FILE_NAME}');`, "utf8");
+      }
+      const ssrMode = getSSRMode(entryName, config);
+      if (ssrMode) {
+        const indexServerCode = serverTemplate.serverIndex({
+          entry,
+          entryName,
+          internalSrcAlias,
+          metaName,
+          mode: ssrMode,
+          customServerEntry,
+          srcDirectory
+        });
+        const indexServerFile = path.resolve(internalDirectory, `./${entryName}/${SERVER_ENTRY_POINT_FILE_NAME}`);
+        fs.outputFileSync(indexServerFile, indexServerCode, "utf8");
+      }
+      const registerCode = template.register();
+      const registerFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_REGISTER_FILE_NAME}`);
+      fs.outputFileSync(registerFile, registerCode, "utf8");
+      const registerRuntimeCode = template.runtimeRegister({
+        entryName,
+        srcDirectory,
+        internalSrcAlias,
+        metaName,
+        runtimeConfigFile,
+        runtimePlugins
+      });
+      const registerRuntimeFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME}`);
+      fs.outputFileSync(registerRuntimeFile, registerRuntimeCode, "utf8");
+      const contextCode = template.runtimeGlobalContext({
+        srcDirectory,
+        internalSrcAlias,
+        metaName,
+        entry,
+        customEntry
+      });
+      const contextFile = path.resolve(internalDirectory, `./${entryName}/${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}`);
+      fs.outputFileSync(contextFile, contextCode, "utf8");
+    }
+  }));
+};
+export {
+  generateCode
+};

package/dist/esm-node/cli/constants.js

@@ -1,4 +1,18 @@
 const APP_FILE_NAME = "App";
+const ENTRY_POINT_FILE_NAME = "index.jsx";
+const SERVER_ENTRY_POINT_FILE_NAME = "index.server.jsx";
+const INDEX_FILE_NAME = "index";
+const ENTRY_BOOTSTRAP_FILE_NAME = "bootstrap.jsx";
+const ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME = "runtime-register.js";
+const ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME = "runtime-global-context.js";
+const ENTRY_POINT_REGISTER_FILE_NAME = "register.js";
 export {
-  APP_FILE_NAME
+  APP_FILE_NAME,
+  ENTRY_BOOTSTRAP_FILE_NAME,
+  ENTRY_POINT_FILE_NAME,
+  ENTRY_POINT_REGISTER_FILE_NAME,
+  ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME,
+  ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME,
+  INDEX_FILE_NAME,
+  SERVER_ENTRY_POINT_FILE_NAME
 };

package/dist/esm-node/cli/index.js

@@ -1,11 +1,15 @@
-import { isReact18, cleanRequireCache } from "@modern-js/utils";
+import path from "path";
+import { isReact18 as checkIsReact18, cleanRequireCache, createRuntimeExportsUtils } from "@modern-js/utils";
 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";
-const runtimePlugin = () => ({
+const runtimePlugin = (params) => ({
   name: "@modern-js/runtime",
   post: [
     "@modern-js/plugin-ssr",
@@ -15,23 +19,58 @@ const runtimePlugin = () => ({
     "@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: (api) => {
     return {
-      checkEntryPoint({ path, entry }) {
+      checkEntryPoint({ path: path2, entry }) {
         return {
-          path,
-          entry: entry || isRuntimeEntry(path)
+          path: path2,
+          entry: entry || isRuntimeEntry(path2)
         };
       },
+      modifyEntrypoints({ entrypoints }) {
+        const { internalDirectory } = api.useAppContext();
+        const { source: { enableAsyncEntry } } = api.useResolvedConfigContext();
+        const newEntryPoints = entrypoints.map((entrypoint) => {
+          if (entrypoint.isAutoMount) {
+            entrypoint.internalEntry = path.resolve(internalDirectory, `./${entrypoint.entryName}/${enableAsyncEntry ? ENTRY_BOOTSTRAP_FILE_NAME : ENTRY_POINT_FILE_NAME}`);
+          }
+          return entrypoint;
+        });
+        return {
+          entrypoints: newEntryPoints
+        };
+      },
+      async generateEntryCode({ entrypoints }) {
+        const appContext = api.useAppContext();
+        const resolvedConfig = api.useResolvedConfigContext();
+        const runners = api.useHookRunners();
+        await generateCode(entrypoints, appContext, resolvedConfig, runners._internalRuntimePlugins);
+      },
+      /* 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() {
+        const { builder, entrypoints, internalDirectory, metaName } = api.useAppContext();
+        builder === null || builder === void 0 ? void 0 : builder.addPlugins([
+          builderPluginAlias({
+            entrypoints,
+            internalDirectory,
+            metaName
+          })
+        ]);
+      },
       config() {
-        const appDir = api.useAppContext().appDirectory;
-        process.env.IS_REACT18 = isReact18(appDir).toString();
+        const { appDirectory, metaName, internalDirectory } = api.useAppContext();
+        const isReact18 = checkIsReact18(appDirectory);
+        process.env.IS_REACT18 = isReact18.toString();
+        const pluginsExportsUtils = createRuntimeExportsUtils(internalDirectory, "plugins");
         return {
           runtime: {},
           runtimeByEntries: {},
@@ -42,7 +81,11 @@ const runtimePlugin = () => ({
               * But it will not be installed under the user project.
               * So need to add alias
               */
-              "styled-components": require.resolve("styled-components")
+              "styled-components": require.resolve("styled-components"),
+              /**
+              * Compatible with the reference path of the old version of the plugin.
+              */
+              [`@${metaName}/runtime/plugins`]: pluginsExportsUtils.getPath()
             },
             globalVars: {
               "process.env.IS_REACT18": process.env.IS_REACT18
@@ -54,6 +97,29 @@ const runtimePlugin = () => ({
               topLevelImportPaths: [
                 "@modern-js/runtime/styled"
               ]
+            },
+            /**
+            * Add IgnorePlugin to fix react-dom/client import error when use react17
+            */
+            webpackChain: (chain, { webpack }) => {
+              if (!isReact18) {
+                chain.plugin("ignore-plugin").use(webpack.IgnorePlugin, [
+                  {
+                    resourceRegExp: /^react-dom\/client$/,
+                    contextRegExp: /./
+                  }
+                ]);
+              }
+            },
+            rspack: (_config, { appendPlugins, rspack }) => {
+              if (!isReact18) {
+                appendPlugins([
+                  new rspack.IgnorePlugin({
+                    resourceRegExp: /^react-dom\/client$/,
+                    contextRegExp: /./
+                  })
+                ]);
+              }
             }
           }
         };
@@ -62,7 +128,7 @@ const runtimePlugin = () => ({
         cleanRequireCache([
           require.resolve("../state/cli"),
           require.resolve("../router/cli"),
-          require.resolve("../ssr/cli")
+          require.resolve("./ssr")
         ]);
       }
     };
@@ -71,6 +137,10 @@ const runtimePlugin = () => ({
 var cli_default = runtimePlugin;
 export {
   cli_default as default,
+  documentPlugin,
   isRuntimeEntry2 as isRuntimeEntry,
-  runtimePlugin
+  routerPlugin,
+  runtimePlugin,
+  ssrPlugin,
+  statePlugin
 };

package/dist/esm-node/{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) {
     const RUNTIME_PACKAGE_NAMES = [
       "@modern-js/runtime"
     ];

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

@@ -0,0 +1,103 @@
+import path from "path";
+import { LOADABLE_STATS_FILE, isUseSSRBundle } from "@modern-js/utils";
+const hasStringSSREntry = (userConfig) => {
+  const isStreaming = (ssr) => ssr && typeof ssr === "object" && ssr.mode === "stream";
+  const { server, output } = userConfig;
+  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") {
+    for (const name of Object.keys(server.ssrByEntries)) {
+      if (server.ssrByEntries[name] && !isStreaming(server.ssrByEntries[name])) {
+        return true;
+      }
+    }
+  }
+  return false;
+};
+const checkUseStringSSR = (config) => {
+  const { output } = config;
+  return Boolean(output === null || output === void 0 ? void 0 : output.ssg) || hasStringSSREntry(config);
+};
+const ssrBuilderPlugin = (modernAPI) => ({
+  name: "@modern-js/builder-plugin-ssr",
+  setup(api) {
+    api.modifyEnvironmentConfig((config, { name, mergeEnvironmentConfig }) => {
+      const isServerEnvironment = config.output.target === "node" || name === "serviceWorker";
+      const userConfig = modernAPI.useResolvedConfigContext();
+      const useLoadablePlugin = isUseSSRBundle(userConfig) && !isServerEnvironment && checkUseStringSSR(userConfig);
+      return mergeEnvironmentConfig(config, {
+        source: {
+          define: {
+            "process.env.MODERN_TARGET": isServerEnvironment ? JSON.stringify("node") : JSON.stringify("browser")
+          }
+        },
+        tools: {
+          bundlerChain: useLoadablePlugin ? (chain) => {
+            const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
+            chain.plugin("loadable").use(LoadableBundlerPlugin, [
+              {
+                filename: LOADABLE_STATS_FILE
+              }
+            ]);
+          } : void 0
+        }
+      });
+    });
+  }
+});
+const ssrPlugin = () => ({
+  name: "@modern-js/plugin-ssr",
+  required: [
+    "@modern-js/runtime"
+  ],
+  setup: (api) => {
+    return {
+      // for bundle
+      config() {
+        const { bundlerType = "webpack" } = api.useAppContext();
+        const babelHandler = (() => {
+          if (bundlerType === "webpack") {
+            return (config) => {
+              var _config_plugins;
+              const userConfig = api.useResolvedConfigContext();
+              (_config_plugins = config.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 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+              }
+            };
+          } else if (bundlerType === "rspack") {
+            return (config) => {
+              const userConfig = api.useResolvedConfigContext();
+              if (isUseSSRBundle(userConfig) && checkUseStringSSR(userConfig)) {
+                var _config_plugins, _config_plugins1;
+                (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
+                (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
+              }
+            };
+          }
+        })();
+        return {
+          builderPlugins: [
+            ssrBuilderPlugin(api)
+          ],
+          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")
+            }
+          },
+          tools: {
+            babel: babelHandler
+          }
+        };
+      }
+    };
+  }
+});
+var ssr_default = ssrPlugin;
+export {
+  ssr_default as default,
+  ssrPlugin
+};

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

@@ -5,7 +5,7 @@ var __commonJS = (cb, mod) => function __require() {
 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) {
     class LoadablePlugin {
       apply(compiler) {
         this.compiler = compiler;

package/dist/esm-node/cli/template.js

@@ -0,0 +1,64 @@
+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";
+const genRenderCode = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry, customBootstrap, mountId }) => {
+  if (customEntry) {
+    return `import '${formatImportPath(entry.replace(srcDirectory, internalSrcAlias))}'`;
+  }
+  return `import { createRoot } from '@${metaName}/runtime/react';
+import { render } from '@${metaName}/runtime/browser';
+${customBootstrap ? `import customBootstrap from '${formatImportPath(customBootstrap.replace(srcDirectory, internalSrcAlias))}';` : ""}
+
+const ModernRoot = createRoot();
+
+${customBootstrap ? `customBootstrap(ModernRoot, () => render(<ModernRoot />, '${mountId || "root"}'));` : `render(<ModernRoot />, '${mountId || "root"}');`}`;
+};
+const index = ({ srcDirectory, internalSrcAlias, metaName, entry, entryName, customEntry, customBootstrap, mountId }) => `import '@${metaName}/runtime/registry/${entryName}';
+${genRenderCode({
+  srcDirectory,
+  internalSrcAlias,
+  metaName,
+  entry,
+  customEntry,
+  customBootstrap,
+  mountId
+})}
+`;
+const register = () => `import './${ENTRY_POINT_RUNTIME_GLOBAL_CONTEXT_FILE_NAME}';
+import './${ENTRY_POINT_RUNTIME_REGISTER_FILE_NAME}';
+`;
+const getImportRuntimeConfigCode = (srcDirectory, internalSrcAlias, runtimeConfigFile) => {
+  if (runtimeConfigFile && findExists(JS_EXTENSIONS.map((ext) => path.resolve(srcDirectory, `${runtimeConfigFile}${ext}`)))) {
+    return `import runtimeConfig from '${internalSrcAlias}/${runtimeConfigFile}';`;
+  }
+  return `let runtimeConfig;`;
+};
+const getRegisterRuntimePluginCode = (entryName, name, config) => `plugins.push(${name}Plugin(mergeConfig(${JSON.stringify(config)}, (runtimeConfig || {})['${name}'], ((runtimeConfig || {})['${name}ByEntries'] || {})['${entryName}'], (getGlobalAppConfig() || {})['${name}'])));`;
+const runtimeRegister = ({ entryName, srcDirectory, internalSrcAlias, metaName, runtimeConfigFile, runtimePlugins }) => `import { registerPlugin, mergeConfig } from '@${metaName}/runtime/plugin';
+import { getGlobalAppConfig, getGlobalLayoutApp } from '@${metaName}/runtime/context';
+${getImportRuntimeConfigCode(srcDirectory, internalSrcAlias, runtimeConfigFile)}
+
+const plugins = [];
+
+${runtimePlugins.map(({ name, path: path2, config }) => `import { ${name}Plugin } from '${path2}';
+
+${getRegisterRuntimePluginCode(entryName, name, config)}
+`).join("\n")}
+registerPlugin(plugins, runtimeConfig);
+`;
+const runtimeGlobalContext = ({ srcDirectory, internalSrcAlias, metaName, entry, customEntry }) => {
+  return `import { setGlobalContext } from '@${metaName}/runtime/context'
+
+import App from '${// We need to get the path of App.tsx here, but the entry is `src/entry.tsx`
+  formatImportPath(customEntry ? entry.replace("entry.tsx", "App.tsx").replace(srcDirectory, internalSrcAlias) : entry.replace(srcDirectory, internalSrcAlias))}';
+
+setGlobalContext({
+  App,
+});`;
+};
+export {
+  index,
+  register,
+  runtimeGlobalContext,
+  runtimeRegister
+};

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

@@ -0,0 +1,47 @@
+import { formatImportPath } from "@modern-js/utils";
+const SERVER_ENTRY = `
+import {
+  #render,
+  createRequestHandler,
+} from '@#metaName/runtime/ssr/server';
+
+const handleRequest = async (request, ServerRoot, options) => {
+
+  const body = await #render(request, <ServerRoot />, options);
+
+  return new Response(body, {
+    headers: {
+      'content-type': 'text/html; charset=utf-8',
+      #headers
+    },
+  })
+};
+
+export const requestHandler = createRequestHandler(handleRequest);
+`;
+const serverIndex = (options) => {
+  const { metaName = "modern-js", entryName } = options;
+  return `
+    import '@${metaName}/runtime/registry/${entryName}';
+    ${genHandlerCode(options)}
+  `;
+};
+function genHandlerCode({ mode, metaName, customServerEntry, srcDirectory, internalSrcAlias }) {
+  if (customServerEntry) {
+    return `export { default as requestHandler } from '${formatImportPath(customServerEntry.replace(srcDirectory, internalSrcAlias))}'`;
+  } else {
+    const serverEntry = transformServerEntry(SERVER_ENTRY, {
+      metaName: metaName || "modern-js",
+      mode
+    });
+    return serverEntry;
+  }
+}
+function transformServerEntry(source, options) {
+  const { metaName = "modern-js", mode } = options;
+  const 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-node/core/browser/hydrate.js

@@ -0,0 +1,81 @@
+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";
+const isReact18 = () => process.env.IS_REACT18 === "true";
+function hydrateRoot(App, context, ModernRender, ModernHydrate) {
+  var _window__SSR_DATA, _window, _window__SSR_DATA1, _window1;
+  const hydrateContext = {
+    ...context,
+    get routes() {
+      return context.routes;
+    },
+    _hydration: true
+  };
+  const { ssrContext } = hydrateContext;
+  const currentPathname = normalizePathname(window.location.pathname);
+  const initialPathname = normalizePathname(ssrContext.request.pathname);
+  if (initialPathname !== currentPathname && context.router) {
+    const errorMsg = `The initial URL ${initialPathname} and the URL ${currentPathname} to be hydrated do not match, reload.`;
+    console.error(errorMsg);
+    window.location.reload();
+  }
+  const callback = () => {
+    delete hydrateContext._hydration;
+  };
+  const 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;
+  const 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) {
+      const SSRApp = () => /* @__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((resolve) => {
+        if (isReact18()) {
+          loadableReady(() => {
+            const SSRApp = () => /* @__PURE__ */ _jsx(WithCallback, {
+              callback,
+              children: /* @__PURE__ */ React.cloneElement(App, {
+                _internal_context: hydrateContext
+              })
+            });
+            ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {})).then((root) => {
+              resolve(root);
+            });
+          });
+        } else {
+          loadableReady(() => {
+            ModernHydrate(App, callback).then((root) => {
+              resolve(root);
+            });
+          });
+        }
+      });
+    } else {
+      console.warn(`unknow render level: ${renderLevel}, execute render()`);
+      return ModernRender(App);
+    }
+  }
+}
+export {
+  hydrateRoot,
+  isReact18
+};

package/dist/esm-node/core/browser/index.js

@@ -0,0 +1,108 @@
+import React from "react";
+import cookieTool from "cookie";
+import { getGlobalAppInit } from "../context";
+import { getInitialContext } from "../context/runtime";
+import { createLoaderManager } from "../loader/loaderManager";
+import { getGlobalRunner } from "../plugin/runner";
+import { hydrateRoot } from "./hydrate";
+const IS_REACT18 = process.env.IS_REACT18 === "true";
+function getSSRData() {
+  const ssrData = window._SSR_DATA;
+  if (ssrData) {
+    const finalSSRData = {
+      ...ssrData,
+      context: {
+        ...ssrData.context,
+        request: {
+          ...ssrData.context.request,
+          cookieMap: cookieTool.parse(document.cookie || "") || {},
+          cookie: document.cookie || "",
+          userAgent: navigator.userAgent,
+          referer: document.referrer
+        }
+      }
+    };
+    return finalSSRData;
+  }
+}
+function isClientArgs(id) {
+  return typeof id === "undefined" || typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
+}
+async function render(App, id) {
+  const runner = getGlobalRunner();
+  const context = getInitialContext(runner);
+  const runInit = (_context) => runner.init({
+    context: _context
+  }, {
+    onLast: ({ context: context1 }) => {
+      const init = getGlobalAppInit();
+      return init === null || init === void 0 ? void 0 : init(context1);
+    }
+  });
+  if (isClientArgs(id)) {
+    var _ssrData_data, _ssrData_data1;
+    const ssrData = getSSRData();
+    const loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData_data = ssrData.data) === null || _ssrData_data === void 0 ? void 0 : _ssrData_data.loadersData) || {};
+    const initialLoadersState = Object.keys(loadersData).reduce((res, key) => {
+      const loaderData = loadersData[key];
+      if ((loaderData === null || loaderData === void 0 ? void 0 : loaderData.loading) !== false) {
+        return res;
+      }
+      res[key] = loaderData;
+      return res;
+    }, {});
+    Object.assign(context, {
+      loaderManager: createLoaderManager(initialLoadersState, {
+        skipStatic: true
+      }),
+      ...ssrData ? {
+        ssrContext: ssrData === null || ssrData === void 0 ? void 0 : ssrData.context
+      } : {}
+    });
+    context.initialData = ssrData === null || ssrData === void 0 ? void 0 : (_ssrData_data1 = ssrData.data) === null || _ssrData_data1 === void 0 ? void 0 : _ssrData_data1.initialData;
+    const initialData = await runInit(context);
+    if (initialData) {
+      context.initialData = initialData;
+    }
+    const rootElement = id && typeof id !== "string" ? id : document.getElementById(id || "root");
+    async function ModernRender(App2) {
+      const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
+      return renderFunc(/* @__PURE__ */ React.cloneElement(App2, {
+        _internal_context: context
+      }), rootElement);
+    }
+    async function ModernHydrate(App2, callback) {
+      const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
+      return hydrateFunc(App2, rootElement, callback);
+    }
+    if (ssrData) {
+      return hydrateRoot(App, context, ModernRender, ModernHydrate);
+    }
+    return ModernRender(App);
+  }
+  throw Error("`render` function needs id in browser environment, it needs to be string or element");
+}
+async function renderWithReact18(App, rootElement) {
+  const ReactDOM = await import("react-dom/client");
+  const root = ReactDOM.createRoot(rootElement);
+  root.render(App);
+  return root;
+}
+async function renderWithReact17(App, rootElement) {
+  const ReactDOM = await import("react-dom");
+  ReactDOM.render(App, rootElement);
+  return rootElement;
+}
+async function hydrateWithReact18(App, rootElement) {
+  const ReactDOM = await import("react-dom/client");
+  const root = ReactDOM.hydrateRoot(rootElement, App);
+  return root;
+}
+async function hydrateWithReact17(App, rootElement, callback) {
+  const ReactDOM = await import("react-dom");
+  const root = ReactDOM.hydrate(App, rootElement, callback);
+  return root;
+}
+export {
+  render
+};