@next-box/link-extra 0.0.19 → 0.1.0

package/src/Link.tsx

@@ -1,5 +1,5 @@
-import { type AnchorHTMLAttributes, type ReactNode } from 'react';
-import { addCacheBusterQueryParam, doUrlAndLocationMatch } from '#helpers.ts';
+import { type AnchorHTMLAttributes, type JSX, type ReactNode } from 'react';
+import { addCacheBusterQueryParam, shouldUrlAndLocationMatch } from '#helpers.ts';
 import { useLinkExtra } from './useLinkExtra.ts';
 
 export type LinkProps<T extends object> = {
@@ -19,24 +19,27 @@ export const Link = <T extends object>({
   prefetch = false,
   scroll = false,
   ...otherProps
-}: LinkProps<T>) => {
-  const { NextLink, OwnLink, setLinkClicked } = useLinkExtra();
+}: LinkProps<T>): JSX.Element => {
+  // This and the two other disables below are false positives
+  // eslint-disable-next-line @eslint-react/static-components
+  const { NextLink, OwnLink, onLinkClicked } = useLinkExtra();
 
   if (disableRouterCache) {
     href = addCacheBusterQueryParam(href);
   }
 
   return (
-    // @ts-expect-error Next.js types wrong for nodenext
+    // This needs to remain: https://github.com/vercel/next.js/discussions/76329
+    // eslint-disable-next-line @typescript-eslint/no-deprecated, @eslint-react/static-components
     <NextLink href={href} legacyBehavior passHref prefetch={prefetch} scroll={scroll}>
-      <OwnLink
+      <OwnLink // eslint-disable-line @eslint-react/static-components
         onClick={event => {
           if (onClick) {
             onClick(event);
           }
 
-          if (!doUrlAndLocationMatch(href) && !event.defaultPrevented) {
-            setLinkClicked(true);
+          if (!shouldUrlAndLocationMatch(href) && !event.defaultPrevented) {
+            onLinkClicked();
           }
         }}
         {...otherProps}

package/src/LinkProvider.tsx

@@ -1,19 +1,19 @@
-import Link from 'next/link.js';
-import { type ComponentType, type ReactNode, createContext, useEffect, useState } from 'react';
-import { type LinkContextData, type OwnLinkProps } from '#types.js';
+import type Link from 'next/link.js';
+import {
+  type ComponentType,
+  type FC,
+  type ReactNode,
+  createContext,
+  useCallback,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { type LinkContextData, type NextLinkComponent, type OwnLinkProps } from '#types.js';
 
-// Needs to return explicit value
-// eslint-disable-next-line unicorn/no-useless-undefined
-const NoopComponent = () => undefined;
-// This is a noop
-// eslint-disable-next-line @typescript-eslint/no-empty-function
-const noop = () => {};
-
-export const LinkContext = createContext<LinkContextData>({
-  NextLink: Link,
-  OwnLink: NoopComponent,
-  setLinkClicked: noop,
-});
+// Context requires an initial value, but this is set in the provider so casting
+// eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+export const LinkContext = createContext<LinkContextData>({} as LinkContextData);
 
 export type LinkProviderProps = {
   LoadingComponent: ComponentType;
@@ -24,55 +24,47 @@ export type LinkProviderProps = {
   pathname: string;
 };
 
-let timeoutId: NodeJS.Timeout | undefined;
-
-export const LinkProvider = ({
+export const LinkProvider: FC<LinkProviderProps> = ({
   LoadingComponent,
   NextLink,
   OwnLink,
   children,
   loadingTimeout = 500,
   pathname,
-}: LinkProviderProps) => {
-  const [linkClicked, setLinkClicked] = useState<boolean>(false);
+}) => {
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const [showLoading, setShowLoading] = useState<boolean>(false);
 
-  useEffect(() => {
-    if (linkClicked) {
-      timeoutId = setTimeout(() => {
-        setShowLoading(true);
-      }, loadingTimeout);
+  const onLinkClicked = useCallback(() => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
 
-    return () => {
-      clearTimeout(timeoutId);
-    };
-    // We only want to re-execute when linkClicked changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [linkClicked]);
+    timeoutRef.current = setTimeout(() => {
+      setShowLoading(true);
+    }, loadingTimeout);
+  }, [loadingTimeout]);
 
   useEffect(() => {
-    if (linkClicked) {
-      setLinkClicked(false);
-      setShowLoading(false);
-      globalThis.scroll(0, 0);
-    }
-
-    if (timeoutId) {
-      clearTimeout(timeoutId);
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
     }
 
-    // We only want to re-execute when pathname changes
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    // This is setting state based on pathname change
+    // eslint-disable-next-line react-hooks/set-state-in-effect, @eslint-react/set-state-in-effect
+    setShowLoading(false);
+    scroll(0, 0);
   }, [pathname]);
 
   return (
-    <LinkContext.Provider
+    <LinkContext
       value={{
-        NextLink,
+        // Casting due to issues marrying up prop type and context type
+        // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
+        NextLink: NextLink as unknown as NextLinkComponent,
         OwnLink,
-        setLinkClicked: clicked => {
-          setLinkClicked(clicked);
+        onLinkClicked: () => {
+          onLinkClicked();
         },
       }}
     >
@@ -80,6 +72,6 @@ export const LinkProvider = ({
         {children}
         {showLoading ? <LoadingComponent /> : undefined}
       </>
-    </LinkContext.Provider>
+    </LinkContext>
   );
 };

package/src/helpers.ts

@@ -1,13 +1,13 @@
 import { nanoid } from 'nanoid';
 
-export const doUrlAndLocationMatch = (url: string) => {
+export const shouldUrlAndLocationMatch = (url: string): boolean => {
   // It is possible for this to be undefined
   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
   if (!globalThis.location) {
     return false;
   }
 
-  const parsedUrl = URL.parse(url, globalThis.location.origin);
+  const parsedUrl = URL.parse(url, location.origin);
 
   if (!parsedUrl) {
     return false;
@@ -20,15 +20,13 @@ export const doUrlAndLocationMatch = (url: string) => {
     urlSearchParams.delete('y');
   }
 
-  const locationSearchParams = new URLSearchParams(globalThis.location.search);
+  const locationSearchParams = new URLSearchParams(location.search);
 
   if (locationSearchParams.has('y')) {
     locationSearchParams.delete('y');
   }
 
-  return (
-    `${pathname}?${urlSearchParams.toString()}` === `${globalThis.location.pathname}?${locationSearchParams.toString()}`
-  );
+  return `${pathname}?${urlSearchParams.toString()}` === `${location.pathname}?${locationSearchParams.toString()}`;
 };
 
 export const addCacheBusterQueryParam = (url: string): string => {
@@ -38,13 +36,13 @@ export const addCacheBusterQueryParam = (url: string): string => {
     return url;
   }
 
-  const parsedUrl = URL.parse(url, globalThis.location.origin);
+  const parsedUrl = URL.parse(url, location.origin);
 
   if (!parsedUrl) {
     return url;
   }
 
-  const locationSearchParams = new URLSearchParams(globalThis.location.search);
+  const locationSearchParams = new URLSearchParams(location.search);
   const locationCacheBusterSearchParam = locationSearchParams.get('y');
 
   if (locationCacheBusterSearchParam) {
@@ -54,7 +52,7 @@ export const addCacheBusterQueryParam = (url: string): string => {
   const { pathname, search } = parsedUrl;
   const searchParams = new URLSearchParams(search);
 
-  if (`${pathname}?${search}` === `${globalThis.location.pathname}?${locationSearchParams.toString()}`) {
+  if (`${pathname}?${search}` === `${location.pathname}?${locationSearchParams.toString()}`) {
     searchParams.set('y', locationCacheBusterSearchParam ?? nanoid());
   } else {
     searchParams.set('y', nanoid());

package/src/types.ts

@@ -1,12 +1,18 @@
-import type NextLink from 'next/link.js';
-import { type AnchorHTMLAttributes, type ComponentType } from 'react';
+import { type LinkProps } from 'next/link.js';
+import { type AnchorHTMLAttributes, type ComponentType, type ReactNode } from 'react';
 
 // This needs to be as generic as possible
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 export type OwnLinkProps = Record<string, any> & AnchorHTMLAttributes<HTMLAnchorElement>;
 
+export type NextLinkComponent = ComponentType<
+  LinkProps & {
+    children: ReactNode;
+  }
+>;
+
 export type LinkContextData = {
-  NextLink: typeof NextLink;
+  NextLink: NextLinkComponent;
   OwnLink: ComponentType<AnchorHTMLAttributes<HTMLAnchorElement>>;
-  setLinkClicked: (clicked: true) => void;
+  onLinkClicked: () => void;
 };

package/src/useLinkExtra.ts

@@ -1,7 +1,7 @@
-import { useContext } from 'react';
+import { use } from 'react';
 import { type LinkContextData } from '#types.ts';
 import { LinkContext } from './LinkProvider.tsx';
 
 export const useLinkExtra = (): LinkContextData => {
-  return useContext(LinkContext);
+  return use(LinkContext);
 };