@threlte/xr 1.0.7 → 1.1.0

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.'
       )
@@ -75,7 +75,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     }
   }
 
-  let modeText = $derived(
+  const modeText = $derived(
     {
       'immersive-vr': 'VR',
       'immersive-ar': 'AR',
@@ -83,7 +83,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     }[mode]
   )
 
-  let style = $derived(
+  const style = $derived(
     styled
       ? `
       position: absolute;
@@ -111,7 +111,7 @@ display info about your WebXR session. This is aliased by `ARButton` and
     {style}
   >
     {#if children}
-      {@render children?.({ state })}
+      {@render children({ state })}
     {:else if state === 'unsupported'}
       {modeText} unsupported
     {:else if state === 'insecure'}
@@ -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

@@ -8,7 +8,7 @@
     thickness?: number
   }
 
-  let { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
+  const { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
 
   const vertexShader = `
     uniform mat4 projectionMatrix;
@@ -52,6 +52,7 @@
   $effect.pre(() => {
     uniforms.thickness.value = thickness
   })
+
   $effect.pre(() => {
     uniforms.color.value = color
   })

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;

package/dist/components/internal/PointerCursor.svelte

@@ -1,7 +1,17 @@
-<script lang="ts">
+<script
+  module
+  lang="ts"
+>
   import { Group, Vector3, Matrix3 } from 'three'
-  import { T, useTask } from '@threlte/core'
-  import { pointerIntersection, pointerState } from '../../internal/stores'
+
+  const vec3 = new Vector3()
+  const normalMatrix = new Matrix3()
+  const worldNormal = new Vector3()
+</script>
+
+<script lang="ts">
+  import { T, useTask, useThrelte } from '@threlte/core'
+  import { pointerIntersection, pointerState } from '../../internal/state.svelte'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
 
@@ -10,27 +20,30 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
-  const ref = new Group()
-  const vec3 = new Vector3()
-  const normalMatrix = new Matrix3()
-  const worldNormal = new Vector3()
+  const { scene } = useThrelte()
+  const hovering = $derived(pointerState[handedness].hovering)
+  const intersection = $derived(pointerIntersection[handedness])
 
-  let hovering = $derived($pointerState[handedness].hovering)
-  let intersection = $derived(pointerIntersection[handedness])
+  const ref = new Group()
 
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) return
-      const { point, face, object } = intersection.current
+      if (intersection === undefined) {
+        return
+      }
+
+      const { point, face, object } = intersection
       ref.position.lerp(point, 0.4)
 
-      if (face) {
-        normalMatrix.getNormalMatrix(object.matrixWorld)
-        worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
-        ref.lookAt(vec3.addVectors(point, worldNormal))
+      if (face === null || face === undefined) {
+        return
       }
+
+      normalMatrix.getNormalMatrix(object.matrixWorld)
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize()
+      ref.lookAt(vec3.addVectors(point, worldNormal))
     },
     {
       autoStart: false
@@ -38,8 +51,8 @@
   )
 
   $effect.pre(() => {
-    if (hovering) {
-      ref.position.copy(intersection.current!.point)
+    if (hovering && intersection) {
+      ref.position.copy(intersection.point)
       start()
     } else {
       stop()
@@ -49,6 +62,7 @@
 
 <T
   is={ref}
+  attach={scene}
   visible={hovering}
 >
   {#if children}

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const PointerCursor: import("svelte").Component<{
-    handedness: "left" | "right";
+interface Props {
+    handedness: 'left' | 'right';
     children?: Snippet;
-}, {}, "">;
+}
+declare const PointerCursor: import("svelte").Component<Props, {}, "">;
+type PointerCursor = ReturnType<typeof PointerCursor>;
 export default PointerCursor;

package/dist/components/internal/ShortRay.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { T } from '@threlte/core'
-  import { pointerState, teleportState, teleportIntersection } from '../../internal/stores'
+  import { pointerState, teleportState, teleportIntersection } from '../../internal/state.svelte'
   import type { Snippet } from 'svelte'
 
   interface Props {
@@ -8,12 +8,12 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
-  let hovering = $derived($teleportState[handedness].hovering)
-  let intersection = $derived(teleportIntersection[handedness])
-  let visible = $derived(
-    $pointerState[handedness].enabled || (hovering && $intersection === undefined)
+  const hovering = $derived(teleportState[handedness].hovering)
+  const intersection = $derived(teleportIntersection[handedness])
+  const visible = $derived(
+    pointerState[handedness].enabled || (hovering && intersection === undefined)
   )
 
   const vertexShader = `

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const ShortRay: import("svelte").Component<{
-    handedness: "left" | "right";
+interface Props {
+    handedness: 'left' | 'right';
     children?: Snippet;
-}, {}, "">;
+}
+declare const ShortRay: import("svelte").Component<Props, {}, "">;
+type ShortRay = ReturnType<typeof ShortRay>;
 export default ShortRay;

package/dist/components/internal/TeleportCursor.svelte

@@ -1,8 +1,18 @@
-<script lang="ts">
-  import { spring } from 'svelte/motion'
+<script
+  module
+  lang="ts"
+>
   import { Group, Matrix3, Vector3 } from 'three'
-  import { T, useTask } from '@threlte/core'
-  import { teleportIntersection } from '../../internal/stores'
+
+  const vec3 = new Vector3()
+  const normalMatrix = new Matrix3()
+  const worldNormal = new Vector3()
+</script>
+
+<script lang="ts">
+  import { Spring } from 'svelte/motion'
+  import { T, useTask, useThrelte } from '@threlte/core'
+  import { teleportIntersection } from '../../internal/state.svelte'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
 
@@ -11,20 +21,20 @@
     children?: Snippet
   }
 
-  let { handedness, children }: Props = $props()
+  const { handedness, children }: Props = $props()
 
-  const ref = new Group()
-  const vec3 = new Vector3()
-  const normalMatrix = new Matrix3()
-  const worldNormal = new Vector3()
+  const { scene } = useThrelte()
+  const intersection = $derived(teleportIntersection[handedness])
 
-  let intersection = $derived(teleportIntersection[handedness])
+  const ref = new Group()
 
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) return
+      if (intersection === undefined) {
+        return
+      }
 
-      const { point, face, object } = intersection.current
+      const { point, face, object } = intersection
       ref.position.lerp(point, 0.4)
 
       if (face) {
@@ -38,15 +48,15 @@
     }
   )
 
-  const size = spring(0.1, { stiffness: 0.2 })
+  const size = new Spring(0.1, { stiffness: 0.2 })
 
   $effect.pre(() => {
-    if ($intersection === undefined) {
+    if (intersection === undefined) {
       size.set(0.1)
       stop()
     } else {
       size.set(1)
-      ref.position.copy($intersection.point)
+      ref.position.copy(intersection.point)
       start()
     }
   })
@@ -54,13 +64,14 @@
 
 <T
   is={ref}
-  visible={$intersection !== undefined}
+  attach={scene}
+  visible={intersection !== undefined}
 >
   {#if children}
     {@render children()}
   {:else}
     <Cursor
-      size={$size}
+      size={size.current}
       thickness={0.015}
     />
   {/if}

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

@@ -1,6 +1,8 @@
 import type { Snippet } from 'svelte';
-declare const TeleportCursor: import("svelte").Component<{
-    handedness: "left" | "right";
+interface Props {
+    handedness: 'left' | 'right';
     children?: Snippet;
-}, {}, "">;
+}
+declare const TeleportCursor: import("svelte").Component<Props, {}, "">;
+type TeleportCursor = ReturnType<typeof TeleportCursor>;
 export default TeleportCursor;

package/dist/components/internal/TeleportRay.svelte

@@ -1,11 +1,24 @@
-<script lang="ts">
+<script
+  module
+  lang="ts"
+>
   import { Vector3, QuadraticBezierCurve3, type XRTargetRaySpace, Vector2 } from 'three'
+
+  const rayStart = new Vector3()
+  const rayMidpoint = new Vector3()
+  const curve = new QuadraticBezierCurve3()
+  const vec3 = new Vector3()
+  const v2_1 = new Vector2()
+  const v2_2 = new Vector2()
+</script>
+
+<script lang="ts">
+  import type { Snippet } from 'svelte'
   import { Line2 } from 'three/examples/jsm/lines/Line2.js'
   import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
   import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
-  import { T, useTask } from '@threlte/core'
-  import { teleportIntersection } from '../../internal/stores'
-  import type { Snippet } from 'svelte'
+  import { T, useTask, useThrelte } from '@threlte/core'
+  import { teleportIntersection } from '../../internal/state.svelte'
 
   interface Props {
     handedness: 'left' | 'right'
@@ -13,26 +26,18 @@
     children?: Snippet
   }
 
-  let { handedness, targetRay, children }: Props = $props()
-
-  let lineGeometry = new LineGeometry()
+  const { handedness, targetRay, children }: Props = $props()
 
-  const rayStart = new Vector3()
-  const rayMidpoint = new Vector3()
-  const curve = new QuadraticBezierCurve3()
+  const { scene } = useThrelte()
   const rayDivisions = 40
   const positions = new Float32Array(rayDivisions * 3)
-  const vec3 = new Vector3()
-
-  const v2_1 = new Vector2()
-  const v2_2 = new Vector2()
-
-  let intersection = $derived(teleportIntersection[handedness])
+  const lineGeometry = new LineGeometry()
+  const intersection = $derived(teleportIntersection[handedness])
 
   const setCurvePoints = (alpha = 0.3) => {
-    if (intersection.current === undefined) return
+    if (intersection === undefined) return
 
-    const rayEnd = intersection.current.point
+    const rayEnd = intersection.point
     targetRay.getWorldPosition(rayStart)
 
     rayMidpoint.x = (rayStart.x + rayEnd.x) / 2
@@ -69,7 +74,7 @@
   )
 
   $effect.pre(() => {
-    if ($intersection === undefined) {
+    if (intersection === undefined) {
       stop()
     } else {
       setCurvePoints(1)
@@ -83,7 +88,8 @@
 {:else}
   <T
     is={Line2}
-    visible={$intersection !== undefined}
+    attach={scene}
+    visible={intersection !== undefined}
     position.z={-0.01}
   >
     <T is={lineGeometry} />

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

@@ -1,8 +1,10 @@
 import { type XRTargetRaySpace } from 'three';
 import type { Snippet } from 'svelte';
-declare const TeleportRay: import("svelte").Component<{
-    handedness: "left" | "right";
+interface Props {
+    handedness: 'left' | 'right';
     targetRay: XRTargetRaySpace;
     children?: Snippet;
-}, {}, "">;
+}
+declare const TeleportRay: import("svelte").Component<Props, {}, "">;
+type TeleportRay = ReturnType<typeof TeleportRay>;
 export default TeleportRay;

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

@@ -0,0 +1,5 @@
+import { type Readable } from 'svelte/store';
+export type CurrentReadable<T> = Readable<T> & {
+    current: T;
+};
+export declare const toCurrentReadable: <T>(getter: () => T) => CurrentReadable<T>;

package/dist/hooks/currentReadable.svelte.js

@@ -0,0 +1,11 @@
+import { toStore } from 'svelte/store';
+export const toCurrentReadable = (getter) => {
+    const store = toStore(getter);
+    store.current = getter();
+    $effect.pre(() => {
+        return store.subscribe((value) => {
+            store.current = value;
+        });
+    });
+    return store;
+};

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

@@ -0,0 +1,13 @@
+import type { XRController } from '../types';
+import { type CurrentReadable } from './currentReadable.svelte';
+declare class Controllers {
+    left: XRController | undefined;
+    right: XRController | undefined;
+    none: XRController | undefined;
+}
+export declare const controllers: Controllers;
+/**
+ * Provides a reference to a current XRController, filtered by handedness.
+ */
+export declare const useController: (handedness: XRHandedness) => CurrentReadable<XRController | undefined>;
+export {};

package/dist/hooks/useController.svelte.js

@@ -0,0 +1,22 @@
+import { toCurrentReadable } from './currentReadable.svelte';
+class Controllers {
+    left = $state.raw();
+    right = $state.raw();
+    none = $state.raw();
+}
+export const controllers = new Controllers();
+/**
+ * Provides a reference to a current XRController, filtered by handedness.
+ */
+export const useController = (handedness) => {
+    switch (handedness) {
+        case 'left':
+            return toCurrentReadable(() => controllers.left);
+        case 'right':
+            return toCurrentReadable(() => controllers.right);
+        case 'none':
+            return toCurrentReadable(() => controllers.none);
+        default:
+            throw new Error('useController handedness must be left, right, or none.');
+    }
+};

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

@@ -0,0 +1,12 @@
+import type { XRHand } from '../types';
+import { type CurrentReadable } from './currentReadable.svelte';
+declare class Hands {
+    left: XRHand | undefined;
+    right: XRHand | 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 {};

package/dist/hooks/{useHand.js → useHand.svelte.js}

@@ -1,15 +1,18 @@
-import { currentWritable } from '@threlte/core';
-export const left = currentWritable(undefined);
-export const right = currentWritable(undefined);
+import { toCurrentReadable } from './currentReadable.svelte';
+class Hands {
+    left = $state.raw();
+    right = $state.raw();
+}
+export const hands = new Hands();
 /**
  * Provides a reference to a current XRHand, filtered by handedness.
  */
 export const useHand = (handedness) => {
     switch (handedness) {
         case 'left':
-            return left;
+            return toCurrentReadable(() => hands.left);
         case 'right':
-            return right;
+            return toCurrentReadable(() => hands.right);
         default:
             throw new Error('useHand handedness must be left or right.');
     }

package/dist/hooks/{useHandJoint.d.ts → useHandJoint.svelte.d.ts}

@@ -3,4 +3,4 @@ import type { HandJoints } from '../lib/handJoints';
 /**
  * Provides a reference to a requested hand joint, once available.
  */
-export declare const useHandJoint: (handedness: "left" | "right", joint: HandJoints) => import("@threlte/core").CurrentWritable<XRJointSpace | undefined>;
+export declare const useHandJoint: (handedness: "left" | "right", joint: HandJoints) => import("./currentReadable.svelte").CurrentReadable<XRJointSpace | undefined>;