@modern-js/runtime 2.0.0-canary.0 → 2.0.0

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

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

@@ -1,12 +1,9 @@
-import { ChunkExtractor } from '@loadable/server';
-export function getLoadableChunks({
+import { ChunkExtractor } from "@loadable/server";
+function getLoadableChunks({
   context,
   jsx
 }) {
-  const {
-    loadableStats,
-    entryName
-  } = context.ssrContext;
+  const { loadableStats, entryName } = context.ssrContext;
   if (!loadableStats) {
     return {
       jsx
@@ -21,4 +18,7 @@ export function getLoadableChunks({
     jsx: collectedJsx,
     chunkExtractor: extractor
   };
-}
+}
+export {
+  getLoadableChunks
+};

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

@@ -1,27 +1,41 @@
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import { Transform } from 'stream';
-import { renderToPipeableStream } from 'react-dom/server';
+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, _objectSpread(_objectSpread({}, options), {}, {
+  const { ssrContext } = context;
+  const forUserPipe = (stream) => {
+    return new Promise((resolve) => {
+      const { pipe } = renderToPipeableStream(rootElement, __spreadProps(__spreadValues({}, options), {
         onShellReady() {
-          var _options$onShellReady;
-          const {
-            shellAfter,
-            shellBefore
-          } = getTemplates(context, RenderLevel.SERVER_RENDER);
-          options === null || options === void 0 ? void 0 : (_options$onShellReady = options.onShellReady) === null || _options$onShellReady === void 0 ? void 0 : _options$onShellReady.call(options);
+          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 {
@@ -36,7 +50,7 @@ function renderToPipe(rootElement, context, options) {
                 if (e instanceof Error) {
                   callback(e);
                 } else {
-                  callback(new Error('Received unkown error when streaming'));
+                  callback(new Error("Received unkown error when streaming"));
                 }
               }
             }
@@ -44,29 +58,37 @@ function renderToPipe(rootElement, context, options) {
           resolve(pipe(injectableTransform).pipe(stream));
         },
         onShellError(error) {
-          var _options$onShellError;
-          // Don't log error in `onShellError` callback, since it has been logged in `onError` callback
-          ssrContext.metrics.emitCounter('app.render.streaming.shell.error', 1);
-          const {
-            shellAfter,
-            shellBefore
-          } = getTemplates(context, RenderLevel.CLIENT_RENDER);
+          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);
-          options === null || options === void 0 ? void 0 : (_options$onShellError = options.onShellError) === null || _options$onShellError === void 0 ? void 0 : _options$onShellError.call(options, error);
+          (_a = options == null ? void 0 : options.onShellError) == null ? void 0 : _a.call(options, error);
         },
         onError(error) {
-          var _options$onError;
-          ssrContext.logger.error('An error occurs during streaming SSR', error);
-          ssrContext.metrics.emitCounter('app.render.streaming.error', 1);
-          options === null || options === void 0 ? void 0 : (_options$onError = options.onError) === null || _options$onError === void 0 ? void 0 : _options$onError.call(options, 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 = '') {
+  function joinChunk(before = "", chunk, after = "") {
     return `${before}${chunk.toString()}${after}`;
   }
 }
-export default renderToPipe;
+var renderToPipe_default = renderToPipe;
+export {
+  renderToPipe_default as default
+};

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

@@ -1,11 +1,12 @@
-import { ServerStyleSheet } from 'styled-components';
-export function getStyledComponentCss({
-  jsx
-}) {
+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

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

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

@@ -1,10 +1,31 @@
-function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-import React from 'react';
-import ReactDomServer from 'react-dom/server';
-import serialize from 'serialize-javascript';
-import ReactHelmet from 'react-helmet';
+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 {
+  RenderLevel
+} from "../types";
 import { time } from "../utils";
 import prefetch from "../../prefetch";
 import { toFragments } from "./template";
@@ -12,9 +33,7 @@ import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
 import * as styledComponentRenderer from "./styledComponent";
 const buildTemplateData = (context, data, renderLevel) => {
-  const {
-    request
-  } = context;
+  const { request } = context;
   return {
     data,
     context: {
@@ -31,26 +50,13 @@ const buildTemplateData = (context, data, renderLevel) => {
     renderLevel
   };
 };
-export default class Entry {
+class Entry {
   constructor(options) {
-    _defineProperty(this, "entryName", void 0);
-    _defineProperty(this, "result", void 0);
-    _defineProperty(this, "metrics", void 0);
-    _defineProperty(this, "logger", void 0);
-    _defineProperty(this, "App", void 0);
-    _defineProperty(this, "fragments", void 0);
-    _defineProperty(this, "pluginConfig", void 0);
-    _defineProperty(this, "host", void 0);
-    const {
-      ctx,
-      config
-    } = options;
+    const { ctx, config } = options;
     const {
       entryName,
       template,
-      request: {
-        host
-      }
+      request: { host }
     } = ctx;
     this.fragments = toFragments(template, entryName);
     this.entryName = entryName;
@@ -61,68 +67,72 @@ export default class Entry {
     this.logger = ctx.logger;
     this.result = {
       renderLevel: RenderLevel.CLIENT_RENDER,
-      html: '',
+      html: "",
       chunksMap: {
-        js: '',
-        css: ''
+        js: "",
+        css: ""
       }
     };
   }
-  async renderToHtml(context) {
-    const ssrContext = context.ssrContext;
-    if (ssrContext.redirection.url) {
-      return '';
-    }
-    const prefetchData = await this.prefetch(context);
-    if (ssrContext.redirection.url) {
-      return '';
-    }
-    if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
-      this.result.html = this.renderToString(context);
-    }
-    if (ssrContext.redirection.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);
+  renderToHtml(context) {
+    return __async(this, null, function* () {
+      const ssrContext = context.ssrContext;
+      if (ssrContext.redirection.url) {
+        return "";
       }
-    }
-    const helmetData = ReactHelmet.renderStatic();
-    return helmetData ? helmetReplace(html, helmetData) : html;
+      const prefetchData = yield this.prefetch(context);
+      if (ssrContext.redirection.url) {
+        return "";
+      }
+      if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
+        this.result.html = this.renderToString(context);
+      }
+      if (ssrContext.redirection.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;
+    });
   }
-  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 || {};
+  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 = '';
+    let html = "";
     const end = time();
-    const {
-      ssrContext
-    } = context;
+    const { ssrContext } = context;
     try {
-      const App = /*#__PURE__*/React.createElement(this.App, {
-        context: Object.assign(context, {
-          ssr: true
-        })
+      const App = React.createElement(this.App, {
+        context: Object.assign(context, { ssr: true })
       });
       const renderContext = {
         stats: ssrContext.loadableStats,
@@ -131,14 +141,18 @@ export default class Entry {
         entryName: this.entryName,
         config: this.pluginConfig
       };
-      html = reduce(App, renderContext, [styledComponentRenderer.toHtml, loadableRenderer.toHtml, jsx => ReactDomServer.renderToString(jsx)]);
+      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.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);
+      this.logger.error("App Render To HTML", e);
+      this.metrics.emitCounter("app.render.html.error", 1);
     }
     return html;
   }
@@ -147,8 +161,11 @@ export default class Entry {
       SSRDataScript: `
         <script>window._SSR_DATA = ${serialize(templateData, {
         isJSON: true
-      })}</script>
+      })}<\/script>
       `
     };
   }
-}
+}
+export {
+  Entry as default
+};

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

@@ -1,29 +1,52 @@
-import { run } from '@modern-js/utils/ssr';
+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 "../utils";
 import SSREntry from "./entry";
-export const render = ({
+const render = ({
   App,
   context,
   config
 }) => {
   const ssrContext = context.ssrContext;
-  return run(ssrContext.request.headers, async () => {
+  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);
+    entry.metrics.emitCounter("app.visit.count", 1);
     const end = time();
-    const html = await entry.renderToHtml(context);
+    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);
+    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

@@ -1,18 +1,16 @@
-import { ChunkExtractor } from '@loadable/server';
+import { ChunkExtractor } from "@loadable/server";
 import { isCrossOrigin } from "../../utils";
 import { getLoadableScripts } from "../utils";
-const extname = uri => {
-  if (typeof uri !== 'string' || !uri.includes('.')) {
-    return '';
+const extname = (uri) => {
+  if (typeof uri !== "string" || !uri.includes(".")) {
+    return "";
   }
-  return `.${uri === null || uri === void 0 ? void 0 : uri.split('.').pop()}` || '';
+  return `.${uri == null ? void 0 : uri.split(".").pop()}` || "";
 };
-export const toHtml = (jsx, renderer, next) => {
+const toHtml = (jsx, renderer, next) => {
   const {
     stats,
-    result: {
-      chunksMap
-    },
+    result: { chunksMap },
     host,
     config = {}
   } = renderer;
@@ -25,21 +23,26 @@ export const toHtml = (jsx, renderer, next) => {
   });
   const html = next(extractor.collectChunks(jsx));
   const chunks = extractor.getChunkAssets(extractor.chunks);
-  chunksMap.js = (chunksMap.js || '') + getLoadableScripts(extractor);
+  chunksMap.js = (chunksMap.js || "") + getLoadableScripts(extractor);
   for (const v of chunks) {
     const fileType = extname(v.url).slice(1);
-    if (fileType === 'js') {
+    if (fileType === "js") {
       const props = [];
-      const {
-        crossorigin
-      } = config;
+      const { crossorigin } = config;
       if (crossorigin && isCrossOrigin(v.url, host)) {
-        props.push(`crossorigin="${crossorigin === true ? 'anonymous' : crossorigin}"`);
+        props.push(
+          `crossorigin="${crossorigin === true ? "anonymous" : crossorigin}"`
+        );
       }
-      chunksMap[fileType] += `<script src="${v.url}" ${props.join(' ')}></script>`;
-    } else if (fileType === 'css') {
+      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

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

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

@@ -1,8 +1,11 @@
-import { ServerStyleSheet } from 'styled-components';
-export const toHtml = (jsx, renderer, next) => {
+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
+};