@modern-js/runtime 2.57.1 → 2.57.2-alpha.1

package/dist/cjs/core/browser/hydrate.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var hydrate_exports = {};
 __export(hydrate_exports, {
@@ -35,8 +25,8 @@ module.exports = __toCommonJS(hydrate_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_url = require("@modern-js/runtime-utils/url");
 var import_component = require("@loadable/component");
-var import_react = __toESM(require("react"));
 var import_constants = require("../constants");
+var import_wrapper = require("../react/wrapper");
 var import_withCallback = require("./withCallback");
 const isReact18 = () => process.env.IS_REACT18 === "true";
 function hydrateRoot(App, context, ModernRender, ModernHydrate) {
@@ -68,38 +58,32 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     if (renderLevel === import_constants.RenderLevel.SERVER_RENDER) {
       const SSRApp = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_withCallback.WithCallback, {
         callback,
-        children: /* @__PURE__ */ import_react.default.cloneElement(App, {
-          _internal_context: hydrateContext
-        })
+        children: App
       });
-      return ModernHydrate(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRApp, {}));
+      return ModernHydrate((0, import_wrapper.wrapRuntimeContextProvider)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRApp, {}), hydrateContext));
     } else {
-      return ModernRender(App);
+      return ModernRender((0, import_wrapper.wrapRuntimeContextProvider)(App, context));
     }
   }
   return stringSSRHydrate();
   function stringSSRHydrate() {
     if (renderLevel === import_constants.RenderLevel.CLIENT_RENDER || renderLevel === import_constants.RenderLevel.SERVER_PREFETCH) {
-      return ModernRender(App);
+      return ModernRender((0, import_wrapper.wrapRuntimeContextProvider)(App, context));
     } else if (renderLevel === import_constants.RenderLevel.SERVER_RENDER) {
       return new Promise((resolve) => {
         if (isReact18()) {
           (0, import_component.loadableReady)(() => {
             const SSRApp = () => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_withCallback.WithCallback, {
               callback,
-              children: /* @__PURE__ */ import_react.default.cloneElement(App, {
-                _internal_context: hydrateContext
-              })
+              children: App
             });
-            ModernHydrate(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRApp, {})).then((root) => {
+            ModernHydrate((0, import_wrapper.wrapRuntimeContextProvider)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SSRApp, {}), hydrateContext)).then((root) => {
               resolve(root);
             });
           });
         } else {
           (0, import_component.loadableReady)(() => {
-            ModernHydrate(/* @__PURE__ */ import_react.default.cloneElement(App, {
-              _internal_context: hydrateContext
-            }), callback).then((root) => {
+            ModernHydrate((0, import_wrapper.wrapRuntimeContextProvider)(App, hydrateContext), callback).then((root) => {
               resolve(root);
             });
           });
@@ -107,7 +91,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
       });
     } else {
       console.warn(`unknow render level: ${renderLevel}, execute render()`);
-      return ModernRender(App);
+      return ModernRender((0, import_wrapper.wrapRuntimeContextProvider)(App, context));
     }
   }
 }

package/dist/cjs/core/browser/index.js

@@ -31,12 +31,14 @@ __export(browser_exports, {
   render: () => render
 });
 module.exports = __toCommonJS(browser_exports);
-var import_react = __toESM(require("react"));
 var import_cookie = __toESM(require("cookie"));
+var import_parsed = require("@modern-js/runtime-utils/parsed");
 var import_context = require("../context");
 var import_runtime = require("../context/runtime");
 var import_loaderManager = require("../loader/loaderManager");
 var import_runner = require("../plugin/runner");
+var import_wrapper = require("../react/wrapper");
+var import_constants = require("../constants");
 var import_hydrate = require("./hydrate");
 const IS_REACT18 = process.env.IS_REACT18 === "true";
 function getSSRData() {
@@ -71,6 +73,9 @@ async function render(App, id) {
   };
   if (isClientArgs(id)) {
     var _ssrData_data, _ssrData_data1;
+    window._SSR_DATA = window._SSR_DATA || (0, import_parsed.parsedJSONFromElement)(import_constants.SSR_DATA_JSON_ID);
+    const routeData = (0, import_parsed.parsedJSONFromElement)(import_constants.ROUTER_DATA_JSON_ID);
+    window._ROUTER_DATA = window._ROUTER_DATA || routeData;
     const ssrData = getSSRData();
     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) => {
@@ -99,9 +104,7 @@ async function render(App, id) {
     const rootElement = id && typeof id !== "string" ? id : document.getElementById(id || "root");
     async function ModernRender(App2) {
       const renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
-      return renderFunc(/* @__PURE__ */ import_react.default.cloneElement(App2, {
-        _internal_context: context
-      }), rootElement);
+      return renderFunc(App2, rootElement);
     }
     async function ModernHydrate(App2, callback) {
       const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
@@ -110,7 +113,7 @@ async function render(App, id) {
     if (ssrData) {
       return (0, import_hydrate.hydrateRoot)(App, context, ModernRender, ModernHydrate);
     }
-    return ModernRender(App);
+    return ModernRender((0, import_wrapper.wrapRuntimeContextProvider)(App, context));
   }
   throw Error("`render` function needs id in browser environment, it needs to be string or element");
 }

package/dist/cjs/core/compatible.js

@@ -42,6 +42,7 @@ var import_loaderManager = require("./loader/loaderManager");
 var import_runner = require("./plugin/runner");
 var import_context = require("./context");
 var import_hydrate = require("./browser/hydrate");
+var import_wrapper = require("./react/wrapper");
 const IS_REACT18 = process.env.IS_REACT18 === "true";
 function isClientArgs(id) {
   return typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
@@ -66,23 +67,13 @@ const createApp = ({ plugins, runtime, props: globalProps }) => {
       }) : child));
     };
     const WrapperApp = runner.wrapRoot(WrapperComponent);
-    const WrapComponent = ({ _internal_context, ...props }) => {
-      let contextValue = _internal_context;
-      if (!(contextValue === null || contextValue === void 0 ? void 0 : contextValue.runner)) {
-        var _getGlobalAppInit;
-        contextValue = getInitialContext(runner);
-        runner === null || runner === void 0 ? void 0 : runner.beforeRender(contextValue);
-        (_getGlobalAppInit = (0, import_context.getGlobalAppInit)()) === null || _getGlobalAppInit === void 0 ? void 0 : _getGlobalAppInit(contextValue);
-      }
+    const WrapComponent = (props) => {
       const mergedProps = {
         ...props,
         ...globalProps
       };
-      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_runtime.RuntimeReactContext.Provider, {
-        value: contextValue,
-        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrapperApp, {
-          ...mergedProps
-        })
+      return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrapperApp, {
+        ...mergedProps
       });
     };
     return WrapComponent;
@@ -98,9 +89,7 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
     return init === null || init === void 0 ? void 0 : init(context2);
   };
   if (!id) {
-    return /* @__PURE__ */ import_react.default.createElement(App, {
-      _internal_context: context
-    });
+    return (0, import_wrapper.wrapRuntimeContextProvider)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}), context);
   }
   const isBrowser = typeof window !== "undefined" && window.name !== "nodejs";
   if (isBrowser) {
@@ -171,9 +160,7 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
       if (ssrData) {
         return (0, import_hydrate.hydrateRoot)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}), context, ModernRender, ModernHydrate);
       }
-      return ModernRender(/* @__PURE__ */ import_react.default.createElement(App, {
-        _internal_context: context
-      }));
+      return ModernRender((0, import_wrapper.wrapRuntimeContextProvider)(/* @__PURE__ */ (0, import_jsx_runtime.jsx)(App, {}), context));
     } else {
       throw Error("`bootstrap` needs id in browser environment, it needs to be string or element");
     }

package/dist/cjs/core/constants.js

@@ -18,7 +18,9 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var constants_exports = {};
 __export(constants_exports, {
-  RenderLevel: () => RenderLevel
+  ROUTER_DATA_JSON_ID: () => ROUTER_DATA_JSON_ID,
+  RenderLevel: () => RenderLevel,
+  SSR_DATA_JSON_ID: () => SSR_DATA_JSON_ID
 });
 module.exports = __toCommonJS(constants_exports);
 var RenderLevel;
@@ -27,7 +29,11 @@ var RenderLevel;
   RenderLevel2[RenderLevel2["SERVER_PREFETCH"] = 1] = "SERVER_PREFETCH";
   RenderLevel2[RenderLevel2["SERVER_RENDER"] = 2] = "SERVER_RENDER";
 })(RenderLevel || (RenderLevel = {}));
+const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
+const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  RenderLevel
+  ROUTER_DATA_JSON_ID,
+  RenderLevel,
+  SSR_DATA_JSON_ID
 });

package/dist/cjs/core/context/index.js

@@ -24,6 +24,7 @@ __export(context_exports, {
   getGlobalAppInit: () => getGlobalAppInit,
   getGlobalLayoutApp: () => getGlobalLayoutApp,
   getGlobalRoutes: () => getGlobalRoutes,
+  getInitialContext: () => import_runtime.getInitialContext,
   setGlobalContext: () => setGlobalContext
 });
 module.exports = __toCommonJS(context_exports);
@@ -61,5 +62,6 @@ function getGlobalLayoutApp() {
   getGlobalAppInit,
   getGlobalLayoutApp,
   getGlobalRoutes,
+  getInitialContext,
   setGlobalContext
 });

package/dist/cjs/core/react/index.js

@@ -21,22 +21,13 @@ __export(react_exports, {
   createRoot: () => createRoot
 });
 module.exports = __toCommonJS(react_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
 var import_context = require("../context");
 var import_runner = require("../plugin/runner");
 function createRoot(UserApp) {
   const App = UserApp || (0, import_context.getGlobalApp)();
   const runner = (0, import_runner.getGlobalRunner)();
   const WrapperApp = runner.wrapRoot(App);
-  const WrapComponent = ({ _internal_context, ...props }) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_context.RuntimeReactContext.Provider, {
-      value: _internal_context,
-      children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(WrapperApp, {
-        ...props
-      })
-    });
-  };
-  return WrapComponent;
+  return WrapperApp;
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {

package/dist/cjs/core/react/wrapper.js

@@ -0,0 +1,44 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var wrapper_exports = {};
+__export(wrapper_exports, {
+  wrapRuntimeContextProvider: () => wrapRuntimeContextProvider
+});
+module.exports = __toCommonJS(wrapper_exports);
+var import_react = __toESM(require("react"));
+var import_context = require("../context");
+function wrapRuntimeContextProvider(App, contextValue) {
+  return /* @__PURE__ */ import_react.default.createElement(import_context.RuntimeReactContext.Provider, {
+    value: contextValue
+  }, App);
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  wrapRuntimeContextProvider
+});

package/dist/cjs/core/server/constants.js

@@ -21,8 +21,6 @@ __export(constants_exports, {
   CHUNK_CSS_PLACEHOLDER: () => CHUNK_CSS_PLACEHOLDER,
   CHUNK_JS_PLACEHOLDER: () => CHUNK_JS_PLACEHOLDER,
   HTML_PLACEHOLDER: () => HTML_PLACEHOLDER,
-  ROUTER_DATA_JSON_ID: () => ROUTER_DATA_JSON_ID,
-  SSR_DATA_JSON_ID: () => SSR_DATA_JSON_ID,
   SSR_DATA_PLACEHOLDER: () => SSR_DATA_PLACEHOLDER
 });
 module.exports = __toCommonJS(constants_exports);
@@ -30,14 +28,10 @@ const HTML_PLACEHOLDER = "<!--<?- html ?>-->";
 const SSR_DATA_PLACEHOLDER = "<!--<?- SSRDataScript ?>-->";
 const CHUNK_JS_PLACEHOLDER = "<!--<?- chunksMap.js ?>-->";
 const CHUNK_CSS_PLACEHOLDER = "<!--<?- chunksMap.css ?>-->";
-const SSR_DATA_JSON_ID = "__MODERN_SSR_DATA__";
-const ROUTER_DATA_JSON_ID = "__MODERN_ROUTER_DATA__";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   CHUNK_CSS_PLACEHOLDER,
   CHUNK_JS_PLACEHOLDER,
   HTML_PLACEHOLDER,
-  ROUTER_DATA_JSON_ID,
-  SSR_DATA_JSON_ID,
   SSR_DATA_PLACEHOLDER
 });

package/dist/cjs/core/server/stream/shared.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var shared_exports = {};
 __export(shared_exports, {
@@ -37,7 +27,7 @@ module.exports = __toCommonJS(shared_exports);
 var import_time = require("@modern-js/runtime-utils/time");
 var import_request = require("@modern-js/runtime-utils/universal/request");
 var import_node = require("@modern-js/runtime-utils/node");
-var import_react = __toESM(require("react"));
+var import_wrapper = require("../../react/wrapper");
 var import_tracer = require("../tracer");
 var import_utils = require("../utils");
 var ShellChunkStatus;
@@ -74,11 +64,9 @@ function createRenderStreaming(createReadableStreamFromElement) {
       const onTiming = (0, import_tracer.createOnTiming)(options.onTiming);
       const { htmlTemplate, entryName } = resource;
       const ssrConfig = (0, import_utils.getSSRConfigByEntry)(entryName, config.ssr, config.ssrByEntries);
-      const rootElement = import_react.default.cloneElement(serverRoot, {
-        _internal_context: Object.assign(runtimeContext, {
-          ssr: true
-        })
-      });
+      const rootElement = (0, import_wrapper.wrapRuntimeContextProvider)(serverRoot, Object.assign(runtimeContext, {
+        ssr: true
+      }));
       const stream = await createReadableStreamFromElement(request, rootElement, {
         config,
         htmlTemplate,

package/dist/cjs/core/server/string/index.js

@@ -33,10 +33,10 @@ __export(string_exports, {
 module.exports = __toCommonJS(string_exports);
 var import_react_helmet = __toESM(require("react-helmet"));
 var import_server = __toESM(require("react-dom/server"));
-var import_react = __toESM(require("react"));
 var import_time = require("@modern-js/runtime-utils/time");
 var import_node = require("@modern-js/runtime-utils/node");
 var import_request = require("@modern-js/runtime-utils/universal/request");
+var import_wrapper = require("../../react/wrapper");
 var import_helmet = require("../helmet");
 var import_utils = require("../utils");
 var import_constants = require("../constants");
@@ -94,11 +94,9 @@ const renderString = async (request, serverRoot, options) => {
         nonce: config.nonce
       })
     ];
-    const rootElement = import_react.default.cloneElement(serverRoot, {
-      _internal_context: Object.assign(runtimeContext, {
-        ssr: true
-      })
-    });
+    const rootElement = (0, import_wrapper.wrapRuntimeContextProvider)(serverRoot, Object.assign(runtimeContext, {
+      ssr: true
+    }));
     const html = await generateHtml(rootElement, htmlTemplate, chunkSet, collectors, ((_runtimeContext_ssrContext = runtimeContext.ssrContext) === null || _runtimeContext_ssrContext === void 0 ? void 0 : _runtimeContext_ssrContext.htmlModifiers) || [], tracer);
     return html;
   });

package/dist/cjs/core/server/string/prefetch.js

@@ -1,9 +1,7 @@
 "use strict";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var prefetch_exports = {};
 __export(prefetch_exports, {
@@ -36,7 +26,7 @@ var import_node = require("@modern-js/runtime-utils/node");
 var import_server2 = require("@loadable/server");
 var import_time = require("@modern-js/runtime-utils/time");
 var import_request = require("@modern-js/runtime-utils/universal/request");
-var import_react = __toESM(require("react"));
+var import_wrapper = require("../../react/wrapper");
 var import_tracer = require("../tracer");
 const prefetch = async (App, request, options, ssrConfig, { onError, onTiming }) => {
   const headersData = (0, import_request.parseHeaders)(request);
@@ -54,17 +44,13 @@ const prefetch = async (App, request, options, ssrConfig, { onError, onTiming })
               entryName
             ].filter(Boolean)
           });
-          (0, import_server.renderToStaticMarkup)(extractor.collectChunks(/* @__PURE__ */ import_react.default.cloneElement(App, {
-            _internal_context: Object.assign(context, {
-              ssr: false
-            })
-          })));
+          (0, import_server.renderToStaticMarkup)(extractor.collectChunks((0, import_wrapper.wrapRuntimeContextProvider)(App, Object.assign(context, {
+            ssr: false
+          }))));
         } else {
-          (0, import_server.renderToStaticMarkup)(/* @__PURE__ */ import_react.default.cloneElement(App, {
-            _internal_context: Object.assign(context, {
-              ssr: false
-            })
-          }));
+          (0, import_server.renderToStaticMarkup)((0, import_wrapper.wrapRuntimeContextProvider)(App, Object.assign(context, {
+            ssr: false
+          })));
         }
         const cost = end();
         onTiming(import_tracer.SSRTimings.PRERENDER, cost);

package/dist/cjs/core/server/string/ssrData.js

@@ -28,7 +28,7 @@ var import_class_private_method_get = require("@swc/helpers/_/_class_private_met
 var import_class_private_method_init = require("@swc/helpers/_/_class_private_method_init");
 var import_node = require("@modern-js/runtime-utils/node");
 var import_utils = require("../utils");
-var import_constants = require("../constants");
+var import_constants = require("../../constants");
 var _options = /* @__PURE__ */ new WeakMap(), _getSSRData = /* @__PURE__ */ new WeakSet(), _getSSRDataScripts = /* @__PURE__ */ new WeakSet();
 class SSRDataCollector {
   effect() {

package/dist/esm/core/browser/hydrate.js

@@ -3,8 +3,8 @@ import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { normalizePathname } from "@modern-js/runtime-utils/url";
 import { loadableReady } from "@loadable/component";
-import React from "react";
 import { RenderLevel } from "../constants";
+import { wrapRuntimeContextProvider } from "../react/wrapper";
 import { WithCallback } from "./withCallback";
 var isReact18 = function() {
   return process.env.IS_REACT18 === "true";
@@ -38,20 +38,18 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
       var SSRApp = function() {
         return /* @__PURE__ */ _jsx(WithCallback, {
           callback,
-          children: /* @__PURE__ */ React.cloneElement(App, {
-            _internal_context: hydrateContext
-          })
+          children: App
         });
       };
-      return ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {}));
+      return ModernHydrate(wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(SSRApp, {}), hydrateContext));
     } else {
-      return ModernRender(App);
+      return ModernRender(wrapRuntimeContextProvider(App, context));
     }
   }
   return stringSSRHydrate();
   function stringSSRHydrate() {
     if (renderLevel === RenderLevel.CLIENT_RENDER || renderLevel === RenderLevel.SERVER_PREFETCH) {
-      return ModernRender(App);
+      return ModernRender(wrapRuntimeContextProvider(App, context));
     } else if (renderLevel === RenderLevel.SERVER_RENDER) {
       return new Promise(function(resolve) {
         if (isReact18()) {
@@ -59,20 +57,16 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
             var SSRApp = function() {
               return /* @__PURE__ */ _jsx(WithCallback, {
                 callback,
-                children: /* @__PURE__ */ React.cloneElement(App, {
-                  _internal_context: hydrateContext
-                })
+                children: App
               });
             };
-            ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {})).then(function(root) {
+            ModernHydrate(wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(SSRApp, {}), hydrateContext)).then(function(root) {
               resolve(root);
             });
           });
         } else {
           loadableReady(function() {
-            ModernHydrate(/* @__PURE__ */ React.cloneElement(App, {
-              _internal_context: hydrateContext
-            }), callback).then(function(root) {
+            ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then(function(root) {
               resolve(root);
             });
           });
@@ -80,7 +74,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
       });
     } else {
       console.warn("unknow render level: ".concat(renderLevel, ", execute render()"));
-      return ModernRender(App);
+      return ModernRender(wrapRuntimeContextProvider(App, context));
     }
   }
 }

package/dist/esm/core/browser/index.js

@@ -3,12 +3,14 @@ import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
-import React from "react";
 import cookieTool from "cookie";
+import { parsedJSONFromElement } from "@modern-js/runtime-utils/parsed";
 import { getGlobalAppInit } from "../context";
 import { getInitialContext } from "../context/runtime";
 import { createLoaderManager } from "../loader/loaderManager";
 import { getGlobalRunner } from "../plugin/runner";
+import { wrapRuntimeContextProvider } from "../react/wrapper";
+import { ROUTER_DATA_JSON_ID, SSR_DATA_JSON_ID } from "../constants";
 import { hydrateRoot } from "./hydrate";
 var IS_REACT18 = process.env.IS_REACT18 === "true";
 function getSSRData() {
@@ -35,7 +37,7 @@ function render(App, id) {
 }
 function _render() {
   _render = _async_to_generator(function(App, id) {
-    var runner, context, runBeforeRender, ModernRender, ModernHydrate, _ssrData_data, _ssrData_data1, ssrData, loadersData, initialLoadersState, initialData, rootElement;
+    var runner, context, runBeforeRender, ModernRender, ModernHydrate, _ssrData_data, _ssrData_data1, routeData, ssrData, loadersData, initialLoadersState, initialData, rootElement;
     function _ModernRender() {
       _ModernRender = _async_to_generator(function(App2) {
         var renderFunc;
@@ -43,9 +45,7 @@ function _render() {
           renderFunc = IS_REACT18 ? renderWithReact18 : renderWithReact17;
           return [
             2,
-            renderFunc(/* @__PURE__ */ React.cloneElement(App2, {
-              _internal_context: context
-            }), rootElement)
+            renderFunc(App2, rootElement)
           ];
         });
       });
@@ -104,6 +104,9 @@ function _render() {
           ModernHydrate = function ModernHydrate2(App2, callback) {
             return _ModernHydrate.apply(this, arguments);
           };
+          window._SSR_DATA = window._SSR_DATA || parsedJSONFromElement(SSR_DATA_JSON_ID);
+          routeData = parsedJSONFromElement(ROUTER_DATA_JSON_ID);
+          window._ROUTER_DATA = window._ROUTER_DATA || routeData;
           ssrData = getSSRData();
           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) {
@@ -142,7 +145,7 @@ function _render() {
           }
           return [
             2,
-            ModernRender(App)
+            ModernRender(wrapRuntimeContextProvider(App, context))
           ];
         case 2:
           throw Error("`render` function needs id in browser environment, it needs to be string or element");

package/dist/esm/core/compatible.js

@@ -2,7 +2,6 @@ import { _ as _async_to_generator } from "@swc/helpers/_/_async_to_generator";
 import { _ as _instanceof } from "@swc/helpers/_/_instanceof";
 import { _ as _object_spread } from "@swc/helpers/_/_object_spread";
 import { _ as _object_spread_props } from "@swc/helpers/_/_object_spread_props";
-import { _ as _object_without_properties } from "@swc/helpers/_/_object_without_properties";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { jsx as _jsx } from "react/jsx-runtime";
 import React, { useContext, useMemo } from "react";
@@ -13,6 +12,7 @@ import { createLoaderManager } from "./loader/loaderManager";
 import { getGlobalRunner } from "./plugin/runner";
 import { getGlobalAppInit } from "./context";
 import { hydrateRoot as ModernHydrateRoot } from "./browser/hydrate";
+import { wrapRuntimeContextProvider } from "./react/wrapper";
 var IS_REACT18 = process.env.IS_REACT18 === "true";
 function isClientArgs(id) {
   return typeof id === "string" || typeof HTMLElement !== "undefined" && _instanceof(id, HTMLElement);
@@ -37,22 +37,9 @@ var createApp = function(param) {
       }));
     };
     var WrapperApp = runner.wrapRoot(WrapperComponent);
-    var WrapComponent = function(_param) {
-      var _internal_context = _param._internal_context, props = _object_without_properties(_param, [
-        "_internal_context"
-      ]);
-      var contextValue = _internal_context;
-      if (!(contextValue === null || contextValue === void 0 ? void 0 : contextValue.runner)) {
-        var _getGlobalAppInit;
-        contextValue = getInitialContext(runner);
-        runner === null || runner === void 0 ? void 0 : runner.beforeRender(contextValue);
-        (_getGlobalAppInit = getGlobalAppInit()) === null || _getGlobalAppInit === void 0 ? void 0 : _getGlobalAppInit(contextValue);
-      }
+    var WrapComponent = function(props) {
       var mergedProps = _object_spread({}, props, globalProps);
-      return /* @__PURE__ */ _jsx(RuntimeReactContext.Provider, {
-        value: contextValue,
-        children: /* @__PURE__ */ _jsx(WrapperApp, _object_spread({}, mergedProps))
-      });
+      return /* @__PURE__ */ _jsx(WrapperApp, _object_spread({}, mergedProps));
     };
     return WrapComponent;
   };
@@ -93,9 +80,7 @@ var bootstrap = function() {
           if (!id) {
             return [
               2,
-              /* @__PURE__ */ React.createElement(App, {
-                _internal_context: context
-              })
+              wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(App, {}), context)
             ];
           }
           isBrowser = typeof window !== "undefined" && window.name !== "nodejs";
@@ -183,9 +168,7 @@ var bootstrap = function() {
           }
           return [
             2,
-            ModernRender(/* @__PURE__ */ React.createElement(App, {
-              _internal_context: context
-            }))
+            ModernRender(wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(App, {}), context))
           ];
         case 2:
           throw Error("`bootstrap` needs id in browser environment, it needs to be string or element");