@umijs/renderer-react 4.0.88 → 4.0.89

package/dist/appContext.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-import { IClientRoute, ILoaderData, IRouteComponents, IRoutesById } from './types';
+import { IClientRoute, ILoaderData, IRouteComponents, IRoutesById, ISelectedRoutes } from './types';
 interface IAppContextType {
     routes: IRoutesById;
     routeComponents: IRouteComponents;
@@ -14,11 +14,11 @@ interface IAppContextType {
 }
 export declare const AppContext: React.Context<IAppContextType>;
 export declare function useAppData(): IAppContextType;
-export declare function useSelectedRoutes(): import("react-router-dom").RouteMatch<string>[];
+export declare function useSelectedRoutes(): ISelectedRoutes[];
 export declare function useRouteProps<T extends Record<string, any> = any>(): T;
 declare type ServerLoaderFunc = (...args: any[]) => Promise<any> | any;
 export declare function useServerLoaderData<T extends ServerLoaderFunc = any>(): {
-    data: Awaited<ReturnType<T>>;
+    data: Awaited<ReturnType<T>> | undefined;
 };
 export declare function useClientLoaderData(): {
     data: any;

package/dist/appContext.js

@@ -1,7 +1,9 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["element"];
 import React from 'react';
 import { matchRoutes, useLocation } from 'react-router-dom';
+import { fetchServerLoader } from "./dataFetcher";
 import { useRouteData } from "./routeContext";
 export var AppContext = /*#__PURE__*/React.createContext({});
 export function useAppData() {
@@ -24,10 +26,53 @@ export function useRouteProps() {
   return props;
 }
 export function useServerLoaderData() {
-  var route = useRouteData();
-  var appData = useAppData();
+  var routes = useSelectedRoutes();
+  var _useAppData2 = useAppData(),
+    serverLoaderData = _useAppData2.serverLoaderData,
+    basename = _useAppData2.basename;
+  var _React$useState = React.useState(function () {
+      var ret = {};
+      var has = false;
+      routes.forEach(function (route) {
+        // 多级路由嵌套时，需要合并多级路由 serverLoader 的数据
+        var routeData = serverLoaderData[route.route.id];
+        if (routeData) {
+          Object.assign(ret, routeData);
+          has = true;
+        }
+      });
+      return has ? ret : undefined;
+    }),
+    _React$useState2 = _slicedToArray(_React$useState, 2),
+    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) {
+        return route.route.hasServerLoader;
+      }).map(function (route) {
+        return new Promise(function (resolve) {
+          fetchServerLoader({
+            id: route.route.id,
+            basename: basename,
+            cb: resolve
+          });
+        });
+      })).then(function (datas) {
+        if (datas.length) {
+          var res = {};
+          datas.forEach(function (data) {
+            Object.assign(res, data);
+          });
+          setData(res);
+        }
+      });
+    }
+  }, []);
   return {
-    data: appData.serverLoaderData[route.route.id]
+    data: data
   };
 }
 export function useClientLoaderData() {

package/dist/browser.js

@@ -6,6 +6,7 @@ import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react'
 import ReactDOM from 'react-dom/client';
 import { matchRoutes, Router, useRoutes } from 'react-router-dom';
 import { AppContext, useAppData } from "./appContext";
+import { fetchServerLoader } from "./dataFetcher";
 import { createClientRoutes } from "./routes";
 var root = null;
 
@@ -182,26 +183,19 @@ var getBrowser = function getBrowser(opts, routesElement) {
         // 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) {
-          var query = new URLSearchParams({
-            route: id,
-            url: window.location.href
-          }).toString();
-          // 在有basename的情况下__serverLoader的请求路径需要加上basename
-          var url = "".concat(withEndSlash(basename), "__serverLoader?").concat(query);
-          fetch(url, {
-            credentials: 'include'
-          }).then(function (d) {
-            return d.json();
-          }).then(function (data) {
-            // setServerLoaderData when startTransition because if ssr is enabled,
-            // the component may being hydrated and setLoaderData will break the hydration
-            // @ts-ignore
-            React.startTransition(function () {
-              setServerLoaderData(function (d) {
-                return _objectSpread(_objectSpread({}, d), {}, _defineProperty({}, id, data));
+          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));
+                });
               });
-            });
-          }).catch(console.error);
+            }
+          });
         }
         // client loader
         // onPatchClientRoutes 添加的 route 在 opts.routes 里是不存在的
@@ -263,7 +257,4 @@ export function renderClient(opts) {
   }
   // @ts-ignore
   ReactDOM.render( /*#__PURE__*/React.createElement(Browser, null), rootElement);
-}
-function withEndSlash(str) {
-  return str.endsWith('/') ? str : "".concat(str, "/");
 }

package/dist/dataFetcher.d.ts

@@ -0,0 +1,5 @@
+export declare function fetchServerLoader({ id, basename, cb, }: {
+    id: string;
+    basename?: string;
+    cb: (data: any) => void;
+}): void;

package/dist/dataFetcher.js

@@ -0,0 +1,20 @@
+export function fetchServerLoader(_ref) {
+  var id = _ref.id,
+    basename = _ref.basename,
+    cb = _ref.cb;
+  var query = new URLSearchParams({
+    route: id,
+    url: window.location.href
+  }).toString();
+  // 在有basename的情况下__serverLoader的请求路径需要加上basename
+  var url = "".concat(withEndSlash(basename), "__serverLoader?").concat(query);
+  fetch(url, {
+    credentials: 'include'
+  }).then(function (d) {
+    return d.json();
+  }).then(cb).catch(console.error);
+}
+function withEndSlash() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.endsWith('/') ? str : "".concat(str, "/");
+}

package/dist/types.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import type { RouteMatch, RouteObject } from 'react-router-dom';
 export interface IRouteSSRProps {
     clientLoader?: () => Promise<any>;
     hasServerLoader?: boolean;
@@ -18,6 +19,11 @@ export interface IClientRoute extends IRoute {
     children?: IClientRoute[];
     routes?: IClientRoute[];
 }
+export interface ISelectedRoute extends IRoute, RouteObject {
+}
+export interface ISelectedRoutes extends RouteMatch {
+    route: ISelectedRoute;
+}
 export interface IRoutesById {
     [id: string]: IRoute;
 }

package/package.json

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