@modern-js/runtime 2.29.0 → 2.31.0

package/CHANGELOG.md

@@ -1,5 +1,43 @@
 # @modern-js/runtime
 
+## 2.31.0
+
+### Patch Changes
+
+- 4a87c07: feat: memo creating router
+  feat: 缓存 router 创建
+- 2361ce8: feat: support partials html in Document
+  feat: 支持 partials html 在 Document 中也生效
+- cd39c6f: fix: use [\s\S]_ to replace ._ for \n\r char regex
+  fix: 使用 [\s\X]_ 替换 ._ 匹配 \n\r 字符
+- Updated dependencies [1882366]
+  - @modern-js/utils@2.31.0
+  - @modern-js/plugin@2.31.0
+  - @modern-js/types@2.31.0
+
+## 2.30.0
+
+### Minor Changes
+
+- 855a61e: feat(plugin-runtime): add ssr tracker
+  feat(plugin-runtime): 新增 ssr tracker
+
+### Patch Changes
+
+- a8a4fd3: fix: ssr plugin use wrong config params
+  fix: ssr 插件使用了错误的 config 参数
+- 276ace3: chore: remove noscript tag in html template
+  chore: 移除 HTML 模板中的 noscript 标签
+- c731bf3: fix(plugin-runtime): the output maybe undefined;
+  fix(plugin-runtime): output 可能是个 undefined
+- 8219d55: fix(plugin-runtime): ssg need use String SSR, so we should inject loadable-component babel plugin when enable ssg
+  fix(plugin-runtime): ssg 需要使用 String SSR, 我们需要在开启 SSG 得时候注入 loadbale-compnent babel 插件
+- Updated dependencies [a5ee81a]
+- Updated dependencies [b6ab299]
+  - @modern-js/types@2.30.0
+  - @modern-js/utils@2.30.0
+  - @modern-js/plugin@2.30.0
+
 ## 2.29.0
 
 ### Minor Changes

package/dist/cjs/document/Body.js

@@ -22,6 +22,7 @@ function Body(props) {
     children: [
       hasSetRoot ? null : /* @__PURE__ */ (0, _jsxruntime.jsx)(_Root.DefaultRoot, {}),
       children,
+      `${_constants.BODY_PARTICALS_SEPARATOR}`,
       `${_constants.DOCUMENT_CHUNKSMAP_PLACEHOLDER}`,
       `${_constants.DOCUMENT_SSRDATASCRIPT_PLACEHOLDER}`
     ]

package/dist/cjs/document/Head.js

@@ -30,9 +30,11 @@ function Head(props) {
   return /* @__PURE__ */ (0, _jsxruntime.jsxs)("head", {
     ...rest,
     children: [
+      `${_constants.TOP_PARTICALS_SEPARATOR}`,
       `${_constants.DOCUMENT_META_PLACEHOLDER}`,
       !hasSetLinks && /* @__PURE__ */ (0, _jsxruntime.jsx)(_Links.Links, {}),
       !hasSetScripts && /* @__PURE__ */ (0, _jsxruntime.jsx)(_Scripts.Scripts, {}),
+      `${_constants.HEAD_PARTICALS_SEPARATOR}`,
       children
     ]
   });

package/dist/cjs/document/cli/index.js

@@ -68,7 +68,7 @@ const documentPlugin = () => ({
         return null;
       }
       return async ({ htmlWebpackPlugin }) => {
-        var _tsConfig;
+        var _tsConfig, _partialsByEntrypoint;
         const config = api.useResolvedConfigContext();
         const documentParams = getDocParams({
           config,
@@ -133,10 +133,17 @@ const documentPlugin = () => ({
         }, _react.default.createElement(Document, null));
         let html = _server.default.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(_constants.TOP_PARTICALS_SEPARATOR, partialsTop).replace(_constants.HEAD_PARTICALS_SEPARATOR, partialsHead).replace(_constants.BODY_PARTICALS_SEPARATOR, partialsBody);
+        }
         const links = [
           htmlWebpackPlugin.tags.headTags.filter((item) => item.tagName === "link").join("")
         ].join("");

package/dist/cjs/document/constants.js

@@ -19,6 +19,15 @@ _export(exports, {
   HTML_SEPARATOR: function() {
     return HTML_SEPARATOR;
   },
+  HEAD_PARTICALS_SEPARATOR: function() {
+    return HEAD_PARTICALS_SEPARATOR;
+  },
+  BODY_PARTICALS_SEPARATOR: function() {
+    return BODY_PARTICALS_SEPARATOR;
+  },
+  TOP_PARTICALS_SEPARATOR: function() {
+    return TOP_PARTICALS_SEPARATOR;
+  },
   HTML_SSRDATASCRIPT_SEPARATOR: function() {
     return HTML_SSRDATASCRIPT_SEPARATOR;
   },
@@ -40,9 +49,6 @@ _export(exports, {
   DOCUMENT_LINKS_PLACEHOLDER: function() {
     return DOCUMENT_LINKS_PLACEHOLDER;
   },
-  DOCUMENT_NO_SCRIPTE_PLACEHOLDER: function() {
-    return DOCUMENT_NO_SCRIPTE_PLACEHOLDER;
-  },
   DOCUMENT_SCRIPT_PLACEHOLDER_START: function() {
     return DOCUMENT_SCRIPT_PLACEHOLDER_START;
   },
@@ -74,6 +80,9 @@ const DOC_EXT = [
 ];
 const DOCUMENT_META_PLACEHOLDER = encodeURIComponent("<%= meta %>");
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
+const HEAD_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.head ?>-->");
+const BODY_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.body ?>-->");
+const TOP_PARTICALS_SEPARATOR = encodeURIComponent("<!--<?- partials.top ?>-->");
 const HTML_SSRDATASCRIPT_SEPARATOR = "<!--<?- SSRDataScript ?>-->";
 const DOCUMENT_SSR_PLACEHOLDER = encodeURIComponent(HTML_SEPARATOR);
 const DOCUMENT_CHUNKSMAP_PLACEHOLDER = encodeURIComponent(_constants.HTML_CHUNKSMAP_SEPARATOR);
@@ -81,7 +90,6 @@ const DOCUMENT_SSRDATASCRIPT_PLACEHOLDER = encodeURIComponent(HTML_SSRDATASCRIPT
 const DOCUMENT_FILE_NAME = "Document";
 const DOCUMENT_SCRIPTS_PLACEHOLDER = encodeURIComponent("<!-- chunk scripts placeholder -->");
 const DOCUMENT_LINKS_PLACEHOLDER = encodeURIComponent("<!-- chunk links placeholder -->");
-const DOCUMENT_NO_SCRIPTE_PLACEHOLDER = encodeURIComponent("<!-- no-script -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_START = encodeURIComponent("<!-- script-start -->");
 const DOCUMENT_SCRIPT_PLACEHOLDER_END = encodeURIComponent("<!-- script-end -->");
 const DOCUMENT_STYLE_PLACEHOLDER_START = encodeURIComponent("<!-- style-start -->");
@@ -89,7 +97,6 @@ const DOCUMENT_STYLE_PLACEHOLDER_END = encodeURIComponent("<!-- style-end -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_START = encodeURIComponent("<!-- comment-start -->");
 const DOCUMENT_COMMENT_PLACEHOLDER_END = encodeURIComponent("<!-- comment-end -->");
 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]: _constants.HTML_CHUNKSMAP_SEPARATOR,
   [DOCUMENT_SSRDATASCRIPT_PLACEHOLDER]: HTML_SSRDATASCRIPT_SEPARATOR

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

@@ -80,51 +80,63 @@ const routerPlugin = ({ serverBase = [], supportHtml5History = true, basename =
             });
           }
           const getRouteApp = () => {
-            return (props) => {
-              var _window__SERVER_DATA, _hydrationData;
-              beforeCreateRouter = false;
-              routes = createRoutes ? createRoutes() : (0, _router.createRoutesFromElements)((0, _utils.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 === "/" ? (0, _utils.urlJoin)(baseUrl, basename) : baseUrl;
               let hydrationData = window._ROUTER_DATA;
-              if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
-                hydrationData = {
-                  ...hydrationData,
-                  errors: (0, _utils.deserializeErrors)(hydrationData.errors)
-                };
-              }
-              const router = supportHtml5History ? (0, _router.createBrowserRouter)(routes, {
-                basename: _basename,
-                hydrationData
-              }) : (0, _router.createHashRouter)(routes, {
-                basename: _basename,
-                hydrationData
-              });
               const runtimeContext = (0, _react.useContext)(_core.RuntimeReactContext);
-              if (!runtimeContext.remixRouter) {
+              const { unstable_getBlockNavState: getBlockNavState } = runtimeContext;
+              return (0, _react.useMemo)(() => {
+                var _hydrationData;
+                if ((_hydrationData = hydrationData) === null || _hydrationData === void 0 ? void 0 : _hydrationData.errors) {
+                  hydrationData = {
+                    ...hydrationData,
+                    errors: (0, _utils.deserializeErrors)(hydrationData.errors)
+                  };
+                }
+                routes = createRoutes ? createRoutes() : (0, _router.createRoutesFromElements)((0, _utils.renderRoutes)({
+                  routesConfig: finalRouteConfig,
+                  props
+                }));
+                const runner = api.useHookRunners();
+                routes = runner.modifyRoutes(routes);
+                const router = supportHtml5History ? (0, _router.createBrowserRouter)(routes, {
+                  basename: _basename,
+                  hydrationData
+                }) : (0, _router.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__ */ (0, _jsxruntime.jsx)(App, {
                 ...props,
                 children: /* @__PURE__ */ (0, _jsxruntime.jsx)(_router.RouterProvider, {

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

@@ -24,8 +24,8 @@ const PLUGIN_IDENTIFIER = "ssr";
 const hasStringSSREntry = (userConfig) => {
   var _server, _server1;
   const isStreaming = (ssr) => ssr && typeof ssr === "object" && ssr.mode === "stream";
-  const { server } = userConfig;
-  if (((_server = server) === null || _server === void 0 ? void 0 : _server.ssr) && !isStreaming(server.ssr)) {
+  const { server, output } = userConfig;
+  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") {
@@ -37,6 +37,11 @@ const hasStringSSREntry = (userConfig) => {
   }
   return false;
 };
+const checkUseStringSSR = (config) => {
+  var _output;
+  const { output } = config;
+  return Boolean((_output = output) === null || _output === void 0 ? void 0 : _output.ssg) || hasStringSSREntry(config);
+};
 const ssrPlugin = () => ({
   name: "@modern-js/plugin-ssr",
   required: [
@@ -49,29 +54,30 @@ const ssrPlugin = () => ({
       config() {
         const appContext = api.useAppContext();
         pluginsExportsUtils = (0, _utils.createRuntimeExportsUtils)(appContext.internalDirectory, "plugins");
-        const userConfig = api.useConfigContext();
         const { bundlerType = "webpack" } = api.useAppContext();
-        const babelConfig = (() => {
+        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.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
-              if ((0, _utils.isUseSSRBundle)(userConfig) && hasStringSSREntry(userConfig)) {
+              if ((0, _utils.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") {
-            if ((0, _utils.isUseSSRBundle)(userConfig)) {
-              return (config) => {
+            return (config) => {
+              const userConfig = api.useResolvedConfigContext();
+              if ((0, _utils.isUseSSRBundle)(userConfig)) {
                 var _config_plugins;
                 (_config_plugins = config.plugins) === null || _config_plugins === void 0 ? void 0 : _config_plugins.push(_path.default.join(__dirname, "./babel-plugin-ssr-loader-id"));
-                if (hasStringSSREntry(userConfig)) {
+                if (checkUseStringSSR(userConfig)) {
                   var _config_plugins1;
                   (_config_plugins1 = config.plugins) === null || _config_plugins1 === void 0 ? void 0 : _config_plugins1.push(require.resolve("@loadable/babel-plugin"));
                 }
-              };
-            }
+              }
+            };
           }
         })();
         return {
@@ -87,8 +93,8 @@ const ssrPlugin = () => ({
           },
           tools: {
             bundlerChain(chain, { isServer, isServiceWorker, CHAIN_ID }) {
-              const userConfig2 = api.useResolvedConfigContext();
-              if ((0, _utils.isUseSSRBundle)(userConfig2) && !isServer && !isServiceWorker && hasStringSSREntry(userConfig2)) {
+              const userConfig = api.useResolvedConfigContext();
+              if ((0, _utils.isUseSSRBundle)(userConfig) && !isServer && !isServiceWorker && checkUseStringSSR(userConfig)) {
                 const LoadableBundlerPlugin = require("./loadable-bundler-plugin.js");
                 chain.plugin(CHAIN_ID.PLUGIN.LOADABLE).use(LoadableBundlerPlugin, [
                   {
@@ -97,7 +103,7 @@ const ssrPlugin = () => ({
                 ]);
               }
             },
-            babel: babelConfig
+            babel: babelHandler
           }
         };
       },

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

@@ -21,13 +21,12 @@ const _helmet = /* @__PURE__ */ _interop_require_default._(require("../helmet"))
 const _types = require("../types");
 const _prefetch = /* @__PURE__ */ _interop_require_default._(require("../../prefetch"));
 const _utils1 = require("../utils");
-const _reporter = require("../reporter");
-const _constants = require("../constants");
+const _tracker = require("../tracker");
 const _template = require("./template");
 const _reduce = require("./reduce");
 const _loadable = /* @__PURE__ */ _interop_require_wildcard._(require("./loadable"));
 const _styledComponent = /* @__PURE__ */ _interop_require_wildcard._(require("./styledComponent"));
-const buildTemplateData = (context, data, renderLevel, reporter) => {
+const buildTemplateData = (context, data, renderLevel, tracker) => {
   const { request, enableUnsafeCtx } = context;
   const unsafeContext = {
     headers: request.headers
@@ -44,7 +43,7 @@ const buildTemplateData = (context, data, renderLevel, reporter) => {
         ...enableUnsafeCtx ? unsafeContext : {}
       },
       reporter: {
-        sessionId: reporter.sessionId
+        sessionId: tracker.sessionId
       }
     },
     renderLevel
@@ -73,7 +72,7 @@ class Entry {
       errors: (0, _utils.serializeErrors)(routerContext.errors)
     } : void 0;
     let html = "";
-    const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel, this.reporter);
+    const templateData = buildTemplateData(ssrContext, prefetchData, this.result.renderLevel, this.tracker);
     const SSRData = this.getSSRDataScript(templateData, routerData);
     for (const fragment of this.fragments) {
       if (fragment.isVariable && fragment.content === "SSRDataScript") {
@@ -92,15 +91,10 @@ class Entry {
       prefetchData = await (0, _prefetch.default)(this.App, context);
       this.result.renderLevel = _types.RenderLevel.SERVER_PREFETCH;
       const 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(_constants.ServerTimingNames.SSR_PREFETCH, prefetchCost);
+      this.tracker.trackTiming(_tracker.SSRTimings.SSR_PREFETCH, prefetchCost);
     } catch (e) {
       this.result.renderLevel = _types.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(_tracker.SSRErrors.PREFETCH, e);
     }
     return prefetchData || {};
   }
@@ -129,15 +123,10 @@ class Entry {
         (jsx) => _server.default.renderToString(jsx)
       ]);
       const 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(_constants.ServerTimingNames.SSR_RENDER_HTML, cost);
+      this.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_HTML, cost);
       this.result.renderLevel = _types.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(_tracker.SSRErrors.RENDER_HTML, e);
     }
     return html;
   }
@@ -162,9 +151,7 @@ class Entry {
     _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);
@@ -179,10 +166,8 @@ class Entry {
     this.host = host;
     this.App = options.App;
     this.pluginConfig = config;
-    this.reporter = (0, _reporter.createSSRReporter)(ctx.reporter);
-    this.severTiming = ctx.serverTiming;
+    this.tracker = (0, _tracker.createSSRTracker)(ctx);
     this.metrics = ctx.metrics;
-    this.logger = ctx.logger;
     this.nonce = nonce;
     this.result = {
       renderLevel: _types.RenderLevel.CLIENT_RENDER,

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

@@ -12,7 +12,7 @@ const _interop_require_default = require("@swc/helpers/_/_interop_require_defaul
 const _runtimenode = require("@modern-js/utils/runtime-node");
 const _time = require("@modern-js/utils/universal/time");
 const _prerender = require("../../react/prerender");
-const _constants = require("../constants");
+const _tracker = require("../tracker");
 const _entry = /* @__PURE__ */ _interop_require_default._(require("./entry"));
 const render = ({ App, context, config }) => {
   const ssrContext = context.ssrContext;
@@ -26,10 +26,7 @@ const render = ({ App, context, config }) => {
     const end = (0, _time.time)();
     const html = await entry.renderToHtml(context);
     const 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(_constants.ServerTimingNames.SSR_RENDER_TOTAL, cost);
+    entry.tracker.trackTiming(_tracker.SSRTimings.SSR_RENDER_TOTAL, cost);
     const cacheConfig = _prerender.PreRender.config();
     if (cacheConfig) {
       context.ssrContext.cacheConfig = cacheConfig;

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name]
+    });
+}
+_export(exports, {
+  SSRTimings: function() {
+    return SSRTimings;
+  },
+  SSRErrors: function() {
+    return SSRErrors;
+  },
+  createSSRTracker: function() {
+    return createSSRTracker;
+  }
+});
+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 = {}));
+var SSRErrors;
+(function(SSRErrors2) {
+  SSRErrors2[SSRErrors2["PREFETCH"] = 0] = "PREFETCH";
+  SSRErrors2[SSRErrors2["RENDER_HTML"] = 1] = "RENDER_HTML";
+})(SSRErrors || (SSRErrors = {}));
+const errors = {
+  [SSRErrors.PREFETCH]: {
+    reporter: "SSR Error - App Prefetch Render",
+    logger: "App Prefetch Render",
+    metrics: "app.prefetch.render.error"
+  },
+  [SSRErrors.RENDER_HTML]: {
+    reporter: "SSR Error - App Render To HTML",
+    logger: "App Render To HTML",
+    metrics: "app.render.html.error"
+  }
+};
+const timings = {
+  [SSRTimings.SSR_PREFETCH]: {
+    reporter: "ssr-prefetch",
+    serverTiming: "ssr-prefetch",
+    metrics: "app.prefeth.cost",
+    logger: "App Prefetch cost = %d ms"
+  },
+  [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"
+  },
+  [SSRTimings.SSR_RENDER_TOTAL]: {
+    reporter: "ssr-render-total",
+    serverTiming: "ssr-render-total",
+    metrics: "app.render.cost",
+    logger: "App Render Total cost = %d ms"
+  }
+};
+function createSSRTracker({ reporter, serverTiming, metrics, logger }) {
+  const tracker = {
+    get sessionId() {
+      return reporter.sessionId;
+    },
+    trackError(key, e) {
+      const { reporter: reporterContent, metrics: metricsContent, logger: loggerContent } = errors[key];
+      reporterContent && reporter.reportError(reporterContent, e);
+      metricsContent && metrics.emitCounter(metricsContent, 1);
+      loggerContent && logger.error(loggerContent, e);
+    },
+    trackTiming(key, cost) {
+      const { reporter: reporterName, serverTiming: serverTimingName, logger: loggerName, metrics: metricsName } = timings[key];
+      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/document/Body.js

@@ -3,7 +3,7 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 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) {
@@ -15,6 +15,7 @@ export function Body(props) {
     children: [
       hasSetRoot ? null : /* @__PURE__ */ _jsx(DefaultRoot, {}),
       children,
+      "".concat(BODY_PARTICALS_SEPARATOR),
       "".concat(DOCUMENT_CHUNKSMAP_PLACEHOLDER),
       "".concat(DOCUMENT_SSRDATASCRIPT_PLACEHOLDER)
     ]

package/dist/esm/document/Head.js

@@ -6,7 +6,7 @@ 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) {
   var _useContext = useContext(DocumentStructureContext), hasSetScripts = _useContext.hasSetScripts, hasSetLinks = _useContext.hasSetLinks;
   var children = props.children, rest = _object_without_properties(props, [
@@ -14,9 +14,11 @@ export function Head(props) {
   ]);
   return /* @__PURE__ */ _jsxs("head", _object_spread_props(_object_spread({}, rest), {
     children: [
+      "".concat(TOP_PARTICALS_SEPARATOR),
       "".concat(DOCUMENT_META_PLACEHOLDER),
       !hasSetLinks && /* @__PURE__ */ _jsx(Links, {}),
       !hasSetScripts && /* @__PURE__ */ _jsx(Scripts, {}),
+      "".concat(HEAD_PARTICALS_SEPARATOR),
       children
     ]
   }));

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

@@ -8,7 +8,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";
 var debug = createDebugger("html_genarate");
 export var getDocumenByEntryName = function getDocumenByEntryName2(entrypoints, entryName, fallbackDir) {
   var _entrypoints_find;
@@ -57,7 +57,7 @@ export var documentPlugin = function() {
             }
             return function() {
               var _ref2 = _async_to_generator(function(param) {
-                var htmlWebpackPlugin, _tsConfig, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, scripts, links, metas, nonce, nonceAttr, finalHtml;
+                var htmlWebpackPlugin, _tsConfig, _partialsByEntrypoint, config, documentParams, tempTsConfigFile, userTsConfigFilePath, tsConfig, err, htmlOutputFile, Document, HTMLElement, html, partialsByEntrypoint, scripts, partialsTop, partialsHead, partialsBody, links, metas, nonce, nonceAttr, finalHtml;
                 return _ts_generator(this, function(_state2) {
                   switch (_state2.label) {
                     case 0:
@@ -156,12 +156,19 @@ export var documentPlugin = function() {
                       }, React.createElement(Document, null));
                       html = ReactDomServer.renderToStaticMarkup(HTMLElement);
                       debug("entry %s's document jsx rendered html: %o", entryName, html);
+                      partialsByEntrypoint = api.useAppContext().partialsByEntrypoint;
                       scripts = [
                         htmlWebpackPlugin.tags.headTags.filter(function(item) {
                           return item.tagName === "script";
                         }).join(""),
                         htmlWebpackPlugin.tags.bodyTags.toString()
                       ].join("");
+                      if ((_partialsByEntrypoint = partialsByEntrypoint) === null || _partialsByEntrypoint === void 0 ? void 0 : _partialsByEntrypoint[entryName]) {
+                        partialsTop = partialsByEntrypoint[entryName].top.join("\n");
+                        partialsHead = partialsByEntrypoint[entryName].head.join("\n");
+                        partialsBody = partialsByEntrypoint[entryName].body.join("\n");
+                        html = html.replace(TOP_PARTICALS_SEPARATOR, partialsTop).replace(HEAD_PARTICALS_SEPARATOR, partialsHead).replace(BODY_PARTICALS_SEPARATOR, partialsBody);
+                      }
                       links = [
                         htmlWebpackPlugin.tags.headTags.filter(function(item) {
                           return item.tagName === "link";

package/dist/esm/document/constants.js

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