@modern-js/runtime 2.3.0 → 2.4.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/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/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/node/document/Body.js

@@ -23,10 +23,10 @@ module.exports = __toCommonJS(Body_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_constants = require("./constants");
-var import_DocumentStructrueContext = require("./DocumentStructrueContext");
+var import_DocumentStructureContext = require("./DocumentStructureContext");
 var import_Root = require("./Root");
 function Body(props) {
-  const { hasSetRoot } = (0, import_react.useContext)(import_DocumentStructrueContext.DocumentStructrueContext);
+  const { hasSetRoot } = (0, import_react.useContext)(import_DocumentStructureContext.DocumentStructureContext);
   const { children } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("body", {
     children: [

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

@@ -21,13 +21,13 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
   mod
 ));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var DocumentStructrueContext_exports = {};
-__export(DocumentStructrueContext_exports, {
-  DocumentStructrueContext: () => DocumentStructrueContext
+var DocumentStructureContext_exports = {};
+__export(DocumentStructureContext_exports, {
+  DocumentStructureContext: () => DocumentStructureContext
 });
-module.exports = __toCommonJS(DocumentStructrueContext_exports);
+module.exports = __toCommonJS(DocumentStructureContext_exports);
 var import_react = __toESM(require("react"));
-const DocumentStructrueContext = import_react.default.createContext({
+const DocumentStructureContext = import_react.default.createContext({
   hasSetHead: false,
   hasSetScripts: false,
   hasSetBody: false,
@@ -36,5 +36,5 @@ const DocumentStructrueContext = import_react.default.createContext({
 });
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  DocumentStructrueContext
+  DocumentStructureContext
 });

package/dist/js/node/document/Head.js

@@ -23,12 +23,12 @@ __export(Head_exports, {
 module.exports = __toCommonJS(Head_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-var import_DocumentStructrueContext = require("./DocumentStructrueContext");
+var import_DocumentStructureContext = require("./DocumentStructureContext");
 var import_Scripts = require("./Scripts");
 var import_Links = require("./Links");
 var import_constants = require("./constants");
 function Head(props) {
-  const { hasSetScripts, hasSetLinks } = (0, import_react.useContext)(import_DocumentStructrueContext.DocumentStructrueContext);
+  const { hasSetScripts, hasSetLinks } = (0, import_react.useContext)(import_DocumentStructureContext.DocumentStructureContext);
   const { children } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("head", {
     children: [

package/dist/js/node/document/Html.js

@@ -22,7 +22,7 @@ __export(Html_exports, {
 module.exports = __toCommonJS(Html_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_Body = require("./Body");
-var import_DocumentStructrueContext = require("./DocumentStructrueContext");
+var import_DocumentStructureContext = require("./DocumentStructureContext");
 var import_Head = require("./Head");
 function findTargetChild(tag, children) {
   return children.find((item) => getEleType(item) === tag);
@@ -78,7 +78,7 @@ function Html(props) {
     });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("html", {
-    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DocumentStructrueContext.DocumentStructrueContext.Provider, {
+    children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_DocumentStructureContext.DocumentStructureContext.Provider, {
       value: {
         hasSetHead,
         hasSetScripts,

package/dist/js/node/document/index.js

@@ -16,7 +16,7 @@ var document_exports = {};
 module.exports = __toCommonJS(document_exports);
 __reExport(document_exports, require("./Html"), module.exports);
 __reExport(document_exports, require("./DocumentContext"), module.exports);
-__reExport(document_exports, require("./DocumentStructrueContext"), module.exports);
+__reExport(document_exports, require("./DocumentStructureContext"), module.exports);
 __reExport(document_exports, require("./Head"), module.exports);
 __reExport(document_exports, require("./Body"), module.exports);
 __reExport(document_exports, require("./Root"), module.exports);

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

@@ -38,7 +38,6 @@ __export(renderToPipe_exports, {
 });
 module.exports = __toCommonJS(renderToPipe_exports);
 var import_stream = require("stream");
-var import_server = require("react-dom/server");
 var import_types = require("../types");
 var import_template = require("./template");
 function renderToPipe(rootElement, context, options) {
@@ -46,7 +45,12 @@ function renderToPipe(rootElement, context, options) {
   const { ssrContext } = context;
   const forUserPipe = (stream) => {
     return new Promise((resolve) => {
-      const { pipe } = (0, import_server.renderToPipeableStream)(rootElement, __spreadProps(__spreadValues({}, options), {
+      let renderToPipeableStream;
+      try {
+        ({ renderToPipeableStream } = require("react-dom/server"));
+      } catch (e) {
+      }
+      const { pipe } = renderToPipeableStream(rootElement, __spreadProps(__spreadValues({}, options), {
         onShellReady() {
           var _a;
           const { shellAfter, shellBefore } = (0, import_template.getTemplates)(

package/dist/js/treeshaking/document/Body.js

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

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

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

package/dist/js/treeshaking/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) {
-    var ref = useContext(DocumentStructrueContext), hasSetScripts = ref.hasSetScripts, hasSetLinks = ref.hasSetLinks;
+    var ref = useContext(DocumentStructureContext), hasSetScripts = ref.hasSetScripts, hasSetLinks = ref.hasSetLinks;
     var children = props.children;
     return /* @__PURE__ */ jsxs("head", {
         children: [

package/dist/js/treeshaking/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(function(item) {
@@ -79,7 +79,7 @@ function Html(props) {
         });
     }
     return /* @__PURE__ */ jsx("html", {
-        children: /* @__PURE__ */ jsxs(DocumentStructrueContext.Provider, {
+        children: /* @__PURE__ */ jsxs(DocumentStructureContext.Provider, {
             value: {
                 hasSetHead: hasSetHead,
                 hasSetScripts: hasSetScripts,

package/dist/js/treeshaking/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/treeshaking/ssr/serverRender/renderToStream/renderToPipe.js

@@ -58,7 +58,6 @@ function _objectSpreadProps(target, source) {
     return target;
 }
 import { Transform } from "stream";
-import { renderToPipeableStream } from "react-dom/server";
 import { RenderLevel } from "../types";
 import { getTemplates } from "./template";
 function renderToPipe(rootElement, context, options) {
@@ -70,6 +69,10 @@ function renderToPipe(rootElement, context, options) {
     var ssrContext = context.ssrContext;
     var forUserPipe = function(stream) {
         return new Promise(function(resolve) {
+            var renderToPipeableStream;
+            try {
+                renderToPipeableStream = require("react-dom/server").renderToPipeableStream;
+            } catch (e) {}
             var pipe = renderToPipeableStream(rootElement, _objectSpreadProps(_objectSpread({}, options), {
                 onShellReady: function onShellReady() {
                     var ref;

package/dist/types/document/{DocumentStructrueContext.d.ts → DocumentStructureContext.d.ts}

@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-type DocumentStructrueContextProps = {
+type DocumentStructureContextProps = {
   hasSetHead?: boolean;
   hasSetScripts?: boolean;
   hasSetLinks?: boolean;
@@ -7,5 +7,5 @@ type DocumentStructrueContextProps = {
   hasSetRoot?: boolean;
   docChild?: ReactNode;
 };
-export declare const DocumentStructrueContext: React.Context<DocumentStructrueContextProps>;
+export declare const DocumentStructureContext: React.Context<DocumentStructureContextProps>;
 export {};

package/dist/types/document/index.d.ts

@@ -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/types/ssr/serverRender/renderToStream/renderToPipe.d.ts

@@ -1,7 +1,7 @@
 /// <reference types="node" />
 /// <reference types="react" />
 import { Writable } from 'stream';
-import { RenderToPipeableStreamOptions } from 'react-dom/server';
+import type { RenderToPipeableStreamOptions } from 'react-dom/server';
 import { RuntimeContext } from '../types';
 export type Pipe<T extends Writable> = (output: T) => Promise<T | string>;
 declare function renderToPipe(rootElement: React.ReactElement, context: RuntimeContext, options?: RenderToPipeableStreamOptions): Pipe<Writable>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/runtime",
-  "description": "The meta-framework suite designed from scratch for frontend-focused modern web development.",
+  "description": "A Progressive React Framework for modern web development.",
   "homepage": "https://modernjs.dev",
   "bugs": "https://github.com/modern-js-dev/modern.js/issues",
   "repository": "modern-js-dev/modern.js",
@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.3.0",
+  "version": "2.4.0",
   "engines": {
     "node": ">=14.17.6"
   },
@@ -147,9 +147,9 @@
     "serialize-javascript": "^6.0.0",
     "styled-components": "^5.3.1",
     "esbuild": "0.15.7",
-    "@modern-js/plugin": "2.3.0",
-    "@modern-js/types": "2.3.0",
-    "@modern-js/utils": "2.3.0"
+    "@modern-js/plugin": "2.4.0",
+    "@modern-js/types": "2.4.0",
+    "@modern-js/utils": "2.4.0"
   },
   "peerDependencies": {
     "react": ">=17",
@@ -170,11 +170,11 @@
     "react-dom": "^18",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
-    "@modern-js/app-tools": "2.3.0",
-    "@modern-js/core": "2.3.0",
-    "@modern-js/server-core": "2.3.0",
-    "@scripts/jest-config": "2.3.0",
-    "@scripts/build": "2.3.0"
+    "@modern-js/app-tools": "2.4.0",
+    "@modern-js/core": "2.4.0",
+    "@modern-js/server-core": "2.4.0",
+    "@scripts/jest-config": "2.4.0",
+    "@scripts/build": "2.4.0"
   },
   "sideEffects": false,
   "modernConfig": {},