@modern-js/runtime 2.4.1-alpha.1 → 2.5.0-alpha.0

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

@@ -0,0 +1,41 @@
+import { formatServer } from "./utils";
+import render from "./serverRender";
+const ssr = (config = {}) => ({
+  name: "@modern-js/plugin-ssr",
+  setup: () => {
+    return {
+      server: async ({ App, context }) => {
+        const html = await render({
+          context,
+          App,
+          config
+        });
+        return html;
+      },
+      init({ context }, next) {
+        const { request } = context.ssrContext;
+        context.ssrContext.request = formatServer(request);
+        return next({ context });
+      },
+      pickContext: ({ context, pickedContext }, next) => {
+        const { request, response } = context == null ? void 0 : context.ssrContext;
+        const { initialData } = context;
+        return next({
+          context,
+          pickedContext: {
+            ...pickedContext,
+            initialData,
+            request,
+            response
+          }
+        });
+      }
+    };
+  }
+});
+var index_node_default = ssr;
+export * from "./react";
+export {
+  index_node_default as default,
+  ssr
+};

package/dist/esm-node/ssr/prefetch.js

@@ -0,0 +1,47 @@
+import { jsx } from "react/jsx-runtime";
+import { renderToStaticMarkup } from "react-dom/server";
+import { run } from "@modern-js/utils/ssr";
+import { ChunkExtractor } from "@loadable/server";
+const prefetch = async (App, context) => run(context.ssrContext.request.headers, async () => {
+  var _a;
+  const { ssrContext } = context;
+  const { loadableStats } = ssrContext;
+  if (loadableStats) {
+    const extractor = new ChunkExtractor({
+      stats: loadableStats,
+      entrypoints: [ssrContext.entryName].filter(Boolean)
+    });
+    renderToStaticMarkup(extractor.collectChunks(/* @__PURE__ */ jsx(App, {
+      context
+    })));
+  } else {
+    renderToStaticMarkup(/* @__PURE__ */ jsx(App, {
+      context
+    }));
+  }
+  if (!context.loaderManager.hasPendingLoaders()) {
+    return {
+      initialData: context.initialData,
+      i18nData: context.__i18nData__
+    };
+  }
+  const loadersData = await context.loaderManager.awaitPendingLoaders();
+  Object.keys(loadersData).forEach((id) => {
+    const data = loadersData[id];
+    if (data._error) {
+      ssrContext.logger.error("App Prefetch Loader", data._error);
+      ssrContext.metrics.emitCounter("app.prefetch.loader.error", 1);
+      delete data._error;
+    }
+  });
+  return {
+    loadersData,
+    initialData: context.initialData,
+    i18nData: context.__i18nData__,
+    storeState: (_a = context == null ? void 0 : context.store) == null ? void 0 : _a.getState()
+  };
+});
+var prefetch_default = prefetch;
+export {
+  prefetch_default as default
+};

package/dist/{js/modern → esm-node}/ssr/prefetch.worker.js

@@ -1,27 +1,7 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { jsx } from "react/jsx-runtime";
 import { renderToStaticMarkup } from "react-dom/server";
 import { ChunkExtractor } from "@loadable/server";
-const prefetch = (App, context) => __async(void 0, null, function* () {
+const prefetch = async (App, context) => {
   var _a;
   const { ssrContext } = context;
   const { loadableStats } = ssrContext;
@@ -44,7 +24,7 @@ const prefetch = (App, context) => __async(void 0, null, function* () {
       i18nData: context.__i18nData__
     };
   }
-  const loadersData = yield context.loaderManager.awaitPendingLoaders();
+  const loadersData = await context.loaderManager.awaitPendingLoaders();
   Object.keys(loadersData).forEach((id) => {
     const data = loadersData[id];
     if (data._error) {
@@ -59,7 +39,7 @@ const prefetch = (App, context) => __async(void 0, null, function* () {
     i18nData: context.__i18nData__,
     storeState: (_a = context == null ? void 0 : context.store) == null ? void 0 : _a.getState()
   };
-});
+};
 var prefetch_worker_default = prefetch;
 export {
   prefetch_worker_default as default

package/dist/{js/modern → esm-node}/ssr/react/prerender/index.js

@@ -1,22 +1,3 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import withSideEffect from "react-side-effect";
 import React, { createElement } from "react";
 import {
@@ -51,7 +32,7 @@ const mapStateOnServer = (reduceProps) => {
     const reduceProp = reduceProps[propKey];
     let nextProps = props;
     if (exist(reduceProp)) {
-      nextProps = __spreadProps(__spreadValues({}, props), { [propKey]: reduceProp });
+      nextProps = { ...props, [propKey]: reduceProp };
     }
     return nextProps;
   }, defaultProps);
@@ -80,12 +61,12 @@ function factory(Component) {
       return true;
     }
     render() {
-      const newProps = __spreadValues({}, this.props);
+      const newProps = { ...this.props };
       const validate = this.verify();
       if (!validate) {
         throw new Error("invalid props, check usage");
       }
-      return createElement(Component, __spreadValues({}, newProps));
+      return createElement(Component, { ...newProps });
     }
   }
   Spr.peek = Component.peek;

package/dist/{js/modern → esm-node}/ssr/serverRender/helmet.js

@@ -3,7 +3,7 @@ const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
 const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
-const TEST_TITLE_CONTENT = new RegExp("(?<=<title[^>]*>)([\\s\\S\\n\\r]*?)([.|\\S])([\\s\\S\\n\\r]*?)(?=<\\/title>)");
+const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/;
 function helmet(content, helmetData) {
   let result = content;
   const bodyAttributes = helmetData.bodyAttributes.toString();

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

@@ -0,0 +1,13 @@
+import { isReact18 } from "../utils";
+async function serverRender(options) {
+  if (isReact18() && options.config.mode === "stream") {
+    const pipe = await require("./renderToStream").render(options);
+    return pipe;
+  } else {
+    const html = await require("./renderToString").render(options);
+    return html;
+  }
+}
+export {
+  serverRender as default
+};

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -1,4 +1,4 @@
-import serialize from "serialize-javascript";
+import { serializeJson } from "@modern-js/utils/serialize";
 import { buildTemplate } from "./buildTemplate.share";
 function buildShellAfterTemplate(afterAppTemplate, options) {
   const callbacks = [injectSSRDataScript];
@@ -24,9 +24,7 @@ function buildShellAfterTemplate(afterAppTemplate, options) {
         renderLevel
       };
       return `
-      <script>window._SSR_DATA = ${serialize(SSRData, {
-        isJSON: true
-      })}<\/script>
+      <script>window._SSR_DATA = ${serializeJson(SSRData)}<\/script>
       `;
     }
   }

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/index.js

@@ -1,23 +1,3 @@
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { createElement } from "react";
 import { run } from "@modern-js/utils/ssr";
 import { PreRender } from "../../react/prerender";
@@ -30,7 +10,7 @@ const render = ({ App, context }) => {
       'The "ssrContext" must not be undefined, but received undefined'
     );
   }
-  return run(ssrContext.request.headers, () => __async(void 0, null, function* () {
+  return run(ssrContext.request.headers, async () => {
     const end = time();
     const rootElement = createElement(App, {
       context: Object.assign(context || {}, {
@@ -51,7 +31,7 @@ const render = ({ App, context }) => {
       }
     });
     return pipe;
-  }));
+  });
 };
 export {
   render

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/renderToPipe.js

@@ -1,27 +1,15 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
 import { Transform } from "stream";
 import { RenderLevel } from "../types";
+import { ESCAPED_SHELL_STREAM_END_MARK } from "../../../common";
 import { getTemplates } from "./template";
+var ShellChunkStatus = /* @__PURE__ */ ((ShellChunkStatus2) => {
+  ShellChunkStatus2[ShellChunkStatus2["IDLE"] = 0] = "IDLE";
+  ShellChunkStatus2[ShellChunkStatus2["START"] = 1] = "START";
+  ShellChunkStatus2[ShellChunkStatus2["FINIESH"] = 2] = "FINIESH";
+  return ShellChunkStatus2;
+})(ShellChunkStatus || {});
 function renderToPipe(rootElement, context, options) {
-  let isShellStream = true;
+  let shellChunkStatus = 0 /* IDLE */;
   const { ssrContext } = context;
   const forUserPipe = (stream) => {
     return new Promise((resolve) => {
@@ -30,7 +18,8 @@ function renderToPipe(rootElement, context, options) {
         ({ renderToPipeableStream } = require("react-dom/server"));
       } catch (e) {
       }
-      const { pipe } = renderToPipeableStream(rootElement, __spreadProps(__spreadValues({}, options), {
+      const { pipe } = renderToPipeableStream(rootElement, {
+        ...options,
         onShellReady() {
           var _a;
           const { shellAfter, shellBefore } = getTemplates(
@@ -41,9 +30,20 @@ function renderToPipe(rootElement, context, options) {
           const injectableTransform = new Transform({
             transform(chunk, _encoding, callback) {
               try {
-                if (isShellStream) {
-                  this.push(joinChunk(shellBefore, chunk, shellAfter));
-                  isShellStream = false;
+                if (shellChunkStatus !== 2 /* FINIESH */) {
+                  let concatedChunk = chunk.toString();
+                  if (shellChunkStatus === 0 /* IDLE */) {
+                    concatedChunk = `${shellBefore}${concatedChunk}`;
+                    shellChunkStatus = 1 /* START */;
+                  }
+                  if (shellChunkStatus === 1 /* START */ && concatedChunk.endsWith(ESCAPED_SHELL_STREAM_END_MARK)) {
+                    concatedChunk = concatedChunk.replace(
+                      ESCAPED_SHELL_STREAM_END_MARK,
+                      shellAfter
+                    );
+                    shellChunkStatus = 2 /* FINIESH */;
+                  }
+                  this.push(concatedChunk);
                 } else {
                   this.push(chunk);
                 }
@@ -82,13 +82,10 @@ function renderToPipe(rootElement, context, options) {
           ssrContext.metrics.emitCounter("app.render.streaming.error", 1);
           (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
         }
-      }));
+      });
     });
   };
   return forUserPipe;
-  function joinChunk(before = "", chunk, after = "") {
-    return `${before}${chunk.toString()}${after}`;
-  }
 }
 var renderToPipe_default = renderToPipe;
 export {

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/renderToPipe.worker.js

@@ -1,48 +1,9 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-var __async = (__this, __arguments, generator) => {
-  return new Promise((resolve, reject) => {
-    var fulfilled = (value) => {
-      try {
-        step(generator.next(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var rejected = (value) => {
-      try {
-        step(generator.throw(value));
-      } catch (e) {
-        reject(e);
-      }
-    };
-    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
-    step((generator = generator.apply(__this, __arguments)).next());
-  });
-};
 import { RenderLevel } from "../types";
 import { getTemplates } from "./template";
 function renderToPipe(rootElement, context, options) {
   let isShellStream = true;
   const { ssrContext } = context;
-  const forUserPipe = (stream) => __async(this, null, function* () {
+  const forUserPipe = async (stream) => {
     let renderToReadableStream;
     try {
       ({ renderToReadableStream } = require("react-dom/server"));
@@ -53,23 +14,27 @@ function renderToPipe(rootElement, context, options) {
       RenderLevel.SERVER_RENDER
     );
     try {
-      let _a;
-      const readableOriginal = yield renderToReadableStream(rootElement, __spreadProps(__spreadValues({}, options), {
+      const readableOriginal = await renderToReadableStream(rootElement, {
+        ...options,
         onError(error) {
-          var _a2;
+          var _a;
           ssrContext.logger.error(
             "An error occurs during streaming SSR",
             error
           );
           ssrContext.metrics.emitCounter("app.render.streaming.error", 1);
-          (_a2 = options == null ? void 0 : options.onError) == null ? void 0 : _a2.call(options, error);
+          (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
         }
-      }));
+      });
       const reader = readableOriginal.getReader();
       const injectableStream = new ReadableStream({
         start(controller) {
-          return __async(this, null, function* () {
-            const { value } = yield reader.read();
+          async function push() {
+            const { done, value } = await reader.read();
+            if (done) {
+              controller.close();
+              return;
+            }
             if (isShellStream) {
               controller.enqueue(encodeForWebStream(shellBefore));
               controller.enqueue(value);
@@ -78,7 +43,9 @@ function renderToPipe(rootElement, context, options) {
             } else {
               controller.enqueue(value);
             }
-          });
+            push();
+          }
+          push();
         }
       });
       return readableOriginal(injectableStream).readableOriginal(stream);
@@ -91,7 +58,7 @@ function renderToPipe(rootElement, context, options) {
       const fallbackHtml = `${shellBefore2}${shellAfter2}`;
       return fallbackHtml;
     }
-  });
+  };
   return forUserPipe;
 }
 let encoder;

package/dist/{js/modern → esm-node}/ssr/serverRender/renderToStream/template.js

@@ -2,7 +2,7 @@ import { buildShellAfterTemplate } from "./buildTemplate.after";
 import { buildShellBeforeTemplate } from "./bulidTemplate.before";
 const HTML_SEPARATOR = "<!--<?- html ?>-->";
 const getTemplates = (context, renderLevel) => {
-  const { ssrContext } = context;
+  const { ssrContext, routerContext } = context;
   const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
   const builtBeforeTemplate = buildShellBeforeTemplate(
     beforeAppTemplate,
@@ -10,6 +10,7 @@ const getTemplates = (context, renderLevel) => {
   );
   const builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
     ssrContext,
+    routerContext,
     renderLevel
   });
   return {

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

@@ -0,0 +1,152 @@
+import React from "react";
+import ReactDomServer from "react-dom/server";
+import { serializeJson } from "@modern-js/utils/serialize";
+import ReactHelmet from "react-helmet";
+import helmetReplace from "../helmet";
+import {
+  RenderLevel
+} from "../types";
+import { time } from "../time";
+import prefetch from "../../prefetch";
+import { toFragments } from "./template";
+import { reduce } from "./reduce";
+import * as loadableRenderer from "./loadable";
+import * as styledComponentRenderer from "./styledComponent";
+const buildTemplateData = (context, data, routerData, renderLevel) => {
+  const { request } = context;
+  return {
+    data,
+    routerData,
+    context: {
+      request: {
+        params: request.params,
+        query: request.query,
+        pathname: request.pathname,
+        host: request.host,
+        url: request.url,
+        headers: request.headers,
+        cookieMap: request.cookieMap
+      }
+    },
+    renderLevel
+  };
+};
+class Entry {
+  constructor(options) {
+    const { ctx, config } = options;
+    const {
+      entryName,
+      template,
+      request: { host }
+    } = ctx;
+    this.fragments = toFragments(template, entryName);
+    this.entryName = entryName;
+    this.host = host;
+    this.App = options.App;
+    this.pluginConfig = config;
+    this.metrics = ctx.metrics;
+    this.logger = ctx.logger;
+    this.result = {
+      renderLevel: RenderLevel.CLIENT_RENDER,
+      html: "",
+      chunksMap: {
+        js: "",
+        css: ""
+      }
+    };
+  }
+  async renderToHtml(context) {
+    var _a, _b, _c;
+    const ssrContext = context.ssrContext;
+    if ((_a = ssrContext.redirection) == null ? void 0 : _a.url) {
+      return "";
+    }
+    const prefetchData = await this.prefetch(context);
+    if ((_b = ssrContext.redirection) == null ? void 0 : _b.url) {
+      return "";
+    }
+    if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
+      this.result.html = this.renderToString(context);
+    }
+    if ((_c = ssrContext.redirection) == null ? void 0 : _c.url) {
+      return "";
+    }
+    const { routerContext } = context;
+    const routerData = routerContext != null ? routerContext : {
+      loaderData: routerContext.loaderData
+    };
+    let html = "";
+    const templateData = buildTemplateData(
+      ssrContext,
+      prefetchData,
+      routerData,
+      this.result.renderLevel
+    );
+    const SSRData = this.getSSRDataScript(templateData);
+    for (const fragment of this.fragments) {
+      if (fragment.isVariable && fragment.content === "SSRDataScript") {
+        html += fragment.getValue(SSRData);
+      } else {
+        html += fragment.getValue(this.result);
+      }
+    }
+    const helmetData = ReactHelmet.renderStatic();
+    return helmetData ? helmetReplace(html, helmetData) : html;
+  }
+  async prefetch(context) {
+    let prefetchData;
+    const end = time();
+    try {
+      prefetchData = await prefetch(this.App, context);
+      this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
+      const prefetchCost = end();
+      this.logger.debug(`App Prefetch cost = %d ms`, prefetchCost);
+      this.metrics.emitTimer("app.prefetch.cost", prefetchCost);
+    } catch (e) {
+      this.result.renderLevel = RenderLevel.CLIENT_RENDER;
+      this.logger.error("App Prefetch Render", e);
+      this.metrics.emitCounter("app.prefetch.render.error", 1);
+    }
+    return prefetchData || {};
+  }
+  renderToString(context) {
+    let html = "";
+    const end = time();
+    const { ssrContext } = context;
+    try {
+      const App = React.createElement(this.App, {
+        context: Object.assign(context, { ssr: true })
+      });
+      const renderContext = {
+        stats: ssrContext.loadableStats,
+        host: this.host,
+        result: this.result,
+        entryName: this.entryName,
+        config: this.pluginConfig
+      };
+      html = reduce(App, renderContext, [
+        styledComponentRenderer.toHtml,
+        loadableRenderer.toHtml,
+        (jsx) => ReactDomServer.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.result.renderLevel = RenderLevel.SERVER_RENDER;
+    } catch (e) {
+      this.logger.error("App Render To HTML", e);
+      this.metrics.emitCounter("app.render.html.error", 1);
+    }
+    return html;
+  }
+  getSSRDataScript(templateData) {
+    return {
+      SSRDataScript: `
+        <script>window._SSR_DATA = ${serializeJson(templateData)}<\/script>
+      `
+    };
+  }
+}
+export {
+  Entry as default
+};