@umijs/renderer-react 4.2.15 → 4.3.0

package/dist/appContext.d.ts

@@ -23,4 +23,5 @@ export declare function useServerLoaderData<T extends ServerLoaderFunc = any>():
 export declare function useClientLoaderData(): {
     data: any;
 };
+export declare function useLoaderData<T extends ServerLoaderFunc = any>(): Awaited<ReturnType<T>>;
 export {};

package/dist/appContext.js

@@ -1,3 +1,4 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["element"];
@@ -25,6 +26,7 @@ export function useRouteProps() {
     props = _objectWithoutProperties(_ref, _excluded);
   return props;
 }
+// @deprecated  Please use `useLoaderData` instead.
 export function useServerLoaderData() {
   var routes = useSelectedRoutes();
   var _useAppData2 = useAppData(),
@@ -47,7 +49,6 @@ export function useServerLoaderData() {
     data = _React$useState2[0],
     setData = _React$useState2[1];
   React.useEffect(function () {
-    // @ts-ignore
     if (!window.__UMI_LOADER_DATA__) {
       // 支持 ssr 降级，客户端兜底加载 serverLoader 数据
       Promise.all(routes.filter(function (route) {
@@ -75,10 +76,19 @@ export function useServerLoaderData() {
     data: data
   };
 }
+
+// @deprecated  Please use `useLoaderData` instead.
 export function useClientLoaderData() {
   var route = useRouteData();
   var appData = useAppData();
   return {
     data: appData.clientLoaderData[route.route.id]
   };
+}
+export function useLoaderData() {
+  var serverLoaderData = useServerLoaderData();
+  var clientLoaderData = useClientLoaderData();
+  return {
+    data: _objectSpread(_objectSpread({}, serverLoaderData.data), clientLoaderData.data)
+  };
 }

package/dist/browser.d.ts

@@ -18,11 +18,26 @@ export declare type RenderClientOpts = {
      * @doc https://umijs.org/docs/api/config#runtimepublicpath
      */
     runtimePublicPath?: boolean;
+    /**
+     * react dom 渲染的的目标节点 id
+     * @doc 一般不需要改，微前端的时候会变化
+     */
+    mountElementId?: string;
     /**
      * react dom 渲染的的目标 dom
      * @doc 一般不需要改，微前端的时候会变化
      */
     rootElement?: HTMLElement;
+    __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED: {
+        /**
+         * 内部流程, 渲染特殊 app 节点, 不要使用!!!
+         */
+        pureApp?: boolean;
+        /**
+         * 内部流程, 渲染特殊 html 节点, 不要使用!!!
+         */
+        pureHtml?: boolean;
+    };
     /**
      * 当前的路由配置
      */
@@ -73,4 +88,4 @@ export declare type RenderClientOpts = {
  * @param {RenderClientOpts} opts - 插件相关的配置
  * @returns void
  */
-export declare function renderClient(opts: RenderClientOpts): (() => JSX.Element) | undefined;
+export declare function renderClient(opts: RenderClientOpts): (() => React.JSX.Element) | undefined;

package/dist/browser.js

@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom/client';
 import { matchRoutes, Router, useRoutes } from 'react-router-dom';
 import { AppContext, useAppData } from "./appContext";
 import { fetchServerLoader } from "./dataFetcher";
+import { Html } from "./html";
 import { createClientRoutes } from "./routes";
 var root = null;
 
@@ -130,9 +131,7 @@ var getBrowser = function getBrowser(opts, routesElement) {
       _useState2 = _slicedToArray(_useState, 2),
       clientLoaderData = _useState2[0],
       setClientLoaderData = _useState2[1];
-    var _useState3 = useState(
-      // @ts-ignore
-      window.__UMI_LOADER_DATA__ || {}),
+    var _useState3 = useState(window.__UMI_LOADER_DATA__ || {}),
       _useState4 = _slicedToArray(_useState3, 2),
       serverLoaderData = _useState4[0],
       setServerLoaderData = _useState4[1];
@@ -180,9 +179,13 @@ var getBrowser = function getBrowser(opts, routesElement) {
             });
           }
         }
+        var clientLoader = (_opts$routes$id = opts.routes[id]) === null || _opts$routes$id === void 0 ? void 0 : _opts$routes$id.clientLoader;
+        var hasClientLoader = !!clientLoader;
+        var hasServerLoader = (_opts$routes$id2 = opts.routes[id]) === null || _opts$routes$id2 === void 0 ? void 0 : _opts$routes$id2.hasServerLoader;
         // server loader
         // use ?. since routes patched with patchClientRoutes is not exists in opts.routes
-        if (!isFirst && (_opts$routes$id = opts.routes[id]) !== null && _opts$routes$id !== void 0 && _opts$routes$id.hasServerLoader) {
+
+        if (!isFirst && hasServerLoader && !hasClientLoader && !window.__UMI_LOADER_DATA__) {
           fetchServerLoader({
             id: id,
             basename: basename,
@@ -199,9 +202,32 @@ var getBrowser = function getBrowser(opts, routesElement) {
         }
         // client loader
         // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
-        var clientLoader = (_opts$routes$id2 = opts.routes[id]) === null || _opts$routes$id2 === void 0 ? void 0 : _opts$routes$id2.clientLoader;
-        if (clientLoader && !clientLoaderData[id]) {
-          clientLoader().then(function (data) {
+        var hasClientLoaderDataInRoute = !!clientLoaderData[id];
+
+        // Check if hydration is needed or there's no server loader for the current route
+        var shouldHydrateOrNoServerLoader = hasClientLoader && clientLoader.hydrate || !hasServerLoader;
+
+        // Check if server loader data is missing in the global window object
+        var isServerLoaderDataMissing = hasServerLoader && !window.__UMI_LOADER_DATA__;
+        if (hasClientLoader && !hasClientLoaderDataInRoute && (shouldHydrateOrNoServerLoader || isServerLoaderDataMissing)) {
+          // ...
+          clientLoader({
+            serverLoader: function serverLoader() {
+              return fetchServerLoader({
+                id: id,
+                basename: basename,
+                cb: function cb(data) {
+                  // setServerLoaderData when startTransition because if ssr is enabled,
+                  // the component may being hydrated and setLoaderData will break the hydration
+                  React.startTransition(function () {
+                    setServerLoaderData(function (d) {
+                      return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
+                    });
+                  });
+                }
+              });
+            }
+          }).then(function (data) {
             setClientLoaderData(function (d) {
               return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
             });
@@ -247,7 +273,15 @@ export function renderClient(opts) {
   // 为了测试，直接返回组件
   if (opts.components) return Browser;
   if (opts.hydrate) {
-    ReactDOM.hydrateRoot(rootElement, /*#__PURE__*/React.createElement(Browser, null));
+    var loaderData = window.__UMI_LOADER_DATA__ || {};
+    var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
+    var hydtateHtmloptions = {
+      metadata: metadata,
+      loaderData: loaderData,
+      mountElementId: opts.mountElementId
+    };
+    var _isInternal = opts.__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.pureApp || opts.__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.pureHtml;
+    ReactDOM.hydrateRoot(_isInternal ? rootElement : document, _isInternal ? /*#__PURE__*/React.createElement(Browser, null) : /*#__PURE__*/React.createElement(Html, hydtateHtmloptions, /*#__PURE__*/React.createElement(Browser, null)));
     return;
   }
   if (ReactDOM.createRoot) {

package/dist/html.d.ts

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

package/dist/html.js

@@ -0,0 +1,168 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+var _excluded = ["content"],
+  _excluded2 = ["content"];
+import React from 'react';
+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 _manifest$assets;
+  var loaderData = props.loaderData,
+    htmlPageOpts = props.htmlPageOpts,
+    manifest = props.manifest;
+  var clientCssPath = (manifest === null || manifest === void 0 || (_manifest$assets = manifest.assets) === null || _manifest$assets === void 0 ? void 0 : _manifest$assets['umi.css']) || '';
+  return /*#__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_ClIENT_CSS__ = '").concat(clientCssPath, "'")
+    }
+  });
+};
+function normalizeScripts(script) {
+  var extraProps = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (typeof script === 'string') {
+    return isUrl(script) ? _objectSpread({
+      src: script
+    }, extraProps) : {
+      content: script
+    };
+  } else if (_typeof(script) === 'object') {
+    return _objectSpread(_objectSpread({}, script), extraProps);
+  } else {
+    throw new Error("Invalid script type: ".concat(_typeof(script)));
+  }
+}
+function generatorStyle(style) {
+  return isUrl(style) ? {
+    type: 'link',
+    href: style
+  } : {
+    type: 'style',
+    content: style
+  };
+}
+var HydrateMetadata = function HydrateMetadata(props) {
+  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
+    });
+  }), (htmlPageOpts === null || htmlPageOpts === void 0 ? void 0 : htmlPageOpts.description) && /*#__PURE__*/React.createElement("meta", {
+    name: "description",
+    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: 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
+    });
+  }), 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));
+  }), 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,
+      content = _generatorStyle.content;
+    if (type === 'link') {
+      return /*#__PURE__*/React.createElement("link", {
+        key: key,
+        rel: "stylesheet",
+        href: href
+      });
+    } else if (type === 'style') {
+      return /*#__PURE__*/React.createElement("style", {
+        key: key
+      }, content);
+    }
+  }), 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);
+    return /*#__PURE__*/React.createElement("script", _extends({
+      dangerouslySetInnerHTML: {
+        __html: content
+      },
+      key: key,
+      crossOrigin: "anonymous"
+    }, rest));
+  }));
+};
+export function Html(_ref) {
+  var _htmlPageOpts$scripts;
+  var children = _ref.children,
+    loaderData = _ref.loaderData,
+    manifest = _ref.manifest,
+    htmlPageOpts = _ref.htmlPageOpts,
+    __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED = _ref.__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED,
+    mountElementId = _ref.mountElementId;
+  // TODO: 处理 head 标签，比如 favicon.ico 的一致性
+  // TODO: root 支持配置
+  if (__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== null && __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== void 0 && __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.pureHtml) {
+    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,
+      loaderData: loaderData,
+      htmlPageOpts: htmlPageOpts
+    })));
+  }
+  if (__INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== null && __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED !== void 0 && __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.pureApp) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }
+  var clientCss = typeof window === 'undefined' ? manifest === null || manifest === void 0 ? void 0 : manifest.assets['umi.css'] : window.__UMI_BUILD_ClIENT_CSS__;
+  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"
+    }), clientCss && /*#__PURE__*/React.createElement("link", {
+      suppressHydrationWarning: true,
+      rel: "stylesheet",
+      href: clientCss
+    }), /*#__PURE__*/React.createElement(HydrateMetadata, {
+      htmlPageOpts: htmlPageOpts
+    })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement(EnableJsScript, null), /*#__PURE__*/React.createElement("div", {
+      id: mountElementId
+    }, children), /*#__PURE__*/React.createElement(GlobalDataScript, {
+      manifest: manifest,
+      loaderData: loaderData,
+      htmlPageOpts: htmlPageOpts
+    }), 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({
+        dangerouslySetInnerHTML: {
+          __html: content
+        },
+        key: key,
+        crossOrigin: "anonymous"
+      }, rest));
+    })))
+  );
+}

package/dist/index.d.ts

@@ -1,9 +1,10 @@
 export { createBrowserHistory, createHashHistory, createMemoryHistory, type History, } from 'history';
 export { Helmet, HelmetProvider } from 'react-helmet-async';
 export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams, } from 'react-router-dom';
-export { useAppData, useClientLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData, } from './appContext';
+export { useAppData, useClientLoaderData, useLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData, } from './appContext';
 export { renderClient, __getRoot } from './browser';
 export { LinkWithPrefetch as Link } from './link';
 export { useRouteData } from './routeContext';
+export type { ClientLoader } from './types';
 export { __useFetcher } from './useFetcher';
 export { withRouter, type RouteComponentProps } from './withRouter';

package/dist/index.js

@@ -1,7 +1,7 @@
 export { createBrowserHistory, createHashHistory, createMemoryHistory } from 'history';
 export { Helmet, HelmetProvider } from 'react-helmet-async';
 export { createSearchParams, generatePath, matchPath, matchRoutes, Navigate, NavLink, Outlet, resolvePath, useLocation, useMatch, useNavigate, useOutlet, useOutletContext, useParams, useResolvedPath, useRoutes, useSearchParams } from 'react-router-dom';
-export { useAppData, useClientLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData } from "./appContext";
+export { useAppData, useClientLoaderData, useLoaderData, useRouteProps, useSelectedRoutes, useServerLoaderData } from "./appContext";
 export { renderClient, __getRoot } from "./browser";
 export { LinkWithPrefetch as Link } from "./link";
 export { useRouteData } from "./routeContext";

package/dist/link.d.ts

@@ -2,4 +2,4 @@ import React, { PropsWithChildren } from 'react';
 import { LinkProps } from 'react-router-dom';
 export declare function LinkWithPrefetch(props: PropsWithChildren<{
     prefetch?: boolean;
-} & LinkProps & React.RefAttributes<HTMLAnchorElement>>): JSX.Element | null;
+} & LinkProps & React.RefAttributes<HTMLAnchorElement>>): React.JSX.Element | null;

package/dist/server.d.ts

@@ -1,15 +1,3 @@
-import type { IMetadata } from '@umijs/server/dist/types';
-import { IRouteComponents, IRoutesById } from './types';
-interface IHtmlProps {
-    routes: IRoutesById;
-    routeComponents: IRouteComponents;
-    pluginManager: any;
-    location: string;
-    loaderData: {
-        [routeKey: string]: any;
-    };
-    manifest: any;
-    metadata?: IMetadata;
-}
-export declare function getClientRootComponent(opts: IHtmlProps): Promise<JSX.Element>;
-export {};
+import React from 'react';
+import { IRootComponentOptions } from './types';
+export declare function getClientRootComponent(opts: IRootComponentOptions): Promise<React.JSX.Element>;

package/dist/server.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { StaticRouter } from 'react-router-dom/server';
 import { AppContext } from "./appContext";
 import { Routes } from "./browser";
+import { Html } from "./html";
 import { createClientRoutes } from "./routes";
 // Get the root React component for ReactDOMServer.renderToString
 export function getClientRootComponent(_x) {
@@ -17,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
@@ -49,54 +57,11 @@ function _getClientRootComponent() {
             }
           }, rootContainer);
           return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, opts, app));
-        case 7:
+        case 8:
         case "end":
           return _context.stop();
       }
     }, _callee);
   }));
   return _getClientRootComponent.apply(this, arguments);
-}
-function Html(_ref) {
-  var _metadata$keywords, _metadata$metas;
-  var children = _ref.children,
-    loaderData = _ref.loaderData,
-    manifest = _ref.manifest,
-    metadata = _ref.metadata;
-  // TODO: 处理 head 标签，比如 favicon.ico 的一致性
-  // TODO: root 支持配置
-
-  return /*#__PURE__*/React.createElement("html", {
-    lang: (metadata === null || metadata === void 0 ? void 0 : metadata.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"
-  }), (metadata === null || metadata === void 0 ? void 0 : metadata.title) && /*#__PURE__*/React.createElement("title", null, metadata.title), (metadata === null || metadata === void 0 ? void 0 : metadata.description) && /*#__PURE__*/React.createElement("meta", {
-    name: "description",
-    content: metadata.description
-  }), (metadata === null || metadata === void 0 || (_metadata$keywords = metadata.keywords) === null || _metadata$keywords === void 0 ? void 0 : _metadata$keywords.length) && /*#__PURE__*/React.createElement("meta", {
-    name: "keywords",
-    content: metadata.keywords.join(',')
-  }), metadata === null || metadata === void 0 || (_metadata$metas = metadata.metas) === null || _metadata$metas === void 0 ? void 0 : _metadata$metas.map(function (em) {
-    return /*#__PURE__*/React.createElement("meta", {
-      key: em.name,
-      name: em.name,
-      content: em.content
-    });
-  }), manifest.assets['umi.css'] && /*#__PURE__*/React.createElement("link", {
-    rel: "stylesheet",
-    href: manifest.assets['umi.css']
-  })), /*#__PURE__*/React.createElement("body", null, /*#__PURE__*/React.createElement("noscript", {
-    dangerouslySetInnerHTML: {
-      __html: "<b>Enable JavaScript to run this app.</b>"
-    }
-  }), /*#__PURE__*/React.createElement("div", {
-    id: "root"
-  }, children), /*#__PURE__*/React.createElement("script", {
-    dangerouslySetInnerHTML: {
-      __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(loaderData))
-    }
-  })));
 }

package/dist/types.d.ts

@@ -1,7 +1,21 @@
 /// <reference types="react" />
+import type { IhtmlPageOpts, ServerLoader } from '@umijs/server/dist/types';
 import type { RouteMatch, RouteObject } from 'react-router-dom';
+declare global {
+    interface Window {
+        __UMI_LOADER_DATA__: any;
+        __UMI_METADATA_LOADER_DATA__: any;
+        __UMI_BUILD_ClIENT_CSS__: any;
+    }
+}
+declare type ClientLoaderFunctionArgs = {
+    serverLoader: ServerLoader;
+};
+export declare type ClientLoader = ((args: ClientLoaderFunctionArgs) => Promise<any>) & {
+    hydrate?: boolean;
+};
 export interface IRouteSSRProps {
-    clientLoader?: () => Promise<any>;
+    clientLoader?: ClientLoader;
     hasServerLoader?: boolean;
 }
 export interface IRouteConventionExportProps {
@@ -33,3 +47,38 @@ export interface IRouteComponents {
 export interface ILoaderData {
     [routeKey: string]: any;
 }
+interface IHtmlHydrateOptions {
+    htmlPageOpts?: IhtmlPageOpts;
+    __INTERNAL_DO_NOT_USE_OR_YOU_WILL_BE_FIRED?: {
+        pureApp: boolean;
+        pureHtml: boolean;
+    };
+    mountElementId?: string;
+}
+export interface IRootComponentOptions extends IHtmlHydrateOptions {
+    routes: IRoutesById;
+    routeComponents: IRouteComponents;
+    pluginManager: any;
+    location: string;
+    loaderData: {
+        [routeKey: string]: any;
+    };
+    manifest: any;
+}
+export interface IHtmlProps extends IHtmlHydrateOptions {
+    children?: React.ReactNode;
+    loaderData?: {
+        [routeKey: string]: any;
+    };
+    manifest?: any;
+}
+export declare type IScript = Partial<{
+    async: boolean;
+    charset: string;
+    content: string;
+    crossOrigin: string | null;
+    defer: boolean;
+    src: string;
+    type: string;
+}> | string;
+export {};

package/dist/withRouter.d.ts

@@ -14,4 +14,4 @@ export interface RouteComponentProps<T = ReturnType<typeof useParams>> {
     params?: T;
     navigate?: ReturnType<typeof useNavigate>;
 }
-export declare function withRouter<P extends RouteComponentProps<P>>(Component: React.ComponentType<P>): (props: P) => JSX.Element;
+export declare function withRouter<P extends RouteComponentProps<P>>(Component: React.ComponentType<P>): (props: P) => React.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umijs/renderer-react",
-  "version": "4.2.15",
+  "version": "4.3.0",
   "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",