@umijs/renderer-react 4.3.35 → 4.4.0

package/dist/browser.js

@@ -147,9 +147,8 @@ var getBrowser = function getBrowser(opts, routesElement) {
       matchedRouteIds.forEach(function (id) {
         var _opts$routes$id, _opts$routes$id2;
         // preload lazy component
-        // window.__umi_manifest__ is available when routePrefetch and manifest config is enabled
-        // __umi_manifest__ is not needed for preload, keep this is for compatibility and minimal change
-        if (window.__umi_manifest__) {
+        // 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;

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/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/package.json

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