@threlte/xr 1.0.8 → 1.1.1

package/dist/internal/setupControllers.js

@@ -2,16 +2,15 @@ import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerM
 import { useThrelte } from '@threlte/core';
 import { onMount } from 'svelte';
 import { useHandTrackingState } from './useHandTrackingState';
-import { gaze, left, right } from '../hooks/useController';
-import { controllerEvents } from './stores';
+import { controllers } from '../hooks/useController.svelte';
+import { controllerEvents } from './state.svelte';
 export const setupControllers = () => {
     const factory = new XRControllerModelFactory();
-    const stores = { left, right, none: gaze };
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
-    const controllers = [xr.getController(0), xr.getController(1)];
+    const targetRaySpaces = [xr.getController(0), xr.getController(1)];
     const indexMap = new Map();
-    controllers.forEach((targetRay, index) => {
+    targetRaySpaces.forEach((targetRay, index) => {
         indexMap.set(targetRay, {
             targetRay,
             grip: xr.getControllerGrip(index),
@@ -23,24 +22,24 @@ export const setupControllers = () => {
             if (hasHands())
                 return;
             const { data } = event;
-            controllerEvents[data.handedness]?.current?.[`on${event.type}`]?.(event);
+            controllerEvents[data.handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay, grip } = indexMap.get(this);
             const { data: inputSource } = event;
-            stores[event.data.handedness].set({
+            controllers[event.data.handedness] = {
                 inputSource,
                 targetRay,
                 grip,
                 model
-            });
+            };
             dispatch(event);
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            stores[event.data.handedness].set(undefined);
+            controllers[event.data.handedness] = undefined;
         };
-        for (const targetRay of controllers) {
+        for (const targetRay of targetRaySpaces) {
             targetRay.addEventListener('connected', handleConnected);
             targetRay.addEventListener('disconnected', handleDisconnected);
             targetRay.addEventListener('select', dispatch);
@@ -51,7 +50,7 @@ export const setupControllers = () => {
             targetRay.addEventListener('squeezeend', dispatch);
         }
         return () => {
-            for (const targetRay of controllers) {
+            for (const targetRay of targetRaySpaces) {
                 targetRay.removeEventListener('connected', handleConnected);
                 targetRay.removeEventListener('disconnected', handleDisconnected);
                 targetRay.removeEventListener('select', dispatch);
@@ -61,9 +60,9 @@ export const setupControllers = () => {
                 targetRay.removeEventListener('squeezestart', dispatch);
                 targetRay.removeEventListener('squeezeend', dispatch);
             }
-            stores.left.set(undefined);
-            stores.right.set(undefined);
-            stores.none.set(undefined);
+            controllers.left = undefined;
+            controllers.right = undefined;
+            controllers.none = undefined;
         };
     });
 };

package/dist/internal/setupHands.js

@@ -1,12 +1,11 @@
 import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 import { useThrelte } from '@threlte/core';
 import { onMount } from 'svelte';
-import { left, right } from '../hooks/useHand';
+import { hands } from '../hooks/useHand.svelte';
 import { useHandTrackingState } from './useHandTrackingState';
-import { handEvents } from './stores';
+import { handEvents } from './state.svelte';
 export const setupHands = () => {
     const factory = new XRHandModelFactory();
-    const stores = { left, right };
     const { xr } = useThrelte().renderer;
     const hasHands = useHandTrackingState();
     const handSpaces = [xr.getHand(0), xr.getHand(1)];
@@ -24,23 +23,26 @@ export const setupHands = () => {
                 return;
             const handEvent = event;
             const handedness = 'handedness' in handEvent ? handEvent.handedness : handEvent.data.handedness;
-            handEvents[handedness]?.current?.[`on${event.type}`]?.(event);
+            handEvents[handedness]?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay } = map.get(this);
             const { data } = event;
             const { handedness, hand: inputSource } = data;
-            stores[handedness].set({
+            if (handedness === 'none' || inputSource === undefined) {
+                return;
+            }
+            hands[handedness] = {
                 hand: this,
                 model,
                 inputSource,
                 targetRay
-            });
+            };
             dispatch(event);
         }
         const handleDisconnected = (event) => {
             dispatch(event);
-            stores[event.data.handedness].set(undefined);
+            hands[event.data.handedness] = undefined;
         };
         for (const handSpace of handSpaces) {
             handSpace.addEventListener('connected', handleConnected);
@@ -55,8 +57,8 @@ export const setupHands = () => {
                 handSpace.removeEventListener('pinchstart', dispatch);
                 handSpace.removeEventListener('pinchend', dispatch);
             }
-            stores.left.set(undefined);
-            stores.right.set(undefined);
+            hands.left = undefined;
+            hands.right = undefined;
         };
     });
 };

package/dist/internal/{setupHeadset.js → setupHeadset.svelte.js}

@@ -1,6 +1,6 @@
 import { Group } from 'three';
-import { useThrelte, useTask, watch } from '@threlte/core';
-import { useXR } from '../hooks/useXR';
+import { useThrelte, useTask } from '@threlte/core';
+import { isPresenting } from './state.svelte';
 export const headset = new Group();
 export const setupHeadset = () => {
     const { renderer, camera, scheduler, renderStage } = useThrelte();
@@ -16,8 +16,8 @@ export const setupHeadset = () => {
         if (pose === undefined || pose === null)
             return;
         const { position, orientation } = pose.transform;
-        headset.position.set(position.x, position.y, position.z);
-        headset.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+        headset.position.copy(position);
+        headset.quaternion.copy(orientation);
     }, {
         autoStart: false,
         autoInvalidate: false,
@@ -31,8 +31,8 @@ export const setupHeadset = () => {
         autoInvalidate: false,
         stage
     });
-    watch(useXR().isPresenting, ($isPresenting) => {
-        if ($isPresenting) {
+    $effect.pre(() => {
+        if (isPresenting.current) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();
         }

package/dist/internal/setupRaf.svelte.js

@@ -0,0 +1,17 @@
+import { session } from './state.svelte';
+import { raf } from './raf';
+export const setupRaf = () => {
+    if (typeof window === 'undefined')
+        return;
+    $effect.pre(() => {
+        const currentSession = session.current;
+        if (currentSession === undefined) {
+            return;
+        }
+        const originalTick = raf.tick;
+        raf.tick = (fn) => currentSession.requestAnimationFrame(fn);
+        return () => {
+            raf.tick = originalTick;
+        };
+    });
+};

package/dist/internal/state.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { WebXRManager, Intersection } from 'three';
+import type { XRControllerEvents, XRHandEvents } from '../types';
+interface ControllerEvents {
+    left?: XRControllerEvents;
+    right?: XRControllerEvents;
+}
+interface HandEvents {
+    left?: XRHandEvents;
+    right?: XRHandEvents;
+}
+declare class Presenting {
+    current: boolean;
+}
+declare class IsHandTracking {
+    current: boolean;
+}
+declare class Session {
+    current: XRSession | undefined;
+}
+declare class ReferenceSpaceType {
+    current: XRReferenceSpaceType | undefined;
+}
+declare class XR {
+    current: WebXRManager | undefined;
+}
+declare class PointerState {
+    enabled: boolean;
+    hovering: boolean;
+}
+declare class IntersectionState {
+    left: Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined;
+    right: Intersection<import("three").Object3D<import("three").Object3DEventMap>> | undefined;
+}
+export declare const isPresenting: Presenting;
+export declare const isHandTracking: IsHandTracking;
+export declare const session: Session;
+export declare const referenceSpaceType: ReferenceSpaceType;
+export declare const xr: XR;
+export declare const controllerEvents: ControllerEvents;
+export declare const handEvents: HandEvents;
+export declare const teleportState: {
+    left: PointerState;
+    right: PointerState;
+};
+export declare const pointerState: {
+    left: PointerState;
+    right: PointerState;
+};
+export declare const teleportIntersection: IntersectionState;
+export declare const pointerIntersection: IntersectionState;
+export {};

package/dist/internal/state.svelte.js

@@ -0,0 +1,40 @@
+class Presenting {
+    current = $state(false);
+}
+class IsHandTracking {
+    current = $state(false);
+}
+class Session {
+    current = $state.raw();
+}
+class ReferenceSpaceType {
+    current = $state.raw();
+}
+class XR {
+    current = $state.raw();
+}
+class PointerState {
+    enabled = $state(false);
+    hovering = $state(false);
+}
+class IntersectionState {
+    left = $state.raw();
+    right = $state.raw();
+}
+export const isPresenting = new Presenting();
+export const isHandTracking = new IsHandTracking();
+export const session = new Session();
+export const referenceSpaceType = new ReferenceSpaceType();
+export const xr = new XR();
+export const controllerEvents = {};
+export const handEvents = {};
+export const teleportState = {
+    left: new PointerState(),
+    right: new PointerState()
+};
+export const pointerState = {
+    left: new PointerState(),
+    right: new PointerState()
+};
+export const teleportIntersection = new IntersectionState();
+export const pointerIntersection = new IntersectionState();

package/dist/internal/useHandTrackingState.js

@@ -4,14 +4,17 @@ import { useThrelte } from '@threlte/core';
  * connection or disconnection event. This is the way to do that.
  */
 export const useHandTrackingState = () => {
-    const { xr } = useThrelte().renderer;
+    const { renderer } = useThrelte();
     return () => {
-        let handTracking = false;
-        xr.getSession()?.inputSources?.forEach((value) => {
-            if (value.hand) {
-                handTracking = true;
+        const sources = renderer.xr.getSession()?.inputSources;
+        if (sources === undefined) {
+            return false;
+        }
+        for (const source of sources) {
+            if (source.hand !== undefined) {
+                return true;
             }
-        });
-        return handTracking;
+        }
+        return false;
     };
 };

package/dist/lib/getXRSessionOptions.d.ts

@@ -1 +1 @@
-export declare const getXRSessionOptions: (referenceSpaceType: XRReferenceSpaceType | undefined, sessionInit: XRSessionInit | undefined) => XRSessionInit | undefined;
+export declare const getXRSessionOptions: (referenceSpaceType?: XRReferenceSpaceType, sessionInit?: XRSessionInit) => XRSessionInit | undefined;

package/dist/lib/toggleXRSession.d.ts

@@ -6,8 +6,8 @@
  * @param force Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways
  * @returns
  */
-export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?: (XRSessionInit & {
+export declare const toggleXRSession: (sessionMode: XRSessionMode, sessionInit?: XRSessionInit & {
     domOverlay?: {
         root: HTMLElement;
-    } | undefined;
-}) | undefined, force?: "enter" | "exit") => Promise<XRSession | undefined>;
+    };
+}, force?: "enter" | "exit") => Promise<XRSession | undefined>;

package/dist/lib/toggleXRSession.js

@@ -1,4 +1,4 @@
-import { session, referenceSpaceType, xr } from '../internal/stores';
+import { session, referenceSpaceType, xr } from '../internal/state.svelte';
 import { getXRSessionOptions } from './getXRSessionOptions';
 /**
  * Starts / ends an XR session.
@@ -18,7 +18,7 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
     // Exit a session if entered
     if (hasSession) {
         await currentSession.end();
-        session.set(undefined);
+        session.current = undefined;
         return;
     }
     if (xr.current === undefined) {
@@ -28,6 +28,6 @@ export const toggleXRSession = async (sessionMode, sessionInit, force) => {
     const options = getXRSessionOptions(referenceSpaceType.current, sessionInit);
     const nextSession = await navigator.xr.requestSession(sessionMode, options);
     await xr.current.setSession(nextSession);
-    session.set(nextSession);
+    session.current = nextSession;
     return nextSession;
 };

package/dist/plugins/pointerControls/compute.js

@@ -1,12 +1,8 @@
 import { Vector3 } from 'three';
-import { useController } from '../../hooks/useController';
-const controllers = {
-    left: useController('left'),
-    right: useController('right')
-};
+import { controllers } from '../../hooks/useController.svelte';
 const forward = new Vector3();
 export const defaultComputeFunction = (context, handContext) => {
-    const targetRay = controllers[handContext.hand].current?.targetRay;
+    const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);

package/dist/plugins/pointerControls/index.js

@@ -2,9 +2,9 @@ import { Raycaster, Vector3 } from 'three';
 import { currentWritable, watch } from '@threlte/core';
 import { defaultComputeFunction } from './compute';
 import { injectPointerControlsPlugin } from './plugin.svelte';
-import { setupPointerControls } from './setup';
+import { setupPointerControls } from './setup.svelte';
 import { getControlsContext, getHandContext, setControlsContext, setHandContext, setInternalContext } from './context';
-import { pointerState } from '../../internal/stores';
+import { pointerState } from '../../internal/state.svelte';
 let controlsCounter = 0;
 export const pointerControls = (handedness, options) => {
     if (getControlsContext() === undefined) {
@@ -36,16 +36,10 @@ export const pointerControls = (handedness, options) => {
     const handContext = getHandContext(handedness);
     watch(handContext.enabled, (enabled) => {
         controlsCounter += enabled ? 1 : -1;
-        pointerState.update((value) => {
-            value[handedness].enabled = controlsCounter > 0;
-            return value;
-        });
+        pointerState[handedness].enabled = controlsCounter > 0;
     });
     watch(handContext.pointerOverTarget, (hovering) => {
-        pointerState.update((value) => {
-            value[handedness].hovering = hovering;
-            return value;
-        });
+        pointerState[handedness].hovering = hovering;
     });
     return {
         enabled: handContext.enabled,

package/dist/plugins/pointerControls/{setup.js → setup.svelte.js}

@@ -1,18 +1,17 @@
 import { Vector3 } from 'three';
-import { watch } from '@threlte/core';
+import { observe, watch } from '@threlte/core';
 import { getInternalContext } from './context';
-import { useController } from '../../hooks/useController';
-import { useHand } from '../../hooks/useHand';
-import { useXR } from '../../hooks/useXR';
+import { controllers } from '../../hooks/useController.svelte';
+import { useHand } from '../../hooks/useHand.svelte';
 import { useFixed } from '../../internal/useFixed';
-import { pointerIntersection } from '../../internal/stores';
+import { isPresenting, pointerIntersection } from '../../internal/state.svelte';
 const getIntersectionId = (intersection) => {
     return `${(intersection.eventObject || intersection.object).uuid}/${intersection.index}${intersection.instanceId ?? ''}`;
 };
 const EPSILON = 0.0001;
 export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) => {
     const handedness = handContext.hand;
-    const controller = useController(handedness);
+    const controller = $derived(controllers[handedness]);
     const hand = useHand(handedness);
     const { dispatchers } = getInternalContext();
     let hits = [];
@@ -64,7 +63,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         const intersections = [];
         const hits = context.raycaster.intersectObjects(context.interactiveObjects, true);
         const filtered = context.filter === undefined ? hits : context.filter(hits, context, handContext);
-        pointerIntersection[handedness].set(filtered[0]);
+        pointerIntersection[handedness] = filtered[0];
         // Bubble up the events, find the event source (eventObject)
         for (const hit of filtered) {
             let eventObject = hit.object;
@@ -158,7 +157,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     const { start, stop } = useFixed(() => {
         hits = processHits();
-        const targetRay = controller.current?.targetRay;
+        const targetRay = controller?.targetRay;
         if (targetRay === undefined)
             return;
         if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
@@ -169,18 +168,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         fixedStep,
         autoStart: false
     });
-    watch([controller, handContext.enabled], ([input, enabled]) => {
-        if (input === undefined)
+    observe.pre(() => [controller, handContext.enabled], ([controller, $enabled]) => {
+        if (controller === undefined)
             return;
         const removeHandlers = () => {
-            input.targetRay.removeEventListener('selectstart', handlePointerDown);
-            input.targetRay.removeEventListener('selectend', handlePointerUp);
-            input.targetRay.removeEventListener('select', handleClick);
+            controller.targetRay.removeEventListener('selectstart', handlePointerDown);
+            controller.targetRay.removeEventListener('selectend', handlePointerUp);
+            controller.targetRay.removeEventListener('select', handleClick);
         };
-        if (enabled) {
-            input.targetRay.addEventListener('selectstart', handlePointerDown);
-            input.targetRay.addEventListener('selectend', handlePointerUp);
-            input.targetRay.addEventListener('select', handleClick);
+        if ($enabled) {
+            controller.targetRay.addEventListener('selectstart', handlePointerDown);
+            controller.targetRay.addEventListener('selectend', handlePointerUp);
+            controller.targetRay.addEventListener('select', handleClick);
             return removeHandlers;
         }
         else {
@@ -207,8 +206,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         }
     });
-    watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
-        if (isPresenting && enabled) {
+    observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
+        if (isPresenting && $enabled) {
             start();
         }
         else {

package/dist/plugins/teleportControls/compute.js

@@ -1,12 +1,8 @@
 import { Vector3 } from 'three';
-import { useController } from '../../hooks/useController';
-const controllers = {
-    left: useController('left'),
-    right: useController('right')
-};
+import { controllers } from '../../hooks/useController.svelte';
 const forward = new Vector3();
 export const defaultComputeFunction = (context, handContext) => {
-    const targetRay = controllers[handContext.hand].current?.targetRay;
+    const targetRay = controllers[handContext.hand]?.targetRay;
     if (targetRay === undefined)
         return;
     forward.set(0, 0, -1).applyQuaternion(targetRay.quaternion);

package/dist/plugins/teleportControls/index.js

@@ -2,8 +2,8 @@ import { currentWritable, watch } from '@threlte/core';
 import { createTeleportContext, useTeleportControls, getHandContext } from './context';
 import { injectTeleportControlsPlugin } from './plugin.svelte';
 import { setHandContext } from './context';
-import { setupTeleportControls } from './setup';
-import { teleportState } from '../../internal/stores';
+import { setupTeleportControls } from './setup.svelte';
+import { teleportState } from '../../internal/state.svelte';
 let controlsCounter = 0;
 export const teleportControls = (handedness, options) => {
     if (useTeleportControls() === undefined) {
@@ -26,16 +26,10 @@ export const teleportControls = (handedness, options) => {
     const handContext = getHandContext(handedness);
     watch(handContext.enabled, (enabled) => {
         controlsCounter += enabled ? 1 : -1;
-        teleportState.update((value) => {
-            value[handedness].enabled = controlsCounter > 0;
-            return value;
-        });
+        teleportState[handedness].enabled = controlsCounter > 0;
     });
     watch(handContext.active, (hovering) => {
-        teleportState.update((value) => {
-            value[handedness].hovering = hovering;
-            return value;
-        });
+        teleportState[handedness].hovering = hovering;
     });
     return {
         enabled: handContext.enabled,

package/dist/plugins/teleportControls/{setup.js → setup.svelte.js}

@@ -1,19 +1,18 @@
-import { watch } from '@threlte/core';
-import { useXR } from '../../hooks/useXR';
-import { useController } from '../../hooks/useController';
+import { observe } from '@threlte/core';
+import { controllers } from '../../hooks/useController.svelte';
 import { useTeleport } from '../../hooks/useTeleport';
 import { useFixed } from '../../internal/useFixed';
-import { teleportIntersection } from '../../internal/stores';
+import { isPresenting, teleportIntersection } from '../../internal/state.svelte';
 export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40) => {
     const handedness = handContext.hand;
-    const controller = useController(handedness);
+    const controller = $derived(controllers[handedness]);
     const teleport = useTeleport();
     const handleHoverEnd = () => {
         handContext.hovered.set(undefined);
-        teleportIntersection[handedness].set(undefined);
+        teleportIntersection[handedness] = undefined;
     };
     const { start, stop } = useFixed(() => {
-        const gamepad = controller.current?.inputSource.gamepad;
+        const gamepad = controller?.inputSource.gamepad;
         if (gamepad === undefined) {
             return;
         }
@@ -45,14 +44,14 @@ export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40)
             }
             return;
         }
-        teleportIntersection[handedness].set(intersect);
+        teleportIntersection[handedness] = intersect;
         handContext.hovered.set(intersect);
     }, {
         fixedStep,
         autoStart: false
     });
-    watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
-        if (isPresenting && enabled) {
+    observe.pre(() => [isPresenting.current, handContext.enabled], ([isPresenting, $enabled]) => {
+        if (isPresenting && $enabled) {
             start();
         }
         else {

package/dist/types.d.ts

@@ -3,7 +3,7 @@ import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerMod
 import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
 export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
-export type XRControllerEvents = {
+export interface XRControllerEvents {
     onconnected?: XRControllerEventCallback<'connected'>;
     ondisconnected?: XRControllerEventCallback<'disconnected'>;
     onselect?: XRControllerEventCallback<'select'>;
@@ -12,30 +12,24 @@ export type XRControllerEvents = {
     onsqueeze?: XRControllerEventCallback<'squeeze'>;
     onsqueezeend?: XRControllerEventCallback<'squeezeend'>;
     onsqueezestart?: XRControllerEventCallback<'squeezestart'>;
-};
+}
 export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
-export type XRSessionEvent<Type = XRSessionEventType> = (event: Event & {
-    type: Type;
-    target: XRSession;
-}) => void;
-export type XRControllerEvent<Type = XRControllerEventType> = Event & {
-    type: Type;
-    target: Group;
+export interface XRControllerEvent<Type extends string = XRControllerEventType> extends Event<Type, Group> {
     data: XRInputSource;
-};
-export type XRControllerEventCallback<Type = XRControllerEventType> = (event: XRControllerEvent<Type>) => void;
-export type XRController = {
+}
+export type XRControllerEventCallback<Type extends string = XRControllerEventType> = (event: XRControllerEvent<Type>) => void;
+export interface XRController {
     targetRay: XRTargetRaySpace;
     grip: XRGripSpace;
     model?: XRControllerModel | undefined;
     inputSource: XRInputSource;
-};
-export type XRHand = {
+}
+export interface XRHandObject {
     targetRay: XRTargetRaySpace;
     hand: XRHandSpace;
     model?: XRHandModel;
-    inputSource: globalThis.XRHand;
-};
+    inputSource: XRHand;
+}
 export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
     target: XRHandSpace;
@@ -46,9 +40,9 @@ export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'di
     target: null;
 } : never;
 export type XRHandEventCallback<Type> = (event: XRHandEvent<Type>) => void;
-export type XRHandEvents = {
+export interface XRHandEvents {
     onconnected?: XRHandEventCallback<'connected'>;
     ondisconnected?: XRHandEventCallback<'disconnected'>;
     onpinchstart?: XRHandEventCallback<'pinchstart'>;
     onpinchend?: XRHandEventCallback<'pinchend'>;
-};
+}