Merge pull request #7612 from maiieul/Link-onQVisible-handling

Author: shairez

.changeset/witty-spoons-hug.md

@@ -0,0 +1,5 @@
+---
+'@builder.io/qwik-city': patch
+---
+
+🩹 SPA Link now handle subsequent onQVisible$ passed as props.

packages/qwik-city/src/runtime/src/link-component.tsx

@@ -7,6 +7,8 @@ import {
   useSignal,
   useVisibleTask$,
   untrack,
+  type EventHandler,
+  type QwikVisibleEvent,
 } from '@builder.io/qwik';
 import { getClientNavPath, shouldPreload } from './utils';
 import { loadClientData } from './use-endpoint';
@@ -85,6 +87,22 @@ export const Link = component$<LinkProps>((props) => {
 
   useVisibleTask$(({ track }) => {
     track(() => loc.url.pathname);
+    // We need to trigger the onQVisible$ in the visible task for it to fire on subsequent route navigations
+    const handler = linkProps.onQVisible$;
+    if (handler) {
+      const event = new CustomEvent('qvisible') as QwikVisibleEvent;
+
+      if (Array.isArray(handler)) {
+        (handler as any)
+          .flat(10)
+          .forEach((handler: EventHandler<QwikVisibleEvent, HTMLAnchorElement>) =>
+            handler?.(event, anchorRef.value!)
+          );
+      } else {
+        handler?.(event, anchorRef.value!);
+      }
+    }
+
     // Don't prefetch on visible in dev mode
     if (!isDev && anchorRef.value) {
       handlePrefetch?.(undefined, anchorRef.value!);
@@ -101,6 +119,8 @@ export const Link = component$<LinkProps>((props) => {
       data-prefetch={prefetchData}
       onMouseOver$={[linkProps.onMouseOver$, handlePrefetch]}
       onFocus$={[linkProps.onFocus$, handlePrefetch]}
+      // We need to prevent the onQVisible$ from being called twice since it is handled in the visible task
+      onQVisible$={[]}
     >
       <Slot />
     </a>

starters/apps/preloader-test/src/routes/counters/index.tsx

@@ -1,5 +1,5 @@
 import { component$ } from "@builder.io/qwik";
-
+import { Link } from "@builder.io/qwik-city";
 import Counter1 from "~/components/generated/counter1";
 import Counter2 from "~/components/generated/counter2";
 import Counter3 from "~/components/generated/counter3";
@@ -213,6 +213,12 @@ export default component$(() => {
       <Counter98 />
       <Counter99 />
       <Counter100 />
+      <Link
+        href="/hidden"
+        onQVisible$={() => console.log("visible below fold")}
+      >
+        Home
+      </Link>
     </div>
   );
 });

starters/apps/preloader-test/src/routes/hidden/index.tsx

@@ -0,0 +1,5 @@
+import { component$ } from "@builder.io/qwik";
+
+export default component$(() => {
+  return <div>Hidden</div>;
+});

starters/apps/preloader-test/src/routes/layout.tsx

@@ -56,7 +56,7 @@ export default component$(() => {
     }
   `);
 
-  const isSPA = useSignal(false);
+  const isSPA = useSignal(true);
   const LinkCmp = isSPA.value ? Link : "a";
 
   return (
@@ -67,7 +67,12 @@ export default component$(() => {
             <LinkCmp href="/">Home</LinkCmp>
             <LinkCmp href="/form">Form</LinkCmp>
             <LinkCmp href="/about">About</LinkCmp>
-            <LinkCmp href="/counters">Counters</LinkCmp>
+            <LinkCmp
+              href="/counters"
+              onQVisible$={() => console.log("visible")}
+            >
+              Counters
+            </LinkCmp>
           </nav>
           <label class="toggle-label">
             <input type="checkbox" bind:checked={isSPA} />

starters/apps/preloader-test/vite.config.ts

@@ -25,7 +25,7 @@ function createBulkPlugin(): Plugin {
 
       // Create bulk with an exponential-like distribution between 0kb and 50kb
       // Most files will be closer to 0kb, with a few reaching 50kb
-      const maxSize = 50000;
+      const maxSize = 500;
       const x = hash[0] / 255; // Normalize first byte to 0-1
       const exp = Math.pow(x, 6); // Skew distribution
       const bulkSize = Math.floor(maxSize * exp);