@threlte/xr 1.0.7 → 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,29 +1,22 @@
 <!--
 @component `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model.
 -->
-<script
-  lang="ts"
-  module
->
-  import { writable } from 'svelte/store'
-  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'
-  import ScenePortal from './internal/ScenePortal.svelte'
   import TeleportCursor from './internal/TeleportCursor.svelte'
   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
@@ -77,11 +70,12 @@
     teleportCursor: teleportCursorSnippet
   }: Props = $props()
 
-  const handedness = writable<'left' | 'right'>(left ? 'left' : right ? 'right' : hand)
-  $effect.pre(() => handedness.set(left ? 'left' : right ? 'right' : (hand as 'left' | 'right')))
+  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,
@@ -90,20 +84,27 @@
       onsqueeze,
       onsqueezeend,
       onsqueezestart
-    })
-  )
-
-  let store = $derived(stores[$handedness])
-  let grip = $derived($store?.grip)
-  let targetRay = $derived($store?.targetRay)
-  let model = $derived($store?.model)
-  let hasPointerControls = $derived($pointerState[$handedness].enabled)
-  let 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}
@@ -120,7 +121,7 @@
 
       {#if hasPointerControls || hasTeleportControls}
         <ShortRay
-          handedness={$handedness}
+          {handedness}
           children={pointerRaySnippet}
         />
       {/if}
@@ -128,24 +129,22 @@
   {/if}
 {/if}
 
-<ScenePortal>
-  {#if hasPointerControls}
-    <PointerCursor
-      handedness={$handedness}
-      children={pointerCursorSnippet}
-    />
-  {/if}
+{#if hasPointerControls}
+  <PointerCursor
+    {handedness}
+    children={pointerCursorSnippet}
+  />
+{/if}
 
-  {#if hasTeleportControls && targetRay !== undefined}
-    <TeleportRay
-      {targetRay}
-      handedness={$handedness}
-      children={teleportRaySnippet}
-    />
-
-    <TeleportCursor
-      handedness={$handedness}
-      children={teleportCursorSnippet}
-    />
-  {/if}
-</ScenePortal>
+{#if hasTeleportControls && targetRay !== undefined}
+  <TeleportRay
+    {targetRay}
+    {handedness}
+    children={teleportRaySnippet}
+  />
+
+  <TeleportCursor
+    {handedness}
+    children={teleportCursorSnippet}
+  />
+{/if}

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,23 +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 ScenePortal from './internal/ScenePortal.svelte'
-  import { writable } from 'svelte/store'
+  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
@@ -44,7 +32,7 @@
         }
     )
 
-  let {
+  const {
     left,
     right,
     hand,
@@ -57,23 +45,24 @@
     wrist
   }: Props = $props()
 
-  const { renderer, scheduler, renderStage } = useThrelte()
-  const { xr } = renderer
-  const space = xr.getReferenceSpace()
+  const { scene, renderer, scheduler, renderStage } = useThrelte()
 
-  const handedness = writable<'left' | 'right'>(left ? 'left' : right ? 'right' : hand)
-  $effect.pre(() => handedness.set(left ? 'left' : right ? 'right' : (hand as 'left' | 'right')))
+  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
+    }
+  })
 
-  let group = new Group()
+  const group = new Group()
 
   /**
    * Currently children of a hand XRSpace or model will not
@@ -85,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
@@ -106,37 +96,41 @@
   )
 
   $effect.pre(() => {
-    if ($isHandTracking && (wrist !== undefined || children !== undefined) && inputSource) {
+    if (isHandTracking.current && (wrist !== undefined || children !== undefined) && inputSource) {
       start()
     } else {
       stop()
     }
   })
 
-  let store = $derived(stores[$handedness])
-  let inputSource = $derived($store?.inputSource)
-  let 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}
-  <ScenePortal>
-    <T is={group}>
-      {@render wrist?.()}
-      {@render children?.()}
-    </T>
-  </ScenePortal>
+{#if isHandTracking.current}
+  <T
+    is={group}
+    attach={scene}
+  >
+    {@render wrist?.()}
+    {@render children?.()}
+  </T>
 {/if}

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

@@ -1,13 +1,22 @@
 <script lang="ts">
-  import { T } from '@threlte/core'
+  import type { Snippet } from 'svelte'
+  import type { Group } from 'three'
+  import { T, useThrelte } from '@threlte/core'
   import { useHeadset } from '../hooks/useHeadset'
-  import ScenePortal from './internal/ScenePortal.svelte'
 
+  interface Props {
+    children?: Snippet<[{ ref: Group }]>
+  }
+
+  const { children }: Props = $props()
+
+  const { scene } = useThrelte()
   const headset = useHeadset()
 </script>
 
-<ScenePortal>
-  <T is={headset}>
-    <slot />
-  </T>
-</ScenePortal>
+<T
+  is={headset}
+  attach={scene}
+>
+  {@render children?.({ ref: headset })}
+</T>

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

@@ -1,20 +1,10 @@
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
+import type { Snippet } from 'svelte';
+import type { Group } from 'three';
+interface Props {
+    children?: Snippet<[{
+        ref: Group;
+    }]>;
 }
-declare const Headset: $$__sveltets_2_IsomorphicComponent<any, {
-    [evt: string]: CustomEvent<any>;
-}, {
-    default: {};
-}, {}, string>;
-type Headset = InstanceType<typeof Headset>;
+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 { onDestroy, 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,50 +94,40 @@ 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)
     currentSession.addEventListener('frameratechange', handleFramerateChange)
 
-    xr.setFoveation(foveation)
-
-    updateTargetFrameRate(frameRate)
-
     return () => {
       currentSession.removeEventListener('visibilitychange', handleVisibilityChange)
       currentSession.removeEventListener('inputsourceschange', handleInputSourcesChange)
@@ -146,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 {
@@ -155,35 +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
+      currentSession?.end()
     }
   })
-  onDestroy(() => {
-    // if unmounted while presenting (e.g. due to sveltekit navigation), end the session
-    if (session.current) {
-      session.current.end()
+
+  $effect.pre(() => {
+    if (frameRate === undefined) return
+
+    try {
+      session.current?.updateTargetFrameRate(frameRate)
+    } catch {
+      // Do nothing
     }
   })
 
-  $effect.pre(() => updateTargetFrameRate(frameRate))
-  $effect.pre(() => xr.setFoveation(foveation))
   $effect.pre(() => {
-    xr.setReferenceSpaceType(referenceSpace)
-    $referenceSpaceType = referenceSpace
+    renderer.xr.setFoveation(foveation)
+  })
+
+  $effect.pre(() => {
+    renderer.xr.setReferenceSpaceType(referenceSpace)
+    referenceSpaceType.current = referenceSpace
   })
 </script>
 
-{#if $isPresenting}
+{#if isPresenting.current}
   {@render children?.()}
 {:else}
   {@render fallback?.()}