@modern-js/runtime 1.4.4 → 1.16.0

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);
+          }));
         }
       },
 
@@ -89,6 +107,10 @@ const ssr = () => ({
         const 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) {
+          context.ssrContext = _objectSpread(_objectSpread({}, context.ssrContext), {}, {
+            response: mockResp,
+            request: (0, _utils.formatClient)({})
+          });
           return next({
             context
           });

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

@@ -8,7 +8,7 @@ exports.default = void 0;
 
 var _path = _interopRequireDefault(require("path"));
 
-var _runtimeCore = require("@modern-js/runtime-core");
+var _core = require("../core");
 
 var _common = require("../common");
 
@@ -49,7 +49,7 @@ const plugin = () => ({
         context
       }) => {
         if (!registeredApps.has(App)) {
-          (0, _runtimeCore.registerPrefetch)(App, _context => (0, _prefetch.default)(App, _context));
+          (0, _core.registerPrefetch)(App, _context => (0, _prefetch.default)(App, _context));
           registeredApps.add(App);
         }
 

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/node/ssr/serverRender/index.js

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.render = void 0;
 
-var _runtimeCore = require("@modern-js/runtime-core");
-
 var _ssr = require("@modern-js/utils/ssr");
 
+var _core = require("../../core");
+
 var _prerender = require("../react/prerender");
 
 var _entry = _interopRequireDefault(require("./entry"));

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

@@ -5,10 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.toHtml = void 0;
 
-var _styled = require("@modern-js/runtime-core/styled");
+var _styledComponents = require("styled-components");
 
 const toHtml = (jsx, renderer, next) => {
-  const sheet = new _styled.ServerStyleSheet();
+  const sheet = new _styledComponents.ServerStyleSheet();
   const html = next(sheet.collectStyles(jsx));
   const css = sheet.getStyleTags();
   renderer.result.chunksMap.css += css;

package/dist/js/node/ssr/utils.js

@@ -28,19 +28,25 @@ exports.formatServer = formatServer;
 
 const getQuery = () => window.location.search.substring(1).split('&').reduce((res, item) => {
   const [key, value] = item.split('=');
-  res[key] = value;
+
+  if (key) {
+    res[key] = value;
+  }
+
   return res;
 }, {});
 
 const formatClient = request => {
+  var _request$headers, _request$headers2;
+
   return {
     params: request.params || {},
     host: request.host || location.host,
     pathname: request.pathname || location.pathname,
     headers: request.headers || {},
     cookieMap: request.cookieMap || {},
-    cookie: request.headers.cookie || document.cookie,
-    userAgent: request.headers['user-agent'] || navigator.userAgent,
+    cookie: ((_request$headers = request.headers) === null || _request$headers === void 0 ? void 0 : _request$headers.cookie) || document.cookie,
+    userAgent: ((_request$headers2 = request.headers) === null || _request$headers2 === void 0 ? void 0 : _request$headers2['user-agent']) || navigator.userAgent,
     referer: request.referer || document.referrer,
     query: request.query || getQuery(),
     url: location.href

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

@@ -8,14 +8,14 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _runtimeCore = require("@modern-js/runtime-core");
-
 var _store = require("@modern-js-reduck/store");
 
 var _react2 = require("@modern-js-reduck/react");
 
 var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
 
+var _core = require("../../core");
+
 var _common = require("../../common");
 
 var _jsxRuntime = require("react/jsx-runtime");
@@ -51,7 +51,7 @@ const state = config => ({
       }, next) {
         const getStateApp = props => {
           // eslint-disable-next-line react-hooks/rules-of-hooks
-          const context = (0, _react.useContext)(_runtimeCore.RuntimeReactContext);
+          const context = (0, _react.useContext)(_core.RuntimeReactContext);
           return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react2.Provider, {
             store: context.store,
             config: config,

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: {},
@@ -28,10 +29,9 @@ export default (function () {
                  * But it will not be installed under the user project.
                  * So need to add alias
                  */
-                'styled-components': require.resolve('styled-components', {
-                  paths: [require.resolve('@modern-js/runtime-core')]
-                })
-              }
+                'styled-components': require.resolve('styled-components')
+              },
+              envVars: ['IS_REACT18']
             }
           };
         },

package/dist/js/treeshaking/core/app-config.js

@@ -0,0 +1,13 @@
+var APP_CONFIG_SYMBOL = 'config';
+export var getConfig = function getConfig(Component) {
+  return (// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-expect-error
+    Component[APP_CONFIG_SYMBOL]
+  );
+};
+export var defineConfig = function defineConfig(Component, config) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  Component[APP_CONFIG_SYMBOL] = config;
+  return Component;
+};

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

@@ -0,0 +1,297 @@
+import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+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 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;
+}
+
+var runnerMap = new WeakMap();
+
+var getInitialContext = function getInitialContext(runner) {
+  return {
+    loaderManager: createLoaderManager({}),
+    runner: runner,
+    isBrowser: true
+  };
+};
+
+export var createApp = function createApp(_ref) {
+  var plugins = _ref.plugins;
+  var appRuntime = runtime.clone();
+  appRuntime.usePlugin.apply(appRuntime, _toConsumableArray(plugins));
+  return function (App) {
+    var runner = appRuntime.init();
+
+    var WrapperComponent = function WrapperComponent(props) {
+      var element = /*#__PURE__*/React.createElement(App || React.Fragment, _objectSpread({}, props), props.children);
+      var context = useContext(RuntimeReactContext);
+      return runner.provide({
+        element: element,
+        props: _objectSpread({}, props),
+        context: context
+      }, {
+        onLast: function onLast(_ref2) {
+          var element = _ref2.element;
+          return element;
+        }
+      });
+    };
+
+    if (App) {
+      hoistNonReactStatics(WrapperComponent, App);
+    }
+
+    var HOCApp = runner.hoc({
+      App: WrapperComponent
+    }, {
+      onLast: function onLast(_ref3) {
+        var App = _ref3.App;
+
+        var WrapComponent = function WrapComponent(_ref4) {
+          var _contextValue;
+
+          var context = _ref4.context,
+              props = _objectWithoutProperties(_ref4, _excluded);
+
+          var contextValue = context; // We should construct the context, when root component is not passed into `bootstrap`.
+
+          if (!((_contextValue = contextValue) !== null && _contextValue !== void 0 && _contextValue.runner)) {
+            contextValue = getInitialContext(runner);
+            runner.init({
+              context: contextValue
+            }, {
+              onLast: function onLast(_ref5) {
+                var _App$init;
+
+                var context1 = _ref5.context;
+                return App === null || App === void 0 ? void 0 : (_App$init = App.init) === null || _App$init === void 0 ? void 0 : _App$init.call(App, context1);
+              }
+            });
+          }
+
+          return /*#__PURE__*/_jsx(RuntimeReactContext.Provider, {
+            value: contextValue,
+            children: /*#__PURE__*/_jsx(App, _objectSpread({}, props))
+          });
+        };
+
+        return hoistNonReactStatics(WrapComponent, App);
+      }
+    });
+    runnerMap.set(HOCApp, runner);
+    return HOCApp;
+  };
+};
+export var bootstrap = /*#__PURE__*/function () {
+  var _ref6 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(BootApp,
+  /**
+   * When csr, id is root id.
+   * When ssr, id is serverContext
+   */
+  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`
+
+            if (!runner) {
+              App = createApp({
+                plugins: []
+              })(App);
+              runner = runnerMap.get(App);
+            }
+
+            context = getInitialContext(runner);
+
+            runInit = function runInit(_context) {
+              return runner.init({
+                context: _context
+              }, {
+                onLast: function onLast(_ref7) {
+                  var _App, _App$init2;
+
+                  var context1 = _ref7.context;
+                  return (_App = App) === null || _App === void 0 ? void 0 : (_App$init2 = _App.init) === null || _App$init2 === void 0 ? void 0 : _App$init2.call(_App, context1);
+                }
+              });
+            }; // don't mount the App, let user in charge of it.
+
+
+            if (id) {
+              _context2.next = 9;
+              break;
+            }
+
+            return _context2.abrupt("return", /*#__PURE__*/React.createElement(App, {
+              context: context
+            }));
+
+          case 9:
+            isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
+
+            if (!isBrowser) {
+              _context2.next = 30;
+              break;
+            }
+
+            if (!isClientArgs(id)) {
+              _context2.next = 27;
+              break;
+            }
+
+            ssrData = window._SSR_DATA;
+            loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data = ssrData.data) === null || _ssrData$data === void 0 ? void 0 : _ssrData$data.loadersData) || {};
+            initialLoadersState = Object.keys(loadersData).reduce(function (res, key) {
+              var loaderData = loadersData[key];
+
+              if (loaderData.loading !== false) {
+                return res;
+              }
+
+              res[key] = loaderData;
+              return res;
+            }, {});
+            Object.assign(context, _objectSpread({
+              loaderManager: createLoaderManager(initialLoadersState, {
+                skipStatic: true
+              })
+            }, ssrData ? {
+              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 = 19;
+            return runInit(context);
+
+          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,
+              ModernRender: ModernRender,
+              ModernHydrate: ModernHydrate
+            }, {
+              onLast: function onLast(_ref8) {
+                var App = _ref8.App;
+                ModernRender( /*#__PURE__*/React.createElement(App, {
+                  context: context
+                }));
+              }
+            }));
+
+          case 27:
+            throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
+
+          case 28:
+            _context2.next = 36;
+            break;
+
+          case 30:
+            Object.assign(context, {
+              ssrContext: id,
+              isBrowser: false,
+              loaderManager: createLoaderManager({}, {
+                skipNonStatic: id.staticGenerate,
+                // if not static generate, only non-static loader can exec on prod env
+                skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
+              })
+            });
+            _context2.next = 33;
+            return runInit(context);
+
+          case 33:
+            _initialData = _context2.sent;
+            context.initialData = _initialData;
+            return _context2.abrupt("return", runner.server({
+              App: App,
+              context: context
+            }));
+
+          case 36:
+          case "end":
+            return _context2.stop();
+        }
+      }
+    }, _callee);
+  }));
+
+  return function bootstrap(_x, _x2, _x3) {
+    return _ref6.apply(this, arguments);
+  };
+}();
+export var useRuntimeContext = function useRuntimeContext() {
+  var context = useContext(RuntimeReactContext);
+  var memoizedContext = useMemo(function () {
+    return context.runner.pickContext({
+      context: context,
+      pickedContext: {}
+    }, {
+      onLast: function onLast(_ref9) {
+        var pickedContext = _ref9.pickedContext;
+        return pickedContext;
+      }
+    });
+  }, [context]);
+  return memoizedContext;
+};

package/dist/js/treeshaking/core/index.js

@@ -0,0 +1,7 @@
+export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from "./plugin";
+export { defineConfig, getConfig } from "./app-config";
+// compatible
+export * from "./compatible";
+export { RuntimeReactContext } from "./runtime-context";
+export * from "./loader";
+export * from '@modern-js/plugin';

package/dist/js/treeshaking/core/loader/index.js

@@ -0,0 +1 @@
+export { default as useLoader } from "./useLoader";