Fix types

Author: noamr

package.json

@@ -5,8 +5,8 @@
   "scripts": {
     "build:examples": "vite build examples",
     "build:packages": "npm run build:packages:cjs && npm run build:packages:esm && npm run build:types",
-    "build:packages:cjs": "esbuild --external:react --external:react-dom --format=cjs --bundle --outdir=dist/cjs --loader:.ts=tsx --sourcemap=external ./src/*",
-    "build:packages:esm": "esbuild --external:react --external:react-dom --format=esm --bundle --outdir=dist/esm --loader:.ts=tsx --sourcemap=external ./src/*",
+    "build:packages:cjs": "esbuild --external:react --external:react-dom --format=cjs --bundle --outdir=dist/cjs --sourcemap=external ./src/*",
+    "build:packages:esm": "esbuild --external:react --external:react-dom --format=esm --bundle --outdir=dist/esm --sourcemap=external ./src/*",
     "build:types": "tsc --emitDeclarationOnly",
     "build": "npm run build:packages && jsdoc -R README.md src/",
     "build:watch": "esbuild --external:react --external:react-dom --format=cjs --bundle --outdir=dist/cjs --loader:.ts=tsx --sourcemap=inline --watch ./src/*",

src/next-vt.tsx

@@ -5,8 +5,9 @@ import {
 import {
     useEffect,
     Suspense,
-    FC
+    FC,
 } from "react";
+import React from "react";
 
 export { SuspendViewTransition, useViewTransition } from "./react-vt";
 

src/react-vt.ts

@@ -11,7 +11,7 @@ import {
 let suspendersCount = 0;
 const observers = new Set<() => void>();
 
-let didCaptureNewState: (value?: PromiseLike<void> | void) => void = null;
+let didCaptureNewState: ((value?: PromiseLike<void> | void) => void ) | null = null;
 
 function suspendViewTransitionCapture(): void {
     suspendersCount++;
@@ -56,7 +56,7 @@ export function AutoViewTransitionsOnClick({ match = "a[href]" }: AutoViewTransi
 
             event.preventDefault();
             event.stopPropagation();
-            startViewTransition(() => startTransition(() => target.click()));
+            startViewTransition(() => startTransition(() => (target as HTMLElement).click()));
         }
 
         globalThis.document.addEventListener("click", captureClick, { capture: true });
@@ -86,7 +86,12 @@ interface ViewTransitionController {
 
 export function useViewTransition(): { resumeViewTransitionCapture: () => void; transitionState: "idle" | "capturing-old" | "capturing-new" | "animating" | "skipped"; startViewTransition: (updateCallback?: React.TransitionFunction) => (PromiseLike<void> | void); suspendViewTransitionCapture: () => void } {
     const [transitionState, setTransitionState] = useState<TransitionState>("idle");
-    useSyncExternalStore(observers.add.bind(observers), () => suspendersCount, () => 0);
+    useSyncExternalStore((onStoreChange) => {
+        observers.add(onStoreChange);
+        return () => {
+            observers.delete(onStoreChange);
+        }
+    }, () => suspendersCount, () => 0);
 
     useEffect(() => {
         if (didCaptureNewState && !suspendersCount) {

src/types.d.ts

@@ -1,5 +1,5 @@
 interface Document {
-	startViewTransition?: (callback: () => never) => {
+	startViewTransition?: (callback: () => PromiseLike<void> | void) => {
 		finished: Promise<void>
 		ready: Promise<void>
 		updateCallbackDone: Promise<void>