@modern-js/runtime 2.48.3 → 2.48.4-alpha.0

package/dist/js/modern/ssr/react/prerender/index.js

@@ -0,0 +1,108 @@
+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 {
+  getOutermostProperty,
+  aggKeysFromPropsList,
+  exist,
+  aggMatchesFromPropsList
+} from "./util";
+const PROP_NAMES = {
+  INTERVAL: "interval",
+  STALE_LIMIT: "staleLimit",
+  LEVEL: "level",
+  INCLUDES: "includes",
+  EXCLUDES: "excludes",
+  FALLBACK: "fallback",
+  MATCHES: "matches"
+};
+const handleClientStateChange = () => {
+};
+const mapStateOnServer = (reduceProps) => {
+  const defaultProps = {
+    interval: 10,
+    staleLimit: false,
+    level: 0,
+    includes: null,
+    excludes: null,
+    fallback: false,
+    matches: null
+  };
+  return Object.keys(defaultProps).reduce((props, key) => {
+    const propKey = key;
+    const reduceProp = reduceProps[propKey];
+    let nextProps = props;
+    if (exist(reduceProp)) {
+      nextProps = __spreadProps(__spreadValues({}, props), { [propKey]: reduceProp });
+    }
+    return nextProps;
+  }, defaultProps);
+};
+const reducePropsToState = (propsList) => {
+  const reduceProps = {
+    interval: getOutermostProperty(propsList, PROP_NAMES.INTERVAL),
+    staleLimit: getOutermostProperty(propsList, PROP_NAMES.STALE_LIMIT),
+    level: getOutermostProperty(propsList, PROP_NAMES.LEVEL),
+    includes: aggKeysFromPropsList(propsList, PROP_NAMES.INCLUDES),
+    excludes: aggKeysFromPropsList(propsList, PROP_NAMES.EXCLUDES),
+    fallback: getOutermostProperty(propsList, PROP_NAMES.FALLBACK),
+    matches: aggMatchesFromPropsList(propsList, PROP_NAMES.MATCHES)
+  };
+  return reduceProps;
+};
+function factory(Component) {
+  class Spr extends React.Component {
+    static set canUseDOM(canUseDOM) {
+      Component.canUseDOM = canUseDOM;
+    }
+    static get canUseDOM() {
+      return Component.canUseDOM;
+    }
+    verify() {
+      return true;
+    }
+    render() {
+      const newProps = __spreadValues({}, this.props);
+      const validate = this.verify();
+      if (!validate) {
+        throw new Error("invalid props, check usage");
+      }
+      return createElement(Component, __spreadValues({}, newProps));
+    }
+  }
+  Spr.peek = Component.peek;
+  Spr.rewind = Component.rewind;
+  Spr.config = () => {
+    const mappedState = Component.rewind();
+    return mappedState;
+  };
+  return Spr;
+}
+const NullComponent = () => null;
+const SprSideEffects = withSideEffect(
+  reducePropsToState,
+  handleClientStateChange,
+  mapStateOnServer
+)(NullComponent);
+const PreRender = factory(SprSideEffects);
+export {
+  PreRender
+};

package/dist/js/modern/ssr/react/prerender/util.js

@@ -0,0 +1,96 @@
+const REQUEST_META = ["header", "query"];
+const getInnermostProperty = function getInnermostProperty2(propsList, propName) {
+  for (let i = propsList.length - 1; i >= 0; i--) {
+    const props = propsList[i];
+    if (props.hasOwnProperty(propName)) {
+      return props[propName];
+    }
+  }
+  return null;
+};
+const getOutermostProperty = function getOutermostProperty2(propsList, propName) {
+  for (const props of propsList) {
+    if (props.hasOwnProperty(propName)) {
+      return props[propName];
+    }
+  }
+  return null;
+};
+const aggKeysFromPropsList = function aggKeysFromPropsList2(propsList, propName) {
+  const initResult = REQUEST_META.reduce(
+    (result, next) => {
+      const key = next;
+      result[key] = [];
+      return result;
+    },
+    {}
+  );
+  const res = propsList.filter((props) => usefulObject(props[propName])).reduce((result, next) => {
+    REQUEST_META.forEach((key) => {
+      const prop = next[propName];
+      if ((prop == null ? void 0 : prop.hasOwnProperty(key)) && usefulArray(prop[key])) {
+        result[key] = unique(result[key].concat(prop[key]));
+      }
+    });
+    return result;
+  }, initResult);
+  return REQUEST_META.reduce((result, next) => {
+    var _a;
+    const key = next;
+    if (result[key] && ((_a = result[key]) == null ? void 0 : _a.length) === 0) {
+      delete result[key];
+    }
+    return result;
+  }, res);
+};
+const aggMatchesFromPropsList = function aggMatchesFromPropsList2(propsList, propName) {
+  const initResult = REQUEST_META.reduce(
+    (result, next) => {
+      const key = next;
+      result[key] = {};
+      return result;
+    },
+    {}
+  );
+  const res = propsList.filter((props) => usefulObject(props[propName])).reduce((result, next) => {
+    REQUEST_META.forEach((key) => {
+      const prop = next[propName];
+      if ((prop == null ? void 0 : prop.hasOwnProperty(key)) && usefulObject(prop[key])) {
+        result[key] = Object.assign(result[key], prop[key]);
+      }
+    });
+    return result;
+  }, initResult);
+  return REQUEST_META.reduce((result, next) => {
+    const key = next;
+    if (result[key] && Object.keys(result[key]).length === 0) {
+      delete result[key];
+    }
+    return result;
+  }, res);
+};
+function unique(arr) {
+  return Array.from(new Set(arr));
+}
+function usefulObject(target) {
+  if (!exist(target)) {
+    return false;
+  }
+  return target.constructor === Object && Object.keys(target).length > 0;
+}
+function usefulArray(target) {
+  if (!exist(target)) {
+    return false;
+  }
+  return Array.isArray(target) && target.length > 0;
+}
+function exist(target) {
+  return target != null;
+}
+export {
+  aggKeysFromPropsList,
+  aggMatchesFromPropsList,
+  exist,
+  getInnermostProperty,
+  getOutermostProperty
+};

package/dist/js/modern/ssr/react/withCallback/index.js

@@ -0,0 +1,15 @@
+import { useRef, useLayoutEffect } from "react";
+const WithCallback = ({ callback, children }) => {
+  const once = useRef(false);
+  useLayoutEffect(() => {
+    if (once.current) {
+      return;
+    }
+    once.current = true;
+    callback();
+  }, [callback]);
+  return children;
+};
+export {
+  WithCallback
+};

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

@@ -0,0 +1,44 @@
+import { EOL } from "os";
+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>)");
+function helmet(content, helmetData) {
+  let result = content;
+  const bodyAttributes = helmetData.bodyAttributes.toString();
+  if (bodyAttributes) {
+    result = result.replace(RE_BODY_ATTR, `<body ${bodyAttributes}>`);
+  }
+  const htmlAttributes = helmetData.htmlAttributes.toString();
+  if (htmlAttributes) {
+    result = result.replace(RE_HTML_ATTR, `<html ${htmlAttributes}>`);
+  }
+  const base = helmetData.base.toString();
+  const link = helmetData.link.toString();
+  const meta = helmetData.meta.toString();
+  const noscript = helmetData.noscript.toString();
+  const script = helmetData.script.toString();
+  const style = helmetData.style.toString();
+  const title = helmetData.title.toString();
+  const existTitleTag = RE_TITLE.test(content);
+  const shouldReplaceTitle = existTitleTag && TEST_TITLE_CONTENT.test(title.trim());
+  if (shouldReplaceTitle) {
+    result = result.replace(RE_TITLE, title);
+  }
+  const helmetStr = [
+    base,
+    link,
+    meta,
+    noscript,
+    script,
+    style,
+    !existTitleTag ? title : ""
+  ].reduce((pre, cur) => {
+    return pre + (cur.length > 0 ? `  ${cur}${EOL}` : "");
+  }, "");
+  return result.replace(RE_LAST_IN_HEAD, `${helmetStr}</head>`);
+}
+export {
+  helmet as default
+};

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

@@ -0,0 +1,35 @@
+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 { isReact18 } from "../utils";
+function serverRender(options) {
+  return __async(this, null, function* () {
+    if (isReact18() && options.config.mode === "stream") {
+      const pipe = yield require("./renderToStream").render(options);
+      return pipe;
+    } else {
+      const html = yield require("./renderToString").render(options);
+      return html;
+    }
+  });
+}
+export {
+  serverRender as default
+};

package/dist/js/modern/ssr/serverRender/renderToStream/buildTemplate.after.js

@@ -0,0 +1,36 @@
+import serialize from "serialize-javascript";
+import { buildTemplate } from "./buildTemplate.share";
+function buildShellAfterTemplate(afterAppTemplate, options) {
+  const callbacks = [injectSSRDataScript];
+  return buildTemplate(afterAppTemplate, callbacks);
+  function injectSSRDataScript(template) {
+    const ssrDataScript = buildSSRDataScript();
+    return template.replace("<!--<?- SSRDataScript ?>-->", ssrDataScript);
+    function buildSSRDataScript() {
+      const { ssrContext, renderLevel } = options;
+      const { request } = ssrContext;
+      const SSRData = {
+        context: {
+          request: {
+            params: request.params,
+            query: request.query,
+            pathname: request.pathname,
+            host: request.host,
+            url: request.url,
+            headers: request.headers,
+            cookieMap: request.cookieMap
+          }
+        },
+        renderLevel
+      };
+      return `
+      <script>window._SSR_DATA = ${serialize(SSRData, {
+        isJSON: true
+      })}<\/script>
+      `;
+    }
+  }
+}
+export {
+  buildShellAfterTemplate
+};

package/dist/js/modern/ssr/serverRender/renderToStream/buildTemplate.share.js

@@ -0,0 +1,11 @@
+const HEAD_REG_EXP = /<head(.|\n)*>(.|\n)*<\/head>/;
+function buildTemplate(template, callbacks) {
+  return callbacks.reduce(
+    (template2, buildTemplateCb) => buildTemplateCb(template2),
+    template
+  );
+}
+export {
+  HEAD_REG_EXP,
+  buildTemplate
+};

package/dist/js/modern/ssr/serverRender/renderToStream/bulidTemplate.before.js

@@ -0,0 +1,61 @@
+import ReactHelmet from "react-helmet";
+import { matchRoutes } from "react-router-dom";
+import helmetReplace from "../helmet";
+import {
+  HEAD_REG_EXP,
+  buildTemplate
+} from "./buildTemplate.share";
+const CSS_CHUNKS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
+function getHeadTemplate(beforeEntryTemplate, context) {
+  const callbacks = [
+    (headTemplate2) => {
+      const helmetData = ReactHelmet.renderStatic();
+      return helmetData ? helmetReplace(headTemplate2, helmetData) : headTemplate2;
+    },
+    injectCss
+  ];
+  const [headTemplate = ""] = beforeEntryTemplate.match(HEAD_REG_EXP) || [];
+  if (!headTemplate.length) {
+    return "";
+  }
+  return buildTemplate(headTemplate, callbacks);
+  function injectCss(headTemplate2) {
+    return headTemplate2.replace(CSS_CHUNKS_PLACEHOLDER, getCssChunks());
+    function getCssChunks() {
+      const { routeManifest, routerContext, routes } = context;
+      if (!routeManifest || !routerContext || !routes) {
+        return "";
+      }
+      const { routeAssets } = routeManifest;
+      const cssChunks = [];
+      const matches = matchRoutes(routes, routerContext.location);
+      matches == null ? void 0 : matches.forEach((match, index) => {
+        if (!index) {
+          return;
+        }
+        const routeId = match.route.id;
+        if (routeId) {
+          const routeManifest2 = routeAssets[routeId];
+          if (routeManifest2) {
+            const { assets = [] } = routeManifest2;
+            const _cssChunks = assets.filter(
+              (asset) => asset == null ? void 0 : asset.endsWith(".css")
+            );
+            cssChunks.push(..._cssChunks);
+          }
+        }
+      });
+      const styleLinks = cssChunks.map((chunk) => {
+        return `<link href="${chunk}" rel="stylesheet" />`;
+      });
+      return `${styleLinks.join("")}`;
+    }
+  }
+}
+function buildShellBeforeTemplate(beforeAppTemplate, context) {
+  const headTemplate = getHeadTemplate(beforeAppTemplate, context);
+  return beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate);
+}
+export {
+  buildShellBeforeTemplate
+};

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

@@ -0,0 +1,58 @@
+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";
+import { time } from "../utils";
+import renderToPipe from "./renderToPipe";
+const render = ({ App, context }) => {
+  const { ssrContext } = context;
+  if (!ssrContext) {
+    throw new Error(
+      'The "ssrContext" must not be undefined, but received undefined'
+    );
+  }
+  return run(ssrContext.request.headers, () => __async(void 0, null, function* () {
+    const end = time();
+    const rootElement = createElement(App, {
+      context: Object.assign(context || {}, {
+        ssr: true
+      })
+    });
+    const pipe = renderToPipe(rootElement, context, {
+      onShellReady() {
+        const cacheConfig = PreRender.config();
+        if (cacheConfig) {
+          ssrContext.cacheConfig = cacheConfig;
+        }
+      },
+      onAllReady() {
+        const cost = end();
+        ssrContext.logger.debug("App Render To HTML cost = %d ms", cost);
+        ssrContext.metrics.emitTimer("app.render.html.cost", cost);
+      }
+    });
+    return pipe;
+  }));
+};
+export {
+  render
+};

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

@@ -0,0 +1,24 @@
+import { ChunkExtractor } from "@loadable/server";
+function getLoadableChunks({
+  context,
+  jsx
+}) {
+  const { loadableStats, entryName } = context.ssrContext;
+  if (!loadableStats) {
+    return {
+      jsx
+    };
+  }
+  const extractor = new ChunkExtractor({
+    stats: loadableStats,
+    entrypoints: [entryName]
+  });
+  const collectedJsx = extractor.collectChunks(jsx);
+  return {
+    jsx: collectedJsx,
+    chunkExtractor: extractor
+  };
+}
+export {
+  getLoadableChunks
+};

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

@@ -0,0 +1,94 @@
+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 {
+  renderToPipeableStream
+} from "react-dom/server";
+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) => {
+      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/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
+};