refactor(router): make spa-init more compressible

wmertens · wmertens · commit c052a4c6d1d2 · 2025-10-31T14:51:29.000+01:00
keeping the window and attributes as-is actually compresses better than using string indexing
diff --git a/packages/qwik-router/src/runtime/src/qwik-router-component.tsx b/packages/qwik-router/src/runtime/src/qwik-router-component.tsx
@@ -75,6 +75,8 @@ import { createLoaderSignal, isSameOrigin, isSamePath, toUrl } from './utils';
 import { startViewTransition } from './view-transition';
 import transitionCss from './qwik-view-transition.css?inline';
 
+declare const window: ClientSPAWindow;
+
 /**
  * @deprecated Use `QWIK_ROUTER_SCROLLER` instead (will be removed in V3)
  * @public
@@ -254,16 +256,15 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
     (preventNav.$cbs$ ||= new Set()).add(fn$);
     // we need the QRLs to be synchronous if possible, for the beforeunload event
     fn$.resolve();
-    // TS thinks we're a webworker and doesn't know about beforeunload
-    (window as any).addEventListener('beforeunload', preventNav.$handler$);
+    window.addEventListener('beforeunload', preventNav.$handler$);
 
     return () => {
       if (preventNav.$cbs$) {
         preventNav.$cbs$.delete(fn$);
         if (!preventNav.$cbs$.size) {
           preventNav.$cbs$ = undefined;
           // unregister the event listener if no more callbacks, to make older Firefox happy
-          (window as any).removeEventListener('beforeunload', preventNav.$handler$);
+          window.removeEventListener('beforeunload', preventNav.$handler$!);
         }
       }
     };
@@ -354,7 +355,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
         restoreScroll(type, dest, new URL(location.href), scroller, getScrollHistory());
 
         if (type === 'popstate') {
-          (window as ClientSPAWindow)._qRouterScrollEnabled = true;
+          window._qRouterScrollEnabled = true;
         }
       }
 
@@ -571,32 +572,32 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
           }
           CLIENT_DATA_CACHE.clear();
 
-          const win = window as ClientSPAWindow;
-          if (!win._qRouterSPA) {
+          // See also spa-init.ts
+          if (!window._qRouterSPA) {
             // only add event listener once
-            win._qRouterSPA = true;
+            window._qRouterSPA = true;
             history.scrollRestoration = 'manual';
 
-            win.addEventListener('popstate', () => {
+            window.addEventListener('popstate', () => {
               // Disable scroll handler eagerly to prevent overwriting history.state.
-              win._qRouterScrollEnabled = false;
-              clearTimeout(win._qRouterScrollDebounce);
+              window._qRouterScrollEnabled = false;
+              clearTimeout(window._qRouterScrollDebounce);
 
               goto(location.href, {
                 type: 'popstate',
               });
             });
 
-            win.removeEventListener('popstate', win._qRouterInitPopstate!);
-            win._qRouterInitPopstate = undefined;
+            window.removeEventListener('popstate', window._qRouterInitPopstate!);
+            window._qRouterInitPopstate = undefined;
 
             // Browsers natively will remember scroll on ALL history entries, incl. custom pushState.
             // Devs could push their own states that we can't control.
             // If a user doesn't initiate scroll after, it will not have any scrollState.
             // We patch these to always include scrollState.
             // TODO Block this after Navigation API PR, browsers that support it have a Navigation API solution.
-            if (!win._qRouterHistoryPatch) {
-              win._qRouterHistoryPatch = true;
+            if (!window._qRouterHistoryPatch) {
+              window._qRouterHistoryPatch = true;
               const pushState = history.pushState;
               const replaceState = history.replaceState;
 
@@ -658,8 +659,8 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
                       history.pushState(null, '', dest);
                     }
 
-                    win._qRouterScrollEnabled = false;
-                    clearTimeout(win._qRouterScrollDebounce);
+                    window._qRouterScrollEnabled = false;
+                    clearTimeout(window._qRouterScrollDebounce);
                     saveScrollHistory({
                       ...currentScrollState(scroller),
                       x: 0,
@@ -674,8 +675,8 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
               }
             });
 
-            document.removeEventListener('click', win._qRouterInitAnchors!);
-            win._qRouterInitAnchors = undefined;
+            document.removeEventListener('click', window._qRouterInitAnchors!);
+            window._qRouterInitAnchors = undefined;
 
             // TODO Remove block after Navigation API PR.
             // Calling `history.replaceState` during `visibilitychange` in Chromium will nuke BFCache.
@@ -686,10 +687,10 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
                 'visibilitychange',
                 () => {
                   if (
-                    (win._qRouterScrollEnabled || win._qCityScrollEnabled) &&
+                    (window._qRouterScrollEnabled || window._qCityScrollEnabled) &&
                     document.visibilityState === 'hidden'
                   ) {
-                    if (win._qCityScrollEnabled) {
+                    if (window._qCityScrollEnabled) {
                       console.warn(
                         '"_qCityScrollEnabled" is deprecated. Use "_qRouterScrollEnabled" instead.'
                       );
@@ -703,39 +704,39 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
                 { passive: true }
               );
 
-              document.removeEventListener('visibilitychange', win._qRouterInitVisibility!);
-              win._qRouterInitVisibility = undefined;
+              document.removeEventListener('visibilitychange', window._qRouterInitVisibility!);
+              window._qRouterInitVisibility = undefined;
             }
 
-            win.addEventListener(
+            window.addEventListener(
               'scroll',
               () => {
                 // TODO: remove "_qCityScrollEnabled" condition in v3
-                if (!win._qRouterScrollEnabled && !win._qCityScrollEnabled) {
+                if (!window._qRouterScrollEnabled && !window._qCityScrollEnabled) {
                   return;
                 }
 
-                clearTimeout(win._qRouterScrollDebounce);
-                win._qRouterScrollDebounce = setTimeout(() => {
+                clearTimeout(window._qRouterScrollDebounce);
+                window._qRouterScrollDebounce = setTimeout(() => {
                   const scrollState = currentScrollState(scroller);
                   saveScrollHistory(scrollState);
                   // Needed for e2e debounceDetector.
-                  win._qRouterScrollDebounce = undefined;
+                  window._qRouterScrollDebounce = undefined;
                 }, 200);
               },
               { passive: true }
             );
 
-            removeEventListener('scroll', win._qRouterInitScroll!);
-            win._qRouterInitScroll = undefined;
+            removeEventListener('scroll', window._qRouterInitScroll!);
+            window._qRouterInitScroll = undefined;
 
             // Cache SPA recovery script.
             spaInit.resolve();
           }
 
           if (navType !== 'popstate') {
-            win._qRouterScrollEnabled = false;
-            clearTimeout(win._qRouterScrollDebounce);
+            window._qRouterScrollEnabled = false;
+            clearTimeout(window._qRouterScrollDebounce);
 
             // Save the final scroll state before pushing new state.
             // Upgrades/replaces state with scroll pos on nav as needed.
@@ -768,7 +769,7 @@ export const useQwikRouter = (props?: QwikRouterProps) => {
             container.setAttribute(Q_ROUTE, routeName);
             const scrollState = currentScrollState(scroller);
             saveScrollHistory(scrollState);
-            win._qRouterScrollEnabled = true;
+            window._qRouterScrollEnabled = true;
             if (isBrowser) {
               callRestoreScrollOnDocument();
             }
diff --git a/packages/qwik-router/src/runtime/src/router-outlet-component.tsx b/packages/qwik-router/src/runtime/src/router-outlet-component.tsx
@@ -54,6 +54,7 @@ export const RouterOutlet = component$(() => {
                   if (s) {
                     w.scrollTo(s.x, s.y);
                   }
+                  // Tell qwikloader to run the spaInit code
                   document.dispatchEvent(new Event('qcinit'));
                 }
               })(window, history);
diff --git a/packages/qwik-router/src/runtime/src/spa-init.ts b/packages/qwik-router/src/runtime/src/spa-init.ts
@@ -5,6 +5,8 @@ import type { RouteNavigate, ScrollState } from './types';
 
 import { event$, isDev } from '@qwik.dev/core';
 
+declare const window: ClientSPAWindow;
+
 // TODO Dedupe handler code from here and QwikRouterProvider?
 // TODO Navigation API; check for support & simplify.
 
@@ -15,29 +17,14 @@ import { event$, isDev } from '@qwik.dev/core';
 
 // ! DO NOT IMPORT OR USE ANY EXTERNAL REFERENCES IN THIS SCRIPT.
 export default event$((_: Event, el: Element) => {
-  const win: ClientSPAWindow = window;
-  const spa = '_qRouterSPA';
-  const initPopstate = '_qRouterInitPopstate';
-  const initAnchors = '_qRouterInitAnchors';
-  const initVisibility = '_qRouterInitVisibility';
-  const initScroll = '_qRouterInitScroll';
-  if (
-    !win[spa] &&
-    !win[initPopstate] &&
-    !win[initAnchors] &&
-    !win[initVisibility] &&
-    !win[initScroll]
-  ) {
+  // This complements qwik-router-component.ts
+  // only run once, when router didn't init yet
+  if (!window._qRouterSPA && !window._qRouterInitPopstate) {
     const currentPath = location.pathname + location.search;
 
-    const historyPatch = '_qRouterHistoryPatch';
-    const scrollEnabled = '_qRouterScrollEnabled';
-    const debounceTimeout = '_qRouterScrollDebounce';
-    const scrollHistory = '_qRouterScroll';
-
     const checkAndScroll = (scrollState: ScrollState | undefined) => {
       if (scrollState) {
-        win.scrollTo(scrollState.x, scrollState.y);
+        window.scrollTo(scrollState.x, scrollState.y);
       }
     };
 
@@ -53,20 +40,20 @@ export default event$((_: Event, el: Element) => {
 
     const saveScrollState = (scrollState?: ScrollState) => {
       const state: ScrollHistoryState = history.state || {};
-      state[scrollHistory] = scrollState || currentScrollState();
+      state._qRouterScroll = scrollState || currentScrollState();
       history.replaceState(state, '');
     };
 
     saveScrollState();
 
-    win[initPopstate] = () => {
-      if (win[spa]) {
+    window._qRouterInitPopstate = () => {
+      if (window._qRouterSPA) {
         return;
       }
 
       // Disable scroll handler eagerly to prevent overwriting history.state.
-      win[scrollEnabled] = false;
-      clearTimeout(win[debounceTimeout]);
+      window._qRouterScrollEnabled = false;
+      clearTimeout(window._qRouterScrollDebounce);
 
       if (currentPath !== location.pathname + location.search) {
         const getContainer = (el: Element) =>
@@ -88,15 +75,15 @@ export default event$((_: Event, el: Element) => {
         }
       } else {
         if (history.scrollRestoration === 'manual') {
-          const scrollState = (history.state as ScrollHistoryState)?.[scrollHistory];
+          const scrollState = (history.state as ScrollHistoryState)?._qRouterScroll;
           checkAndScroll(scrollState);
-          win[scrollEnabled] = true;
+          window._qRouterScrollEnabled = true;
         }
       }
     };
 
-    if (!win[historyPatch]) {
-      win[historyPatch] = true;
+    if (!window._qRouterHistoryPatch) {
+      window._qRouterHistoryPatch = true;
       const pushState = history.pushState;
       const replaceState = history.replaceState;
 
@@ -132,8 +119,8 @@ export default event$((_: Event, el: Element) => {
     }
 
     // We need this handler in init because Firefox destroys states w/ anchor tags.
-    win[initAnchors] = (event: MouseEvent) => {
-      if (win[spa] || event.defaultPrevented) {
+    window._qRouterInitAnchors = (event: MouseEvent) => {
+      if (window._qRouterSPA || event.defaultPrevented) {
         return;
       }
 
@@ -160,8 +147,8 @@ export default event$((_: Event, el: Element) => {
             } else {
               // Simulate same-page (no hash) anchor reload.
               // history.scrollRestoration = 'manual' makes these not scroll.
-              win[scrollEnabled] = false;
-              clearTimeout(win[debounceTimeout]);
+              window._qRouterScrollEnabled = false;
+              clearTimeout(window._qRouterScrollDebounce);
               saveScrollState({ ...currentScrollState(), x: 0, y: 0 });
               location.reload();
             }
@@ -176,34 +163,38 @@ export default event$((_: Event, el: Element) => {
       }
     };
 
-    win[initVisibility] = () => {
-      if (!win[spa] && win[scrollEnabled] && document.visibilityState === 'hidden') {
+    window._qRouterInitVisibility = () => {
+      if (
+        !window._qRouterSPA &&
+        window._qRouterScrollEnabled &&
+        document.visibilityState === 'hidden'
+      ) {
         saveScrollState();
       }
     };
 
-    win[initScroll] = () => {
-      if (win[spa] || !win[scrollEnabled]) {
+    window._qRouterInitScroll = () => {
+      if (window._qRouterSPA || !window._qRouterScrollEnabled) {
         return;
       }
 
-      clearTimeout(win[debounceTimeout]);
-      win[debounceTimeout] = setTimeout(() => {
+      clearTimeout(window._qRouterScrollDebounce);
+      window._qRouterScrollDebounce = setTimeout(() => {
         saveScrollState();
         // Needed for e2e debounceDetector.
-        win[debounceTimeout] = undefined;
+        window._qRouterScrollDebounce = undefined;
       }, 200);
     };
 
-    win[scrollEnabled] = true;
+    window._qRouterScrollEnabled = true;
 
     setTimeout(() => {
-      win.addEventListener('popstate', win[initPopstate]!);
-      win.addEventListener('scroll', win[initScroll]!, { passive: true });
-      document.addEventListener('click', win[initAnchors]!);
+      window.addEventListener('popstate', window._qRouterInitPopstate!);
+      window.addEventListener('scroll', window._qRouterInitScroll!, { passive: true });
+      document.addEventListener('click', window._qRouterInitAnchors!);
 
-      if (!(win as any).navigation) {
-        document.addEventListener('visibilitychange', win[initVisibility]!, {
+      if (!(window as any).navigation) {
+        document.addEventListener('visibilitychange', window._qRouterInitVisibility!, {
           passive: true,
         });
       }

Original file line number	Diff line number	Diff line change
`@@ -54,6 +54,7 @@ export const RouterOutlet = component$(() => {`
`54`	`54`	`if (s) {`
`55`	`55`	`w.scrollTo(s.x, s.y);`
`56`	`56`	`}`
	`57`	`+ // Tell qwikloader to run the spaInit code`
`57`	`58`	`document.dispatchEvent(new Event('qcinit'));`
`58`	`59`	`}`
`59`	`60`	`})(window, history);`