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

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

@@ -3,7 +3,7 @@ import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
 import { run } from "@modern-js/runtime-utils/node";
-import React from "react";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
 import { getSSRConfigByEntry } from "../utils";
 var ShellChunkStatus;
@@ -49,11 +49,9 @@ function createRenderStreaming(createReadableStreamFromElement) {
                   onTiming = createOnTiming(options.onTiming);
                   htmlTemplate = resource.htmlTemplate, entryName = resource.entryName;
                   ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
-                  rootElement = React.cloneElement(serverRoot, {
-                    _internal_context: Object.assign(runtimeContext, {
-                      ssr: true
-                    })
-                  });
+                  rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+                    ssr: true
+                  }));
                   return [
                     4,
                     createReadableStreamFromElement(request, rootElement, {

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

@@ -3,10 +3,10 @@ import { _ as _to_consumable_array } from "@swc/helpers/_/_to_consumable_array";
 import { _ as _ts_generator } from "@swc/helpers/_/_ts_generator";
 import ReactHelmet from "react-helmet";
 import ReactDomServer from "react-dom/server";
-import React from "react";
 import { time } from "@modern-js/runtime-utils/time";
 import { run } from "@modern-js/runtime-utils/node";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { createReplaceHelemt } from "../helmet";
 import { getSSRConfigByEntry, safeReplace } from "../utils";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants";
@@ -93,11 +93,9 @@ var renderString = function() {
                     nonce: config.nonce
                   })
                 ];
-                rootElement = React.cloneElement(serverRoot, {
-                  _internal_context: Object.assign(runtimeContext, {
-                    ssr: true
-                  })
-                });
+                rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+                  ssr: true
+                }));
                 return [
                   4,
                   generateHtml(rootElement, htmlTemplate, chunkSet, collectors, ((_runtimeContext_ssrContext = runtimeContext.ssrContext) === null || _runtimeContext_ssrContext === void 0 ? void 0 : _runtimeContext_ssrContext.htmlModifiers) || [], tracer)

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

@@ -5,7 +5,7 @@ import { run } from "@modern-js/runtime-utils/node";
 import { ChunkExtractor } from "@loadable/server";
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
-import React from "react";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { SSRErrors, SSRTimings } from "../tracer";
 var prefetch = function() {
   var _ref = _async_to_generator(function(App, request, options, ssrConfig, param) {
@@ -32,17 +32,13 @@ var prefetch = function() {
                           entryName
                         ].filter(Boolean)
                       });
-                      renderToStaticMarkup(extractor.collectChunks(/* @__PURE__ */ React.cloneElement(App, {
-                        _internal_context: Object.assign(context, {
-                          ssr: false
-                        })
-                      })));
+                      renderToStaticMarkup(extractor.collectChunks(wrapRuntimeContextProvider(App, Object.assign(context, {
+                        ssr: false
+                      }))));
                     } else {
-                      renderToStaticMarkup(/* @__PURE__ */ React.cloneElement(App, {
-                        _internal_context: Object.assign(context, {
-                          ssr: false
-                        })
-                      }));
+                      renderToStaticMarkup(wrapRuntimeContextProvider(App, Object.assign(context, {
+                        ssr: false
+                      })));
                     }
                     cost = end();
                     onTiming(SSRTimings.PRERENDER, cost);

package/dist/esm-node/cli/ssr/index.js

@@ -52,6 +52,7 @@ const ssrPlugin = () => ({
     "@modern-js/runtime"
   ],
   setup: (api) => {
+    const appContext = api.useAppContext();
     return {
       // for bundle
       config() {
@@ -89,7 +90,19 @@ const ssrPlugin = () => ({
             }
           },
           tools: {
-            babel: babelHandler
+            babel: babelHandler,
+            bundlerChain: (chain, { isServer }) => {
+              if (isServer && appContext.moduleType === "module") {
+                chain.output.libraryTarget("module").set("chunkFormat", "module");
+                chain.output.library({
+                  type: "module"
+                });
+                chain.experiments({
+                  ...chain.get("experiments"),
+                  outputModule: true
+                });
+              }
+            }
           }
         };
       }

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

@@ -1,8 +1,8 @@
 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";
 const isReact18 = () => process.env.IS_REACT18 === "true";
 function hydrateRoot(App, context, ModernRender, ModernHydrate) {
@@ -34,38 +34,32 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
     if (renderLevel === RenderLevel.SERVER_RENDER) {
       const SSRApp = () => /* @__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((resolve) => {
         if (isReact18()) {
           loadableReady(() => {
             const SSRApp = () => /* @__PURE__ */ _jsx(WithCallback, {
               callback,
-              children: /* @__PURE__ */ React.cloneElement(App, {
-                _internal_context: hydrateContext
-              })
+              children: App
             });
-            ModernHydrate(/* @__PURE__ */ _jsx(SSRApp, {})).then((root) => {
+            ModernHydrate(wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(SSRApp, {}), hydrateContext)).then((root) => {
               resolve(root);
             });
           });
         } else {
           loadableReady(() => {
-            ModernHydrate(/* @__PURE__ */ React.cloneElement(App, {
-              _internal_context: hydrateContext
-            }), callback).then((root) => {
+            ModernHydrate(wrapRuntimeContextProvider(App, hydrateContext), callback).then((root) => {
               resolve(root);
             });
           });
@@ -73,7 +67,7 @@ function hydrateRoot(App, context, ModernRender, ModernHydrate) {
       });
     } else {
       console.warn(`unknow render level: ${renderLevel}, execute render()`);
-      return ModernRender(App);
+      return ModernRender(wrapRuntimeContextProvider(App, context));
     }
   }
 }

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

@@ -1,9 +1,9 @@
-import React from "react";
 import cookieTool from "cookie";
 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 { hydrateRoot } from "./hydrate";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
 function getSSRData() {
@@ -66,9 +66,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__ */ React.cloneElement(App2, {
-        _internal_context: context
-      }), rootElement);
+      return renderFunc(App2, rootElement);
     }
     async function ModernHydrate(App2, callback) {
       const hydrateFunc = IS_REACT18 ? hydrateWithReact18 : hydrateWithReact17;
@@ -77,7 +75,7 @@ async function render(App, id) {
     if (ssrData) {
       return hydrateRoot(App, context, ModernRender, ModernHydrate);
     }
-    return ModernRender(App);
+    return ModernRender(wrapRuntimeContextProvider(App, context));
   }
   throw Error("`render` function needs id in browser environment, it needs to be string or element");
 }

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

@@ -7,6 +7,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";
 const IS_REACT18 = process.env.IS_REACT18 === "true";
 function isClientArgs(id) {
   return typeof id === "string" || typeof HTMLElement !== "undefined" && id instanceof HTMLElement;
@@ -31,23 +32,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 = getGlobalAppInit()) === null || _getGlobalAppInit === void 0 ? void 0 : _getGlobalAppInit(contextValue);
-      }
+    const WrapComponent = (props) => {
       const mergedProps = {
         ...props,
         ...globalProps
       };
-      return /* @__PURE__ */ _jsx(RuntimeReactContext.Provider, {
-        value: contextValue,
-        children: /* @__PURE__ */ _jsx(WrapperApp, {
-          ...mergedProps
-        })
+      return /* @__PURE__ */ _jsx(WrapperApp, {
+        ...mergedProps
       });
     };
     return WrapComponent;
@@ -63,9 +54,7 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
     return init === null || init === void 0 ? void 0 : init(context2);
   };
   if (!id) {
-    return /* @__PURE__ */ React.createElement(App, {
-      _internal_context: context
-    });
+    return wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(App, {}), context);
   }
   const isBrowser = typeof window !== "undefined" && window.name !== "nodejs";
   if (isBrowser) {
@@ -136,9 +125,7 @@ const bootstrap = async (BootApp, id, root, ReactDOM) => {
       if (ssrData) {
         return ModernHydrateRoot(/* @__PURE__ */ _jsx(App, {}), context, ModernRender, ModernHydrate);
       }
-      return ModernRender(/* @__PURE__ */ React.createElement(App, {
-        _internal_context: context
-      }));
+      return ModernRender(wrapRuntimeContextProvider(/* @__PURE__ */ _jsx(App, {}), context));
     } else {
       throw Error("`bootstrap` needs id in browser environment, it needs to be string or element");
     }

package/dist/esm-node/core/react/index.js

@@ -1,19 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { RuntimeReactContext, getGlobalApp } from "../context";
+import { getGlobalApp } from "../context";
 import { getGlobalRunner } from "../plugin/runner";
 function createRoot(UserApp) {
   const App = UserApp || getGlobalApp();
   const runner = getGlobalRunner();
   const WrapperApp = runner.wrapRoot(App);
-  const WrapComponent = ({ _internal_context, ...props }) => {
-    return /* @__PURE__ */ _jsx(RuntimeReactContext.Provider, {
-      value: _internal_context,
-      children: /* @__PURE__ */ _jsx(WrapperApp, {
-        ...props
-      })
-    });
-  };
-  return WrapComponent;
+  return WrapperApp;
 }
 export {
   createRoot

package/dist/esm-node/core/react/wrapper.js

@@ -0,0 +1,10 @@
+import React from "react";
+import { RuntimeReactContext } from "../context";
+function wrapRuntimeContextProvider(App, contextValue) {
+  return /* @__PURE__ */ React.createElement(RuntimeReactContext.Provider, {
+    value: contextValue
+  }, App);
+}
+export {
+  wrapRuntimeContextProvider
+};

package/dist/esm-node/core/server/stream/shared.js

@@ -1,7 +1,7 @@
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
 import { run } from "@modern-js/runtime-utils/node";
-import React from "react";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { SSRErrors, SSRTimings, createOnError, createOnTiming } from "../tracer";
 import { getSSRConfigByEntry } from "../utils";
 var ShellChunkStatus;
@@ -38,11 +38,9 @@ function createRenderStreaming(createReadableStreamFromElement) {
       const onTiming = createOnTiming(options.onTiming);
       const { htmlTemplate, entryName } = resource;
       const ssrConfig = getSSRConfigByEntry(entryName, config.ssr, config.ssrByEntries);
-      const rootElement = React.cloneElement(serverRoot, {
-        _internal_context: Object.assign(runtimeContext, {
-          ssr: true
-        })
-      });
+      const rootElement = wrapRuntimeContextProvider(serverRoot, Object.assign(runtimeContext, {
+        ssr: true
+      }));
       const stream = await createReadableStreamFromElement(request, rootElement, {
         config,
         htmlTemplate,

package/dist/esm-node/core/server/string/index.js

@@ -1,9 +1,9 @@
 import ReactHelmet from "react-helmet";
 import ReactDomServer from "react-dom/server";
-import React from "react";
 import { time } from "@modern-js/runtime-utils/time";
 import { run } from "@modern-js/runtime-utils/node";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { createReplaceHelemt } from "../helmet";
 import { getSSRConfigByEntry, safeReplace } from "../utils";
 import { CHUNK_CSS_PLACEHOLDER, CHUNK_JS_PLACEHOLDER, HTML_PLACEHOLDER, SSR_DATA_PLACEHOLDER } from "../constants";
@@ -61,11 +61,9 @@ const renderString = async (request, serverRoot, options) => {
         nonce: config.nonce
       })
     ];
-    const rootElement = React.cloneElement(serverRoot, {
-      _internal_context: Object.assign(runtimeContext, {
-        ssr: true
-      })
-    });
+    const rootElement = 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/esm-node/core/server/string/prefetch.js

@@ -3,7 +3,7 @@ import { run } from "@modern-js/runtime-utils/node";
 import { ChunkExtractor } from "@loadable/server";
 import { time } from "@modern-js/runtime-utils/time";
 import { parseHeaders } from "@modern-js/runtime-utils/universal/request";
-import React from "react";
+import { wrapRuntimeContextProvider } from "../../react/wrapper";
 import { SSRErrors, SSRTimings } from "../tracer";
 const prefetch = async (App, request, options, ssrConfig, { onError, onTiming }) => {
   const headersData = parseHeaders(request);
@@ -21,17 +21,13 @@ const prefetch = async (App, request, options, ssrConfig, { onError, onTiming })
               entryName
             ].filter(Boolean)
           });
-          renderToStaticMarkup(extractor.collectChunks(/* @__PURE__ */ React.cloneElement(App, {
-            _internal_context: Object.assign(context, {
-              ssr: false
-            })
-          })));
+          renderToStaticMarkup(extractor.collectChunks(wrapRuntimeContextProvider(App, Object.assign(context, {
+            ssr: false
+          }))));
         } else {
-          renderToStaticMarkup(/* @__PURE__ */ React.cloneElement(App, {
-            _internal_context: Object.assign(context, {
-              ssr: false
-            })
-          }));
+          renderToStaticMarkup(wrapRuntimeContextProvider(App, Object.assign(context, {
+            ssr: false
+          })));
         }
         const cost = end();
         onTiming(SSRTimings.PRERENDER, cost);