@modern-js/runtime 1.4.4 → 1.16.0

package/dist/js/modern/core/plugin.js

@@ -0,0 +1,63 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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 { createManager, createPipeline, createAsyncPipeline } from '@modern-js/plugin';
+import { createLoaderManager } from "./loader/loaderManager";
+const hoc = createPipeline(); // eslint-disable-next-line @typescript-eslint/no-empty-interface
+
+const provide = createPipeline();
+const client = createAsyncPipeline();
+const server = createAsyncPipeline();
+const init = createAsyncPipeline();
+const pickContext = createPipeline();
+const runtimeHooks = {
+  hoc,
+  provide,
+  client,
+  server,
+  init,
+  pickContext
+};
+/** All hooks of runtime plugin. */
+
+export const createRuntime = () => createManager(runtimeHooks);
+/**
+ * register init hook. It would be revoked both ssr and csr.
+ */
+
+const registerInit = (App, _init) => {
+  const originalInit = App.init;
+
+  App.init = async context => {
+    if (!context.loaderManager) {
+      context.loaderManager = createLoaderManager({});
+    }
+
+    await Promise.all([originalInit === null || originalInit === void 0 ? void 0 : originalInit(context), _init === null || _init === void 0 ? void 0 : _init(context)]);
+  };
+};
+/**
+ * register prefetch hook. It would be revoked both ssr and csr.
+ * But if ssr success, It wont exec in csr again.
+ * If ssr prefetch failed, It will fallback to exec in csr.
+ */
+
+
+const registerPrefetch = (App, prefetch) => {
+  const originalPrefetch = App.prefetch;
+
+  App.prefetch = async context => {
+    const originResult = await (originalPrefetch === null || originalPrefetch === void 0 ? void 0 : originalPrefetch(context));
+    const result = await (prefetch === null || prefetch === void 0 ? void 0 : prefetch(context));
+    return _objectSpread(_objectSpread({}, originResult), result);
+  };
+};
+
+export const runtime = createRuntime();
+export const {
+  createPlugin
+} = runtime;
+export { registerInit, registerPrefetch };

package/dist/js/modern/core/runtime-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const RuntimeReactContext = /*#__PURE__*/createContext({});

package/dist/js/modern/exports/styled.js

@@ -1,3 +1,3 @@
-import styled from '@modern-js/runtime-core/styled';
+import styled from 'styled-components';
 export default styled;
-export * from '@modern-js/runtime-core/styled';
+export * from 'styled-components';

package/dist/js/modern/index.js

@@ -1 +1 @@
-export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from '@modern-js/runtime-core';
+export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from "./core";

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

@@ -7,8 +7,8 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 import React, { useContext } from 'react';
 import { createBrowserHistory, createHashHistory } from 'history';
 import { Router, StaticRouter } from 'react-router-dom';
-import { RuntimeReactContext } from '@modern-js/runtime-core';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { RuntimeReactContext } from "../../core";
 import { isBrowser } from "../../common";
 import { renderRoutes, getLocation, urlJoin } from "./utils";
 import { jsx as _jsx } from "react/jsx-runtime";

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

@@ -67,11 +67,13 @@ export function renderRoutes(routesConfig, extraProps = {}) {
   });
 }
 export function getLocation(serverContext) {
+  var _url$replace;
+
   const {
     pathname,
     url
   } = (serverContext === null || serverContext === void 0 ? void 0 : serverContext.request) || {};
-  const cleanUrl = url.replace('http://', '').replace('https://', '');
+  const cleanUrl = url === null || url === void 0 ? void 0 : (_url$replace = url.replace('http://', '')) === null || _url$replace === void 0 ? void 0 : _url$replace.replace('https://', '');
   const index = (cleanUrl || '').indexOf(pathname);
 
   if (index === -1) {

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);
+          }));
         }
       },
 
@@ -60,6 +77,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: formatClient({})
+          });
           return next({
             context
           });

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

@@ -8,7 +8,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 /* eslint-disable @typescript-eslint/no-require-imports */
 import path from 'path';
-import { registerPrefetch } from '@modern-js/runtime-core';
+import { registerPrefetch } from "../core";
 import { isBrowser } from "../common";
 import prefetch from "./prefetch";
 import { formatServer } from "./utils";

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

@@ -3,10 +3,10 @@ import fs from 'fs';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { run } from '@modern-js/utils/ssr';
 import { LOADABLE_STATS_FILE } from '@modern-js/utils/constants';
-import { ChunkExtractor } from '@loadable/server'; // todo: SSRContext
-
+import { ChunkExtractor } from '@loadable/server';
 import { jsx as _jsx } from "react/jsx-runtime";
 
+// todo: SSRContext
 const prefetch = async (App, context) => run(context.ssrContext.request.headers, async () => {
   var _context$store;
 

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

@@ -1,5 +1,5 @@
-import { RuntimeContext } from '@modern-js/runtime-core';
 import { run } from '@modern-js/utils/ssr';
+import { RuntimeContext } from "../../core";
 import { PreRender } from "../react/prerender";
 import SSREntry from "./entry";
 import { time } from "./measure";

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

@@ -1,4 +1,4 @@
-import { ServerStyleSheet } from '@modern-js/runtime-core/styled';
+import { ServerStyleSheet } from 'styled-components';
 export const toHtml = (jsx, renderer, next) => {
   const sheet = new ServerStyleSheet();
   const html = next(sheet.collectStyles(jsx));

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

@@ -19,19 +19,25 @@ export const formatServer = request => {
 
 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;
 }, {});
 
 export 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/modern/state/runtime/plugin.js

@@ -5,10 +5,10 @@ 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 { useContext } from 'react';
-import { RuntimeReactContext } from '@modern-js/runtime-core';
 import { createStore } from '@modern-js-reduck/store';
 import { Provider } from '@modern-js-reduck/react';
 import hoistNonReactStatics from 'hoist-non-react-statics';
+import { RuntimeReactContext } from "../../core";
 import { isBrowser } from "../../common";
 import { jsx as _jsx } from "react/jsx-runtime";
 

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: {},
@@ -39,10 +40,9 @@ var _default = () => ({
                * 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/node/core/app-config.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getConfig = exports.defineConfig = void 0;
+const APP_CONFIG_SYMBOL = 'config';
+
+const getConfig = Component => // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-expect-error
+Component[APP_CONFIG_SYMBOL];
+
+exports.getConfig = getConfig;
+
+const defineConfig = (Component, config) => {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+  // @ts-expect-error
+  Component[APP_CONFIG_SYMBOL] = config;
+  return Component;
+};
+
+exports.defineConfig = defineConfig;

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

@@ -0,0 +1,271 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useRuntimeContext = exports.createApp = exports.bootstrap = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _reactDom = _interopRequireDefault(require("react-dom"));
+
+var _hoistNonReactStatics = _interopRequireDefault(require("hoist-non-react-statics"));
+
+var _plugin = require("./plugin");
+
+var _runtimeContext = require("./runtime-context");
+
+var _loaderManager = require("./loader/loaderManager");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const _excluded = ["context"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+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;
+}
+
+const runnerMap = new WeakMap();
+
+const getInitialContext = runner => ({
+  loaderManager: (0, _loaderManager.createLoaderManager)({}),
+  runner,
+  isBrowser: true
+});
+
+const createApp = ({
+  plugins
+}) => {
+  const appRuntime = _plugin.runtime.clone();
+
+  appRuntime.usePlugin(...plugins);
+  return App => {
+    const runner = appRuntime.init();
+
+    const WrapperComponent = props => {
+      const element = /*#__PURE__*/_react.default.createElement(App || _react.default.Fragment, _objectSpread({}, props), props.children);
+
+      const context = (0, _react.useContext)(_runtimeContext.RuntimeReactContext);
+      return runner.provide({
+        element,
+        props: _objectSpread({}, props),
+        context
+      }, {
+        onLast: ({
+          element
+        }) => element
+      });
+    };
+
+    if (App) {
+      (0, _hoistNonReactStatics.default)(WrapperComponent, App);
+    }
+
+    const HOCApp = runner.hoc({
+      App: WrapperComponent
+    }, {
+      onLast: ({
+        App
+      }) => {
+        const WrapComponent = _ref => {
+          var _contextValue;
+
+          let {
+            context
+          } = _ref,
+              props = _objectWithoutProperties(_ref, _excluded);
+
+          let 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: ({
+                context: context1
+              }) => {
+                var _App$init;
+
+                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__*/(0, _jsxRuntime.jsx)(_runtimeContext.RuntimeReactContext.Provider, {
+            value: contextValue,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(App, _objectSpread({}, props))
+          });
+        };
+
+        return (0, _hoistNonReactStatics.default)(WrapComponent, App);
+      }
+    });
+    runnerMap.set(HOCApp, runner);
+    return HOCApp;
+  };
+};
+
+exports.createApp = createApp;
+
+const bootstrap = async (BootApp,
+/**
+ * When csr, id is root id.
+ * When ssr, id is serverContext
+ */
+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`
+
+  if (!runner) {
+    App = createApp({
+      plugins: []
+    })(App);
+    runner = runnerMap.get(App);
+  }
+
+  const context = getInitialContext(runner);
+
+  const runInit = _context => runner.init({
+    context: _context
+  }, {
+    onLast: ({
+      context: context1
+    }) => {
+      var _App, _App$init2;
+
+      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) {
+    return /*#__PURE__*/_react.default.createElement(App, {
+      context
+    });
+  }
+
+  const isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
+
+  if (isBrowser) {
+    if (isClientArgs(id)) {
+      var _ssrData$data, _ssrData$data2;
+
+      const ssrData = window._SSR_DATA;
+      const loadersData = (ssrData === null || ssrData === void 0 ? void 0 : (_ssrData$data = ssrData.data) === null || _ssrData$data === void 0 ? void 0 : _ssrData$data.loadersData) || {};
+      const initialLoadersState = Object.keys(loadersData).reduce((res, key) => {
+        const loaderData = loadersData[key];
+
+        if (loaderData.loading !== false) {
+          return res;
+        }
+
+        res[key] = loaderData;
+        return res;
+      }, {});
+      Object.assign(context, _objectSpread({
+        loaderManager: (0, _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;
+      const initialData = await runInit(context);
+
+      if (initialData) {
+        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,
+        ModernRender,
+        ModernHydrate
+      }, {
+        onLast: ({
+          App
+        }) => {
+          ModernRender( /*#__PURE__*/_react.default.createElement(App, {
+            context
+          }));
+        }
+      });
+    } else {
+      throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
+    }
+  } else {
+    Object.assign(context, {
+      ssrContext: id,
+      isBrowser: false,
+      loaderManager: (0, _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
+      })
+    });
+    const initialData = await runInit(context);
+    context.initialData = initialData;
+    return runner.server({
+      App,
+      context
+    });
+  }
+};
+
+exports.bootstrap = bootstrap;
+
+const useRuntimeContext = () => {
+  const context = (0, _react.useContext)(_runtimeContext.RuntimeReactContext);
+  const memoizedContext = (0, _react.useMemo)(() => context.runner.pickContext({
+    context,
+    pickedContext: {}
+  }, {
+    onLast: ({
+      pickedContext
+    }) => pickedContext
+  }), [context]);
+  return memoizedContext;
+};
+
+exports.useRuntimeContext = useRuntimeContext;