@umijs/renderer-react - npm Package Compare versions

Comparing version 4.3.36 to 4.4.0

dist/link.d.ts

@@ -1,5 +0,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>>): React.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>>;

dist/link.js

 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
@@ -17,7 +85,6 @@ // which to might be undefined
   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);
-}
+});

dist/withRouter.d.ts

@@ -17,2 +17,2 @@ import React from 'react';
 }
-export declare function withRouter<P extends RouteComponentProps<P>>(Component: React.ComponentType<P>): (props: P) => React.JSX.Element;
+export declare function withRouter<P extends RouteComponentProps<P>>(Component: React.ComponentType<P>): (props: P) => JSX.Element;

package.json

 {
   "name": "@umijs/renderer-react",
-  "version": "4.3.36",
+  "version": "4.4.0",
   "description": "@umijs/renderer-react",
@@ -5,0 +5,0 @@ "homepage": "https://github.com/umijs/umi/tree/master/packages/renderer-react#readme",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

50324

increased by9.07%

Number of package files

29

increased by7.41%

Lines of code

1180

increased by8.66%

Worsened metrics

Published versions last months

5

decreased by-16.67%

Published versions last two months

10

decreased by-16.67%

No dependency changes