@modern-js/runtime 2.4.0 → 2.4.1-beta.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @modern-js/runtime
 
+## 2.4.1-beta.0
+
+### Patch Changes
+
+- 7a25271: feat: support NoSSR component fallback UI
+  feat: 支持 NoSSR 组件 fallback UI
+- 11c053b: feat: ssr support deploy worker
+
+  feat: ssr 支持边缘部署
+
+- a0f2ab1: fix: ssg new Headers() error
+
+  fix: 修复 ssg 渲染是 new Headers() 报错问题
+
+- Updated dependencies [11c053b]
+  - @modern-js/utils@2.4.1-beta.0
+
 ## 2.4.0
 
 ### Patch Changes

package/dist/js/modern/core/compatible.js

@@ -248,6 +248,7 @@ const bootstrap = (BootApp, id, root, ReactDOM) => __async(void 0, null, functio
         if (ssrContext) {
           ssrContext.res.statusCode = status;
           ssrContext.res.setHeader("Location", redirectUrl);
+          ssrContext.redirection = ssrContext.redirection || {};
           ssrContext.redirection.status = status;
           ssrContext.redirection.url = redirectUrl;
         }

package/dist/js/modern/router/runtime/fetch.js

@@ -0,0 +1,5 @@
+function installGlobals() {
+}
+export {
+  installGlobals
+};

package/dist/js/modern/router/runtime/fetch.node.js

@@ -0,0 +1,4 @@
+import { installGlobals } from "@remix-run/node";
+export {
+  installGlobals
+};

package/dist/js/modern/router/runtime/fetch.worker.js

@@ -0,0 +1,5 @@
+function installGlobals() {
+}
+export {
+  installGlobals
+};

package/dist/js/modern/router/runtime/plugin.node.js

@@ -45,10 +45,10 @@ import {
   StaticRouterProvider
 } from "react-router-dom/server";
 import hoistNonReactStatics from "hoist-non-react-statics";
-import { installGlobals } from "@remix-run/node";
 import { createRoutesFromElements } from "react-router-dom";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
+import { installGlobals } from "./fetch";
 installGlobals();
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
@@ -63,7 +63,7 @@ function createFetchRequest(req) {
 }
 function createFetchHeaders(requestHeaders) {
   const headers = new Headers();
-  for (const [key, values] of Object.entries(requestHeaders)) {
+  for (const [key, values] of Object.entries(requestHeaders || {})) {
     if (values) {
       if (Array.isArray(values)) {
         for (const value of values) {

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

@@ -59,7 +59,7 @@ var cli_default = () => ({
             }
           },
           tools: {
-            webpackChain: (chain, { name, isServer, CHAIN_ID }) => {
+            webpackChain: (chain, { name, isServer, isServiceWorker, CHAIN_ID }) => {
               const userConfig = api.useResolvedConfigContext();
               if (isUseSSRBundle(userConfig) && name !== "server" && hasStringSSREntry(userConfig)) {
                 const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
@@ -69,7 +69,7 @@ var cli_default = () => ({
               }
               const modernVars = {
                 [`process.env.MODERN_TARGET`]: JSON.stringify(
-                  isServer ? "node" : "browser"
+                  isServer || isServiceWorker ? "node" : "browser"
                 )
               };
               chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {

package/dist/js/modern/ssr/prefetch.worker.js

@@ -0,0 +1,66 @@
+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* () {
+  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 = yield 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_worker_default = prefetch;
+export {
+  prefetch_worker_default as default
+};

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

@@ -6,8 +6,12 @@ const NoSSR = (props) => {
     csr = true;
     setMounted(true);
   });
-  const { children } = props;
-  return React.createElement(React.Fragment, null, isMounted ? children : null);
+  const { children, fallback = null } = props;
+  return React.createElement(
+    React.Fragment,
+    null,
+    isMounted ? children : fallback
+  );
 };
 export {
   NoSSR

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

@@ -21,7 +21,7 @@ var __async = (__this, __arguments, generator) => {
 import { createElement } from "react";
 import { run } from "@modern-js/utils/ssr";
 import { PreRender } from "../../react/prerender";
-import { time } from "../utils";
+import { time } from "../time";
 import renderToPipe from "./renderToPipe";
 const render = ({ App, context }) => {
   const { ssrContext } = context;

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

@@ -0,0 +1,35 @@
+import { createElement } from "react";
+import { PreRender } from "../../react/prerender";
+import { time } from "../time";
+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'
+    );
+  }
+  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/renderToPipe.worker.js

@@ -0,0 +1,110 @@
+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 {
+      let _a;
+      const readableOriginal = yield renderToReadableStream(rootElement, __spreadProps(__spreadValues({}, options), {
+        onError(error) {
+          var _a2;
+          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);
+        }
+      }));
+      const reader = readableOriginal.getReader();
+      const injectableStream = new ReadableStream({
+        start(controller) {
+          return __async(this, null, function* () {
+            const { value } = yield reader.read();
+            if (isShellStream) {
+              controller.enqueue(encodeForWebStream(shellBefore));
+              controller.enqueue(value);
+              controller.enqueue(encodeForWebStream(shellAfter));
+              isShellStream = false;
+            } else {
+              controller.enqueue(value);
+            }
+          });
+        }
+      });
+      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/renderToString/entry.js

@@ -26,7 +26,7 @@ import helmetReplace from "../helmet";
 import {
   RenderLevel
 } from "../types";
-import { time } from "../utils";
+import { time } from "../time";
 import prefetch from "../../prefetch";
 import { toFragments } from "./template";
 import { reduce } from "./reduce";
@@ -76,18 +76,19 @@ class Entry {
   }
   renderToHtml(context) {
     return __async(this, null, function* () {
+      var _a, _b, _c;
       const ssrContext = context.ssrContext;
-      if (ssrContext.redirection.url) {
+      if ((_a = ssrContext.redirection) == null ? void 0 : _a.url) {
         return "";
       }
       const prefetchData = yield this.prefetch(context);
-      if (ssrContext.redirection.url) {
+      if ((_b = ssrContext.redirection) == null ? void 0 : _b.url) {
         return "";
       }
       if (this.result.renderLevel >= RenderLevel.SERVER_PREFETCH) {
         this.result.html = this.renderToString(context);
       }
-      if (ssrContext.redirection.url) {
+      if ((_c = ssrContext.redirection) == null ? void 0 : _c.url) {
         return "";
       }
       let html = "";

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

@@ -20,7 +20,7 @@ var __async = (__this, __arguments, generator) => {
 };
 import { run } from "@modern-js/utils/ssr";
 import { PreRender } from "../../react/prerender";
-import { time } from "../utils";
+import { time } from "../time";
 import SSREntry from "./entry";
 const render = ({
   App,

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/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
+};

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

@@ -0,0 +1,28 @@
+function processHrtime(previousTimestamp) {
+  const now = new Date().getTime();
+  const clocktime = now * 1e-3;
+  let seconds = Math.floor(clocktime);
+  let nanoseconds = Math.floor(clocktime % 1 * 1e9);
+  if (previousTimestamp) {
+    seconds -= previousTimestamp[0];
+    nanoseconds -= previousTimestamp[1];
+    if (nanoseconds < 0) {
+      seconds--;
+      nanoseconds += 1e9;
+    }
+  }
+  return [seconds, nanoseconds];
+}
+const getLatency = (hrtime) => {
+  const [s, ns] = processHrtime(hrtime);
+  return s * 1e3 + ns / 1e6;
+};
+const time = () => {
+  const hrtime = processHrtime();
+  return () => {
+    return getLatency(hrtime);
+  };
+};
+export {
+  time
+};

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

@@ -6,17 +6,6 @@ function getLoadableScripts(extractor) {
   }
   return scripts.split("<\/script>").slice(0, 2).map((i) => `${i}<\/script>`).join("");
 }
-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 {
-  getLoadableScripts,
-  time
+  getLoadableScripts
 };

package/dist/js/node/core/compatible.js

@@ -274,6 +274,7 @@ const bootstrap = (BootApp, id, root, ReactDOM) => __async(void 0, null, functio
         if (ssrContext) {
           ssrContext.res.statusCode = status;
           ssrContext.res.setHeader("Location", redirectUrl);
+          ssrContext.redirection = ssrContext.redirection || {};
           ssrContext.redirection.status = status;
           ssrContext.redirection.url = redirectUrl;
         }

package/dist/js/node/router/runtime/fetch.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fetch_exports = {};
+__export(fetch_exports, {
+  installGlobals: () => installGlobals
+});
+module.exports = __toCommonJS(fetch_exports);
+function installGlobals() {
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  installGlobals
+});

package/dist/js/node/router/runtime/fetch.node.js

@@ -0,0 +1,27 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fetch_node_exports = {};
+__export(fetch_node_exports, {
+  installGlobals: () => import_node.installGlobals
+});
+module.exports = __toCommonJS(fetch_node_exports);
+var import_node = require("@remix-run/node");
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  installGlobals
+});

package/dist/js/node/router/runtime/fetch.worker.js

@@ -0,0 +1,28 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var fetch_worker_exports = {};
+__export(fetch_worker_exports, {
+  installGlobals: () => installGlobals
+});
+module.exports = __toCommonJS(fetch_worker_exports);
+function installGlobals() {
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  installGlobals
+});

package/dist/js/node/router/runtime/plugin.node.js

@@ -70,11 +70,11 @@ var import_react = require("react");
 var import_router = require("@remix-run/router");
 var import_server = require("react-router-dom/server");
 var import_hoist_non_react_statics = __toESM(require("hoist-non-react-statics"));
-var import_node = require("@remix-run/node");
 var import_react_router_dom = require("react-router-dom");
 var import_core = require("../../core");
 var import_utils = require("./utils");
-(0, import_node.installGlobals)();
+var import_fetch = require("./fetch");
+(0, import_fetch.installGlobals)();
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
   const url = new URL(req.originalUrl || req.url, origin);
@@ -88,7 +88,7 @@ function createFetchRequest(req) {
 }
 function createFetchHeaders(requestHeaders) {
   const headers = new Headers();
-  for (const [key, values] of Object.entries(requestHeaders)) {
+  for (const [key, values] of Object.entries(requestHeaders || {})) {
     if (values) {
       if (Array.isArray(values)) {
         for (const value of values) {

package/dist/js/node/ssr/cli/index.js

@@ -78,7 +78,7 @@ var cli_default = () => ({
             }
           },
           tools: {
-            webpackChain: (chain, { name, isServer, CHAIN_ID }) => {
+            webpackChain: (chain, { name, isServer, isServiceWorker, CHAIN_ID }) => {
               const userConfig = api.useResolvedConfigContext();
               if ((0, import_utils.isUseSSRBundle)(userConfig) && name !== "server" && hasStringSSREntry(userConfig)) {
                 const LoadableWebpackPlugin = require("@loadable/webpack-plugin");
@@ -88,7 +88,7 @@ var cli_default = () => ({
               }
               const modernVars = {
                 [`process.env.MODERN_TARGET`]: JSON.stringify(
-                  isServer ? "node" : "browser"
+                  isServer || isServiceWorker ? "node" : "browser"
                 )
               };
               chain.plugin(CHAIN_ID.PLUGIN.DEFINE).tap((args) => {