@umijs/renderer-react 4.0.0-canary.20240509.3 → 4.0.0-canary.20240510.1

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.js

@@ -131,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];
@@ -181,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,
@@ -200,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));
             });
@@ -248,9 +273,7 @@ export function renderClient(opts) {
   // 为了测试，直接返回组件
   if (opts.components) return Browser;
   if (opts.hydrate) {
-    // @ts-ignore
     var loaderData = window.__UMI_LOADER_DATA__ || {};
-    // @ts-ignore
     var metadata = window.__UMI_METADATA_LOADER_DATA__ || {};
     var hydtateHtmloptions = {
       metadata: metadata,

package/dist/html.js

@@ -102,9 +102,7 @@ export function Html(_ref) {
       id: mountElementId
     }, children));
   }
-  var serverBuildManifest = typeof window === 'undefined' ? manifest :
-  // @ts-ignore
-  window.__UMI_BUILD_MANIFEST_DATA__;
+  var serverBuildManifest = typeof window === 'undefined' ? manifest : window.__UMI_BUILD_MANIFEST_DATA__;
   return (
     /*#__PURE__*/
     // FIXME: Resolve the hydrate warning for suppressHydrationWarning(3)
@@ -138,8 +136,11 @@ export function Html(_ref) {
         content = _normalizeScripts2.content,
         rest = _objectWithoutProperties(_normalizeScripts2, _excluded2);
       return /*#__PURE__*/React.createElement("script", _extends({
+        dangerouslySetInnerHTML: {
+          __html: content
+        },
         key: key
-      }, rest), content);
+      }, 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/types.d.ts

@@ -1,8 +1,21 @@
 /// <reference types="react" />
-import type { IhtmlPageOpts } from '@umijs/server/dist/types';
+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_MANIFEST_DATA__: 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 {

package/package.json

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