@umijs/renderer-react 4.0.0-canary.20240514.2 → 4.0.0-canary.20240515.1

package/dist/browser.d.ts

@@ -28,6 +28,10 @@ export declare type RenderClientOpts = {
      * @doc 一般不需要改，微前端的时候会变化
      */
     rootElement?: HTMLElement;
+    /**
+     * 是否从根节点开始渲染, 默认 false, 即从 html 开始渲染
+     */
+    renderFromRoot?: boolean;
     /**
      * 内部流程, 渲染特殊 html 节点, 不要使用!!!
      */

package/dist/browser.js

@@ -280,7 +280,7 @@ export function renderClient(opts) {
       loaderData: loaderData,
       mountElementId: opts.mountElementId
     };
-    ReactDOM.hydrateRoot(opts.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED ? rootElement : document, /*#__PURE__*/React.createElement(Html, hydtateHtmloptions, /*#__PURE__*/React.createElement(Browser, null)));
+    ReactDOM.hydrateRoot(opts.renderFromRoot ? rootElement : document, /*#__PURE__*/React.createElement(Html, hydtateHtmloptions, /*#__PURE__*/React.createElement(Browser, null)));
     return;
   }
   if (ReactDOM.createRoot) {

package/dist/html.d.ts

@@ -1,3 +1,3 @@
 import React from 'react';
 import { IHtmlProps } from './types';
-export declare function Html({ children, loaderData, manifest, htmlPageOpts, __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;
+export declare function Html({ children, loaderData, manifest, htmlPageOpts, renderFromRoot, __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;

package/dist/html.js

@@ -9,6 +9,13 @@ var RE_URL = /^(http:|https:)?\/\//;
 function isUrl(str) {
   return RE_URL.test(str) || str.startsWith('/') && !str.startsWith('/*') || str.startsWith('./') || str.startsWith('../');
 }
+var EnableJsScript = function EnableJsScript() {
+  return /*#__PURE__*/React.createElement("noscript", {
+    dangerouslySetInnerHTML: {
+      __html: "<b>Enable JavaScript to run this app.</b>"
+    }
+  });
+};
 var GlobalDataScript = function GlobalDataScript(props) {
   var loaderData = props.loaderData,
     htmlPageOpts = props.htmlPageOpts,
@@ -102,16 +109,13 @@ export function Html(_ref) {
     loaderData = _ref.loaderData,
     manifest = _ref.manifest,
     htmlPageOpts = _ref.htmlPageOpts,
+    renderFromRoot = _ref.renderFromRoot,
     __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = _ref.__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
     mountElementId = _ref.mountElementId;
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
   if (__SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED) {
-    return /*#__PURE__*/React.createElement("html", null, /*#__PURE__*/React.createElement("head", null), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
-      dangerouslySetInnerHTML: {
-        __html: "<b>Enable JavaScript to run this app.</b>"
-      }
-    }), /*#__PURE__*/React.createElement("div", {
+    return /*#__PURE__*/React.createElement("html", null, /*#__PURE__*/React.createElement("head", null), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement(EnableJsScript, null), /*#__PURE__*/React.createElement("div", {
       id: mountElementId
     }, children), /*#__PURE__*/React.createElement(GlobalDataScript, {
       manifest: manifest,
@@ -119,6 +123,15 @@ export function Html(_ref) {
       htmlPageOpts: htmlPageOpts
     })));
   }
+  if (renderFromRoot) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(EnableJsScript, null), /*#__PURE__*/React.createElement("div", {
+      id: mountElementId
+    }, children), /*#__PURE__*/React.createElement(GlobalDataScript, {
+      manifest: manifest,
+      loaderData: loaderData,
+      htmlPageOpts: htmlPageOpts
+    }));
+  }
   var serverBuildManifest = typeof window === 'undefined' ? manifest : window.__UMI_BUILD_MANIFEST_DATA__;
   return (
     /*#__PURE__*/
@@ -137,11 +150,7 @@ export function Html(_ref) {
       href: manifest === null || manifest === void 0 ? void 0 : manifest.assets['umi.css']
     }), /*#__PURE__*/React.createElement(HydrateMetadata, {
       htmlPageOpts: htmlPageOpts
-    })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
-      dangerouslySetInnerHTML: {
-        __html: "<b>Enable JavaScript to run this app.</b>"
-      }
-    }), /*#__PURE__*/React.createElement("div", {
+    })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement(EnableJsScript, null), /*#__PURE__*/React.createElement("div", {
       id: mountElementId
     }, children), /*#__PURE__*/React.createElement(GlobalDataScript, {
       manifest: manifest,

package/dist/types.d.ts

@@ -49,6 +49,7 @@ export interface ILoaderData {
 }
 interface IHtmlHydrateOptions {
     htmlPageOpts?: IhtmlPageOpts;
+    renderFromRoot?: boolean;
     __SPECIAL_HTML_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: boolean;
     mountElementId?: string;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-canary.20240514.2",
+  "version": "4.0.0-canary.20240515.1",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",
@@ -23,8 +23,8 @@
     "react-router-dom": "6.3.0"
   },
   "devDependencies": {
-    "react": "18.1.0",
-    "react-dom": "18.1.0"
+    "react": "18.3.1",
+    "react-dom": "18.3.1"
   },
   "peerDependencies": {
     "react": ">=16.8",