@modern-js/runtime 1.15.0 → 1.16.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @modern-js/runtime
 
+## 1.16.0
+
+### Minor Changes
+
+- 1100dd58c: chore: support react 18
+
+  chore: 支持 React 18
+
+### Patch Changes
+
+- a480d6ad0: fix: remove helmet regexp's global tag
+  fix: 删除 helmet 中正则匹配的全局标记
+- Updated dependencies [641592f52]
+- Updated dependencies [3904b30a5]
+- Updated dependencies [1100dd58c]
+- Updated dependencies [e04e6e76a]
+- Updated dependencies [81c66e4a4]
+- Updated dependencies [2c305b6f5]
+  - @modern-js/utils@1.16.0
+  - @modern-js/webpack@1.16.0
+  - @modern-js/plugin@1.16.0
+
 ## 1.15.0
 
 ### Patch Changes

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

@@ -1,5 +1,5 @@
 import path from 'path';
-import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache } from '@modern-js/utils';
+import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -11,8 +11,9 @@ export default (() => ({
     let runtimeExportsUtils = {};
     return {
       config() {
-        const dir = api.useAppContext().internalDirectory;
+        const dir = api.useAppContext().internalDirectory || '';
         runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
+        process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
         return {
           runtime: {},
           runtimeByEntries: {},
@@ -26,7 +27,8 @@ export default (() => ({
                * So need to add alias
                */
               'styled-components': require.resolve('styled-components')
-            }
+            },
+            envVars: ['IS_REACT18']
           }
         };
       },

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

@@ -11,12 +11,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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, { useContext, useMemo } from 'react';
-import ReactDOM from 'react-dom';
+import defaultReactDOM from 'react-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { runtime } from "./plugin";
 import { RuntimeReactContext } from "./runtime-context";
 import { createLoaderManager } from "./loader/loaderManager";
 import { jsx as _jsx } from "react/jsx-runtime";
+const IS_REACT18 = process.env.IS_REACT18 === 'true';
 
 function isClientArgs(id) {
   return typeof id === 'string' || typeof HTMLElement !== 'undefined' && id instanceof HTMLElement;
@@ -105,7 +106,11 @@ export const bootstrap = async (BootApp,
  * When csr, id is root id.
  * When ssr, id is serverContext
  */
-id) => {
+id,
+/**
+ * root.render need use root to run function
+ */
+root, render = defaultReactDOM.render, hydrate = defaultReactDOM.hydrate) => {
   let App = BootApp;
   let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -169,18 +174,36 @@ id) => {
         context.initialData = initialData;
       }
 
+      const rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root'); // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+
+      const ModernRender = App => {
+        if (IS_REACT18) {
+          root.render(App);
+        } else {
+          render(App, rootElement);
+        }
+      };
+
+      const ModernHydrate = (App, callback) => {
+        if (IS_REACT18) {
+          hydrate(rootElement, App);
+        } else {
+          hydrate(App, rootElement, callback);
+        }
+      };
+
       return runner.client({
         App,
         context,
-        rootElement: typeof id !== 'string' ? id : document.getElementById(id || 'root')
+        ModernRender,
+        ModernHydrate
       }, {
         onLast: ({
-          App,
-          rootElement
+          App
         }) => {
-          ReactDOM.render( /*#__PURE__*/React.createElement(App, {
+          ModernRender( /*#__PURE__*/React.createElement(App, {
             context
-          }), rootElement);
+          }));
         }
       });
     } else {

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

@@ -4,11 +4,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 ReactDOM from 'react-dom';
 import { loadableReady } from '@loadable/component';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import { RenderLevel } from "./serverRender/type";
+import { WithCallback } from "./react/withCallback";
 import { formatClient, mockResponse } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+const IS_REACT18 = process.env.IS_REACT18 === 'true';
 
 const ssr = () => ({
   name: '@modern-js/plugin-ssr',
@@ -18,37 +20,52 @@ const ssr = () => ({
       client: async ({
         App,
         context,
-        rootElement
+        ModernRender,
+        ModernHydrate
       }) => {
         var _window, _window$_SSR_DATA;
 
         const renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
 
         if (renderLevel === RenderLevel.CLIENT_RENDER) {
-          var _prefetch, _ref;
-
-          await (App === null || App === void 0 ? void 0 : (_prefetch = (_ref = App).prefetch) === null || _prefetch === void 0 ? void 0 : _prefetch.call(_ref, context));
-          ReactDOM.render( /*#__PURE__*/_jsx(App, {
+          // prefetch block render while csr
+          //   await (App as any)?.prefetch?.(context);
+          ModernRender( /*#__PURE__*/_jsx(App, {
             context: context
-          }), rootElement);
+          }));
         } else if (renderLevel === RenderLevel.SERVER_RENDER) {
           loadableReady(() => {
             const hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
               _hydration: true
             });
 
-            ReactDOM.hydrate( /*#__PURE__*/_jsx(App, {
-              context: hydrateContext
-            }), rootElement, () => {
+            const callback = () => {
               // won't cause component re-render because context's reference identity doesn't change
               delete hydrateContext._hydration;
-            });
+            }; // callback: https://github.com/reactwg/react-18/discussions/5
+
+
+            if (IS_REACT18) {
+              let SSRApp = () => /*#__PURE__*/_jsx(WithCallback, {
+                callback: callback,
+                children: /*#__PURE__*/_jsx(App, {
+                  context: hydrateContext
+                })
+              });
+
+              SSRApp = hoistNonReactStatics(SSRApp, App);
+              ModernHydrate( /*#__PURE__*/_jsx(SSRApp, {}));
+            } else {
+              ModernHydrate( /*#__PURE__*/_jsx(App, {
+                context: hydrateContext
+              }), callback);
+            }
           });
         } else {
           // unknown renderlevel or renderlevel is server prefetch.
-          ReactDOM.render( /*#__PURE__*/_jsx(App, {
+          ModernHydrate( /*#__PURE__*/_jsx(App, {
             context: context
-          }), rootElement);
+          }));
         }
       },
 

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

@@ -0,0 +1,17 @@
+// See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
+import { useRef, useLayoutEffect } from 'react';
+export const WithCallback = ({
+  callback,
+  children
+}) => {
+  const once = useRef(false);
+  useLayoutEffect(() => {
+    if (once.current) {
+      return;
+    }
+
+    once.current = true;
+    callback();
+  }, [callback]);
+  return children;
+};

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

@@ -2,8 +2,8 @@
 const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
-const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/g;
-const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/g; // 通过 react-helmet 修改模板
+const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
+const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/; // 通过 react-helmet 修改模板
 
 export default function helmet(content, helmetData) {
   let result = content;

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

@@ -25,8 +25,9 @@ var _default = () => ({
     let runtimeExportsUtils = {};
     return {
       config() {
-        const dir = api.useAppContext().internalDirectory;
+        const dir = api.useAppContext().internalDirectory || '';
         runtimeExportsUtils = (0, _utils.createRuntimeExportsUtils)(dir, 'index');
+        process.env.IS_REACT18 = (0, _utils.isReact18)(_path.default.join(dir, '../../')).toString();
         return {
           runtime: {},
           runtimeByEntries: {},
@@ -40,7 +41,8 @@ var _default = () => ({
                * So need to add alias
                */
               'styled-components': require.resolve('styled-components')
-            }
+            },
+            envVars: ['IS_REACT18']
           }
         };
       },

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

@@ -37,6 +37,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 IS_REACT18 = process.env.IS_REACT18 === 'true';
+
 function isClientArgs(id) {
   return typeof id === 'string' || typeof HTMLElement !== 'undefined' && id instanceof HTMLElement;
 }
@@ -129,7 +131,11 @@ const bootstrap = async (BootApp,
  * When csr, id is root id.
  * When ssr, id is serverContext
  */
-id) => {
+id,
+/**
+ * root.render need use root to run function
+ */
+root, render = _reactDom.default.render, hydrate = _reactDom.default.hydrate) => {
   let App = BootApp;
   let runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -193,18 +199,36 @@ id) => {
         context.initialData = initialData;
       }
 
+      const rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root'); // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+
+      const ModernRender = App => {
+        if (IS_REACT18) {
+          root.render(App);
+        } else {
+          render(App, rootElement);
+        }
+      };
+
+      const ModernHydrate = (App, callback) => {
+        if (IS_REACT18) {
+          hydrate(rootElement, App);
+        } else {
+          hydrate(App, rootElement, callback);
+        }
+      };
+
       return runner.client({
         App,
         context,
-        rootElement: typeof id !== 'string' ? id : document.getElementById(id || 'root')
+        ModernRender,
+        ModernHydrate
       }, {
         onLast: ({
-          App,
-          rootElement
+          App
         }) => {
-          _reactDom.default.render( /*#__PURE__*/_react.default.createElement(App, {
+          ModernRender( /*#__PURE__*/_react.default.createElement(App, {
             context
-          }), rootElement);
+          }));
         }
       });
     } else {

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

@@ -6,12 +6,14 @@ Object.defineProperty(exports, "__esModule", {
 var _exportNames = {};
 exports.default = void 0;
 
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
 var _component = require("@loadable/component");
 
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
 var _type = require("./serverRender/type");
 
+var _withCallback = require("./react/withCallback");
+
 var _utils = require("./utils");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -38,6 +40,8 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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 IS_REACT18 = process.env.IS_REACT18 === 'true';
+
 const ssr = () => ({
   name: '@modern-js/plugin-ssr',
   setup: () => {
@@ -46,38 +50,52 @@ const ssr = () => ({
       client: async ({
         App,
         context,
-        rootElement
+        ModernRender,
+        ModernHydrate
       }) => {
         var _window, _window$_SSR_DATA;
 
         const renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
 
         if (renderLevel === _type.RenderLevel.CLIENT_RENDER) {
-          var _prefetch, _ref;
-
-          await (App === null || App === void 0 ? void 0 : (_prefetch = (_ref = App).prefetch) === null || _prefetch === void 0 ? void 0 : _prefetch.call(_ref, context));
-
-          _reactDom.default.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+          // prefetch block render while csr
+          //   await (App as any)?.prefetch?.(context);
+          ModernRender( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
             context: context
-          }), rootElement);
+          }));
         } else if (renderLevel === _type.RenderLevel.SERVER_RENDER) {
           (0, _component.loadableReady)(() => {
             const hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
               _hydration: true
             });
 
-            _reactDom.default.hydrate( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
-              context: hydrateContext
-            }), rootElement, () => {
+            const callback = () => {
               // won't cause component re-render because context's reference identity doesn't change
               delete hydrateContext._hydration;
-            });
+            }; // callback: https://github.com/reactwg/react-18/discussions/5
+
+
+            if (IS_REACT18) {
+              let SSRApp = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_withCallback.WithCallback, {
+                callback: callback,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+                  context: hydrateContext
+                })
+              });
+
+              SSRApp = (0, _hoistNonReactStatics.default)(SSRApp, App);
+              ModernHydrate( /*#__PURE__*/(0, _jsxRuntime.jsx)(SSRApp, {}));
+            } else {
+              ModernHydrate( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+                context: hydrateContext
+              }), callback);
+            }
           });
         } else {
           // unknown renderlevel or renderlevel is server prefetch.
-          _reactDom.default.render( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
+          ModernHydrate( /*#__PURE__*/(0, _jsxRuntime.jsx)(App, {
             context: context
-          }), rootElement);
+          }));
         }
       },
 

package/dist/js/node/ssr/react/withCallback/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.WithCallback = void 0;
+
+var _react = require("react");
+
+// See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
+const WithCallback = ({
+  callback,
+  children
+}) => {
+  const once = (0, _react.useRef)(false);
+  (0, _react.useLayoutEffect)(() => {
+    if (once.current) {
+      return;
+    }
+
+    once.current = true;
+    callback();
+  }, [callback]);
+  return children;
+};
+
+exports.WithCallback = WithCallback;

package/dist/js/node/ssr/serverRender/helmet.js

@@ -8,8 +8,8 @@ exports.default = helmet;
 const RE_HTML_ATTR = /<html[^>]*>/;
 const RE_BODY_ATTR = /<body[^>]*>/;
 const RE_LAST_IN_HEAD = /<\/head>/;
-const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/g;
-const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/g; // 通过 react-helmet 修改模板
+const RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
+const TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/; // 通过 react-helmet 修改模板
 
 function helmet(content, helmetData) {
   let result = content;

package/dist/js/treeshaking/cli/index.js

@@ -1,7 +1,7 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 import path from 'path';
-import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache } from '@modern-js/utils';
+import { PLUGIN_SCHEMAS, createRuntimeExportsUtils, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -14,8 +14,9 @@ export default (function () {
       var runtimeExportsUtils = {};
       return {
         config: function config() {
-          var dir = api.useAppContext().internalDirectory;
+          var dir = api.useAppContext().internalDirectory || '';
           runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
+          process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
           return {
             runtime: {},
             runtimeByEntries: {},
@@ -29,7 +30,8 @@ export default (function () {
                  * So need to add alias
                  */
                 'styled-components': require.resolve('styled-components')
-              }
+              },
+              envVars: ['IS_REACT18']
             }
           };
         },

package/dist/js/treeshaking/core/compatible.js

@@ -5,12 +5,13 @@ import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 var _excluded = ["context"];
 import React, { useContext, useMemo } from 'react';
-import ReactDOM from 'react-dom';
+import defaultReactDOM from 'react-dom';
 import hoistNonReactStatics from 'hoist-non-react-statics';
 import { runtime } from "./plugin";
 import { RuntimeReactContext } from "./runtime-context";
 import { createLoaderManager } from "./loader/loaderManager";
 import { jsx as _jsx } from "react/jsx-runtime";
+var IS_REACT18 = process.env.IS_REACT18 === 'true';
 
 function isClientArgs(id) {
   return typeof id === 'string' || typeof HTMLElement !== 'undefined' && id instanceof HTMLElement;
@@ -99,13 +100,36 @@ export var bootstrap = /*#__PURE__*/function () {
    * When csr, id is root id.
    * When ssr, id is serverContext
    */
-  id) {
-    var App, runner, context, runInit, isBrowser, _ssrData$data, _ssrData$data2, ssrData, loadersData, initialLoadersState, initialData, _initialData;
+  id,
+  /**
+   * root.render need use root to run function
+   */
+  root) {
+    var render,
+        hydrate,
+        App,
+        runner,
+        context,
+        runInit,
+        isBrowser,
+        _ssrData$data,
+        _ssrData$data2,
+        ssrData,
+        loadersData,
+        initialLoadersState,
+        initialData,
+        _rootElement,
+        ModernRender,
+        ModernHydrate,
+        _initialData,
+        _args = arguments;
 
     return _regeneratorRuntime().wrap(function _callee$(_context2) {
       while (1) {
         switch (_context2.prev = _context2.next) {
           case 0:
+            render = _args.length > 3 && _args[3] !== undefined ? _args[3] : defaultReactDOM.render;
+            hydrate = _args.length > 4 && _args[4] !== undefined ? _args[4] : defaultReactDOM.hydrate;
             App = BootApp;
             runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -133,7 +157,7 @@ export var bootstrap = /*#__PURE__*/function () {
 
 
             if (id) {
-              _context2.next = 7;
+              _context2.next = 9;
               break;
             }
 
@@ -141,16 +165,16 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 7:
+          case 9:
             isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
 
             if (!isBrowser) {
-              _context2.next = 25;
+              _context2.next = 30;
               break;
             }
 
             if (!isClientArgs(id)) {
-              _context2.next = 22;
+              _context2.next = 27;
               break;
             }
 
@@ -174,38 +198,56 @@ export var bootstrap = /*#__PURE__*/function () {
               ssrContext: ssrData === null || ssrData === void 0 ? void 0 : ssrData.context
             } : {}));
             context.initialData = ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data2 = ssrData.data) === null || _ssrData$data2 === void 0 ? void 0 : _ssrData$data2.initialData;
-            _context2.next = 17;
+            _context2.next = 19;
             return runInit(context);
 
-          case 17:
+          case 19:
             initialData = _context2.sent;
 
             if (initialData) {
               context.initialData = initialData;
             }
 
+            _rootElement = typeof id !== 'string' ? id : document.getElementById(id || 'root'); // https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html
+
+            ModernRender = function ModernRender(App) {
+              if (IS_REACT18) {
+                root.render(App);
+              } else {
+                render(App, _rootElement);
+              }
+            };
+
+            ModernHydrate = function ModernHydrate(App, callback) {
+              if (IS_REACT18) {
+                hydrate(_rootElement, App);
+              } else {
+                hydrate(App, _rootElement, callback);
+              }
+            };
+
             return _context2.abrupt("return", runner.client({
               App: App,
               context: context,
-              rootElement: typeof id !== 'string' ? id : document.getElementById(id || 'root')
+              ModernRender: ModernRender,
+              ModernHydrate: ModernHydrate
             }, {
               onLast: function onLast(_ref8) {
-                var App = _ref8.App,
-                    rootElement = _ref8.rootElement;
-                ReactDOM.render( /*#__PURE__*/React.createElement(App, {
+                var App = _ref8.App;
+                ModernRender( /*#__PURE__*/React.createElement(App, {
                   context: context
-                }), rootElement);
+                }));
               }
             }));
 
-          case 22:
+          case 27:
             throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
 
-          case 23:
-            _context2.next = 31;
+          case 28:
+            _context2.next = 36;
             break;
 
-          case 25:
+          case 30:
             Object.assign(context, {
               ssrContext: id,
               isBrowser: false,
@@ -215,10 +257,10 @@ export var bootstrap = /*#__PURE__*/function () {
                 skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
               })
             });
-            _context2.next = 28;
+            _context2.next = 33;
             return runInit(context);
 
-          case 28:
+          case 33:
             _initialData = _context2.sent;
             context.initialData = _initialData;
             return _context2.abrupt("return", runner.server({
@@ -226,7 +268,7 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 31:
+          case 36:
           case "end":
             return _context2.stop();
         }
@@ -234,7 +276,7 @@ export var bootstrap = /*#__PURE__*/function () {
     }, _callee);
   }));
 
-  return function bootstrap(_x, _x2) {
+  return function bootstrap(_x, _x2, _x3) {
     return _ref6.apply(this, arguments);
   };
 }();

package/dist/js/treeshaking/ssr/index.js

@@ -1,11 +1,13 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
-import ReactDOM from 'react-dom';
 import { loadableReady } from '@loadable/component';
+import hoistNonReactStatics from 'hoist-non-react-statics';
 import { RenderLevel } from "./serverRender/type";
+import { WithCallback } from "./react/withCallback";
 import { formatClient, mockResponse } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";
+var IS_REACT18 = process.env.IS_REACT18 === 'true';
 
 var ssr = function ssr() {
   return {
@@ -17,52 +19,58 @@ var ssr = function ssr() {
           var _client = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
             var _window, _window$_SSR_DATA;
 
-            var App, context, rootElement, renderLevel, _prefetch, _ref2;
-
+            var App, context, ModernRender, ModernHydrate, renderLevel;
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) {
                 switch (_context.prev = _context.next) {
                   case 0:
-                    App = _ref.App, context = _ref.context, rootElement = _ref.rootElement;
+                    App = _ref.App, context = _ref.context, ModernRender = _ref.ModernRender, ModernHydrate = _ref.ModernHydrate;
                     renderLevel = (_window = window) === null || _window === void 0 ? void 0 : (_window$_SSR_DATA = _window._SSR_DATA) === null || _window$_SSR_DATA === void 0 ? void 0 : _window$_SSR_DATA.renderLevel;
 
-                    if (!(renderLevel === RenderLevel.CLIENT_RENDER)) {
-                      _context.next = 8;
-                      break;
-                    }
-
-                    _context.next = 5;
-                    return App === null || App === void 0 ? void 0 : (_prefetch = (_ref2 = App).prefetch) === null || _prefetch === void 0 ? void 0 : _prefetch.call(_ref2, context);
-
-                  case 5:
-                    ReactDOM.render( /*#__PURE__*/_jsx(App, {
-                      context: context
-                    }), rootElement);
-                    _context.next = 9;
-                    break;
-
-                  case 8:
-                    if (renderLevel === RenderLevel.SERVER_RENDER) {
+                    if (renderLevel === RenderLevel.CLIENT_RENDER) {
+                      // prefetch block render while csr
+                      //   await (App as any)?.prefetch?.(context);
+                      ModernRender( /*#__PURE__*/_jsx(App, {
+                        context: context
+                      }));
+                    } else if (renderLevel === RenderLevel.SERVER_RENDER) {
                       loadableReady(function () {
                         var hydrateContext = _objectSpread(_objectSpread({}, context), {}, {
                           _hydration: true
                         });
 
-                        ReactDOM.hydrate( /*#__PURE__*/_jsx(App, {
-                          context: hydrateContext
-                        }), rootElement, function () {
+                        var callback = function callback() {
                           // won't cause component re-render because context's reference identity doesn't change
                           delete hydrateContext._hydration;
-                        });
+                        }; // callback: https://github.com/reactwg/react-18/discussions/5
+
+
+                        if (IS_REACT18) {
+                          var SSRApp = function SSRApp() {
+                            return /*#__PURE__*/_jsx(WithCallback, {
+                              callback: callback,
+                              children: /*#__PURE__*/_jsx(App, {
+                                context: hydrateContext
+                              })
+                            });
+                          };
+
+                          SSRApp = hoistNonReactStatics(SSRApp, App);
+                          ModernHydrate( /*#__PURE__*/_jsx(SSRApp, {}));
+                        } else {
+                          ModernHydrate( /*#__PURE__*/_jsx(App, {
+                            context: hydrateContext
+                          }), callback);
+                        }
                       });
                     } else {
                       // unknown renderlevel or renderlevel is server prefetch.
-                      ReactDOM.render( /*#__PURE__*/_jsx(App, {
+                      ModernHydrate( /*#__PURE__*/_jsx(App, {
                         context: context
-                      }), rootElement);
+                      }));
                     }
 
-                  case 9:
+                  case 3:
                   case "end":
                     return _context.stop();
                 }
@@ -76,10 +84,10 @@ var ssr = function ssr() {
 
           return client;
         }(),
-        init: function init(_ref3, next) {
+        init: function init(_ref2, next) {
           var _window2, _window2$_SSR_DATA, _window2$_SSR_DATA$co;
 
-          var context = _ref3.context;
+          var context = _ref2.context;
           var request = (_window2 = window) === null || _window2 === void 0 ? void 0 : (_window2$_SSR_DATA = _window2._SSR_DATA) === null || _window2$_SSR_DATA === void 0 ? void 0 : (_window2$_SSR_DATA$co = _window2$_SSR_DATA.context) === null || _window2$_SSR_DATA$co === void 0 ? void 0 : _window2$_SSR_DATA$co.request;
 
           if (!request) {
@@ -98,11 +106,11 @@ var ssr = function ssr() {
             context: context
           });
         },
-        pickContext: function pickContext(_ref4, next) {
+        pickContext: function pickContext(_ref3, next) {
           var _window3, _window3$_SSR_DATA, _window3$_SSR_DATA$co;
 
-          var context = _ref4.context,
-              pickedContext = _ref4.pickedContext;
+          var context = _ref3.context,
+              pickedContext = _ref3.pickedContext;
           var request = (_window3 = window) === null || _window3 === void 0 ? void 0 : (_window3$_SSR_DATA = _window3._SSR_DATA) === null || _window3$_SSR_DATA === void 0 ? void 0 : (_window3$_SSR_DATA$co = _window3$_SSR_DATA.context) === null || _window3$_SSR_DATA$co === void 0 ? void 0 : _window3$_SSR_DATA$co.request;
           var initialData = context.initialData;
 

package/dist/js/treeshaking/ssr/react/withCallback/index.js

@@ -0,0 +1,16 @@
+// See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
+import { useRef, useLayoutEffect } from 'react';
+export var WithCallback = function WithCallback(_ref) {
+  var callback = _ref.callback,
+      children = _ref.children;
+  var once = useRef(false);
+  useLayoutEffect(function () {
+    if (once.current) {
+      return;
+    }
+
+    once.current = true;
+    callback();
+  }, [callback]);
+  return children;
+};

package/dist/js/treeshaking/ssr/serverRender/helmet.js

@@ -2,8 +2,8 @@
 var RE_HTML_ATTR = /<html[^>]*>/;
 var RE_BODY_ATTR = /<body[^>]*>/;
 var RE_LAST_IN_HEAD = /<\/head>/;
-var RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/g;
-var TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/g; // 通过 react-helmet 修改模板
+var RE_TITLE = /<title[^>]*>([\s\S\n\r]*?)<\/title>/;
+var TEST_TITLE_CONTENT = /(?<=<title[^>]*>)([\s\S\n\r]*?)([.|\S])([\s\S\n\r]*?)(?=<\/title>)/; // 通过 react-helmet 修改模板
 
 export default function helmet(content, helmetData) {
   var result = content;

package/dist/types/core/compatible.d.ts

@@ -7,7 +7,11 @@ export declare type CreateAppOptions = {
 export declare const createApp: ({
   plugins
 }: CreateAppOptions) => (App?: React.ComponentType<any>) => React.ComponentType<any>;
-declare type BootStrap<T = unknown> = (App: React.ComponentType, id?: string | Record<string, any> | HTMLElement) => Promise<T>;
+interface HydrateFunc {
+  (container: Element | Document, initialChildren: React.ReactNode): void;
+  (initialChildren: React.ReactNode, container: Element | Document, callback?: () => void): void;
+}
+declare type BootStrap<T = unknown> = (App: React.ComponentType, id?: string | Record<string, any> | HTMLElement, root?: any, render?: (children: React.ReactNode, rootElement?: HTMLElement) => void, hydrate?: HydrateFunc) => Promise<T>;
 export declare const bootstrap: BootStrap;
 export declare const useRuntimeContext: () => TRuntimeContext;
 export {};

package/dist/types/core/plugin.d.ts

@@ -14,7 +14,8 @@ declare const runtimeHooks: {
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -52,7 +53,8 @@ export declare const createRuntime: () => import("@modern-js/plugin").Manager<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -90,7 +92,8 @@ export declare const runtime: import("@modern-js/plugin").Manager<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -116,7 +119,8 @@ export declare const createPlugin: (setup?: Setup<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -141,7 +145,8 @@ export declare const createPlugin: (setup?: Setup<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -166,7 +171,8 @@ export declare const createPlugin: (setup?: Setup<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
@@ -191,7 +197,8 @@ export declare const createPlugin: (setup?: Setup<{
   client: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;
     readonly context?: RuntimeContext | undefined;
-    rootElement: HTMLElement;
+    ModernRender: (App: React.ReactNode) => void;
+    ModernHydrate: (App: React.ReactNode, callback?: () => void) => void;
   }, void>;
   server: import("@modern-js/plugin").AsyncPipeline<{
     App: React.ComponentType<any>;

package/dist/types/ssr/react/nossr/index.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const NoSSR: (props: React.PropsWithChildren<React.ReactNode>) => React.FunctionComponentElement<{}>;
+export declare const NoSSR: (props: React.PropsWithChildren<unknown>) => React.FunctionComponentElement<{}>;

package/dist/types/ssr/react/withCallback/index.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export declare const WithCallback: React.FC<{
+  callback: () => void;
+  children: React.ReactElement;
+}>;

package/package.json

@@ -11,7 +11,7 @@
     "modern",
     "modern.js"
   ],
-  "version": "1.15.0",
+  "version": "1.16.0",
   "jsnext:source": "./src/index.ts",
   "types": "./type.d.ts",
   "main": "./dist/js/node/index.js",
@@ -140,9 +140,9 @@
     "@loadable/babel-plugin": "^5.13.2",
     "@loadable/server": "^5.15.1",
     "@loadable/component": "^5.15.0",
-    "@modern-js/plugin": "1.15.0",
-    "@modern-js/webpack": "1.15.0",
-    "@modern-js/utils": "1.15.0",
+    "@modern-js/plugin": "1.16.0",
+    "@modern-js/webpack": "1.16.0",
+    "@modern-js/utils": "1.16.0",
     "@modern-js-reduck/plugin-auto-actions": "^1.0.2",
     "@modern-js-reduck/plugin-devtools": "^1.0.3",
     "@modern-js-reduck/plugin-effects": "^1.0.2",
@@ -156,19 +156,21 @@
     "@types/loadable__component": "^5.13.4",
     "@types/styled-components": "^5.1.14"
   },
+  "peerDependencies": {
+    "react": ">=17",
+    "react-dom": ">=17"
+  },
   "devDependencies": {
     "react": "^17",
     "react-dom": "^17",
     "ts-jest": "^27.0.4",
     "typescript": "^4",
     "jest": "^27",
-    "@modern-js/core": "1.15.0",
-    "@modern-js/types": "1.15.0",
-    "@modern-js/utils": "1.15.0",
+    "@modern-js/core": "1.16.0",
+    "@modern-js/types": "1.16.0",
+    "@modern-js/utils": "1.16.0",
     "@types/jest": "^27",
     "@types/node": "^14",
-    "@types/react": "^17",
-    "@types/react-dom": "^17",
     "@types/react-side-effect": "^1.1.1",
     "@types/loadable__webpack-plugin": "^5.7.3",
     "@types/serialize-javascript": "^5.0.1",