@modern-js/runtime 1.15.0 → 1.17.0

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, cleanRequireCache, isReact18 } from '@modern-js/utils';
 import PluginState from "../state/cli";
 import PluginSSR from "../ssr/cli";
 import PluginRouter from "../router/cli";
@@ -11,35 +11,29 @@ export default (function () {
     post: ['@modern-js/plugin-router', '@modern-js/plugin-ssr', '@modern-js/plugin-state', '@modern-js/plugin-design-token'],
     usePlugins: [PluginState(), PluginRouter(), PluginSSR()],
     setup: function setup(api) {
-      var runtimeExportsUtils = {};
       return {
         config: function config() {
-          var dir = api.useAppContext().internalDirectory;
-          runtimeExportsUtils = createRuntimeExportsUtils(dir, 'index');
+          var dir = api.useAppContext().internalDirectory || '';
+          process.env.IS_REACT18 = isReact18(path.join(dir, '../../')).toString();
           return {
             runtime: {},
             runtimeByEntries: {},
             source: {
               alias: {
-                '@modern-js/runtime$': runtimeExportsUtils.getPath(),
-
                 /**
                  * twin.macro inserts styled-components into the code during the compilation process
                  * But it will not be installed under the user project.
                  * So need to add alias
                  */
                 'styled-components': require.resolve('styled-components')
-              }
+              },
+              envVars: ['IS_REACT18']
             }
           };
         },
         validateSchema: function validateSchema() {
           return PLUGIN_SCHEMAS['@modern-js/runtime'];
         },
-        addRuntimeExports: function addRuntimeExports() {
-          var runtimePackage = path.resolve(__dirname, '../../../../');
-          runtimeExportsUtils.addExport("export * from '".concat(runtimePackage, "'"));
-        },
         beforeRestart: function beforeRestart() {
           return _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function _callee$(_context) {

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,34 @@ 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 ReactDOM,
+        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:
+            ReactDOM = _args.length > 3 && _args[3] !== undefined ? _args[3] : defaultReactDOM;
             App = BootApp;
             runner = runnerMap.get(App); // ensure Component used is created by `createApp`
 
@@ -133,7 +155,7 @@ export var bootstrap = /*#__PURE__*/function () {
 
 
             if (id) {
-              _context2.next = 7;
+              _context2.next = 8;
               break;
             }
 
@@ -141,16 +163,16 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 7:
+          case 8:
             isBrowser = typeof window !== 'undefined' && window.name !== 'nodejs';
 
             if (!isBrowser) {
-              _context2.next = 25;
+              _context2.next = 29;
               break;
             }
 
             if (!isClientArgs(id)) {
-              _context2.next = 22;
+              _context2.next = 26;
               break;
             }
 
@@ -174,38 +196,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 = 18;
             return runInit(context);
 
-          case 17:
+          case 18:
             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 || ReactDOM.createRoot(_rootElement)).render(App);
+              } else {
+                ReactDOM.render(App, _rootElement);
+              }
+            };
+
+            ModernHydrate = function ModernHydrate(App, callback) {
+              if (IS_REACT18) {
+                ReactDOM.hydrateRoot(_rootElement, App);
+              } else {
+                ReactDOM.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 26:
             throw Error('`bootstrap` needs id in browser environment, it needs to be string or element');
 
-          case 23:
-            _context2.next = 31;
+          case 27:
+            _context2.next = 35;
             break;
 
-          case 25:
+          case 29:
             Object.assign(context, {
               ssrContext: id,
               isBrowser: false,
@@ -215,10 +255,10 @@ export var bootstrap = /*#__PURE__*/function () {
                 skipStatic: process.env.NODE_ENV === 'production' && !id.staticGenerate
               })
             });
-            _context2.next = 28;
+            _context2.next = 32;
             return runInit(context);
 
-          case 28:
+          case 32:
             _initialData = _context2.sent;
             context.initialData = _initialData;
             return _context2.abrupt("return", runner.server({
@@ -226,7 +266,7 @@ export var bootstrap = /*#__PURE__*/function () {
               context: context
             }));
 
-          case 31:
+          case 35:
           case "end":
             return _context2.stop();
         }
@@ -234,7 +274,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

@@ -1,7 +1,7 @@
 export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from "./plugin";
-export { defineConfig, getConfig } from "./app-config";
-// compatible
+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;
-                    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);
+                    App = _ref.App, context = _ref.context, ModernRender = _ref.ModernRender, ModernHydrate = _ref.ModernHydrate;
+                    // if render level not exist, use client render
+                    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) || RenderLevel.CLIENT_RENDER; // client render and server prefetch use same logic
 
-                  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 || renderLevel === RenderLevel.SERVER_PREFETCH) {
+                      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, {
+                      console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
+                      ModernRender( /*#__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/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/types/common.d.ts

@@ -1 +1,8 @@
-export declare const isBrowser: () => boolean;
+import type { StateConfig } from './state';
+import type { RouterConfig } from './router';
+export declare const isBrowser: () => boolean;
+export interface AppConfig {
+  router?: RouterConfig | boolean;
+  state?: StateConfig | boolean;
+  [key: string]: any;
+}

package/dist/types/core/app-config.d.ts

@@ -1,6 +1,4 @@
 import type React from 'react';
-export interface AppConfig {
-  [key: string]: any;
-}
+import { AppConfig } from '../common';
 export declare const getConfig: (Component: React.ComponentType<any>) => AppConfig | undefined;
 export declare const defineConfig: (Component: React.ComponentType<any>, config: AppConfig) => React.ComponentType<any>;

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

@@ -1,13 +1,22 @@
 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, ReactDOM: {
+  render: (children: React.ReactNode, rootElement?: HTMLElement) => void;
+  hydrate: HydrateFunc;
+  createRoot?: (rootElement: HTMLElement) => any;
+  hydrateRoot: HydrateFunc;
+}) => Promise<T>;
 export declare const bootstrap: BootStrap;
 export declare const useRuntimeContext: () => TRuntimeContext;
 export {};

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

@@ -1,9 +1,8 @@
 export { createPlugin, createRuntime, runtime, registerInit, registerPrefetch } from './plugin';
 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/loader/useLoader.d.ts

@@ -2,6 +2,7 @@ import { LoaderResult } from './loaderManager';
 export interface SSRData {
   loadersData: Record<string, LoaderResult | undefined>;
   initialData?: Record<string, unknown>;
+  storeState?: any;
 }
 export interface SSRContainer {
   data?: SSRData;

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,11 +1,7 @@
 import type { StateConfig } from './state';
 import type { RouterConfig } from './router';
-export type { Plugin, RuntimeContext, TRuntimeContext, AppConfig } from './core';
+export type { Plugin } from './core';
+export type { AppConfig } from './common';
+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' {
-  interface AppConfig {
-    router?: RouterConfig | boolean;
-    state?: StateConfig | boolean;
-  }
-}
+export { StateConfig, RouterConfig };