@threlte/xr 1.1.0 → 1.1.1

package/dist/components/XR.svelte

@@ -18,9 +18,9 @@ This should be placed within a Threlte `<Canvas />`.
 
 -->
 <script lang="ts">
+  import type { EventListener, WebXRManager, Event as ThreeEvent } from 'three'
   import type { Snippet } from 'svelte'
   import { useThrelte } from '@threlte/core'
-  import type { XRSessionEvent } from '../types'
   import {
     isHandTracking,
     isPresenting,
@@ -59,17 +59,17 @@ This should be placed within a Threlte `<Canvas />`.
     fallback?: Snippet
     children?: Snippet
 
-    /** Called as an XRSession is requested */
-    onsessionstart?: (event: XRSessionEvent<'sessionstart'>) => void
+    /** Called as an XRSession is started */
+    onsessionstart?: (event: ThreeEvent<'sessionstart', WebXRManager>) => void
 
-    /** Called after an XRSession is terminated */
-    onsessionend?: (event: XRSessionEvent<'sessionend'>) => void
+    /** Called after an XRSession is ended */
+    onsessionend?: (event: XRSessionEvent) => void
 
     /** Called when an XRSession is hidden or unfocused. */
-    onvisibilitychange?: (event: globalThis.XRSessionEvent) => void
+    onvisibilitychange?: (event: XRSessionEvent) => void
 
     /** Called when available inputsources change */
-    oninputsourceschange?: (event: globalThis.XRSessionEvent) => void
+    oninputsourceschange?: (event: XRSessionEvent) => void
   }
 
   let {
@@ -93,28 +93,28 @@ This should be placed within a Threlte `<Canvas />`.
   setupControllers()
   setupHands()
 
-  const handleSessionStart = () => {
+  const handleSessionStart: EventListener<object, 'sessionstart', WebXRManager> = (event) => {
     isPresenting.current = true
-    onsessionstart?.({ type: 'sessionstart', target: session.current } as any)
+    onsessionstart?.(event)
   }
 
-  const handleSessionEnd = () => {
-    onsessionend?.({ type: 'sessionend', target: session.current } as any)
+  const handleSessionEnd = (event: XRSessionEvent) => {
+    onsessionend?.(event)
     isPresenting.current = false
     session.current = undefined
   }
 
-  const handleVisibilityChange = (event: globalThis.XRSessionEvent) => {
-    onvisibilitychange?.({ ...event, target: session.current! })
+  const handleVisibilityChange = (event: XRSessionEvent) => {
+    onvisibilitychange?.(event)
   }
 
   const handleInputSourcesChange = (event: XRInputSourcesChangeEvent) => {
     isHandTracking.current = Object.values(event.session.inputSources).some((source) => source.hand)
-    oninputsourceschange?.({ ...event, target: session.current! })
+    oninputsourceschange?.(event)
   }
 
-  const handleFramerateChange = (event: globalThis.XRSessionEvent) => {
-    onvisibilitychange?.({ ...event, target: session.current! })
+  const handleFramerateChange = (event: XRSessionEvent) => {
+    onvisibilitychange?.(event)
   }
 
   $effect(() => {
@@ -127,11 +127,13 @@ This should be placed within a Threlte `<Canvas />`.
     currentSession.addEventListener('visibilitychange', handleVisibilityChange)
     currentSession.addEventListener('inputsourceschange', handleInputSourcesChange)
     currentSession.addEventListener('frameratechange', handleFramerateChange)
+    currentSession.addEventListener('end', handleSessionEnd)
 
     return () => {
       currentSession.removeEventListener('visibilitychange', handleVisibilityChange)
       currentSession.removeEventListener('inputsourceschange', handleInputSourcesChange)
       currentSession.removeEventListener('frameratechange', handleFramerateChange)
+      currentSession.removeEventListener('end', handleSessionEnd)
     }
   })
 
@@ -150,13 +152,11 @@ This should be placed within a Threlte `<Canvas />`.
     xr.current = renderer.xr
     renderer.xr.enabled = true
     renderer.xr.addEventListener('sessionstart', handleSessionStart)
-    renderer.xr.addEventListener('sessionend', handleSessionEnd)
 
     return () => {
       xr.current = undefined
       renderer.xr.enabled = false
       renderer.xr.removeEventListener('sessionstart', handleSessionStart)
-      renderer.xr.removeEventListener('sessionend', handleSessionEnd)
 
       // if unmounted while presenting (e.g. due to sveltekit navigation), end the session
       currentSession?.end()

package/dist/components/XR.svelte.d.ts

@@ -1,5 +1,5 @@
+import type { WebXRManager, Event as ThreeEvent } from 'three';
 import type { Snippet } from 'svelte';
-import type { XRSessionEvent } from '../types';
 interface Props {
     /**
      * Enables foveated rendering. Default is `1`, the three.js default.
@@ -22,14 +22,14 @@ interface Props {
     referenceSpace?: XRReferenceSpaceType;
     fallback?: Snippet;
     children?: Snippet;
-    /** Called as an XRSession is requested */
-    onsessionstart?: (event: XRSessionEvent<'sessionstart'>) => void;
-    /** Called after an XRSession is terminated */
-    onsessionend?: (event: XRSessionEvent<'sessionend'>) => void;
+    /** Called as an XRSession is started */
+    onsessionstart?: (event: ThreeEvent<'sessionstart', WebXRManager>) => void;
+    /** Called after an XRSession is ended */
+    onsessionend?: (event: XRSessionEvent) => void;
     /** Called when an XRSession is hidden or unfocused. */
-    onvisibilitychange?: (event: globalThis.XRSessionEvent) => void;
+    onvisibilitychange?: (event: XRSessionEvent) => void;
     /** Called when available inputsources change */
-    oninputsourceschange?: (event: globalThis.XRSessionEvent) => void;
+    oninputsourceschange?: (event: XRSessionEvent) => void;
 }
 /**
  * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.

package/dist/hooks/useHand.svelte.d.ts

@@ -1,12 +1,12 @@
-import type { XRHand } from '../types';
+import type { XRHandObject } from '../types';
 import { type CurrentReadable } from './currentReadable.svelte';
 declare class Hands {
-    left: XRHand | undefined;
-    right: XRHand | undefined;
+    left: XRHandObject | undefined;
+    right: XRHandObject | undefined;
 }
 export declare const hands: Hands;
 /**
  * Provides a reference to a current XRHand, filtered by handedness.
  */
-export declare const useHand: (handedness: "left" | "right") => CurrentReadable<undefined | XRHand>;
+export declare const useHand: (handedness: "left" | "right") => CurrentReadable<undefined | XRHandObject>;
 export {};

package/dist/index.d.ts

@@ -17,4 +17,4 @@ export { useHeadset } from './hooks/useHeadset';
 export { useHitTest } from './hooks/useHitTest.svelte';
 export { useTeleport } from './hooks/useTeleport';
 export { useXR } from './hooks/useXR';
-export type { XRSessionEventType, XRControllerEventType, XRHandEventType, XRSessionEvent, XRControllerEvent, XRController, XRHand, XRHandEvent } from './types';
+export type { XRSessionEventType, XRControllerEventType, XRHandEventType, XRControllerEvent, XRController, XRHandObject, XRHandEvent } from './types';

package/dist/internal/setupHands.js

@@ -29,6 +29,9 @@ export const setupHands = () => {
             const { model, targetRay } = map.get(this);
             const { data } = event;
             const { handedness, hand: inputSource } = data;
+            if (handedness === 'none' || inputSource === undefined) {
+                return;
+            }
             hands[handedness] = {
                 hand: this,
                 model,

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'>;
-};
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
@@ -11,7 +11,7 @@
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^6.1.4",
     "@types/three": "^0.175.0",
-    "@types/webxr": "^0.5.22",
+    "@types/webxr": "0.5.23",
     "autoprefixer": "^10.4.19",
     "eslint": "^9.26.0",
     "eslint-plugin-svelte": "^3.5.1",
@@ -22,7 +22,7 @@
     "svelte-check": "^4.3.1",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
-    "typescript": "^5.6.3",
+    "typescript": "5.9.2",
     "typescript-eslint": "^8.32.0",
     "vite": "^7.1.4",
     "vite-plugin-mkcert": "^1.17.5",