Modify prefetch delay and support focus and pointer events to prefetch (#169)

Author: dalehurwitz

examples/routing-with-resources/index.tsx

@@ -19,7 +19,7 @@ const App = () => {
       routes={appRoutes}
       history={myHistory}
       basePath="/routing-with-resources"
-      onPrefetch={({ route }) => console.log('Prefetcing route', route.name)}
+      onPrefetch={({ route }) => console.log('Prefetching route', route.name)}
     >
       <RouteComponent />
     </Router>

src/__tests__/unit/common/utils/use-timeout/test.tsx

@@ -0,0 +1,82 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { useTimeout } from '../../../../../common/utils';
+
+const setTimeoutSpy = jest.spyOn(global, 'setTimeout');
+const clearTimeoutSpy = jest.spyOn(global, 'clearTimeout');
+
+const DEFAULT_DELAY = 1000;
+
+const TestComponent = ({
+  callback,
+  delay = DEFAULT_DELAY,
+}: {
+  callback: () => void;
+  delay?: number;
+}) => {
+  const { schedule, cancel } = useTimeout(delay);
+
+  return (
+    <>
+      <button id="schedule" onClick={() => schedule(callback)} />
+      <button id="cancel" onClick={cancel} />
+    </>
+  );
+};
+
+describe('useTimeout', () => {
+  const mockCallback = jest.fn();
+
+  beforeEach(() => {
+    mockCallback.mockClear();
+    setTimeoutSpy.mockClear();
+    clearTimeoutSpy.mockClear();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('calls setTimeout on schedule()', () => {
+    const wrapper = shallow(<TestComponent callback={mockCallback} />);
+    wrapper.find('#schedule').simulate('click');
+    expect(setTimeoutSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls clearTimeout on cancel()', () => {
+    const wrapper = shallow(<TestComponent callback={mockCallback} />);
+    wrapper.find('#cancel').simulate('click');
+    expect(clearTimeoutSpy).toHaveBeenCalledTimes(1);
+  });
+
+  it('schedules a callback to be fired', () => {
+    jest.useFakeTimers();
+    const wrapper = shallow(<TestComponent callback={mockCallback} />);
+    wrapper.find('#schedule').simulate('click');
+    jest.runOnlyPendingTimers();
+    expect(mockCallback).toHaveBeenCalledTimes(1);
+  });
+
+  it('cancels a scheduled callback', () => {
+    jest.useFakeTimers();
+    const wrapper = shallow(<TestComponent callback={mockCallback} />);
+    wrapper.find('#schedule').simulate('click');
+    wrapper.find('#cancel').simulate('click');
+    jest.runAllTimers();
+    expect(mockCallback).not.toHaveBeenCalled();
+  });
+
+  it('cancels a previously scheduled callback when schedule is called again', () => {
+    const mockCallback2 = jest.fn();
+    jest.useFakeTimers();
+    const wrapper = shallow(<TestComponent callback={mockCallback} />);
+    wrapper.find('#schedule').simulate('click');
+    wrapper.setProps({ callback: mockCallback2 });
+    wrapper.find('#schedule').simulate('click');
+
+    jest.runAllTimers();
+
+    expect(mockCallback).not.toHaveBeenCalled();
+    expect(mockCallback2).toHaveBeenCalledTimes(1);
+  });
+});

src/common/types.ts

@@ -267,6 +267,9 @@ export type LinkProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
   onClick?: (e: MouseEvent | KeyboardEvent) => void;
   onMouseEnter?: (e: MouseEvent) => void;
   onMouseLeave?: (e: MouseEvent) => void;
+  onPointerDown?: (e: PointerEvent) => void;
+  onFocus?: (e: FocusEvent) => void;
+  onBlur?: (e: FocusEvent) => void;
   params?: MatchParams;
   query?: Query;
   prefetch?: false | 'hover' | 'mount';

src/common/utils/index.ts

@@ -8,3 +8,4 @@ export { generateLocationFromPath } from './generate-location';
 export { createLegacyHistory } from './history';
 export { isServerEnvironment } from './is-server-environment';
 export { findRouterContext, createRouterContext } from './router-context';
+export { useTimeout } from './use-timeout';

src/common/utils/use-timeout/index.ts

@@ -0,0 +1,22 @@
+import { useCallback, useRef } from 'react';
+
+export const useTimeout = (delay: number) => {
+  const timeoutId = useRef<NodeJS.Timeout>();
+
+  const schedule = useCallback(
+    (callback: () => void) => {
+      if (timeoutId.current) {
+        clearTimeout(timeoutId.current);
+      }
+
+      timeoutId.current = setTimeout(callback, delay);
+    },
+    [delay]
+  );
+
+  const cancel = useCallback(() => {
+    clearTimeout(timeoutId.current);
+  }, []);
+
+  return { schedule, cancel };
+};

src/ui/link/index.tsx

@@ -4,13 +4,14 @@ import {
   forwardRef,
   useCallback,
   useEffect,
-  useRef,
   useState,
   MouseEvent,
   KeyboardEvent,
+  FocusEvent,
 } from 'react';
 
 import { LinkProps, Route } from '../../common/types';
+import { useTimeout } from '../../common/utils';
 import {
   createRouterContext,
   generateLocationFromPath,
@@ -19,7 +20,7 @@ import { useRouterStoreStatic } from '../../controllers/router-store';
 
 import { getValidLinkType, handleNavigation } from './utils';
 
-const PREFETCH_DELAY = 300;
+const PREFETCH_DELAY = 225;
 
 const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
   (
@@ -32,6 +33,9 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
       onClick = undefined,
       onMouseEnter = undefined,
       onMouseLeave = undefined,
+      onPointerDown = undefined,
+      onFocus = undefined,
+      onBlur = undefined,
       type: linkType = 'a',
       params,
       query,
@@ -41,7 +45,7 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
     ref
   ) => {
     const routerActions = useRouterStoreStatic()[1];
-    const prefetchRef = useRef<NodeJS.Timeout>();
+    const { schedule, cancel } = useTimeout(PREFETCH_DELAY);
 
     const validLinkType = getValidLinkType(linkType);
     const [route, setRoute] = useState<Route | void>(() => {
@@ -69,8 +73,6 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
         : to;
 
     const triggerPrefetch = useCallback(() => {
-      prefetchRef.current = undefined;
-
       // ignore if async route not ready yet
       if (typeof to !== 'string' && !route) return;
 
@@ -84,12 +86,12 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
     }, [route, linkDestination, routerActions]);
 
     useEffect(() => {
-      let timeout: NodeJS.Timeout;
-      if (prefetch === 'mount')
-        timeout = setTimeout(triggerPrefetch, PREFETCH_DELAY);
+      if (prefetch === 'mount') {
+        schedule(triggerPrefetch);
+      }
 
-      return () => clearTimeout(timeout);
-    }, [prefetch, triggerPrefetch]);
+      return cancel;
+    }, [prefetch, schedule, cancel, triggerPrefetch]);
 
     const handleLinkPress = (e: MouseEvent | KeyboardEvent) =>
       handleNavigation(e, {
@@ -103,19 +105,40 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
 
     const handleMouseEnter = (e: MouseEvent) => {
       if (prefetch === 'hover') {
-        prefetchRef.current = setTimeout(triggerPrefetch, PREFETCH_DELAY);
+        schedule(triggerPrefetch);
       }
       onMouseEnter && onMouseEnter(e);
     };
 
     const handleMouseLeave = (e: MouseEvent) => {
-      if (prefetch === 'hover' && prefetchRef.current) {
-        clearTimeout(prefetchRef.current);
-        prefetchRef.current = undefined;
+      if (prefetch === 'hover') {
+        cancel();
       }
       onMouseLeave && onMouseLeave(e);
     };
 
+    const handleFocus = (e: FocusEvent<HTMLAnchorElement>) => {
+      if (prefetch === 'hover') {
+        schedule(triggerPrefetch);
+      }
+      onFocus && onFocus(e);
+    };
+
+    const handleBlur = (e: FocusEvent<HTMLAnchorElement>) => {
+      if (prefetch === 'hover') {
+        cancel();
+      }
+      onBlur && onBlur(e);
+    };
+
+    const handlePointerDown = (e: PointerEvent) => {
+      if (prefetch === 'hover') {
+        cancel();
+        triggerPrefetch();
+      }
+      onPointerDown && onPointerDown(e);
+    };
+
     return createElement(
       validLinkType,
       {
@@ -126,6 +149,9 @@ const Link = forwardRef<HTMLButtonElement | HTMLAnchorElement, LinkProps>(
         onKeyDown: handleLinkPress,
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        onPointerDown: handlePointerDown,
         ref,
       },
       children