cloudflare-next-intl 0.9.29 → 0.9.32

package/dist/src/server/components/link.d.ts

@@ -1,8 +1,9 @@
 import { type LinkProps } from 'next/link.js';
 import { type ComponentProps } from 'react';
-export type PrefetchType = 'custom' | 'default';
+export type PrefetchType = 'custom' | 'eager' | 'default';
 type NextLinkProps = Omit<ComponentProps<'a'>, keyof LinkProps> & Omit<LinkProps, 'locale'> & {
     prefetchType?: PrefetchType;
 };
+export declare const PENDING_NAVIGATION_EVENT = "cloudflare-next-intl:pending-navigation";
 declare const Link: import("react").ForwardRefExoticComponent<Omit<NextLinkProps, "ref"> & import("react").RefAttributes<HTMLAnchorElement>>;
 export default Link;

package/dist/src/server/components/link.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import LinkComponent from 'next/link.js';
-import { forwardRef, useCallback, useEffect, useState, useTransition, } from 'react';
+import { forwardRef, useCallback, useEffect, useRef, useState, useTransition, } from 'react';
 import config from '../../config/intl_config.js';
 import { getLocaleCache } from '../../general/cache_variables.js';
 import { usePathname, useRouter } from 'next/navigation.js';
 const prefetchedRoutes = new Set();
-function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick, onMouseEnter, onPointerDown, ...rest }, ref) {
+export const PENDING_NAVIGATION_EVENT = 'cloudflare-next-intl:pending-navigation';
+function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick, onMouseEnter, onMouseLeave, onPointerDown, ...rest }, ref) {
     const localeValue = getLocaleCache();
     const router = useRouter();
+    prefetch ?? (prefetch = config.link?.defaultPrefetch ?? false);
     const needsLangPath = localeValue !== config.defaultLocale || !localeValue;
     let pathnames;
     let urlString;
@@ -26,6 +28,7 @@ function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick,
     const [isNavigating, setIsNavigating] = useState(false);
     useEffect(() => {
         setIsNavigating(false);
+        window.dispatchEvent(new CustomEvent(PENDING_NAVIGATION_EVENT, { detail: null }));
     }, [pathname]);
     useEffect(() => {
         if (!isNavigating)
@@ -33,9 +36,11 @@ function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick,
         const timer = setTimeout(() => setIsNavigating(false), 10000);
         return () => clearTimeout(timer);
     }, [isNavigating]);
-    const isCustom = prefetchType === 'custom' && prefetch !== false;
-    const triggerPrefetch = useCallback(() => {
-        if (!isCustom || !urlString || urlString.startsWith('#') || prefetchedRoutes.has(urlString)) {
+    const isCustom = prefetchType === 'custom' || prefetchType === 'eager';
+    const prefetchEnabled = isCustom && prefetch !== false;
+    const isEager = prefetchType === 'eager' && prefetchEnabled;
+    const doPrefetch = useCallback(() => {
+        if (!urlString || urlString.startsWith('#') || prefetchedRoutes.has(urlString)) {
             return;
         }
         prefetchedRoutes.add(urlString);
@@ -44,18 +49,35 @@ function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick,
         }
         catch {
         }
-    }, [isCustom, urlString, pathnames, router]);
-    useEffect(() => {
+    }, [urlString, pathnames, router]);
+    const triggerPointerDownPrefetch = useCallback(() => {
         if (!isCustom)
             return;
-        const timer = setTimeout(triggerPrefetch, 100);
+        doPrefetch();
+    }, [isCustom, doPrefetch]);
+    useEffect(() => {
+        if (!isEager)
+            return;
+        const timer = setTimeout(doPrefetch, 100);
         return () => clearTimeout(timer);
-    }, [urlString, isCustom, triggerPrefetch]);
-    const handleHoverPrefetch = () => {
-        if (isCustom) {
-            triggerPrefetch();
+    }, [urlString, isEager, doPrefetch]);
+    const hoverTimerRef = useRef(null);
+    const clearHoverTimer = () => {
+        if (hoverTimerRef.current) {
+            clearTimeout(hoverTimerRef.current);
+            hoverTimerRef.current = null;
         }
     };
+    const handleHoverStart = () => {
+        if (!prefetchEnabled)
+            return;
+        clearHoverTimer();
+        hoverTimerRef.current = setTimeout(doPrefetch, 100);
+    };
+    const handleHoverEnd = () => {
+        clearHoverTimer();
+    };
+    useEffect(() => clearHoverTimer, []);
     const handleClick = (e) => {
         onClick?.(e);
         if (e.defaultPrevented)
@@ -68,6 +90,12 @@ function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick,
             const targetPath = typeof pathnames === 'string' ? pathnames : urlString;
             if (pathname !== targetPath) {
                 setIsNavigating(true);
+                try {
+                    window.history.replaceState(window.history.state, '', targetPath);
+                    window.dispatchEvent(new CustomEvent(PENDING_NAVIGATION_EVENT, { detail: targetPath }));
+                }
+                catch {
+                }
             }
             startTransition(() => {
                 router.push(targetPath);
@@ -77,10 +105,13 @@ function CustomLinkFunction({ href, prefetch, prefetchType = 'custom', onClick,
     };
     const effectivePrefetch = isCustom ? false : prefetch;
     return _jsx(LinkComponent, { ref: ref, href: pathnames, prefetch: effectivePrefetch, onClick: handleClick, onMouseEnter: (e) => {
-            handleHoverPrefetch();
+            handleHoverStart();
             onMouseEnter?.(e);
+        }, onMouseLeave: (e) => {
+            handleHoverEnd();
+            onMouseLeave?.(e);
         }, onPointerDown: (e) => {
-            handleHoverPrefetch();
+            triggerPointerDownPrefetch();
             onPointerDown?.(e);
         }, ...rest });
 }

package/dist/src/types/types.d.ts

@@ -19,6 +19,10 @@ export interface RoutingConfig<AppLocales extends Locales, AppLocalePrefixMode e
     cookieConsent?: CookieConsentRoutingConfig;
     generate?: GenerateRoutingConfig;
     errorHandling?: ErrorHandlingRoutingConfig;
+    link?: LinkRoutingConfig;
+}
+export interface LinkRoutingConfig {
+    defaultPrefetch?: boolean;
 }
 export interface GenerateRoutingConfig {
     env?: object | Record<string, unknown> | (() => object | Record<string, unknown> | Promise<object | Record<string, unknown>>);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudflare-next-intl",
-  "version": "0.9.29",
+  "version": "0.9.32",
   "description": "Optimized Next Intl Package Special for App Router and Cloudflare",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",