@modern-js/runtime 1.21.5 → 2.0.0-beta.1

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

@@ -1,29 +1,14 @@
-import { run } from '@modern-js/utils/ssr';
-import { PreRender } from "../react/prerender";
-import SSREntry from "./entry";
-import { time } from "./measure";
-export const render = async (ctx, config, App) => {
-  const {
-    ssrContext
-  } = ctx;
-  return run(ssrContext.request.headers, async () => {
-    const entry = new SSREntry({
-      ctx: ssrContext,
-      App,
-      config
-    });
-    entry.metrics.emitCounter('app.visit.count', 1);
-    const end = time();
-    const html = await entry.renderToHtml(ctx);
-    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) {
-      ctx.ssrContext.cacheConfig = cacheConfig;
-    }
+/* eslint-disable eslint-comments/disable-enable-pair */
+/* eslint-disable @typescript-eslint/no-var-requires */
+/* eslint-disable @typescript-eslint/no-require-imports */
 
+import { isReact18 } from "../utils";
+export default 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;
-  });
-};
+  }
+}

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

@@ -0,0 +1,38 @@
+import serialize from 'serialize-javascript';
+import { buildTemplate } from "./buildTemplate.share";
+export 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>
+      `;
+    }
+  }
+}

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

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

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

@@ -0,0 +1,58 @@
+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 ?>-->';
+
+// build head template
+function getHeadTemplate(beforeEntryTemplate, context) {
+  const callbacks = [headTemplate => {
+    const helmetData = ReactHelmet.renderStatic();
+    return helmetData ? helmetReplace(headTemplate, helmetData) : headTemplate;
+  },
+  // @TODO: prefetch scripts of lazy component
+  injectCss];
+  const [headTemplate = ''] = beforeEntryTemplate.match(HEAD_REG_EXP) || [];
+  if (!headTemplate.length) {
+    return '';
+  }
+  return buildTemplate(headTemplate, callbacks);
+  function injectCss(headTemplate) {
+    return headTemplate.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 || matches === void 0 ? void 0 : matches.forEach(match => {
+        const routeId = match.route.id;
+        if (routeId) {
+          const {
+            assets = []
+          } = routeAssets[routeId];
+          const _cssChunks = assets.filter(asset => asset === null || asset === void 0 ? void 0 : asset.endsWith('.css'));
+          cssChunks.push(..._cssChunks);
+        }
+      });
+      const styleLinks = cssChunks.map(chunk => {
+        return `<link href="${chunk}" rel="stylesheet" />`;
+      });
+      return `${styleLinks.join('')}`;
+    }
+  }
+}
+
+// build script
+export function buildShellBeforeTemplate(beforeAppTemplate, context) {
+  const headTemplate = getHeadTemplate(beforeAppTemplate, context);
+  return beforeAppTemplate.replace(HEAD_REG_EXP, headTemplate);
+}

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

@@ -0,0 +1,40 @@
+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;
+  if (!ssrContext) {
+    throw new Error('The "ssrContext" must not be undefined, but received undefined');
+  }
+  return run(ssrContext.request.headers, async () => {
+    const end = time();
+    const rootElement = /*#__PURE__*/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);
+      }
+    });
+    return pipe;
+  });
+};

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

@@ -0,0 +1,24 @@
+import { ChunkExtractor } from '@loadable/server';
+export 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
+  };
+}

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

@@ -0,0 +1,72 @@
+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';
+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), {}, {
+        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);
+          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 _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);
+          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);
+        },
+        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);
+        }
+      }));
+    });
+  };
+  return forUserPipe;
+  function joinChunk(before = '', chunk, after = '') {
+    return `${before}${chunk.toString()}${after}`;
+  }
+}
+export default renderToPipe;

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

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

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

@@ -0,0 +1,18 @@
+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 builtAfterTemplate = buildShellAfterTemplate(afterAppHtmlTemplate, {
+    ssrContext: ssrContext,
+    renderLevel
+  });
+  return {
+    shellBefore: builtBeforeTemplate,
+    shellAfter: builtAfterTemplate
+  };
+};

package/dist/js/modern/ssr/serverRender/{entry.js → renderToString/entry.js}

@@ -1,17 +1,16 @@
 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';
+import helmetReplace from "../helmet";
+import { RenderLevel } from "../types";
+import { time } from "../utils";
+import prefetch from "../../prefetch";
 import { toFragments } from "./template";
-import { RenderLevel } from "./type";
-import helmetReplace from "./helmet";
 import { reduce } from "./reduce";
 import * as loadableRenderer from "./loadable";
 import * as styledComponentRenderer from "./styledComponent";
-import { time } from "./measure";
-
 const buildTemplateData = (context, data, renderLevel) => {
   const {
     request
@@ -32,25 +31,16 @@ const buildTemplateData = (context, data, renderLevel) => {
     renderLevel
   };
 };
-
 export default 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
@@ -78,34 +68,24 @@ export default class Entry {
       }
     };
   }
-
   async renderToHtml(context) {
-    const {
-      ssrContext
-    } = 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);
@@ -113,22 +93,14 @@ export default class Entry {
         html += fragment.getValue(this.result);
       }
     }
-
     const helmetData = ReactHelmet.renderStatic();
     return helmetData ? helmetReplace(html, helmetData) : html;
   }
-
   async prefetch(context) {
-    const {
-      App: {
-        prefetch
-      }
-    } = this;
     let prefetchData;
     const end = time();
-
     try {
-      prefetchData = prefetch ? await prefetch(context) : null;
+      prefetchData = await prefetch(this.App, context);
       this.result.renderLevel = RenderLevel.SERVER_PREFETCH;
       const prefetchCost = end();
       this.logger.debug(`App Prefetch cost = %d ms`, prefetchCost);
@@ -138,17 +110,14 @@ export default class Entry {
       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 = /*#__PURE__*/React.createElement(this.App, {
         context: Object.assign(context, {
@@ -171,10 +140,8 @@ export default class Entry {
       this.logger.error('App Render To HTML', e);
       this.metrics.emitCounter('app.render.html.error', 1);
     }
-
     return html;
   }
-
   getSSRDataScript(templateData) {
     return {
       SSRDataScript: `
@@ -184,5 +151,4 @@ export default class Entry {
       `
     };
   }
-
 }

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

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

package/dist/js/modern/ssr/serverRender/{loadable.js → renderToString/loadable.js}

@@ -1,27 +1,12 @@
 import { ChunkExtractor } from '@loadable/server';
-import { isCrossOrigin } from "../utils";
-
+import { isCrossOrigin } from "../../utils";
+import { getLoadableScripts } from "../utils";
 const extname = uri => {
   if (typeof uri !== 'string' || !uri.includes('.')) {
     return '';
   }
-
   return `.${uri === null || uri === void 0 ? void 0 : uri.split('.').pop()}` || '';
 };
-
-function getLoadableScripts(extractor) {
-  const check = scripts => (scripts || '').includes('__LOADABLE_REQUIRED_CHUNKS___ext');
-
-  const scripts = extractor.getScriptTags();
-
-  if (!check(scripts)) {
-    return '';
-  }
-
-  return scripts.split('</script>') // 前两个 script为 loadable 必须的 script
-  .slice(0, 2).map(i => `${i}</script>`).join('');
-}
-
 export const toHtml = (jsx, renderer, next) => {
   const {
     stats,
@@ -31,11 +16,9 @@ export const toHtml = (jsx, renderer, next) => {
     host,
     config = {}
   } = renderer;
-
   if (!stats || chunksMap.js) {
     return next(jsx);
   }
-
   const extractor = new ChunkExtractor({
     stats,
     entrypoints: [renderer.entryName]
@@ -43,25 +26,20 @@ export const toHtml = (jsx, renderer, next) => {
   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;
 };

package/dist/js/modern/ssr/serverRender/{reduce.js → renderToString/reduce.js}

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

package/dist/js/modern/ssr/serverRender/{template.js → renderToString/template.js}

@@ -1,5 +1,4 @@
 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; }
-
 const VARIABLE_REG_EXP = /<!--<\?([-=+])\s*(.*?)\s*\?>-->/;
 const VARIABLE_SPLITTER = /(<!--<\?.*?\?>-->)/;
 const ENCODE_HTML_RULES = {
@@ -10,27 +9,19 @@ const ENCODE_HTML_RULES = {
   "'": '&#39;'
 };
 const MATCH_HTML = /[&<>'"]/g;
-
 function encodeChar(c) {
   return ENCODE_HTML_RULES[c] || c;
 }
-
 function escape(str) {
   return str.replace(MATCH_HTML, encodeChar);
 }
-
 export class Fragment {
   constructor(template) {
     _defineProperty(this, "isVariable", void 0);
-
     _defineProperty(this, "content", void 0);
-
     _defineProperty(this, "filters", void 0);
-
     _defineProperty(this, "path", void 0);
-
     const match = VARIABLE_REG_EXP.exec(template);
-
     if (match) {
       const [, filterFlag, content] = match;
       this.isVariable = true;
@@ -44,29 +35,23 @@ export class Fragment {
       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;
   }
-
 }
-
 _defineProperty(Fragment, "filterMap", {
   '=': escape,
   '-': v => v
 });
-
 const fragmentListMap = {};
 export 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;

package/dist/js/modern/ssr/serverRender/{type.js → renderToString/type.js}

@@ -1,6 +1,4 @@
-// import { IncomingHttpHeaders } from 'http';
 export let RenderLevel;
-
 (function (RenderLevel) {
   RenderLevel[RenderLevel["CLIENT_RENDER"] = 0] = "CLIENT_RENDER";
   RenderLevel[RenderLevel["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";

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

@@ -0,0 +1,2 @@
+import { RenderLevel } from "./renderToString/type";
+export { RenderLevel };

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

@@ -0,0 +1,20 @@
+export function getLoadableScripts(extractor) {
+  const check = scripts => (scripts || '').includes('__LOADABLE_REQUIRED_CHUNKS___ext');
+  const scripts = extractor.getScriptTags();
+  if (!check(scripts)) {
+    return '';
+  }
+  return scripts.split('</script>')
+  // 前两个 script为 loadable 必须的 script
+  .slice(0, 2).map(i => `${i}</script>`).join('');
+}
+const getLatency = hrtime => {
+  const [s, ns] = process.hrtime(hrtime);
+  return s * 1e3 + ns / 1e6;
+};
+export const time = () => {
+  const hrtime = process.hrtime();
+  return () => {
+    return getLatency(hrtime);
+  };
+};