@modern-js/runtime 2.3.1-alpha.0 → 2.4.1-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @modern-js/runtime
 
+## 2.4.0
+
+### Patch Changes
+
+- 9e907ec: chore: catch react-dom/server require for react 17
+  chore: 捕获引入 react-dom/server 的逻辑，避免在 react 17 下报错
+- Updated dependencies [98a2733]
+- Updated dependencies [8c2db5f]
+  - @modern-js/utils@2.4.0
+  - @modern-js/plugin@2.4.0
+  - @modern-js/types@2.4.0
+
 ## 2.3.0
 
 ### Patch Changes

package/README.md

@@ -1,30 +1,26 @@
-
 <p align="center">
   <a href="https://modernjs.dev" target="blank"><img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/ylaelkeh7nuhfnuhf/modernjs-cover.png" width="300" alt="Modern.js Logo" /></a>
 </p>
+
+<h1 align="center">Modern.js</h1>
+
 <p align="center">
-现代 Web 工程体系
-  <br/>
-  <a href="https://modernjs.dev" target="blank">
-    modernjs.dev
-  </a>
-</p>
-<p align="center">
-  The meta-framework suite designed from scratch for frontend-focused modern web development
+  A Progressive React Framework for modern web development.
 </p>
 
-# Introduction
-
-> The doc site ([modernjs.dev](https://modernjs.dev)) and articles are only available in Chinese for now, we are planning to add English versions soon.
+## Getting Started
 
-- [Modern.js: Hello, World!](https://zhuanlan.zhihu.com/p/426707646)
+Please follow [Quick Start](https://modernjs.dev/en/guides/get-started/quick-start) to get started with Modern.js.
 
-## Getting Started
+## Documentation
 
-- [Quick Start](https://modernjs.dev/docs/start)
-- [Guides](https://modernjs.dev/docs/guides)
-- [API References](https://modernjs.dev/docs/apis)
+- [English Documentation](https://modernjs.dev/en/)
+- [中文文档](https://modernjs.dev)
 
 ## Contributing
 
-- [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md)
+Please read the [Contributing Guide](https://github.com/modern-js-dev/modern.js/blob/main/CONTRIBUTING.md).
+
+## License
+
+Modern.js is [MIT licensed](https://github.com/modern-js-dev/modern.js/blob/main/LICENSE).

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/document/Body.js

@@ -4,10 +4,10 @@ import {
   DOCUMENT_CHUNKSMAP_PLACEHOLDER,
   DOCUMENT_SSRDATASCRIPT_PLACEHOLDER
 } from "./constants";
-import { DocumentStructrueContext } from "./DocumentStructrueContext";
+import { DocumentStructureContext } from "./DocumentStructureContext";
 import { DefaultRoot } from "./Root";
 function Body(props) {
-  const { hasSetRoot } = useContext(DocumentStructrueContext);
+  const { hasSetRoot } = useContext(DocumentStructureContext);
   const { children } = props;
   return /* @__PURE__ */ jsxs("body", {
     children: [

package/dist/js/modern/document/{DocumentStructrueContext.js → DocumentStructureContext.js}

@@ -1,5 +1,5 @@
 import React from "react";
-const DocumentStructrueContext = React.createContext({
+const DocumentStructureContext = React.createContext({
   hasSetHead: false,
   hasSetScripts: false,
   hasSetBody: false,
@@ -7,5 +7,5 @@ const DocumentStructrueContext = React.createContext({
   hasSetLinks: false
 });
 export {
-  DocumentStructrueContext
+  DocumentStructureContext
 };

package/dist/js/modern/document/Head.js

@@ -1,11 +1,11 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { DocumentStructrueContext } from "./DocumentStructrueContext";
+import { DocumentStructureContext } from "./DocumentStructureContext";
 import { Scripts } from "./Scripts";
 import { Links } from "./Links";
 import { DOCUMENT_META_PLACEHOLDER } from "./constants";
 function Head(props) {
-  const { hasSetScripts, hasSetLinks } = useContext(DocumentStructrueContext);
+  const { hasSetScripts, hasSetLinks } = useContext(DocumentStructureContext);
   const { children } = props;
   return /* @__PURE__ */ jsxs("head", {
     children: [

package/dist/js/modern/document/Html.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Body } from "./Body";
-import { DocumentStructrueContext } from "./DocumentStructrueContext";
+import { DocumentStructureContext } from "./DocumentStructureContext";
 import { Head } from "./Head";
 function findTargetChild(tag, children) {
   return children.find((item) => getEleType(item) === tag);
@@ -56,7 +56,7 @@ function Html(props) {
     });
   }
   return /* @__PURE__ */ jsx("html", {
-    children: /* @__PURE__ */ jsxs(DocumentStructrueContext.Provider, {
+    children: /* @__PURE__ */ jsxs(DocumentStructureContext.Provider, {
       value: {
         hasSetHead,
         hasSetScripts,

package/dist/js/modern/document/index.js

@@ -1,6 +1,6 @@
 export * from "./Html";
 export * from "./DocumentContext";
-export * from "./DocumentStructrueContext";
+export * from "./DocumentStructureContext";
 export * from "./Head";
 export * from "./Body";
 export * from "./Root";

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

@@ -37,19 +37,22 @@ var __async = (__this, __arguments, generator) => {
     step((generator = generator.apply(__this, __arguments)).next());
   });
 };
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 import { useContext } from "react";
-import { createStaticHandler } from "@remix-run/router";
+import serialize from "serialize-javascript";
+import {
+  createStaticHandler,
+  isRouteErrorResponse
+} from "@remix-run/router";
 import {
   createStaticRouter,
   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 serialize from "serialize-javascript";
 import { RuntimeReactContext } from "../../core";
 import { renderRoutes, urlJoin } from "./utils";
+import { installGlobals } from "./fetch";
 installGlobals();
 function createFetchRequest(req) {
   const origin = `${req.protocol}://${req.host}`;
@@ -64,7 +67,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) {
@@ -77,6 +80,26 @@ function createFetchHeaders(requestHeaders) {
   }
   return headers;
 }
+function serializeErrors(errors) {
+  if (!errors) {
+    return null;
+  }
+  const entries = Object.entries(errors);
+  const serialized = {};
+  for (const [key, val] of entries) {
+    if (isRouteErrorResponse(val)) {
+      serialized[key] = __spreadProps(__spreadValues({}, val), { __type: "RouteErrorResponse" });
+    } else if (val instanceof Error) {
+      serialized[key] = {
+        message: val.message,
+        __type: "Error"
+      };
+    } else {
+      serialized[key] = val;
+    }
+  }
+  return serialized;
+}
 const routerPlugin = ({
   basename = "",
   routesConfig,
@@ -103,17 +126,6 @@ const routerPlugin = ({
             if (routerContext instanceof Response) {
               return routerContext;
             }
-            if (routerContext.loaderData) {
-              routerContext.loaderData = JSON.parse(
-                JSON.stringify(routerContext.loaderData),
-                (k, v) => {
-                  if (typeof v === "string") {
-                    return serialize(v);
-                  }
-                  return v;
-                }
-              );
-            }
             const router = createStaticRouter(routes, routerContext);
             context.router = router;
             context.routerContext = routerContext;
@@ -129,12 +141,28 @@ const routerPlugin = ({
           const getRouteApp = () => {
             return (props) => {
               const { router, routerContext } = useContext(RuntimeReactContext);
-              return /* @__PURE__ */ jsx(App, __spreadProps(__spreadValues({}, props), {
-                children: /* @__PURE__ */ jsx(StaticRouterProvider, {
-                  router,
-                  context: routerContext,
-                  nonce: "the-nonce"
-                })
+              const data = {
+                loaderData: routerContext.loaderData,
+                actionData: routerContext.actionData,
+                errors: serializeErrors(routerContext.errors)
+              };
+              const hydrateScript = `window.__staticRouterHydrationData = ${serialize(
+                data,
+                { isJSON: true }
+              )};`;
+              return /* @__PURE__ */ jsxs(App, __spreadProps(__spreadValues({}, props), {
+                children: [
+                  /* @__PURE__ */ jsx(StaticRouterProvider, {
+                    router,
+                    context: routerContext,
+                    hydrate: false
+                  }),
+                  /* @__PURE__ */ jsx("script", {
+                    suppressHydrationWarning: true,
+                    id: "the-nonce",
+                    dangerouslySetInnerHTML: { __html: hydrateScript }
+                  })
+                ]
               }));
             };
           };

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.js

@@ -18,9 +18,6 @@ var __spreadValues = (a, b) => {
 };
 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) {
@@ -28,6 +25,11 @@ function renderToPipe(rootElement, context, options) {
   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;

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 = "";
@@ -101,9 +102,7 @@ class Entry {
         if (fragment.isVariable && fragment.content === "SSRDataScript") {
           html += fragment.getValue(SSRData);
         } else {
-          let value = fragment.getValue(this.result);
-          value = value.replace(/\\\\\\u/g, `u`);
-          html += value;
+          html += fragment.getValue(this.result);
         }
       }
       const helmetData = ReactHelmet.renderStatic();

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