@umijs/renderer-react 4.0.0-canary.20240402.1 → 4.0.0-canary.20240419.1

package/dist/browser.js

@@ -252,11 +252,12 @@ export function renderClient(opts) {
     var loaderData = window.__UMI_LOADER_DATA__ || {};
     // @ts-ignore
     var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
-    ReactDOM.hydrateRoot(opts.renderFromRoot ? rootElement : document, /*#__PURE__*/React.createElement(Html, {
+    var hydtateHtmloptions = {
       metadata: metadata,
       loaderData: loaderData,
       mountElementId: opts.mountElementId
-    }, /*#__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, tplOpts, renderFromRoot, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;
+export declare function Html({ children, loaderData, manifest, htmlPageOpts, renderFromRoot, mountElementId, }: React.PropsWithChildren<IHtmlProps>): JSX.Element;

package/dist/html.js

@@ -33,31 +33,31 @@ function generatorStyle(style) {
   };
 }
 var HydrateMetadata = function HydrateMetadata(props) {
-  var _tplOpts$favicons, _tplOpts$keywords, _tplOpts$metas, _tplOpts$links, _tplOpts$styles, _tplOpts$headScripts;
-  var tplOpts = props.tplOpts;
-  return /*#__PURE__*/React.createElement(React.Fragment, null, (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.title) && /*#__PURE__*/React.createElement("title", null, tplOpts.title), tplOpts === null || tplOpts === void 0 || (_tplOpts$favicons = tplOpts.favicons) === null || _tplOpts$favicons === void 0 ? void 0 : _tplOpts$favicons.map(function (favicon, key) {
+  var _htmlPageOpts$favicon, _htmlPageOpts$keyword, _htmlPageOpts$metas, _htmlPageOpts$links, _htmlPageOpts$styles, _htmlPageOpts$headScr;
+  var htmlPageOpts = props.htmlPageOpts;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.title) && /*#__PURE__*/React.createElement("title", null, htmlPageOpts.title), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$favicon = htmlPageOpts.favicons) === null || _htmlPageOpts$favicon === void 0 ? void 0 : _htmlPageOpts$favicon.map(function (favicon, key) {
     return /*#__PURE__*/React.createElement("link", {
       key: key,
       rel: "shortcut icon",
       href: favicon
     });
-  }), (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.description) && /*#__PURE__*/React.createElement("meta", {
+  }), (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.description) && /*#__PURE__*/React.createElement("meta", {
     name: "description",
-    content: tplOpts.description
-  }), (tplOpts === null || tplOpts === void 0 || (_tplOpts$keywords = tplOpts.keywords) === null || _tplOpts$keywords === void 0 ? void 0 : _tplOpts$keywords.length) && /*#__PURE__*/React.createElement("meta", {
+    content: htmlPageOpts.description
+  }), (htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$keyword = htmlPageOpts.keywords) === null || _htmlPageOpts$keyword === void 0 ? void 0 : _htmlPageOpts$keyword.length) && /*#__PURE__*/React.createElement("meta", {
     name: "keywords",
-    content: tplOpts.keywords.join(',')
-  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$metas = tplOpts.metas) === null || _tplOpts$metas === void 0 ? void 0 : _tplOpts$metas.map(function (em) {
+    content: htmlPageOpts.keywords.join(',')
+  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$metas = htmlPageOpts.metas) === null || _htmlPageOpts$metas === void 0 ? void 0 : _htmlPageOpts$metas.map(function (em) {
     return /*#__PURE__*/React.createElement("meta", {
       key: em.name,
       name: em.name,
       content: em.content
     });
-  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$links = tplOpts.links) === null || _tplOpts$links === void 0 ? void 0 : _tplOpts$links.map(function (link, key) {
+  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$links = htmlPageOpts.links) === null || _htmlPageOpts$links === void 0 ? void 0 : _htmlPageOpts$links.map(function (link, key) {
     return /*#__PURE__*/React.createElement("link", _extends({
       key: key
     }, link));
-  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$styles = tplOpts.styles) === null || _tplOpts$styles === void 0 ? void 0 : _tplOpts$styles.map(function (style, key) {
+  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$styles = htmlPageOpts.styles) === null || _htmlPageOpts$styles === void 0 ? void 0 : _htmlPageOpts$styles.map(function (style, key) {
     var _generatorStyle = generatorStyle(style),
       type = _generatorStyle.type,
       href = _generatorStyle.href,
@@ -73,7 +73,7 @@ var HydrateMetadata = function HydrateMetadata(props) {
         key: key
       }, content);
     }
-  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$headScripts = tplOpts.headScripts) === null || _tplOpts$headScripts === void 0 ? void 0 : _tplOpts$headScripts.map(function (script, key) {
+  }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$headScr = htmlPageOpts.headScripts) === null || _htmlPageOpts$headScr === void 0 ? void 0 : _htmlPageOpts$headScr.map(function (script, key) {
     var _normalizeScripts = normalizeScripts(script),
       content = _normalizeScripts.content,
       rest = _objectWithoutProperties(_normalizeScripts, _excluded);
@@ -83,57 +83,60 @@ var HydrateMetadata = function HydrateMetadata(props) {
   }));
 };
 export function Html(_ref) {
-  var _tplOpts$scripts;
+  var _htmlPageOpts$scripts;
   var children = _ref.children,
     loaderData = _ref.loaderData,
     manifest = _ref.manifest,
-    tplOpts = _ref.tplOpts,
+    htmlPageOpts = _ref.htmlPageOpts,
     renderFromRoot = _ref.renderFromRoot,
     mountElementId = _ref.mountElementId;
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
   if (renderFromRoot) {
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(HydrateMetadata, {
-      tplOpts: tplOpts
+      htmlPageOpts: htmlPageOpts
     }), /*#__PURE__*/React.createElement("div", {
       id: mountElementId
     }, children));
   }
-  // @ts-ignore
   var serverBuildManifest = typeof window === 'undefined' ? manifest :
   // @ts-ignore
   window.__UMI_BUILD_MANIFEST_DATA__;
-  return /*#__PURE__*/React.createElement("html", {
-    suppressHydrationWarning: true,
-    lang: (tplOpts === null || tplOpts === void 0 ? void 0 : tplOpts.lang) || 'en'
-  }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
-    charSet: "utf-8"
-  }), /*#__PURE__*/React.createElement("meta", {
-    name: "viewport",
-    content: "width=device-width, initial-scale=1"
-  }), (serverBuildManifest === null || serverBuildManifest === void 0 ? void 0 : serverBuildManifest.assets['umi.css']) && /*#__PURE__*/React.createElement("link", {
-    suppressHydrationWarning: true,
-    rel: "stylesheet",
-    href: manifest === null || manifest === void 0 ? void 0 : manifest.assets['umi.css']
-  }), /*#__PURE__*/React.createElement(HydrateMetadata, {
-    tplOpts: tplOpts
-  })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
-    dangerouslySetInnerHTML: {
-      __html: "<b>Enable JavaScript to run this app.</b>"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    id: mountElementId
-  }, children), /*#__PURE__*/React.createElement("script", {
-    suppressHydrationWarning: true,
-    dangerouslySetInnerHTML: {
-      __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData || {}), "; window.__UMI_METADATA_LOADER_DATA__ = ").concat(JSON.stringify(tplOpts || {}), "; window.__UMI_BUILD_MANIFEST_DATA__ = ").concat(JSON.stringify(manifest) || {})
-    }
-  }), tplOpts === null || tplOpts === void 0 || (_tplOpts$scripts = tplOpts.scripts) === null || _tplOpts$scripts === void 0 ? void 0 : _tplOpts$scripts.map(function (script, key) {
-    var _normalizeScripts2 = normalizeScripts(script),
-      content = _normalizeScripts2.content,
-      rest = _objectWithoutProperties(_normalizeScripts2, _excluded2);
-    return /*#__PURE__*/React.createElement("script", _extends({
-      key: key
-    }, rest), content);
-  })));
+  return (
+    /*#__PURE__*/
+    // FIXME: Resolve the hydrate warning for suppressHydrationWarning(3)
+    React.createElement("html", {
+      suppressHydrationWarning: true,
+      lang: (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.lang) || 'en'
+    }, /*#__PURE__*/React.createElement("head", null, /*#__PURE__*/React.createElement("meta", {
+      charSet: "utf-8"
+    }), /*#__PURE__*/React.createElement("meta", {
+      name: "viewport",
+      content: "width=device-width, initial-scale=1"
+    }), (serverBuildManifest === null || serverBuildManifest === void 0 ? void 0 : serverBuildManifest.assets['umi.css']) && /*#__PURE__*/React.createElement("link", {
+      suppressHydrationWarning: true,
+      rel: "stylesheet",
+      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", {
+      id: mountElementId
+    }, children), /*#__PURE__*/React.createElement("script", {
+      suppressHydrationWarning: true,
+      dangerouslySetInnerHTML: {
+        __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData || {}), "; window.__UMI_METADATA_LOADER_DATA__ = ").concat(JSON.stringify(htmlPageOpts || {}), "; window.__UMI_BUILD_MANIFEST_DATA__ = ").concat(JSON.stringify(manifest) || {})
+      }
+    }), htmlPageOpts === null || htmlPageOpts === void 0 || (_htmlPageOpts$scripts = htmlPageOpts.scripts) === null || _htmlPageOpts$scripts === void 0 ? void 0 : _htmlPageOpts$scripts.map(function (script, key) {
+      var _normalizeScripts2 = normalizeScripts(script),
+        content = _normalizeScripts2.content,
+        rest = _objectWithoutProperties(_normalizeScripts2, _excluded2);
+      return /*#__PURE__*/React.createElement("script", _extends({
+        key: key
+      }, rest), content);
+    })))
+  );
 }

package/dist/server.js

@@ -18,11 +18,18 @@ function _getClientRootComponent() {
       while (1) switch (_context.prev = _context.next) {
         case 0:
           basename = '/';
-          components = _objectSpread({}, opts.routeComponents);
+          components = _objectSpread({}, opts.routeComponents); // todo 参数对齐
           clientRoutes = createClientRoutes({
             routesById: opts.routes,
             routeComponents: components
           });
+          opts.pluginManager.applyPlugins({
+            key: 'patchClientRoutes',
+            type: 'event',
+            args: {
+              routes: clientRoutes
+            }
+          });
           rootContainer = /*#__PURE__*/React.createElement(StaticRouter, {
             basename: basename,
             location: opts.location
@@ -50,7 +57,7 @@ function _getClientRootComponent() {
             }
           }, rootContainer);
           return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, opts, app));
-        case 7:
+        case 8:
         case "end":
           return _context.stop();
       }

package/dist/types.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="react" />
-import type { ITplOpts } from '@umijs/server/dist/types';
+import type { IhtmlPageOpts } from '@umijs/server/dist/types';
 import type { RouteMatch, RouteObject } from 'react-router-dom';
 export interface IRouteSSRProps {
     clientLoader?: () => Promise<any>;
@@ -34,7 +34,12 @@ export interface IRouteComponents {
 export interface ILoaderData {
     [routeKey: string]: any;
 }
-export interface IRootComponentOptions {
+interface IHtmlHydrateOptions {
+    htmlPageOpts?: IhtmlPageOpts;
+    renderFromRoot?: boolean;
+    mountElementId?: string;
+}
+export interface IRootComponentOptions extends IHtmlHydrateOptions {
     routes: IRoutesById;
     routeComponents: IRouteComponents;
     pluginManager: any;
@@ -43,19 +48,13 @@ export interface IRootComponentOptions {
         [routeKey: string]: any;
     };
     manifest: any;
-    tplOpts?: ITplOpts;
-    renderFromRoot: boolean;
-    mountElementId: string;
 }
-export interface IHtmlProps {
+export interface IHtmlProps extends IHtmlHydrateOptions {
     children?: React.ReactNode;
     loaderData?: {
         [routeKey: string]: any;
     };
     manifest?: any;
-    tplOpts?: ITplOpts;
-    mountElementId?: string;
-    renderFromRoot?: boolean;
 }
 export declare type IScript = Partial<{
     async: boolean;
@@ -66,3 +65,4 @@ export declare type IScript = Partial<{
     src: string;
     type: string;
 }> | string;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.0.0-canary.20240402.1",
+  "version": "4.0.0-canary.20240419.1",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",