feat: add missing types for ViewTransition

Author: GrandSchtroumpf

packages/qwik-router/src/runtime/src/qwik-router-component.tsx

@@ -66,6 +66,7 @@ import type {
 import { loadClientData } from './use-endpoint';
 import { useQwikRouterEnv } from './use-functions';
 import { isSameOrigin, isSamePath, toUrl } from './utils';
+import { startViewTransition } from './view-transition';
 
 /**
  * @deprecated Use `QWIK_ROUTER_SCROLLER` instead (will be removed in V3)
@@ -665,23 +666,13 @@ export const QwikRouterProvider = component$<QwikRouterProps>((props) => {
     if (isServer) {
       return run();
     }
-
-    if (props.viewTransition !== false && 'startViewTransition' in document) {
-      let transition: ViewTransition;
-      try {
-        // Typed transition starts with Chrome 125 & Safari 18
-        transition = document.startViewTransition({
-          update: run,
-          types: ['qwik-router-spa'],
-        } as any);
-      } catch {
-        // Fallback for Chrome 111 until Chrome 125
-        transition = document.startViewTransition(run);
-      }
-      const event = new CustomEvent('qviewTransition', { detail: transition });
-      document.dispatchEvent(event);
-    } else {
+    if (props.viewTransition === false) {
       run();
+    } else {
+      startViewTransition({
+        update: run,
+        types: ['qwik-router-spa'],
+      });
     }
   });
 

packages/qwik-router/src/runtime/src/view-transition.tsx

@@ -0,0 +1,49 @@
+// This types are missing in current typescript version: 5.4.5
+
+interface StartViewTransitionOptions {
+  types?: string[] | null;
+  update?: ViewTransitionUpdateCallback | null;
+}
+interface ViewTransitionUpdateCallback {
+  (): any;
+}
+
+interface DocumentViewTransition extends Document {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/Document/startViewTransition) */
+  startViewTransition(
+    callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions
+  ): ViewTransition;
+}
+
+/** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ViewTransition) */
+interface ViewTransition {
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ViewTransition/finished) */
+  readonly finished: Promise<undefined>;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ViewTransition/ready) */
+  readonly ready: Promise<undefined>;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ViewTransition/updateCallbackDone) */
+  readonly updateCallbackDone: Promise<undefined>;
+  /** [MDN Reference](https://developer.mozilla.org/docs/Web/API/ViewTransition/skipTransition) */
+  skipTransition(): void;
+  types?: Set<string>;
+}
+
+export const startViewTransition = (params: StartViewTransitionOptions) => {
+  if (!params.update) {
+    return;
+  }
+  if ('startViewTransition' in document) {
+    let transition: ViewTransition;
+    try {
+      // Typed transition starts with Chrome 125 & Safari 18
+      transition = (document as DocumentViewTransition).startViewTransition(params);
+    } catch {
+      // Fallback for Chrome 111 until Chrome 125
+      transition = (document as DocumentViewTransition).startViewTransition(params.update);
+    }
+    const event = new CustomEvent('qviewTransition', { detail: transition });
+    document.dispatchEvent(event);
+  } else {
+    params.update?.();
+  }
+};