@umijs/renderer-react 4.0.87 → 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,10 +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;
-export declare function useServerLoaderData(): {
-    data: any;
+declare type ServerLoaderFunc = (...args: any[]) => Promise<any> | any;
+export declare function useServerLoaderData<T extends ServerLoaderFunc = any>(): {
+    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,21 +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) {
-          // 在有basename的情况下__serverLoader的请求路径需要加上basename
-          fetch((basename.endsWith('/') ? basename : basename + '/') + '__serverLoader?route=' + id, {
-            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 里是不存在的

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/server.d.ts

@@ -1,5 +1,6 @@
+import type { IMetadata } from '@umijs/server/dist/types';
 import { IRouteComponents, IRoutesById } from './types';
-export declare function getClientRootComponent(opts: {
+interface IHtmlProps {
     routes: IRoutesById;
     routeComponents: IRouteComponents;
     pluginManager: any;
@@ -8,5 +9,7 @@ export declare function getClientRootComponent(opts: {
         [routeKey: string]: any;
     };
     manifest: any;
-    withoutHTML?: boolean;
-}): Promise<JSX.Element>;
+    metadata?: IMetadata;
+}
+export declare function getClientRootComponent(opts: IHtmlProps): Promise<JSX.Element>;
+export {};

package/dist/server.js

@@ -48,23 +48,8 @@ function _getClientRootComponent() {
               serverLoaderData: opts.loaderData
             }
           }, rootContainer);
-          if (!opts.withoutHTML) {
-            _context.next = 8;
-            break;
-          }
-          return _context.abrupt("return", /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-            id: "root"
-          }, app), /*#__PURE__*/React.createElement("script", {
-            dangerouslySetInnerHTML: {
-              __html: "window.__UMI_LOADER_DATA__ = ".concat(JSON.stringify(opts.loaderData))
-            }
-          })));
-        case 8:
-          return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, {
-            loaderData: opts.loaderData,
-            manifest: opts.manifest
-          }, app));
-        case 9:
+          return _context.abrupt("return", /*#__PURE__*/React.createElement(Html, opts, app));
+        case 7:
         case "end":
           return _context.stop();
       }
@@ -73,19 +58,33 @@ function _getClientRootComponent() {
   return _getClientRootComponent.apply(this, arguments);
 }
 function Html(_ref) {
+  var _metadata$keywords, _metadata$metas;
   var children = _ref.children,
     loaderData = _ref.loaderData,
-    manifest = _ref.manifest;
+    manifest = _ref.manifest,
+    metadata = _ref.metadata;
   // TODO: 处理 head 标签，比如 favicon.ico 的一致性
   // TODO: root 支持配置
 
   return /*#__PURE__*/React.createElement("html", {
-    lang: "en"
+    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 ? 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 ? 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']

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.87",
+  "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",