@umijs/renderer-react 4.3.32 → 4.3.34

package/dist/browser.d.ts

@@ -69,6 +69,10 @@ export declare type RenderClientOpts = {
      * ssr 的配置
      */
     hydrate?: boolean;
+    /**
+     * ssr 是否启用流式渲染, 默认 true, 对 SEO 存在一定的负优化
+     */
+    useStream?: boolean;
     /**
      * 直接返回组件，是为了方便测试
      */
@@ -88,4 +92,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

@@ -90,7 +90,8 @@ var getBrowser = function getBrowser(opts, routesElement) {
     routesById: opts.routes,
     routeComponents: opts.routeComponents,
     loadingComponent: opts.loadingComponent,
-    reactRouter5Compat: opts.reactRouter5Compat
+    reactRouter5Compat: opts.reactRouter5Compat,
+    useStream: opts.useStream
   });
   opts.pluginManager.applyPlugins({
     key: 'patchClientRoutes',

package/dist/html.d.ts

@@ -1,3 +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>): JSX.Element;
+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/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/routes.d.ts

@@ -6,4 +6,5 @@ export declare function createClientRoutes(opts: {
     parentId?: string;
     loadingComponent?: React.ReactNode;
     reactRouter5Compat?: boolean;
+    useStream?: boolean;
 }): IClientRoute[];

package/dist/routes.js

@@ -10,11 +10,13 @@ import { RouteContext, useRouteData } from "./routeContext";
 export function createClientRoutes(opts) {
   var routesById = opts.routesById,
     parentId = opts.parentId,
-    routeComponents = opts.routeComponents;
+    routeComponents = opts.routeComponents,
+    _opts$useStream = opts.useStream,
+    useStream = _opts$useStream === void 0 ? true : _opts$useStream;
   return Object.keys(routesById).filter(function (id) {
     return routesById[id].parentId === parentId;
   }).map(function (id) {
-    var route = createClientRoute(_objectSpread({
+    var route = createClientRoute(_objectSpread(_objectSpread({
       route: routesById[id],
       routeComponent: routeComponents[id],
       loadingComponent: opts.loadingComponent,
@@ -24,13 +26,16 @@ export function createClientRoutes(opts) {
       hasChildren: Object.keys(routesById).filter(function (rid) {
         return routesById[rid].parentId === id;
       }).length > 0
+    }), {}, {
+      useStream: useStream
     }));
     var children = createClientRoutes({
       routesById: routesById,
       routeComponents: routeComponents,
       parentId: route.id,
       loadingComponent: opts.loadingComponent,
-      reactRouter5Compat: opts.reactRouter5Compat
+      reactRouter5Compat: opts.reactRouter5Compat,
+      useStream: useStream
     });
     if (children.length > 0) {
       route.children = children;
@@ -58,7 +63,9 @@ function NavigateWithParams(props) {
   }, propsWithParams));
 }
 function createClientRoute(opts) {
-  var route = opts.route;
+  var route = opts.route,
+    _opts$useStream2 = opts.useStream,
+    useStream = _opts$useStream2 === void 0 ? true : _opts$useStream2;
   var redirect = route.redirect,
     props = _objectWithoutProperties(route, _excluded);
   var Remote = opts.reactRouter5Compat ? RemoteComponentReactRouter5 : RemoteComponent;
@@ -72,7 +79,8 @@ function createClientRoute(opts) {
     }, /*#__PURE__*/React.createElement(Remote, {
       loader: /*#__PURE__*/React.memo(opts.routeComponent),
       loadingComponent: opts.loadingComponent || DefaultLoading,
-      hasChildren: opts.hasChildren
+      hasChildren: opts.hasChildren,
+      useStream: useStream
     }))
   }, props);
 }
@@ -95,20 +103,21 @@ function RemoteComponentReactRouter5(props) {
 
   // staticContext 没有兼容 好像没看到对应的兼容写法
   var Component = props.loader;
-  return /*#__PURE__*/React.createElement(React.Suspense, {
-    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
-  }, /*#__PURE__*/React.createElement(Component, {
+  var ComponentProps = {
     location: history.location,
     match: match,
     history: history,
     params: params,
     route: route,
     routes: clientRoutes
-  }, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null)));
+  };
+  return props.useStream ? /*#__PURE__*/React.createElement(React.Suspense, {
+    fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
+  }, /*#__PURE__*/React.createElement(Component, ComponentProps, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null))) : /*#__PURE__*/React.createElement(Component, ComponentProps, props.hasChildren && /*#__PURE__*/React.createElement(Outlet, null));
 }
 function RemoteComponent(props) {
   var Component = props.loader;
-  return /*#__PURE__*/React.createElement(React.Suspense, {
+  return props.useStream ? /*#__PURE__*/React.createElement(React.Suspense, {
     fallback: /*#__PURE__*/React.createElement(props.loadingComponent, null)
-  }, /*#__PURE__*/React.createElement(Component, null));
+  }, /*#__PURE__*/React.createElement(Component, null)) : /*#__PURE__*/React.createElement(Component, null);
 }

package/dist/server.js

@@ -21,7 +21,8 @@ function _getClientRootComponent() {
           components = _objectSpread({}, opts.routeComponents); // todo 参数对齐
           clientRoutes = createClientRoutes({
             routesById: opts.routes,
-            routeComponents: components
+            routeComponents: components,
+            useStream: opts.useStream
           });
           opts.pluginManager.applyPlugins({
             key: 'patchClientRoutes',

package/dist/types.d.ts

@@ -65,6 +65,7 @@ export interface IRootComponentOptions extends IHtmlHydrateOptions {
     };
     manifest: any;
     basename?: string;
+    useStream?: boolean;
 }
 export interface IHtmlProps extends IHtmlHydrateOptions {
     children?: React.ReactNode;

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.3.32",
+  "version": "4.3.34",
   "description": "@umijs/renderer-react",
   "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",
   "bugs": "https://github.com/umijs/umi/issues",