@shuvi/platform-web 2.0.0-dev.21 → 2.0.0-dev.22

package/esm/shuvi-app/react/Link.d.ts

@@ -1,7 +1,13 @@
 import { LinkProps } from '@shuvi/router-react';
-export declare const Link: ({ to, ref, prefetch, onMouseEnter, ...rest }: LinkWrapperProps) => JSX.Element;
+export declare const Link: ({ prefetch, ...rest }: LinkWrapperProps) => JSX.Element;
 interface LinkWrapperProps extends LinkProps {
-    prefetch?: boolean;
+    /**
+     * Controls link prefetching behavior:
+     * - `undefined` or `true`: Auto prefetch when visible + hover prefetch (default)
+     * - `false`: Disable auto prefetch, only prefetch on hover
+     * - `'none'`: Completely disable all prefetching (no auto, no hover)
+     */
+    prefetch?: boolean | 'none';
     ref?: any;
 }
 export {};

package/esm/shuvi-app/react/Link.jsx

@@ -75,24 +75,45 @@ function prefetchFn(router, to) {
 const isAbsoluteUrl = (url) => {
     return ABSOLUTE_URL_REGEX.test(url);
 };
-export const Link = function LinkWithPrefetch(_a) {
+// Internal component with prefetch logic (contains hooks)
+const LinkWithPrefetch = function (_a) {
     var { to, ref, prefetch, onMouseEnter } = _a, rest = __rest(_a, ["to", "ref", "prefetch", "onMouseEnter"]);
     const isHrefValid = typeof to === 'string' && !isAbsoluteUrl(to);
+    const shouldAutoPrefetch = prefetch !== false;
     const previousHref = React.useRef(to);
-    const [setIntersectionRef, isVisible, resetVisible] = useIntersection({});
+    const isMountedRef = React.useRef(true);
     const { router } = React.useContext(RouterContext);
+    const [setIntersectionRef, isVisible, resetVisible] = useIntersection({
+        disabled: !shouldAutoPrefetch
+    });
+    React.useEffect(() => {
+        isMountedRef.current = true;
+        return () => {
+            isMountedRef.current = false;
+        };
+    }, []);
     const setRef = React.useCallback((el) => __awaiter(this, void 0, void 0, function* () {
-        /**
-         * Lazy prefetching to avoid negative performance impact for the first page.
-         */
-        yield awaitPageLoadAndIdle({ remainingTime: 49, timeout: 10 * 1000 });
-        // Before the link getting observed, check if visible state need to be reset
-        if (isHrefValid && previousHref.current !== to) {
-            resetVisible();
-            previousHref.current = to;
+        // Handle unmount: cleanup IntersectionObserver
+        if (!el) {
+            setIntersectionRef(null);
+            return;
+        }
+        if (shouldAutoPrefetch) {
+            /**
+             * Lazy prefetching to avoid negative performance impact for the first page.
+             */
+            yield awaitPageLoadAndIdle({ remainingTime: 49, timeout: 10 * 1000 });
+            // Check if component is still mounted after async operation
+            if (!isMountedRef.current || !el.isConnected)
+                return;
+            // Before the link getting observed, check if visible state need to be reset
+            if (isHrefValid && previousHref.current !== to) {
+                resetVisible();
+                previousHref.current = to;
+            }
+            if (isHrefValid)
+                setIntersectionRef(el);
         }
-        if (isHrefValid && prefetch !== false)
-            setIntersectionRef(el);
         if (ref) {
             if (typeof ref === 'function')
                 ref(el);
@@ -100,14 +121,13 @@ export const Link = function LinkWithPrefetch(_a) {
                 ref.current = el;
             }
         }
-    }), [to, isHrefValid, prefetch, resetVisible, setIntersectionRef, ref]);
+    }), [to, isHrefValid, shouldAutoPrefetch, resetVisible, setIntersectionRef, ref]);
     React.useEffect(() => {
-        const shouldPrefetch = isHrefValid && prefetch !== false && isVisible;
-        if (shouldPrefetch && !prefetched[to]) {
+        if (shouldAutoPrefetch && isHrefValid && isVisible && !prefetched[to]) {
             prefetchFn(router, to);
             prefetched[to] = true;
         }
-    }, [to, prefetch, isVisible]);
+    }, [to, isVisible, isHrefValid, shouldAutoPrefetch]);
     const childProps = {
         ref: setRef,
         onMouseEnter: (e) => {
@@ -122,3 +142,13 @@ export const Link = function LinkWithPrefetch(_a) {
     };
     return <LinkFromRouterReact to={to} {...rest} {...childProps}/>;
 };
+// Wrapper component (no hooks, safe to return early)
+export const Link = function (_a) {
+    var { prefetch } = _a, rest = __rest(_a, ["prefetch"]);
+    // When prefetch is "none", completely disable all prefetching (auto + hover)
+    if (prefetch === 'none') {
+        return <LinkFromRouterReact {...rest}/>;
+    }
+    // Otherwise use the full prefetch logic
+    return <LinkWithPrefetch prefetch={prefetch} {...rest}/>;
+};

package/esm/shuvi-app/react/utils/useIntersection.jsx

@@ -21,18 +21,28 @@ export default function useIntersection({ rootRef, rootMargin = '0px', disabled
         setVisible(false);
     }, []);
     useEffect(() => {
-        if (!hasIntersectionObserver) {
+        // Only execute when IntersectionObserver is unavailable AND not disabled
+        if (!hasIntersectionObserver && !isDisabled) {
             if (!visible) {
                 const idleCallback = requestIdleCallback(() => setVisible(true));
                 return () => cancelIdleCallback(idleCallback);
             }
         }
         return () => { };
-    }, [visible]);
+    }, [visible, isDisabled]);
     useEffect(() => {
-        if (rootRef)
+        if (rootRef && !isDisabled)
             setRoot(rootRef.current);
-    }, [rootRef]);
+    }, [rootRef, isDisabled]);
+    // Cleanup on unmount
+    useEffect(() => {
+        return () => {
+            if (unobserve.current) {
+                unobserve.current();
+                unobserve.current = undefined;
+            }
+        };
+    }, []);
     return [setRef, visible, resetVisible];
 }
 function observe(element, callback, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shuvi/platform-web",
-  "version": "2.0.0-dev.21",
+  "version": "2.0.0-dev.22",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/shuvijs/shuvi.git",
@@ -72,15 +72,15 @@
   },
   "dependencies": {
     "@rspack/plugin-react-refresh": "^1.4.3",
-    "@shuvi/error-overlay": "2.0.0-dev.21",
-    "@shuvi/hook": "2.0.0-dev.21",
-    "@shuvi/platform-shared": "2.0.0-dev.21",
-    "@shuvi/router": "2.0.0-dev.21",
-    "@shuvi/router-react": "2.0.0-dev.21",
-    "@shuvi/runtime": "2.0.0-dev.21",
-    "@shuvi/shared": "2.0.0-dev.21",
-    "@shuvi/toolpack": "2.0.0-dev.21",
-    "@shuvi/utils": "2.0.0-dev.21",
+    "@shuvi/error-overlay": "2.0.0-dev.22",
+    "@shuvi/hook": "2.0.0-dev.22",
+    "@shuvi/platform-shared": "2.0.0-dev.22",
+    "@shuvi/router": "2.0.0-dev.22",
+    "@shuvi/router-react": "2.0.0-dev.22",
+    "@shuvi/runtime": "2.0.0-dev.22",
+    "@shuvi/shared": "2.0.0-dev.22",
+    "@shuvi/toolpack": "2.0.0-dev.22",
+    "@shuvi/utils": "2.0.0-dev.22",
     "content-type": "1.0.4",
     "core-js": "3.6.5",
     "doura": "0.0.13",
@@ -98,7 +98,7 @@
     "whatwg-fetch": "3.0.0"
   },
   "peerDependencies": {
-    "@shuvi/service": "2.0.0-dev.21"
+    "@shuvi/service": "2.0.0-dev.22"
   },
   "devDependencies": {
     "@shuvi/service": "workspace:*",