@threlte/xr 1.0.2 → 1.0.5

package/dist/components/ARButton.svelte

@@ -14,7 +14,7 @@
   import XRButton from './XRButton.svelte'
   import { defaultFeatures } from '../internal/defaultFeatures'
 
-  type Props = Omit<ComponentProps<XRButton>, 'mode' | 'sessionInit'> & {
+  type Props = Omit<ComponentProps<typeof XRButton>, 'mode' | 'sessionInit'> & {
     sessionInit?: XRSessionInit & { domOverlay?: { root: HTMLElement } | undefined }
   }
 
@@ -28,6 +28,4 @@
   }}
   {...props}
   mode="immersive-ar"
->
-  {@render children?.()}
-</XRButton>
+/>

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

@@ -8,7 +8,24 @@
  * />
  * ```
  */
-declare const ArButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit"> & {
+declare const ArButton: import("svelte").Component<Omit<import("svelte/elements").HTMLButtonAttributes & {
+    mode: XRSessionMode;
+    sessionInit?: XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | undefined;
+    };
+    force?: "enter" | "exit";
+    styled?: boolean;
+    children?: import("svelte").Snippet<[{
+        state: "unsupported" | "insecure" | "blocked" | "supported";
+    }]>;
+    onclick?: (event: {
+        state: "unsupported" | "insecure" | "blocked" | "supported";
+        nativeEvent: MouseEvent;
+    }) => void;
+    onerror?: (error: Error) => void;
+}, "mode" | "sessionInit"> & {
     sessionInit?: XRSessionInit & {
         domOverlay?: {
             root: HTMLElement;

package/dist/components/Controller.svelte

@@ -3,7 +3,7 @@
 -->
 <script
   lang="ts"
-  context="module"
+  module
 >
   import { writable } from 'svelte/store'
   import { T } from '@threlte/core'

package/dist/components/Hand.svelte

@@ -1,6 +1,6 @@
 <script
   lang="ts"
-  context="module"
+  module
 >
   import { Group } from 'three'
   import { T, useThrelte, useTask } from '@threlte/core'
@@ -86,7 +86,7 @@
   const { start, stop } = useTask(
     () => {
       const frame = xr.getFrame()
-      const joint = inputSource?.get('wrist' as unknown as number)
+      const joint = inputSource?.get('wrist')
 
       if (joint === undefined || space === null) return
 

package/dist/components/VRButton.svelte

@@ -14,7 +14,7 @@
   import XRButton from './XRButton.svelte'
   import { defaultFeatures } from '../internal/defaultFeatures'
 
-  type Props = Omit<ComponentProps<XRButton>, 'mode' | 'sessionInit'>
+  type Props = Omit<ComponentProps<typeof XRButton>, 'mode' | 'sessionInit'>
 
   let { ...props }: Props = $props()
 </script>

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

@@ -8,5 +8,22 @@
  * />
  * ```
  */
-declare const VrButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit">, {}, "">;
+declare const VrButton: import("svelte").Component<Omit<import("svelte/elements").HTMLButtonAttributes & {
+    mode: XRSessionMode;
+    sessionInit?: XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | undefined;
+    };
+    force?: "enter" | "exit";
+    styled?: boolean;
+    children?: import("svelte").Snippet<[{
+        state: "unsupported" | "insecure" | "blocked" | "supported";
+    }]>;
+    onclick?: (event: {
+        state: "unsupported" | "insecure" | "blocked" | "supported";
+        nativeEvent: MouseEvent;
+    }) => void;
+    onerror?: (error: Error) => void;
+}, "mode" | "sessionInit">, {}, "">;
 export default VrButton;

package/dist/components/XR.svelte

@@ -18,7 +18,7 @@ This should be placed within a Threlte `<Canvas />`.
 
 -->
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte'
+  import { onDestroy, onMount, type Snippet } from 'svelte'
   import { useThrelte, watch } from '@threlte/core'
   import type { XRSessionEvent } from '../types'
   import {
@@ -96,11 +96,11 @@ This should be placed within a Threlte `<Canvas />`.
 
   const handleSessionStart = () => {
     isPresenting.set(true)
-    onsessionstart?.({ type: 'sessionstart', target: $session! })
+    onsessionstart?.({ type: 'sessionstart', target: $session } as any)
   }
 
   const handleSessionEnd = () => {
-    onsessionend?.({ type: 'sessionend', target: $session! })
+    onsessionend?.({ type: 'sessionend', target: $session } as any)
     isPresenting.set(false)
     session.set(undefined)
   }
@@ -109,7 +109,7 @@ This should be placed within a Threlte `<Canvas />`.
     onvisibilitychange?.({ ...event, target: $session! })
   }
 
-  const handleInputSourcesChange = (event: XRInputSourceChangeEvent) => {
+  const handleInputSourcesChange = (event: XRInputSourcesChangeEvent) => {
     $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand)
     oninputsourceschange?.({ ...event, target: $session! })
   }
@@ -168,6 +168,12 @@ This should be placed within a Threlte `<Canvas />`.
       xr.removeEventListener('sessionend', handleSessionEnd)
     }
   })
+  onDestroy(() => {
+    // if unmounted while presenting (e.g. due to sveltekit navigation), end the session
+    if (session.current) {
+      session.current.end()
+    }
+  })
 
   $effect.pre(() => updateTargetFrameRate(frameRate))
   $effect.pre(() => xr.setFoveation(foveation))

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

@@ -35,10 +35,10 @@ declare const XrButton: import("svelte").Component<HTMLButtonAttributes & {
     /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
     styled?: boolean;
     children?: Snippet<[{
-        state: "blocked" | "unsupported" | "insecure" | "supported";
+        state: "unsupported" | "insecure" | "blocked" | "supported";
     }]>;
     onclick?: (event: {
-        state: "blocked" | "unsupported" | "insecure" | "supported";
+        state: "unsupported" | "insecure" | "blocked" | "supported";
         nativeEvent: MouseEvent;
     }) => void;
     onerror?: (error: Error) => void;

package/dist/internal/setupHands.js

@@ -27,12 +27,11 @@ export const setupHands = () => {
             handEvents[handedness]?.current?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
-            const hand = this;
             const { model, targetRay } = map.get(this);
             const { data } = event;
             const { handedness, hand: inputSource } = data;
             stores[handedness].set({
-                hand,
+                hand: this,
                 model,
                 inputSource,
                 targetRay

package/dist/internal/setupRaf.js

@@ -1,5 +1,4 @@
 import { onDestroy } from 'svelte';
-// @ts-expect-error untyped internal import, when have you ever done me wrong?
 import { raf } from 'svelte/internal/client';
 import { watch } from '@threlte/core';
 import { session } from './stores';

package/dist/internal/useFixed.js

@@ -6,7 +6,7 @@ import { useTask } from '@threlte/core';
  */
 export const useFixed = (fn, options) => {
     let fixedStepTimeAccumulator = 0;
-    let fixedStep = options.fixedStep ?? 1 / 60;
+    const fixedStep = options.fixedStep ?? 1 / 60;
     return useTask((delta) => {
         fixedStepTimeAccumulator += delta;
         while (fixedStepTimeAccumulator >= fixedStep) {

package/dist/plugins/pointerControls/plugin.svelte.js

@@ -1,5 +1,4 @@
 import { injectPlugin, isInstanceOf, observe } from '@threlte/core';
-import { untrack } from 'svelte';
 import { usePointerControls } from './hook';
 import { events } from './types';
 export const injectPointerControlsPlugin = () => {

package/dist/plugins/pointerControls/setup.js

@@ -16,7 +16,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     const hand = useHand(handedness);
     const { dispatchers } = getInternalContext();
     let hits = [];
-    let lastPosition = new Vector3();
+    const lastPosition = new Vector3();
     const handlePointerDown = (event) => {
         // Save initial coordinates on pointer-down
         const [hit] = hits;

package/dist/plugins/pointerControls/types.d.ts

@@ -4,7 +4,7 @@ import type { ComputeFunction } from './compute';
 export type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
-export interface Intersection extends ThreeIntersection {
+export interface Intersection<T extends Object3D = Object3D> extends ThreeIntersection<T> {
     /** The event source (the object which registered the handler) */
     eventObject: Object3D;
 }

package/dist/plugins/teleportControls/context.d.ts

@@ -2,7 +2,7 @@ import { type Mesh, Raycaster, type Intersection } from 'three';
 import type { CurrentWritable } from '@threlte/core';
 import type { TeleportControlsOptions } from '.';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
-export type TeleportEvents = {};
+export type TeleportEvents = Record<string, (arg: unknown) => void>;
 export interface Context {
     interactiveObjects: Mesh[];
     surfaces: Map<string, Mesh>;

package/dist/plugins/teleportControls/plugin.svelte.js

@@ -15,7 +15,7 @@ export const injectTeleportControlsPlugin = () => {
         $effect(() => {
             if (!ref)
                 return;
-            let mesh = ref;
+            const mesh = ref;
             if (isSurface) {
                 addSurface(mesh, args.props);
             }
@@ -48,7 +48,7 @@ export const injectTeleportControlsPlugin = () => {
         $effect(() => {
             if (!ref)
                 return;
-            let mesh = ref;
+            const mesh = ref;
             if (isBlocker) {
                 addBlocker(mesh);
             }

package/package.json

@@ -1,30 +1,32 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.2",
+  "version": "1.0.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
+    "@eslint/js": "^9.26.0",
     "@sveltejs/adapter-auto": "^3.3.1",
     "@sveltejs/kit": "^2.7.7",
     "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@types/three": "^0.175.0",
-    "@typescript-eslint/eslint-plugin": "^7.6.0",
-    "@typescript-eslint/parser": "^7.6.0",
+    "@types/webxr": "^0.5.22",
     "autoprefixer": "^10.4.19",
-    "eslint": "^9.0.0",
-    "eslint-plugin-svelte": "^2.36.0",
+    "eslint": "^9.26.0",
+    "eslint-plugin-svelte": "^3.5.1",
+    "globals": "^16.1.0",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
     "svelte": "^5.26.2",
-    "svelte-check": "^3.6.9",
+    "svelte-check": "^4.1.7",
     "three": "^0.175.0",
     "tslib": "^2.6.2",
     "typescript": "^5.6.3",
+    "typescript-eslint": "^8.32.0",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.2"
+    "@threlte/core": "8.0.4"
   },
   "peerDependencies": {
     "svelte": ">=5",
@@ -68,7 +70,7 @@
     "package": "svelte-kit sync && svelte-package && node ./scripts/cleanupPackage.js && publint",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check .",
+    "lint": "prettier --check . && eslint .",
     "format": "prettier --write .",
     "cleanup": "rimraf node_modules .svelte-kit dist"
   }