@modern-js/runtime 2.22.0 → 2.22.2-alpha.0

package/dist/js/modern/ssr/serverRender/renderToStream/renderToPipe.js

@@ -0,0 +1,96 @@
+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 { getTemplates } from "./template";
+function renderToPipe(rootElement, context, options) {
+  let isShellStream = true;
+  const { ssrContext } = context;
+  const forUserPipe = (stream) => {
+    return new Promise((resolve) => {
+      let renderToPipeableStream;
+      try {
+        ({ renderToPipeableStream } = require("react-dom/server"));
+      } catch (e) {
+      }
+      const { pipe } = renderToPipeableStream(rootElement, __spreadProps(__spreadValues({}, options), {
+        onShellReady() {
+          var _a;
+          const { shellAfter, shellBefore } = getTemplates(
+            context,
+            RenderLevel.SERVER_RENDER
+          );
+          (_a = options == null ? void 0 : options.onShellReady) == null ? void 0 : _a.call(options);
+          const injectableTransform = new Transform({
+            transform(chunk, _encoding, callback) {
+              try {
+                if (isShellStream) {
+                  this.push(joinChunk(shellBefore, chunk, shellAfter));
+                  isShellStream = false;
+                } else {
+                  this.push(chunk);
+                }
+                callback();
+              } catch (e) {
+                if (e instanceof Error) {
+                  callback(e);
+                } else {
+                  callback(new Error("Received unkown error when streaming"));
+                }
+              }
+            }
+          });
+          resolve(pipe(injectableTransform).pipe(stream));
+        },
+        onShellError(error) {
+          var _a;
+          ssrContext.metrics.emitCounter(
+            "app.render.streaming.shell.error",
+            1
+          );
+          const { shellAfter, shellBefore } = getTemplates(
+            context,
+            RenderLevel.CLIENT_RENDER
+          );
+          const fallbackHtml = `${shellBefore}${shellAfter}`;
+          resolve(fallbackHtml);
+          (_a = options == null ? void 0 : options.onShellError) == null ? void 0 : _a.call(options, error);
+        },
+        onError(error) {
+          var _a;
+          ssrContext.logger.error(
+            "An error occurs during streaming SSR",
+            error
+          );
+          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 {
+  renderToPipe_default as default
+};

package/dist/js/modern/ssr/serverRender/renderToStream/renderToPipe.worker.js

@@ -0,0 +1,117 @@
+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* () {
+    let renderToReadableStream;
+    try {
+      ({ renderToReadableStream } = require("react-dom/server"));
+    } catch (e) {
+    }
+    const { shellAfter, shellBefore } = getTemplates(
+      context,
+      RenderLevel.SERVER_RENDER
+    );
+    try {
+      const readableOriginal = yield renderToReadableStream(rootElement, __spreadProps(__spreadValues({}, options), {
+        onError(error) {
+          var _a;
+          ssrContext.logger.error(
+            "An error occurs during streaming SSR",
+            error
+          );
+          ssrContext.metrics.emitCounter("app.render.streaming.error", 1);
+          (_a = options == null ? void 0 : options.onError) == null ? void 0 : _a.call(options, error);
+        }
+      }));
+      const reader = readableOriginal.getReader();
+      const injectableStream = new ReadableStream({
+        start(controller) {
+          function push() {
+            return __async(this, null, function* () {
+              const { done, value } = yield reader.read();
+              if (done) {
+                controller.close();
+                return;
+              }
+              if (isShellStream) {
+                controller.enqueue(encodeForWebStream(shellBefore));
+                controller.enqueue(value);
+                controller.enqueue(encodeForWebStream(shellAfter));
+                isShellStream = false;
+              } else {
+                controller.enqueue(value);
+              }
+              push();
+            });
+          }
+          push();
+        }
+      });
+      return readableOriginal(injectableStream).readableOriginal(stream);
+    } catch (err) {
+      ssrContext.metrics.emitCounter("app.render.streaming.shell.error", 1);
+      const { shellAfter: shellAfter2, shellBefore: shellBefore2 } = getTemplates(
+        context,
+        RenderLevel.CLIENT_RENDER
+      );
+      const fallbackHtml = `${shellBefore2}${shellAfter2}`;
+      return fallbackHtml;
+    }
+  });
+  return forUserPipe;
+}
+let encoder;
+function encodeForWebStream(thing) {
+  if (!encoder) {
+    encoder = new TextEncoder();
+  }
+  if (typeof thing === "string") {
+    return encoder.encode(thing);
+  }
+  return thing;
+}
+var renderToPipe_worker_default = renderToPipe;
+export {
+  renderToPipe_worker_default as default
+};

package/dist/js/modern/ssr/serverRender/renderToStream/styledComponent.js

@@ -0,0 +1,12 @@
+import { ServerStyleSheet } from "styled-components";
+function getStyledComponentCss({ jsx }) {
+  const sheet = new ServerStyleSheet();
+  const collectedJsx = sheet.collectStyles(jsx);
+  return {
+    styleSheet: sheet,
+    jsx: collectedJsx
+  };
+}
+export {
+  getStyledComponentCss
+};

package/dist/js/modern/ssr/serverRender/renderToStream/template.js

@@ -0,0 +1,22 @@
+import { buildShellAfterTemplate } from "./buildTemplate.after";
+import { buildShellBeforeTemplate } from "./bulidTemplate.before";
+const HTML_SEPARATOR = "<!--<?- html ?>-->";
+const getTemplates = (context, renderLevel) => {
+  const { ssrContext } = context;
+  const [beforeAppTemplate = "", afterAppHtmlTemplate = ""] = ssrContext.template.split(HTML_SEPARATOR) || [];
+  const builtBeforeTemplate = buildShellBeforeTemplate(
+    beforeAppTemplate,
+    context
+  );
+  const builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
+    ssrContext,
+    renderLevel
+  });
+  return {
+    shellBefore: builtBeforeTemplate,
+    shellAfter: builtAfterTemplate
+  };
+};
+export {
+  getTemplates
+};

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

@@ -0,0 +1,172 @@
+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 React from "react";
+import ReactDomServer from "react-dom/server";
+import serialize from "serialize-javascript";
+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, renderLevel) => {
+  const { request } = context;
+  return {
+    data,
+    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: ""
+      }
+    };
+  }
+  renderToHtml(context) {
+    return __async(this, null, function* () {
+      var _a, _b, _c;
+      const ssrContext = context.ssrContext;
+      if ((_a = ssrContext.redirection) == null ? void 0 : _a.url) {
+        return "";
+      }
+      const prefetchData = yield 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 "";
+      }
+      let html = "";
+      const templateData = buildTemplateData(
+        ssrContext,
+        prefetchData,
+        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;
+    });
+  }
+  prefetch(context) {
+    return __async(this, null, function* () {
+      let prefetchData;
+      const end = time();
+      try {
+        prefetchData = yield 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 = ${serialize(templateData, {
+        isJSON: true
+      })}<\/script>
+      `
+    };
+  }
+}
+export {
+  Entry as default
+};

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

@@ -0,0 +1,52 @@
+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 { run } from "@modern-js/utils/ssr";
+import { PreRender } from "../../react/prerender";
+import { time } from "../time";
+import SSREntry from "./entry";
+const render = ({
+  App,
+  context,
+  config
+}) => {
+  const ssrContext = context.ssrContext;
+  return run(ssrContext.request.headers, () => __async(void 0, null, function* () {
+    const entry = new SSREntry({
+      ctx: ssrContext,
+      App,
+      config
+    });
+    entry.metrics.emitCounter("app.visit.count", 1);
+    const end = time();
+    const html = yield entry.renderToHtml(context);
+    const cost = end();
+    entry.logger.info("App Render Total cost = %d ms", cost);
+    entry.metrics.emitTimer("app.render.cost", cost);
+    const cacheConfig = PreRender.config();
+    if (cacheConfig) {
+      context.ssrContext.cacheConfig = cacheConfig;
+    }
+    return html;
+  }));
+};
+export {
+  render
+};

package/dist/js/modern/ssr/serverRender/renderToString/index.worker.js

@@ -0,0 +1,49 @@
+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 { PreRender } from "../../react/prerender";
+import { time } from "../time";
+import SSREntry from "./entry";
+const render = (_0) => __async(void 0, [_0], function* ({
+  App,
+  context,
+  config
+}) {
+  const ssrContext = context.ssrContext;
+  const entry = new SSREntry({
+    ctx: ssrContext,
+    App,
+    config
+  });
+  entry.metrics.emitCounter("app.visit.count", 1);
+  const end = time();
+  const html = yield entry.renderToHtml(context);
+  const cost = end();
+  entry.logger.info("App Render Total cost = %d ms", cost);
+  entry.metrics.emitTimer("app.render.cost", cost);
+  const cacheConfig = PreRender.config();
+  if (cacheConfig) {
+    context.ssrContext.cacheConfig = cacheConfig;
+  }
+  return html;
+});
+export {
+  render
+};

package/dist/js/modern/ssr/serverRender/renderToString/loadable.js

@@ -0,0 +1,48 @@
+import { ChunkExtractor } from "@loadable/server";
+import { isCrossOrigin } from "../../utils";
+import { getLoadableScripts } from "../utils";
+const extname = (uri) => {
+  if (typeof uri !== "string" || !uri.includes(".")) {
+    return "";
+  }
+  return `.${uri == null ? void 0 : uri.split(".").pop()}` || "";
+};
+const toHtml = (jsx, renderer, next) => {
+  const {
+    stats,
+    result: { chunksMap },
+    host,
+    config = {}
+  } = renderer;
+  if (!stats || chunksMap.js) {
+    return next(jsx);
+  }
+  const extractor = new ChunkExtractor({
+    stats,
+    entrypoints: [renderer.entryName]
+  });
+  const html = next(extractor.collectChunks(jsx));
+  const chunks = extractor.getChunkAssets(extractor.chunks);
+  chunksMap.js = (chunksMap.js || "") + getLoadableScripts(extractor);
+  for (const v of chunks) {
+    const fileType = extname(v.url).slice(1);
+    if (fileType === "js") {
+      const props = [];
+      const { crossorigin } = config;
+      if (crossorigin && isCrossOrigin(v.url, host)) {
+        props.push(
+          `crossorigin="${crossorigin === true ? "anonymous" : crossorigin}"`
+        );
+      }
+      chunksMap[fileType] += `<script src="${v.url}" ${props.join(
+        " "
+      )}><\/script>`;
+    } else if (fileType === "css") {
+      chunksMap[fileType] += `<link href="${v.url}" rel="stylesheet" />`;
+    }
+  }
+  return html;
+};
+export {
+  toHtml
+};

package/dist/js/modern/ssr/serverRender/renderToString/reduce.js

@@ -0,0 +1,8 @@
+function reduce(jsx, renderer, middleware) {
+  let index = 0;
+  const createNext = () => (App) => middleware[index++](App, renderer, createNext());
+  return createNext()(jsx);
+}
+export {
+  reduce
+};

package/dist/js/modern/ssr/serverRender/renderToString/styledComponent.js

@@ -0,0 +1,11 @@
+import { ServerStyleSheet } from "styled-components";
+const toHtml = (jsx, renderer, next) => {
+  const sheet = new ServerStyleSheet();
+  const html = next(sheet.collectStyles(jsx));
+  const css = sheet.getStyleTags();
+  renderer.result.chunksMap.css += css;
+  return html;
+};
+export {
+  toHtml
+};

package/dist/js/modern/ssr/serverRender/renderToString/template.js

@@ -0,0 +1,58 @@
+const VARIABLE_REG_EXP = /<!--<\?([-=+])\s*(.*?)\s*\?>-->/;
+const VARIABLE_SPLITTER = /(<!--<\?.*?\?>-->)/;
+const ENCODE_HTML_RULES = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&#34;",
+  "'": "&#39;"
+};
+const MATCH_HTML = /[&<>'"]/g;
+function encodeChar(c) {
+  return ENCODE_HTML_RULES[c] || c;
+}
+function escape(str) {
+  return str.replace(MATCH_HTML, encodeChar);
+}
+const _Fragment = class {
+  constructor(template) {
+    const match = VARIABLE_REG_EXP.exec(template);
+    if (match) {
+      const [, filterFlag, content] = match;
+      this.isVariable = true;
+      this.content = content;
+      this.filters = [_Fragment.filterMap[filterFlag]];
+      this.path = content.replace(/\[['"](.*?)['"]\]/g, ".$1").split(".");
+    } else {
+      this.isVariable = false;
+      this.content = template;
+      this.filters = [];
+      this.path = [];
+    }
+  }
+  getValue(data) {
+    if (this.isVariable) {
+      const value = this.path.reduce((p, n) => p != null ? p[n] : p, data);
+      return this.filters.reduce((p, n) => n(p), value != null ? value : "");
+    }
+    return this.content;
+  }
+};
+let Fragment = _Fragment;
+Fragment.filterMap = {
+  "=": escape,
+  "-": (v) => v
+};
+const fragmentListMap = {};
+function toFragments(template, entryName) {
+  if (fragmentListMap[entryName]) {
+    return fragmentListMap[entryName];
+  }
+  const fragmentList = template.split(VARIABLE_SPLITTER).filter((v) => Boolean(v)).map((v) => new Fragment(v));
+  fragmentListMap[entryName] = fragmentList;
+  return fragmentList;
+}
+export {
+  Fragment,
+  toFragments
+};

package/dist/js/modern/ssr/serverRender/renderToString/type.js

@@ -0,0 +1,9 @@
+var RenderLevel = /* @__PURE__ */ ((RenderLevel2) => {
+  RenderLevel2[RenderLevel2["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
+  RenderLevel2[RenderLevel2["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
+  RenderLevel2[RenderLevel2["SERVER_RENDER"] = 2] = "SERVER_RENDER";
+  return RenderLevel2;
+})(RenderLevel || {});
+export {
+  RenderLevel
+};

package/dist/js/modern/ssr/serverRender/time.js

@@ -0,0 +1,13 @@
+const getLatency = (hrtime) => {
+  const [s, ns] = process.hrtime(hrtime);
+  return s * 1e3 + ns / 1e6;
+};
+const time = () => {
+  const hrtime = process.hrtime();
+  return () => {
+    return getLatency(hrtime);
+  };
+};
+export {
+  time
+};