@modern-js/runtime 2.29.0 → 2.31.0

package/dist/esm/router/runtime/plugin.js

@@ -2,7 +2,7 @@ import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "@modern-js/utils/runtime/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { parsedJSONFromElement } from "@modern-js/utils/runtime-browser";
@@ -63,53 +63,65 @@ export var routerPlugin = function(param) {
             });
           }
           var getRouteApp = function() {
-            return function(props) {
-              var _window__SERVER_DATA, _hydrationData;
-              beforeCreateRouter = false;
-              routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                routesConfig: finalRouteConfig,
-                props: props
-              }));
-              var runner = api.useHookRunners();
-              routes = runner.modifyRoutes(routes);
+            var useCreateRouter = function(props) {
+              var _window__SERVER_DATA;
               var baseUrl = ((_window__SERVER_DATA = window._SERVER_DATA) === null || _window__SERVER_DATA === void 0 ? void 0 : _window__SERVER_DATA.router.baseUrl) || select(location.pathname);
               var _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
               var hydrationData = window._ROUTER_DATA;
-              if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
-                hydrationData = _object_spread_props(_object_spread({}, hydrationData), {
-                  errors: deserializeErrors(hydrationData.errors)
-                });
-              }
-              var router = supportHtml5History ? createBrowserRouter(routes, {
-                basename: _basename,
-                hydrationData: hydrationData
-              }) : createHashRouter(routes, {
-                basename: _basename,
-                hydrationData: hydrationData
-              });
               var runtimeContext = useContext(RuntimeReactContext);
-              if (!runtimeContext.remixRouter) {
+              var getBlockNavState = runtimeContext.unstable_getBlockNavState;
+              return useMemo(function() {
+                var _hydrationData;
+                if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
+                  hydrationData = _object_spread_props(_object_spread({}, hydrationData), {
+                    errors: deserializeErrors(hydrationData.errors)
+                  });
+                }
+                routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                  routesConfig: finalRouteConfig,
+                  props: props
+                }));
+                var runner = api.useHookRunners();
+                routes = runner.modifyRoutes(routes);
+                var router = supportHtml5History ? createBrowserRouter(routes, {
+                  basename: _basename,
+                  hydrationData: hydrationData
+                }) : createHashRouter(routes, {
+                  basename: _basename,
+                  hydrationData: hydrationData
+                });
+                var originSubscribe = router.subscribe;
+                router.subscribe = function(listener) {
+                  var wrapedListener = function() {
+                    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+                      args[_key] = arguments[_key];
+                    }
+                    var blockRoute = getBlockNavState ? getBlockNavState() : false;
+                    if (blockRoute) {
+                      return;
+                    }
+                    return listener.apply(void 0, _to_consumable_array(args));
+                  };
+                  return originSubscribe(wrapedListener);
+                };
                 Object.defineProperty(runtimeContext, "remixRouter", {
                   get: function get() {
                     return router;
-                  }
+                  },
+                  configurable: true
                 });
-              }
-              var originSubscribe = router.subscribe;
-              router.subscribe = function(listener) {
-                var wrapedListener = function() {
-                  for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-                    args[_key] = arguments[_key];
-                  }
-                  var getBlockNavState = runtimeContext.unstable_getBlockNavState;
-                  var blockRoute = getBlockNavState ? getBlockNavState() : false;
-                  if (blockRoute) {
-                    return;
-                  }
-                  return listener.apply(void 0, _to_consumable_array(args));
-                };
-                return originSubscribe(wrapedListener);
-              };
+                return router;
+              }, [
+                finalRouteConfig,
+                props,
+                _basename,
+                hydrationData,
+                getBlockNavState
+              ]);
+            };
+            return function(props) {
+              beforeCreateRouter = false;
+              var router = useCreateRouter(props);
               return /* @__PURE__ */ _jsx(App, _object_spread_props(_object_spread({}, props), {
                 children: /* @__PURE__ */ _jsx(RouterProvider, {
                   router: router

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

@@ -8,8 +8,8 @@ var hasStringSSREntry = function(userConfig) {
   var isStreaming = function(ssr) {
     return ssr && typeof ssr === "object" && ssr.mode === "stream";
   };
-  var server = userConfig.server;
-  if (((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) && !isStreaming(server.ssr)) {
+  var server = userConfig.server, output = userConfig.output;
+  if ((((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) || output.ssg) && !isStreaming(server.ssr)) {
     return true;
   }
   if (((_server1 = server) === null || _server1 === void 0 ? void 0 : _server1.ssrByEntries) && typeof server.ssrByEntries === "object") {
@@ -38,6 +38,11 @@ var hasStringSSREntry = function(userConfig) {
   }
   return false;
 };
+var checkUseStringSSR = function(config) {
+  var _output;
+  var output = config.output;
+  return Boolean((_output = output) === null || _output === void 0 ? void 0 : _output.ssg) || hasStringSSREntry(config);
+};
 export var ssrPlugin = function() {
   return {
     name: "@modern-js/plugin-ssr",
@@ -51,29 +56,30 @@ export var ssrPlugin = function() {
         config: function config() {
           var appContext = api.useAppContext();
           pluginsExportsUtils = createRuntimeExportsUtils(appContext.internalDirectory, "plugins");
-          var userConfig = api.useConfigContext();
           var _api_useAppContext = api.useAppContext(), _api_useAppContext_bundlerType = _api_useAppContext.bundlerType, bundlerType = _api_useAppContext_bundlerType === void 0 ? "webpack" : _api_useAppContext_bundlerType;
-          var babelConfig = function() {
+          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) && hasStringSSREntry(userConfig)) {
+                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") {
-              if (isUseSSRBundle(userConfig)) {
-                return function(config2) {
+              return function(config2) {
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig)) {
                   var _config_plugins;
                   (_config_plugins = config2.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(path.join(__dirname, "./babel-plugin-ssr-loader-id"));
-                  if (hasStringSSREntry(userConfig)) {
+                  if (checkUseStringSSR(userConfig)) {
                     var _config_plugins1;
                     (_config_plugins1 = config2.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
                   }
-                };
-              }
+                }
+              };
             }
           }();
           return {
@@ -91,8 +97,8 @@ export var ssrPlugin = function() {
             tools: {
               bundlerChain: function bundlerChain(chain, param) {
                 var isServer = param.isServer, isServiceWorker = param.isServiceWorker, CHAIN_ID = param.CHAIN_ID;
-                var userConfig2 = api.useResolvedConfigContext();
-                if (isUseSSRBundle(userConfig2) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig2)) {
+                var userConfig = api.useResolvedConfigContext();
+                if (isUseSSRBundle(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                   var LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
                   chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
                     {
@@ -101,7 +107,7 @@ export var ssrPlugin = function() {
                   ]);
                 }
               },
-              babel: babelConfig
+              babel: babelHandler
             }
           };
         },

package/dist/esm/ssr/serverRender/renderToString/entry.js

@@ -14,13 +14,12 @@ import helmetReplace from "../helmet";
 import { RenderLevel } from "../types";
 import prefetch from "../../prefetch";
 import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID, attributesToString } from "../utils";
-import { createSSRReporter } from "../reporter";
-import { ServerTimingNames } from "../constants";
+import { SSRErrors, SSRTimings, createSSRTracker } from "../tracker";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
 import * as styledComponentRenderer from "./styledComponent";
-var buildTemplateData = function(context, data, renderLevel, reporter) {
+var buildTemplateData = function(context, data, renderLevel, tracker) {
   var request = context.request, enableUnsafeCtx = context.enableUnsafeCtx;
   var unsafeContext = {
     headers: request.headers
@@ -36,7 +35,7 @@ var buildTemplateData = function(context, data, renderLevel, reporter) {
         url: request.url
       }, enableUnsafeCtx ? unsafeContext : {}),
       reporter: {
-        sessionId: reporter.sessionId
+        sessionId: tracker.sessionId
       }
     },
     renderLevel: renderLevel
@@ -49,9 +48,7 @@ var Entry = /* @__PURE__ */ function() {
     _define_property(this, "entryName", void 0);
     _define_property(this, "result", void 0);
     _define_property(this, "metrics", void 0);
-    _define_property(this, "logger", void 0);
-    _define_property(this, "severTiming", void 0);
-    _define_property(this, "reporter", void 0);
+    _define_property(this, "tracker", void 0);
     _define_property(this, "template", void 0);
     _define_property(this, "App", void 0);
     _define_property(this, "fragments", void 0);
@@ -66,10 +63,8 @@ var Entry = /* @__PURE__ */ function() {
     this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
-    this.reporter = createSSRReporter(ctx.reporter);
-    this.severTiming = ctx.serverTiming;
+    this.tracker = createSSRTracker(ctx);
     this.metrics = ctx.metrics;
-    this.logger = ctx.logger;
     this.nonce = nonce;
     this.result = {
       renderLevel: RenderLevel.CLIENT_RENDER,
@@ -124,7 +119,7 @@ var Entry = /* @__PURE__ */ function() {
                   errors: serializeErrors(routerContext.errors)
                 } : void 0;
                 html = "";
-                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.reporter);
+                templateData = buildTemplateData(ssrContext, prefetchData, _this.result.renderLevel, _this.tracker);
                 SSRData = _this.getSSRDataScript(templateData, routerData);
                 _iteratorNormalCompletion = true, _didIteratorError = false, _iteratorError = void 0;
                 try {
@@ -186,10 +181,7 @@ var Entry = /* @__PURE__ */ function() {
                 prefetchData = _state.sent();
                 _this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
                 prefetchCost = end();
-                _this.logger.debug("App Prefetch cost = %d ms", prefetchCost);
-                _this.metrics.emitTimer("app.prefetch.cost", prefetchCost);
-                _this.reporter.reportTime("app_prefetch_cost", prefetchCost);
-                _this.severTiming.addServeTiming(ServerTimingNames.SSR_PREFETCH, prefetchCost);
+                _this.tracker.trackTiming(SSRTimings.SSR_PREFETCH, prefetchCost);
                 return [
                   3,
                   4
@@ -197,9 +189,7 @@ var Entry = /* @__PURE__ */ function() {
               case 3:
                 e = _state.sent();
                 _this.result.renderLevel = RenderLevel.CLIENT_RENDER;
-                _this.logger.error("App Prefetch Render", e);
-                _this.reporter.reportError("App Prefetch Render", e);
-                _this.metrics.emitCounter("app.prefetch.render.error", 1);
+                _this.tracker.trackError(SSRErrors.PREFETCH, e);
                 return [
                   3,
                   4
@@ -243,15 +233,10 @@ var Entry = /* @__PURE__ */ function() {
             }
           ]);
           var cost = end();
-          this.logger.debug("App Render To HTML cost = %d ms", cost);
-          this.metrics.emitTimer("app.render.html.cost", cost);
-          this.reporter.reportTime("app_render_html_cost", cost);
-          this.severTiming.addServeTiming(ServerTimingNames.SSR_RENDER_HTML, cost);
+          this.tracker.trackTiming(SSRTimings.SSR_RENDER_HTML, cost);
           this.result.renderLevel = RenderLevel.SERVER_RENDER;
         } catch (e) {
-          this.logger.error("App Render To HTML", e);
-          this.reporter.reportError("App Render To HTML", e);
-          this.metrics.emitCounter("app.render.html.error", 1);
+          this.tracker.trackError(SSRErrors.RENDER_HTML, e);
         }
         return html;
       }

package/dist/esm/ssr/serverRender/renderToString/index.js

@@ -3,7 +3,7 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { run } from "@modern-js/utils/runtime-node";
 import { time } from "@modern-js/utils/universal/time";
 import { PreRender } from "../../react/prerender";
-import { ServerTimingNames } from "../constants";
+import { SSRTimings } from "../tracker";
 import SSREntry from "./entry";
 export var render = function(param) {
   var App = param.App, context = param.context, config = param.config;
@@ -27,10 +27,7 @@ export var render = function(param) {
         case 1:
           html = _state.sent();
           cost = end();
-          entry.logger.info("App Render Total cost = %d ms", cost);
-          entry.metrics.emitTimer("app.render.cost", cost);
-          entry.reporter.reportTime("app_render_cost", cost);
-          entry.severTiming.addServeTiming(ServerTimingNames.SSR_RENDER_TOTAL, cost);
+          entry.tracker.trackTiming(SSRTimings.SSR_RENDER_TOTAL, cost);
           cacheConfig = PreRender.config();
           if (cacheConfig) {
             context.ssrContext.cacheConfig = cacheConfig;

package/dist/esm/ssr/serverRender/tracker.js

@@ -0,0 +1,61 @@
+import { _ as _define_property } from "@swc/helpers/_/_define_property";
+export var SSRTimings;
+(function(SSRTimings2) {
+  SSRTimings2[SSRTimings2["SSR_RENDER_TOTAL"] = 0] = "SSR_RENDER_TOTAL";
+  SSRTimings2[SSRTimings2["SSR_PREFETCH"] = 1] = "SSR_PREFETCH";
+  SSRTimings2[SSRTimings2["SSR_RENDER_HTML"] = 2] = "SSR_RENDER_HTML";
+})(SSRTimings || (SSRTimings = {}));
+export var SSRErrors;
+(function(SSRErrors2) {
+  SSRErrors2[SSRErrors2["PREFETCH"] = 0] = "PREFETCH";
+  SSRErrors2[SSRErrors2["RENDER_HTML"] = 1] = "RENDER_HTML";
+})(SSRErrors || (SSRErrors = {}));
+var _obj;
+var errors = (_obj = {}, _define_property(_obj, SSRErrors.PREFETCH, {
+  reporter: "SSR Error - App Prefetch Render",
+  logger: "App Prefetch Render",
+  metrics: "app.prefetch.render.error"
+}), _define_property(_obj, SSRErrors.RENDER_HTML, {
+  reporter: "SSR Error - App Render To HTML",
+  logger: "App Render To HTML",
+  metrics: "app.render.html.error"
+}), _obj);
+var _obj1;
+var timings = (_obj1 = {}, _define_property(_obj1, SSRTimings.SSR_PREFETCH, {
+  reporter: "ssr-prefetch",
+  serverTiming: "ssr-prefetch",
+  metrics: "app.prefeth.cost",
+  logger: "App Prefetch cost = %d ms"
+}), _define_property(_obj1, SSRTimings.SSR_RENDER_HTML, {
+  reporter: "ssr-render-html",
+  serverTiming: "ssr-render-html",
+  metrics: "app.render.html.cost",
+  logger: "App Render To HTML cost = %d ms"
+}), _define_property(_obj1, SSRTimings.SSR_RENDER_TOTAL, {
+  reporter: "ssr-render-total",
+  serverTiming: "ssr-render-total",
+  metrics: "app.render.cost",
+  logger: "App Render Total cost = %d ms"
+}), _obj1);
+export function createSSRTracker(param) {
+  var reporter = param.reporter, serverTiming = param.serverTiming, metrics = param.metrics, logger = param.logger;
+  var tracker = {
+    get sessionId() {
+      return reporter.sessionId;
+    },
+    trackError: function trackError(key, e) {
+      var _errors_key = errors[key], reporterContent = _errors_key.reporter, metricsContent = _errors_key.metrics, loggerContent = _errors_key.logger;
+      reporterContent && reporter.reportError(reporterContent, e);
+      metricsContent && metrics.emitCounter(metricsContent, 1);
+      loggerContent && logger.error(loggerContent, e);
+    },
+    trackTiming: function trackTiming(key, cost) {
+      var _timings_key = timings[key], reporterName = _timings_key.reporter, serverTimingName = _timings_key.serverTiming, loggerName = _timings_key.logger, metricsName = _timings_key.metrics;
+      reporterName && reporter.reportTiming(reporterName, cost);
+      serverTimingName && serverTiming.addServeTiming(serverTimingName, cost);
+      metricsName && metrics.emitTimer(metricsName, cost);
+      loggerName && logger.debug(loggerName, cost);
+    }
+  };
+  return tracker;
+}

package/dist/esm-node/document/Body.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER } from "./constants";
+import { BODY_PARTICALS_SEPARATOR, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER } from "./constants";
 import { DocumentStructureContext } from "./DocumentStructureContext";
 import { DefaultRoot } from "./Root";
 export function Body(props) {
@@ -11,6 +11,7 @@ export function Body(props) {
     children: [
       hasSetRoot ? null : /* @__PURE__ */ _jsx(DefaultRoot, {}),
       children,
+      `${BODY_PARTICALS_SEPARATOR}`,
       `${DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
       `${DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
     ]

package/dist/esm-node/document/Head.js

@@ -3,16 +3,18 @@ import { useContext } from "react";
 import { DocumentStructureContext } from "./DocumentStructureContext";
 import { Scripts } from "./Scripts";
 import { Links } from "./Links";
-import { DOCUMENT_META_PLACEHOLDER } from "./constants";
+import { DOCUMENT_META_PLACEHOLDER, HEAD_PARTICALS_SEPARATOR, TOP_PARTICALS_SEPARATOR } from "./constants";
 export function Head(props) {
   const { hasSetScripts, hasSetLinks } = useContext(DocumentStructureContext);
   const { children, ...rest } = props;
   return /* @__PURE__ */ _jsxs("head", {
     ...rest,
     children: [
+      `${TOP_PARTICALS_SEPARATOR}`,
       `${DOCUMENT_META_PLACEHOLDER}`,
       !hasSetLinks && /* @__PURE__ */ _jsx(Links, {}),
       !hasSetScripts && /* @__PURE__ */ _jsx(Scripts, {}),
+      `${HEAD_PARTICALS_SEPARATOR}`,
       children
     ]
   });

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

@@ -4,7 +4,7 @@ import ReactDomServer from "react-dom/server";
 import { build } from "esbuild";
 import { createDebugger, findExists, fs } from "@modern-js/utils";
 import { DocumentContext } from "../DocumentContext";
-import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SCRIPT_PLACEHOLDER_END, HTML_SEPARATOR, DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_COMMENT_PLACEHOLDER_END, DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END } from "../constants";
+import { DOCUMENT_SCRIPTS_PLACEHOLDER, DOCUMENT_LINKS_PLACEHOLDER, DOCUMENT_FILE_NAME, DOCUMENT_META_PLACEHOLDER, PLACEHOLDER_REPLACER_MAP, DOC_EXT, DOCUMENT_SSR_PLACEHOLDER, DOCUMENT_CHUNKSMAP_PLACEHOLDER, DOCUMENT_SSRDATASCRIPT_PLACEHOLDER, DOCUMENT_SCRIPT_PLACEHOLDER_START, DOCUMENT_SCRIPT_PLACEHOLDER_END, HTML_SEPARATOR, DOCUMENT_COMMENT_PLACEHOLDER_START, DOCUMENT_COMMENT_PLACEHOLDER_END, DOCUMENT_STYLE_PLACEHOLDER_START, DOCUMENT_STYLE_PLACEHOLDER_END, TOP_PARTICALS_SEPARATOR, HEAD_PARTICALS_SEPARATOR, BODY_PARTICALS_SEPARATOR } from "../constants";
 const debug = createDebugger("html_genarate");
 export const getDocumenByEntryName = function(entrypoints, entryName, fallbackDir) {
   var _entrypoints_find;
@@ -45,7 +45,7 @@ export const documentPlugin = () => ({
         return null;
       }
       return async ({ htmlWebpackPlugin }) => {
-        var _tsConfig;
+        var _tsConfig, _partialsByEntrypoint;
         const config = api.useResolvedConfigContext();
         const documentParams = getDocParams({
           config,
@@ -110,10 +110,17 @@ export const documentPlugin = () => ({
         }, React.createElement(Document, null));
         let html = ReactDomServer.renderToStaticMarkup(HTMLElement);
         debug("entry %s's document jsx rendered html: %o", entryName, html);
+        const { partialsByEntrypoint } = api.useAppContext();
         const scripts = [
           htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "script").join(""),
           htmlWebpackPlugin.tags.bodyTags.toString()
         ].join("");
+        if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
+          const partialsTop = partialsByEntrypoint[entryName].top.join("\n");
+          const partialsHead = partialsByEntrypoint[entryName].head.join("\n");
+          const partialsBody = partialsByEntrypoint[entryName].body.join("\n");
+          html = html.replace(TOP_PARTICALS_SEPARATOR, partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsBody);
+        }
         const links = [
           htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "link").join("")
         ].join("");

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

@@ -7,6 +7,9 @@ export const DOC_EXT = [
 ];
 export const DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
 export const HTML_SEPARATOR = "<!--<?- html ?>-->";
+export const HEAD_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.head ?>-->");
+export const BODY_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.body ?>-->");
+export const TOP_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.top ?>-->");
 export const HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
 export const DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
 export const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(HTML_CHUNKSMAP_SEPARATOR);
@@ -14,7 +17,6 @@ export const DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDAT
 export const DOCUMENT_FILE_NAME = "Document";
 export const DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent("<!-- chunk scripts placeholder -->");
 export const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placeholder -->");
-export const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 export const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 export const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
 export const DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
@@ -22,7 +24,6 @@ export const DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end
 export const DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 export const DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 export const PLACEHOLDER_REPLACER_MAP = {
-  [DOCUMENT_NO_SCRIPTE_PLACEHOLDER]: `We're sorry but react app doesn't work properly without JavaScript enabled. Please enable it to continue.`,
   [DOCUMENT_SSR_PLACEHOLDER]: HTML_SEPARATOR,
   [DOCUMENT_CHUNKSMAP_PLACEHOLDER]: HTML_CHUNKSMAP_SEPARATOR,
   [DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]: HTML_SSRDATASCRIPT_SEPARATOR

package/dist/esm-node/router/runtime/plugin.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useContext } from "react";
+import { useContext, useMemo } from "react";
 import { createBrowserRouter, createHashRouter, RouterProvider, createRoutesFromElements, useMatches, useLocation } from "@modern-js/utils/runtime/router";
 import hoistNonReactStatics from "hoist-non-react-statics";
 import { parsedJSONFromElement } from "@modern-js/utils/runtime-browser";
@@ -53,51 +53,63 @@ export const routerPlugin = ({ serverBase = [], supportHtml5History = true, base
             });
           }
           const getRouteApp = () => {
-            return (props) => {
-              var _window__SERVER_DATA, _hydrationData;
-              beforeCreateRouter = false;
-              routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
-                routesConfig: finalRouteConfig,
-                props
-              }));
-              const runner = api.useHookRunners();
-              routes = runner.modifyRoutes(routes);
+            const useCreateRouter = (props) => {
+              var _window__SERVER_DATA;
               const baseUrl = ((_window__SERVER_DATA = window._SERVER_DATA) === null || _window__SERVER_DATA === void 0 ? void 0 : _window__SERVER_DATA.router.baseUrl) || select(location.pathname);
               const _basename = baseUrl === "/" ? urlJoin(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;
-              if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
-                hydrationData = {
-                  ...hydrationData,
-                  errors: deserializeErrors(hydrationData.errors)
-                };
-              }
-              const router = supportHtml5History ? createBrowserRouter(routes, {
-                basename: _basename,
-                hydrationData
-              }) : createHashRouter(routes, {
-                basename: _basename,
-                hydrationData
-              });
               const runtimeContext = useContext(RuntimeReactContext);
-              if (!runtimeContext.remixRouter) {
+              const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
+              return useMemo(() => {
+                var _hydrationData;
+                if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
+                  hydrationData = {
+                    ...hydrationData,
+                    errors: deserializeErrors(hydrationData.errors)
+                  };
+                }
+                routes = createRoutes ? createRoutes() : createRoutesFromElements(renderRoutes({
+                  routesConfig: finalRouteConfig,
+                  props
+                }));
+                const runner = api.useHookRunners();
+                routes = runner.modifyRoutes(routes);
+                const router = supportHtml5History ? createBrowserRouter(routes, {
+                  basename: _basename,
+                  hydrationData
+                }) : createHashRouter(routes, {
+                  basename: _basename,
+                  hydrationData
+                });
+                const originSubscribe = router.subscribe;
+                router.subscribe = (listener) => {
+                  const wrapedListener = (...args) => {
+                    const blockRoute = getBlockNavState ? getBlockNavState() : false;
+                    if (blockRoute) {
+                      return;
+                    }
+                    return listener(...args);
+                  };
+                  return originSubscribe(wrapedListener);
+                };
                 Object.defineProperty(runtimeContext, "remixRouter", {
                   get() {
                     return router;
-                  }
+                  },
+                  configurable: true
                 });
-              }
-              const originSubscribe = router.subscribe;
-              router.subscribe = (listener) => {
-                const wrapedListener = (...args) => {
-                  const getBlockNavState = runtimeContext.unstable_getBlockNavState;
-                  const blockRoute = getBlockNavState ? getBlockNavState() : false;
-                  if (blockRoute) {
-                    return;
-                  }
-                  return listener(...args);
-                };
-                return originSubscribe(wrapedListener);
-              };
+                return router;
+              }, [
+                finalRouteConfig,
+                props,
+                _basename,
+                hydrationData,
+                getBlockNavState
+              ]);
+            };
+            return (props) => {
+              beforeCreateRouter = false;
+              const router = useCreateRouter(props);
               return /* @__PURE__ */ _jsx(App, {
                 ...props,
                 children: /* @__PURE__ */ _jsx(RouterProvider, {