@threlte/xr 1.0.8 → 1.1.0

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

@@ -1,3 +1,12 @@
+import type { ComponentProps } from 'svelte';
+import XRButton from './XRButton.svelte';
+type Props = Omit<ComponentProps<typeof XRButton>, 'mode' | 'sessionInit'> & {
+    sessionInit?: XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | undefined;
+    };
+};
 /**
  * `<ARButton />` is an HTML `<button />` that can be used to init and display info about your immersive AR session.
  *
@@ -8,28 +17,6 @@
  * />
  * ```
  */
-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;
-        } | undefined;
-    };
-}, {}, "">;
+declare const ArButton: import("svelte").Component<Props, {}, "">;
+type ArButton = ReturnType<typeof ArButton>;
 export default ArButton;

package/dist/components/Controller.svelte

@@ -1,13 +1,15 @@
 <!--
 @component `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
 -->
-<script
-  lang="ts"
-  module
->
-  import { T } from '@threlte/core'
-  import { left as leftStore, right as rightStore } from '../hooks/useController'
-  import { isHandTracking, pointerState, teleportState, controllerEvents } from '../internal/stores'
+<script lang="ts">
+  import { T, useThrelte } from '@threlte/core'
+  import { controllers } from '../hooks/useController.svelte'
+  import {
+    isHandTracking,
+    pointerState,
+    teleportState,
+    controllerEvents
+  } from '../internal/state.svelte'
   import type { XRControllerEvents } from '../types'
   import PointerCursor from './internal/PointerCursor.svelte'
   import ShortRay from './internal/ShortRay.svelte'
@@ -15,13 +17,6 @@
   import TeleportRay from './internal/TeleportRay.svelte'
   import type { Snippet } from 'svelte'
 
-  const stores = {
-    left: leftStore,
-    right: rightStore
-  } as const
-</script>
-
-<script lang="ts">
   type Props = {
     children?: Snippet
     grip?: Snippet
@@ -75,10 +70,12 @@
     teleportCursor: teleportCursorSnippet
   }: Props = $props()
 
+  const { scene } = useThrelte()
+
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
 
-  $effect.pre(() =>
-    controllerEvents[handedness].set({
+  $effect.pre(() => {
+    controllerEvents[handedness] = {
       onconnected,
       ondisconnected,
       onselect,
@@ -87,20 +84,27 @@
       onsqueeze,
       onsqueezeend,
       onsqueezestart
-    })
-  )
-
-  const store = $derived(stores[handedness])
-  const grip = $derived($store?.grip)
-  const targetRay = $derived($store?.targetRay)
-  const model = $derived($store?.model)
-  const hasPointerControls = $derived($pointerState[handedness].enabled)
-  const hasTeleportControls = $derived($teleportState[handedness].enabled)
+    }
+
+    return () => {
+      controllerEvents[handedness] = undefined
+    }
+  })
+
+  const xrController = $derived(controllers[handedness])
+  const grip = $derived(xrController?.grip)
+  const targetRay = $derived(xrController?.targetRay)
+  const model = $derived(xrController?.model)
+  const hasPointerControls = $derived(pointerState[handedness].enabled)
+  const hasTeleportControls = $derived(teleportState[handedness].enabled)
 </script>
 
-{#if !$isHandTracking}
+{#if !isHandTracking.current}
   {#if grip}
-    <T is={grip}>
+    <T
+      is={grip}
+      attach={scene}
+    >
       {#if children}
         {@render children?.()}
       {:else}

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

@@ -1,7 +1,6 @@
 import type { XRControllerEvents } from '../types';
 import type { Snippet } from 'svelte';
-/** `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model. */
-declare const Controller: import("svelte").Component<{
+type Props = {
     children?: Snippet;
     grip?: Snippet;
     targetRay?: Snippet;
@@ -9,7 +8,7 @@ declare const Controller: import("svelte").Component<{
     pointerCursor?: Snippet;
     teleportRay?: Snippet;
     teleportCursor?: Snippet;
-} & (XRControllerEvents & ({
+} & XRControllerEvents & ({
     /** Whether the controller should be matched with the left hand. */
     left: true;
     right?: undefined;
@@ -21,8 +20,11 @@ declare const Controller: import("svelte").Component<{
     hand?: undefined;
 } | {
     /** Whether the controller should be matched with the left or right hand. */
-    hand: "left" | "right";
+    hand: 'left' | 'right';
     left?: undefined;
     right?: undefined;
-})), {}, "">;
+});
+/** `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model. */
+declare const Controller: import("svelte").Component<Props, {}, "">;
+type Controller = ReturnType<typeof Controller>;
 export default Controller;

package/dist/components/Hand.svelte

@@ -1,21 +1,11 @@
-<script
-  lang="ts"
-  module
->
+<script lang="ts">
   import { Group } from 'three'
   import { T, useThrelte, useTask } from '@threlte/core'
   import type { XRHandEvents } from '../types'
-  import { isHandTracking, handEvents } from '../internal/stores'
-  import { left as leftStore, right as rightStore } from '../hooks/useHand'
+  import { isHandTracking, handEvents } from '../internal/state.svelte'
+  import { hands } from '../hooks/useHand.svelte'
   import type { Snippet } from 'svelte'
 
-  const stores = {
-    left: leftStore,
-    right: rightStore
-  } as const
-</script>
-
-<script lang="ts">
   type Props = {
     children?: Snippet
     targetRay?: Snippet
@@ -56,19 +46,21 @@
   }: Props = $props()
 
   const { scene, renderer, scheduler, renderStage } = useThrelte()
-  const { xr } = renderer
-  const space = xr.getReferenceSpace()
 
   const handedness = $derived<'left' | 'right'>(left ? 'left' : right ? 'right' : hand ?? 'left')
 
-  $effect.pre(() =>
-    handEvents[handedness].set({
+  $effect.pre(() => {
+    handEvents[handedness] = {
       onconnected,
       ondisconnected,
       onpinchend,
       onpinchstart
-    })
-  )
+    }
+
+    return () => {
+      handEvents[handedness] = undefined
+    }
+  })
 
   const group = new Group()
 
@@ -82,7 +74,8 @@
    */
   const { start, stop } = useTask(
     () => {
-      const frame = xr.getFrame()
+      const frame = renderer.xr.getFrame()
+      const space = renderer.xr.getReferenceSpace()
       const joint = inputSource?.get('wrist')
 
       if (joint === undefined || space === null) return
@@ -103,33 +96,36 @@
   )
 
   $effect.pre(() => {
-    if ($isHandTracking && (wrist !== undefined || children !== undefined) && inputSource) {
+    if (isHandTracking.current && (wrist !== undefined || children !== undefined) && inputSource) {
       start()
     } else {
       stop()
     }
   })
 
-  const store = $derived(stores[handedness])
-  const inputSource = $derived($store?.inputSource)
-  const model = $derived($store?.model)
+  const xrHand = $derived(hands[handedness])
+  const inputSource = $derived(xrHand?.inputSource)
+  const model = $derived(xrHand?.model)
 </script>
 
-{#if $store?.hand && $isHandTracking}
-  <T is={$store.hand}>
+{#if xrHand?.hand && isHandTracking.current}
+  <T
+    is={xrHand.hand}
+    attach={scene}
+  >
     {#if children === undefined}
       <T is={model} />
     {/if}
   </T>
 
   {#if targetRay !== undefined}
-    <T is={$store.targetRay}>
+    <T is={xrHand.targetRay}>
       {@render targetRay()}
     </T>
   {/if}
 {/if}
 
-{#if $isHandTracking}
+{#if isHandTracking.current}
   <T
     is={group}
     attach={scene}

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

@@ -1,10 +1,10 @@
 import type { XRHandEvents } from '../types';
 import type { Snippet } from 'svelte';
-declare const Hand: import("svelte").Component<{
+type Props = {
     children?: Snippet;
     targetRay?: Snippet;
     wrist?: Snippet;
-} & (XRHandEvents & ({
+} & XRHandEvents & ({
     /** Whether the XRHand should be matched with the left hand. */
     left: true;
     right?: undefined;
@@ -16,8 +16,10 @@ declare const Hand: import("svelte").Component<{
     hand?: undefined;
 } | {
     /** Whether the XRHand should be matched with the left or right hand. */
-    hand: "left" | "right";
+    hand: 'left' | 'right';
     left?: undefined;
     right?: undefined;
-})), {}, "">;
+});
+declare const Hand: import("svelte").Component<Props, {}, "">;
+type Hand = ReturnType<typeof Hand>;
 export default Hand;

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

@@ -1,8 +1,10 @@
 import type { Snippet } from 'svelte';
 import type { Group } from 'three';
-declare const Headset: import("svelte").Component<{
+interface Props {
     children?: Snippet<[{
         ref: Group;
     }]>;
-}, {}, "">;
+}
+declare const Headset: import("svelte").Component<Props, {}, "">;
+type Headset = ReturnType<typeof Headset>;
 export default Headset;

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

@@ -1,3 +1,6 @@
+import type { ComponentProps } from 'svelte';
+import XRButton from './XRButton.svelte';
+type Props = Omit<ComponentProps<typeof XRButton>, 'mode' | 'sessionInit'>;
 /**
  * `<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
  *
@@ -8,22 +11,6 @@
  * />
  * ```
  */
-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">, {}, "">;
+declare const VrButton: import("svelte").Component<Props, {}, "">;
+type VrButton = ReturnType<typeof VrButton>;
 export default VrButton;

package/dist/components/XR.svelte

@@ -18,18 +18,18 @@ This should be placed within a Threlte `<Canvas />`.
 
 -->
 <script lang="ts">
-  import { onMount, type Snippet } from 'svelte'
-  import { useThrelte, watch } from '@threlte/core'
+  import type { Snippet } from 'svelte'
+  import { useThrelte } from '@threlte/core'
   import type { XRSessionEvent } from '../types'
   import {
     isHandTracking,
     isPresenting,
     referenceSpaceType,
     session,
-    xr as xrStore
-  } from '../internal/stores'
-  import { setupRaf } from '../internal/setupRaf'
-  import { setupHeadset } from '../internal/setupHeadset'
+    xr
+  } from '../internal/state.svelte'
+  import { setupRaf } from '../internal/setupRaf.svelte'
+  import { setupHeadset } from '../internal/setupHeadset.svelte'
   import { setupControllers } from '../internal/setupControllers'
   import { setupHands } from '../internal/setupHands'
 
@@ -85,7 +85,6 @@ This should be placed within a Threlte `<Canvas />`.
   }: Props = $props()
 
   const { renderer, renderMode } = useThrelte()
-  const { xr } = renderer
 
   let originalRenderMode = $renderMode
 
@@ -95,41 +94,35 @@ This should be placed within a Threlte `<Canvas />`.
   setupHands()
 
   const handleSessionStart = () => {
-    isPresenting.set(true)
-    onsessionstart?.({ type: 'sessionstart', target: $session } as any)
+    isPresenting.current = true
+    onsessionstart?.({ type: 'sessionstart', target: session.current } as any)
   }
 
   const handleSessionEnd = () => {
-    onsessionend?.({ type: 'sessionend', target: $session } as any)
-    isPresenting.set(false)
-    session.set(undefined)
+    onsessionend?.({ type: 'sessionend', target: session.current } as any)
+    isPresenting.current = false
+    session.current = undefined
   }
 
   const handleVisibilityChange = (event: globalThis.XRSessionEvent) => {
-    onvisibilitychange?.({ ...event, target: $session! })
+    onvisibilitychange?.({ ...event, target: session.current! })
   }
 
   const handleInputSourcesChange = (event: XRInputSourcesChangeEvent) => {
-    $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand)
-    oninputsourceschange?.({ ...event, target: $session! })
+    isHandTracking.current = Object.values(event.session.inputSources).some((source) => source.hand)
+    oninputsourceschange?.({ ...event, target: session.current! })
   }
 
   const handleFramerateChange = (event: globalThis.XRSessionEvent) => {
-    onvisibilitychange?.({ ...event, target: $session! })
+    onvisibilitychange?.({ ...event, target: session.current! })
   }
 
-  const updateTargetFrameRate = (frameRate?: number) => {
-    if (frameRate === undefined) return
+  $effect(() => {
+    const currentSession = session.current
 
-    try {
-      $session?.updateTargetFrameRate(frameRate)
-    } catch {
-      // Do nothing
+    if (currentSession === undefined) {
+      return
     }
-  }
-
-  watch(session, (currentSession) => {
-    if (currentSession === undefined) return
 
     currentSession.addEventListener('visibilitychange', handleVisibilityChange)
     currentSession.addEventListener('inputsourceschange', handleInputSourcesChange)
@@ -142,8 +135,8 @@ This should be placed within a Threlte `<Canvas />`.
     }
   })
 
-  watch(isPresenting, (presenting) => {
-    if (presenting) {
+  $effect.pre(() => {
+    if (isPresenting.current) {
       originalRenderMode = renderMode.current
       renderMode.set('always')
     } else {
@@ -151,38 +144,46 @@ This should be placed within a Threlte `<Canvas />`.
     }
   })
 
-  onMount(() => {
-    $xrStore = xr
-    xr.enabled = true
-    xr.addEventListener('sessionstart', handleSessionStart)
-    xr.addEventListener('sessionend', handleSessionEnd)
+  $effect.pre(() => {
+    const currentSession = session.current
+
+    xr.current = renderer.xr
+    renderer.xr.enabled = true
+    renderer.xr.addEventListener('sessionstart', handleSessionStart)
+    renderer.xr.addEventListener('sessionend', handleSessionEnd)
 
     return () => {
-      $xrStore = undefined
-      xr.enabled = false
-      xr.removeEventListener('sessionstart', handleSessionStart)
-      xr.removeEventListener('sessionend', handleSessionEnd)
+      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
-      session.current?.end()
+      currentSession?.end()
     }
   })
 
   $effect.pre(() => {
-    updateTargetFrameRate(frameRate)
+    if (frameRate === undefined) return
+
+    try {
+      session.current?.updateTargetFrameRate(frameRate)
+    } catch {
+      // Do nothing
+    }
   })
 
   $effect.pre(() => {
-    xr.setFoveation(foveation)
+    renderer.xr.setFoveation(foveation)
   })
 
   $effect.pre(() => {
-    xr.setReferenceSpaceType(referenceSpace)
-    $referenceSpaceType = referenceSpace
+    renderer.xr.setReferenceSpaceType(referenceSpace)
+    referenceSpaceType.current = referenceSpace
   })
 </script>
 
-{#if $isPresenting}
+{#if isPresenting.current}
   {@render children?.()}
 {:else}
   {@render fallback?.()}

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

@@ -1,23 +1,6 @@
-import { type Snippet } from 'svelte';
+import type { Snippet } from 'svelte';
 import type { XRSessionEvent } from '../types';
-/**
- * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
- *
- * This should be placed within a Threlte `<Canvas />`.
- *
- * ```svelte
- * <XR
- *   foveation={1}
- *   frameRate={90}
- *   referenceSpace='local-floor'
- *   onsessionstart={(event: XREvent<XRManagerEvent>) => {}}
- *   onsessionend={(event: XREvent<XRManagerEvent>) => {}}
- *   onvisibilitychange={(event: XREvent<XRSessionEvent>) => {}}
- *   oninputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
- * />
- * ```
- */
-declare const Xr: import("svelte").Component<{
+interface Props {
     /**
      * Enables foveated rendering. Default is `1`, the three.js default.
      *
@@ -40,12 +23,31 @@ declare const Xr: import("svelte").Component<{
     fallback?: Snippet;
     children?: Snippet;
     /** Called as an XRSession is requested */
-    onsessionstart?: (event: XRSessionEvent<"sessionstart">) => void;
+    onsessionstart?: (event: XRSessionEvent<'sessionstart'>) => void;
     /** Called after an XRSession is terminated */
-    onsessionend?: (event: XRSessionEvent<"sessionend">) => void;
+    onsessionend?: (event: XRSessionEvent<'sessionend'>) => void;
     /** Called when an XRSession is hidden or unfocused. */
     onvisibilitychange?: (event: globalThis.XRSessionEvent) => void;
     /** Called when available inputsources change */
     oninputsourceschange?: (event: globalThis.XRSessionEvent) => void;
-}, {}, "">;
+}
+/**
+ * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
+ *
+ * This should be placed within a Threlte `<Canvas />`.
+ *
+ * ```svelte
+ * <XR
+ *   foveation={1}
+ *   frameRate={90}
+ *   referenceSpace='local-floor'
+ *   onsessionstart={(event: XREvent<XRManagerEvent>) => {}}
+ *   onsessionend={(event: XREvent<XRManagerEvent>) => {}}
+ *   onvisibilitychange={(event: XREvent<XRSessionEvent>) => {}}
+ *   oninputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
+ * />
+ * ```
+ */
+declare const Xr: import("svelte").Component<Props, {}, "">;
+type Xr = ReturnType<typeof Xr>;
 export default Xr;

package/dist/components/XRButton.svelte

@@ -21,7 +21,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
   import type { HTMLButtonAttributes } from 'svelte/elements'
   import { getXRSupportState } from '../lib/getXRSupportState'
   import { toggleXRSession } from '../lib/toggleXRSession'
-  import { session, xr } from '../internal/stores'
+  import { isPresenting, xr } from '../internal/state.svelte'
   import type { Snippet } from 'svelte'
 
   type Props = HTMLButtonAttributes & {
@@ -57,7 +57,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
   type SupportState = 'unsupported' | 'insecure' | 'blocked' | 'supported'
 
   const handleButtonClick = async (nativeEvent: MouseEvent, state: SupportState) => {
-    if (!$xr) {
+    if (!xr.current) {
       throw new Error(
         'The <XR> component was not created. This is required to start an XR session.'
       )
@@ -119,7 +119,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     {:else if state === 'blocked'}
       {modeText} blocked
     {:else if state === 'supported'}
-      {$session ? 'Exit' : 'Enter'} {modeText}
+      {isPresenting.current ? 'Exit' : 'Enter'} {modeText}
     {/if}
   </button>
 {/await}

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

@@ -1,24 +1,7 @@
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { Snippet } from 'svelte';
-/**
- * `<XRButton />` is an HTML `<button />` that can be used to init and
- * display info about your WebXR session. This is aliased by `ARButton` and
- * `VRButton` with sensible session defaults.
- *
- * ```svelte
- * <XRButton
- *   mode={'immersive-ar' | 'immersive-vr' | 'inline'}
- *   sessionInit={{
- *     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
- *   }}
- *   force={'enter' | 'exit' | undefined}
- *   styled={'true' | 'false'}
- *   onerror={(event) => {}}
- *   onclick={(event) => {}}
- * />
- * ```
- */
-declare const XrButton: import("svelte").Component<HTMLButtonAttributes & {
+type SupportState = 'unsupported' | 'insecure' | 'blocked' | 'supported';
+type Props = HTMLButtonAttributes & {
     /** The type of `XRSession` to create */
     mode: XRSessionMode;
     /**
@@ -31,16 +14,36 @@ declare const XrButton: import("svelte").Component<HTMLButtonAttributes & {
         } | undefined;
     };
     /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
-    force?: "enter" | "exit";
+    force?: 'enter' | 'exit';
     /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
     styled?: boolean;
     children?: Snippet<[{
-        state: "unsupported" | "insecure" | "blocked" | "supported";
+        state: SupportState;
     }]>;
     onclick?: (event: {
-        state: "unsupported" | "insecure" | "blocked" | "supported";
+        state: SupportState;
         nativeEvent: MouseEvent;
     }) => void;
     onerror?: (error: Error) => void;
-}, {}, "">;
+};
+/**
+ * `<XRButton />` is an HTML `<button />` that can be used to init and
+ * display info about your WebXR session. This is aliased by `ARButton` and
+ * `VRButton` with sensible session defaults.
+ *
+ * ```svelte
+ * <XRButton
+ *   mode={'immersive-ar' | 'immersive-vr' | 'inline'}
+ *   sessionInit={{
+ *     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+ *   }}
+ *   force={'enter' | 'exit' | undefined}
+ *   styled={'true' | 'false'}
+ *   onerror={(event) => {}}
+ *   onclick={(event) => {}}
+ * />
+ * ```
+ */
+declare const XrButton: import("svelte").Component<Props, {}, "">;
+type XrButton = ReturnType<typeof XrButton>;
 export default XrButton;

package/dist/components/internal/Cursor.svelte.d.ts

@@ -1,7 +1,9 @@
 import { type ColorRepresentation } from 'three';
-declare const Cursor: import("svelte").Component<{
+interface Props {
     color?: ColorRepresentation;
     size?: number;
     thickness?: number;
-}, {}, "">;
+}
+declare const Cursor: import("svelte").Component<Props, {}, "">;
+type Cursor = ReturnType<typeof Cursor>;
 export default Cursor;