@umijs/renderer-react 4.0.0-canary.20241023.1 → 4.0.0-canary.20250731.1

package/dist/browser.d.ts

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

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',
@@ -145,38 +146,14 @@ var getBrowser = function getBrowser(opts, routesElement) {
       })) || []).filter(Boolean);
       matchedRouteIds.forEach(function (id) {
         var _opts$routes$id, _opts$routes$id2;
-        // preload
-        // @ts-ignore
-        var manifest = window.__umi_manifest__;
-        if (manifest) {
-          var routeIdReplaced = id.replace(/[\/\-]/g, '_');
-          var preloadId = "preload-".concat(routeIdReplaced, ".js");
-          if (!document.getElementById(preloadId)) {
-            var keys = Object.keys(manifest).filter(function (k) {
-              return k.startsWith(routeIdReplaced + '.');
-            });
-            keys.forEach(function (key) {
-              if (!/\.(js|css)$/.test(key)) {
-                throw Error("preload not support ".concat(key, " file"));
-              }
-              var file = manifest[key];
-              var link = document.createElement('link');
-              link.rel = 'preload';
-              link.as = 'style';
-              if (key.endsWith('.js')) {
-                link.as = 'script';
-                link.id = preloadId;
-              }
-              // publicPath already in the manifest,
-              // but if runtimePublicPath is true, we need to replace it
-              if (opts.runtimePublicPath) {
-                file = file.replace(new RegExp("^".concat(opts.publicPath)),
-                // @ts-ignore
-                window.publicPath);
-              }
-              link.href = file;
-              document.head.appendChild(link);
-            });
+        // preload lazy component
+        // window.__umi_route_prefetch__ is available when routePrefetch and manifest config is enabled
+        if (window.__umi_route_prefetch__) {
+          var _opts$routeComponents;
+          // ref: https://github.com/facebook/react/blob/0940414/packages/react/src/ReactLazy.js#L135
+          var lazyCtor = (_opts$routeComponents = opts.routeComponents[id]) === null || _opts$routeComponents === void 0 || (_opts$routeComponents = _opts$routeComponents._payload) === null || _opts$routeComponents === void 0 ? void 0 : _opts$routeComponents._result;
+          if (typeof lazyCtor == 'function') {
+            lazyCtor();
           }
         }
         var clientLoader = (_opts$routes$id = opts.routes[id]) === null || _opts$routes$id === void 0 ? void 0 : _opts$routes$id.clientLoader;

package/dist/html.js

@@ -101,8 +101,7 @@ var HydrateMetadata = function HydrateMetadata(props) {
       dangerouslySetInnerHTML: {
         __html: content
       },
-      key: key,
-      crossOrigin: "anonymous"
+      key: key
     }, rest));
   }));
 };
@@ -117,7 +116,9 @@ export function Html(_ref) {
   // 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", {
+    return /*#__PURE__*/React.createElement("html", null, /*#__PURE__*/React.createElement("head", null, /*#__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,
@@ -160,8 +161,7 @@ export function Html(_ref) {
         dangerouslySetInnerHTML: {
           __html: content
         },
-        key: key,
-        crossOrigin: "anonymous"
+        key: key
       }, rest));
     })))
   );

package/dist/link.d.ts

@@ -1,5 +1,6 @@
-import React, { PropsWithChildren } from 'react';
+import React from 'react';
 import { LinkProps } from 'react-router-dom';
-export declare function LinkWithPrefetch(props: PropsWithChildren<{
-    prefetch?: boolean;
-} & LinkProps & React.RefAttributes<HTMLAnchorElement>>): JSX.Element | null;
+export declare const LinkWithPrefetch: React.ForwardRefExoticComponent<Omit<React.PropsWithChildren<{
+    prefetch?: boolean | "viewport" | "render" | "intent" | "none" | undefined;
+    prefetchTimeout?: number | undefined;
+} & LinkProps & React.RefAttributes<HTMLAnchorElement>>, "ref"> & React.RefAttributes<unknown>>;

package/dist/link.js

@@ -1,22 +1,89 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["prefetch"];
-import React from 'react';
+import React, { useLayoutEffect } from 'react';
 import { Link } from 'react-router-dom';
 import { useAppData } from "./appContext";
-export function LinkWithPrefetch(props) {
+import { useIntersectionObserver } from "./useIntersectionObserver";
+function useForwardedRef(ref) {
+  var innerRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref) return;
+    if (typeof ref === 'function') {
+      ref(innerRef.current);
+    } else {
+      ref.current = innerRef.current;
+    }
+  });
+  return innerRef;
+}
+export var LinkWithPrefetch = /*#__PURE__*/React.forwardRef(function (props, forwardedRef) {
   var _props$to;
-  var prefetch = props.prefetch,
+  var prefetchProp = props.prefetch,
     linkProps = _objectWithoutProperties(props, _excluded);
+  var _ref = typeof window !== 'undefined' &&
+    // @ts-ignore
+    window.__umi_route_prefetch__ || {
+      defaultPrefetch: 'none',
+      defaultPrefetchTimeout: 50
+    },
+    defaultPrefetch = _ref.defaultPrefetch,
+    defaultPrefetchTimeout = _ref.defaultPrefetchTimeout;
+  var prefetch = (prefetchProp === true ? 'intent' : prefetchProp === false ? 'none' : prefetchProp) || defaultPrefetch;
+  if (!['intent', 'render', 'viewport', 'none'].includes(prefetch)) {
+    throw new Error("Invalid prefetch value ".concat(prefetch, " found in Link component"));
+  }
   var appData = useAppData();
   var to = typeof props.to === 'string' ? props.to : (_props$to = props.to) === null || _props$to === void 0 ? void 0 : _props$to.pathname;
+  var hasRenderFetched = React.useRef(false);
+  var ref = useForwardedRef(forwardedRef);
+  // prefetch intent
+  var handleMouseEnter = function handleMouseEnter(e) {
+    if (prefetch !== 'intent') return;
+    var eventTarget = e.target || {};
+    if (eventTarget.preloadTimeout) return;
+    eventTarget.preloadTimeout = setTimeout(function () {
+      var _appData$preloadRoute;
+      eventTarget.preloadTimeout = null;
+      (_appData$preloadRoute = appData.preloadRoute) === null || _appData$preloadRoute === void 0 || _appData$preloadRoute.call(appData, to);
+    }, props.prefetchTimeout || defaultPrefetchTimeout);
+  };
+  var handleMouseLeave = function handleMouseLeave(e) {
+    if (prefetch !== 'intent') return;
+    var eventTarget = e.target || {};
+    if (eventTarget.preloadTimeout) {
+      clearTimeout(eventTarget.preloadTimeout);
+      eventTarget.preloadTimeout = null;
+    }
+  };
+
+  // prefetch render
+  useLayoutEffect(function () {
+    if (prefetch === 'render' && !hasRenderFetched.current) {
+      var _appData$preloadRoute2;
+      (_appData$preloadRoute2 = appData.preloadRoute) === null || _appData$preloadRoute2 === void 0 || _appData$preloadRoute2.call(appData, to);
+      hasRenderFetched.current = true;
+    }
+  }, [prefetch, to]);
+
+  // prefetch viewport
+  useIntersectionObserver(ref, function (entry) {
+    if (entry !== null && entry !== void 0 && entry.isIntersecting) {
+      var _appData$preloadRoute3;
+      (_appData$preloadRoute3 = appData.preloadRoute) === null || _appData$preloadRoute3 === void 0 || _appData$preloadRoute3.call(appData, to);
+    }
+  }, {
+    rootMargin: '100px'
+  }, {
+    disabled: prefetch !== 'viewport'
+  });
+
   // compatible with old code
   // which to might be undefined
   if (!to) return null;
   return /*#__PURE__*/React.createElement(Link, _extends({
-    onMouseEnter: function onMouseEnter() {
-      var _appData$preloadRoute;
-      return prefetch && to && ((_appData$preloadRoute = appData.preloadRoute) === null || _appData$preloadRoute === void 0 ? void 0 : _appData$preloadRoute.call(appData, to));
-    }
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    ref: ref
   }, linkProps), props.children);
-}
+});

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

@@ -0,0 +1,4 @@
+import React from 'react';
+export declare function useIntersectionObserver<T extends Element>(ref: React.RefObject<T>, callback: (entry: IntersectionObserverEntry | undefined) => void, intersectionObserverOptions?: IntersectionObserverInit, options?: {
+    disabled?: boolean;
+}): IntersectionObserver | null;

package/dist/useIntersectionObserver.js

@@ -0,0 +1,26 @@
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import React from 'react';
+export function useIntersectionObserver(ref, callback) {
+  var intersectionObserverOptions = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  // check if IntersectionObserver is available
+  if (typeof IntersectionObserver !== 'function') return null;
+  var isIntersectionObserverAvailable = React.useRef(typeof IntersectionObserver === 'function');
+  var observerRef = React.useRef(null);
+  React.useEffect(function () {
+    if (!ref.current || !isIntersectionObserverAvailable.current || options.disabled) {
+      return;
+    }
+    observerRef.current = new IntersectionObserver(function (_ref) {
+      var _ref2 = _slicedToArray(_ref, 1),
+        entry = _ref2[0];
+      callback(entry);
+    }, intersectionObserverOptions);
+    observerRef.current.observe(ref.current);
+    return function () {
+      var _observerRef$current;
+      (_observerRef$current = observerRef.current) === null || _observerRef$current === void 0 || _observerRef$current.disconnect();
+    };
+  }, [callback, intersectionObserverOptions, options.disabled, ref]);
+  return observerRef.current;
+}

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