@modern-js/runtime 1.5.0 → 1.16.1

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/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 { RuntimeReactContext } from "../runtime-context";
 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/core/index.js

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

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

@@ -2,7 +2,7 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import { useContext, useRef, useMemo, useState, useCallback, useEffect } from 'react';
 import invariant from 'invariant';
-import { RuntimeReactContext } from "../runtime-context";
+import { RuntimeReactContext } from "../../runtime-context";
 import { LoaderStatus } from "./loaderManager";
 
 var useLoader = function useLoader(loaderFn) {

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,13 +84,17 @@ 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) {
+            context.ssrContext = _objectSpread(_objectSpread({}, context.ssrContext), {}, {
+              response: mockResp,
+              request: formatClient({})
+            });
             return next({
               context: context
             });
@@ -94,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/index.node.js

@@ -19,7 +19,8 @@ var plugin = function plugin() {
       return {
         server: function () {
           var _server = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee(_ref) {
-            var App, context, html;
+            var App, context, _context$ssrContext, html;
+
             return _regeneratorRuntime().wrap(function _callee$(_context2) {
               while (1) {
                 switch (_context2.prev = _context2.next) {
@@ -39,7 +40,7 @@ var plugin = function plugin() {
                     }
 
                     _context2.next = 5;
-                    return require("./serverRender").render(context, (context === null || context === void 0 ? void 0 : context.ssrContext.distDir) || path.join(process.cwd(), 'dist'), App);
+                    return require("./serverRender").render(context, (context === null || context === void 0 ? void 0 : (_context$ssrContext = context.ssrContext) === null || _context$ssrContext === void 0 ? void 0 : _context$ssrContext.distDir) || path.join(process.cwd(), 'dist'), App);
 
                   case 5:
                     html = _context2.sent;
@@ -64,19 +65,21 @@ var plugin = function plugin() {
         }(),
         init: function init(_ref2, next) {
           var context = _ref2.context;
-          var request = context.ssrContext.request;
+          var _ref3 = context.ssrContext,
+              request = _ref3.request;
           context.ssrContext.request = formatServer(request);
           return next({
             context: context
           });
         },
-        pickContext: function pickContext(_ref3, next) {
-          var context = _ref3.context,
-              pickedContext = _ref3.pickedContext;
+        pickContext: function pickContext(_ref4, next) {
+          var context = _ref4.context,
+              pickedContext = _ref4.pickedContext;
 
-          var _context$ssrContext = context === null || context === void 0 ? void 0 : context.ssrContext,
-              request = _context$ssrContext.request,
-              response = _context$ssrContext.response;
+          // eslint-disable-next-line @typescript-eslint/no-non-null-asserted-optional-chain
+          var _ref5 = context === null || context === void 0 ? void 0 : context.ssrContext,
+              request = _ref5.request,
+              response = _ref5.response;
 
           var initialData = context.initialData;
           return next({

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

@@ -1,7 +1,6 @@
 import _regeneratorRuntime from "@babel/runtime/helpers/esm/regeneratorRuntime";
 import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
 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/treeshaking/ssr/utils.js

@@ -22,20 +22,25 @@ var getQuery = function getQuery() {
         key = _item$split2[0],
         value = _item$split2[1];
 
-    res[key] = value;
+    if (key) {
+      res[key] = value;
+    }
+
     return res;
   }, {});
 };
 
 export var formatClient = function 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/types/core/compatible.d.ts

@@ -1,13 +1,17 @@
 import React from 'react';
+import { TRuntimeContext } from '../runtime-context';
 import { Plugin } from './plugin';
-import { TRuntimeContext } from './runtime-context';
 export declare type CreateAppOptions = {
   plugins: Plugin[];
 };
 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/index.d.ts

@@ -3,7 +3,7 @@ export type { Plugin } from './plugin';
 export { defineConfig, getConfig } from './app-config';
 export type { AppConfig } from './app-config';
 export * from './compatible';
-export type { TRuntimeContext, RuntimeContext } from './runtime-context';
-export { RuntimeReactContext } from './runtime-context';
+export type { TRuntimeContext, RuntimeContext } from '../runtime-context';
+export { RuntimeReactContext } from '../runtime-context';
 export * from './loader';
 export * from '@modern-js/plugin';

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

@@ -1,6 +1,6 @@
 import type React from 'react';
 import { Setup, ToThreads, CommonAPI, PluginOptions } from '@modern-js/plugin';
-import type { RuntimeContext, TRuntimeContext } from './runtime-context';
+import type { RuntimeContext, TRuntimeContext } from '../runtime-context';
 export interface AppProps {}
 declare const runtimeHooks: {
   hoc: import("@modern-js/plugin").Pipeline<{
@@ -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/index.d.ts

@@ -1,6 +1,7 @@
 import type { StateConfig } from './state';
 import type { RouterConfig } from './router';
-export type { Plugin, RuntimeContext, TRuntimeContext, AppConfig } from './core';
+export type { Plugin, AppConfig } from './core';
+export type { BaseRuntimeContext, RuntimeContext, BaseTRuntimeContext, TRuntimeContext } from './runtime-context';
 export { createApp, createPlugin, useLoader, bootstrap, RuntimeReactContext, registerPrefetch, defineConfig, registerInit, useRuntimeContext } from './core';
 export { StateConfig, RouterConfig };
 declare module './core' {

package/dist/types/runtime-context.d.ts

@@ -0,0 +1,24 @@
+/// <reference types="react" />
+import { Store } from '@modern-js-reduck/store';
+import { createLoaderManager } from './core/loader/loaderManager';
+import { runtime } from './core/plugin';
+import { SSRServerContext } from './ssr/serverRender/type';
+export interface BaseRuntimeContext {
+  loaderManager: ReturnType<typeof createLoaderManager>;
+  runner: ReturnType<typeof runtime.init>;
+  ssrContext?: SSRServerContext;
+  store?: Store;
+}
+export interface RuntimeContext extends BaseRuntimeContext {
+  [key: string]: any;
+}
+export declare const RuntimeReactContext: import("react").Context<RuntimeContext>;
+export interface BaseTRuntimeContext {
+  initialData?: Record<string, unknown>;
+  request?: SSRServerContext['request'];
+  response?: SSRServerContext['response'];
+  store?: Store;
+}
+export interface TRuntimeContext extends BaseTRuntimeContext {
+  [key: string]: any;
+}