@threlte/xr 1.0.8 → 1.1.1

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;

package/dist/components/internal/PointerCursor.svelte

@@ -11,7 +11,7 @@
 
 <script lang="ts">
   import { T, useTask, useThrelte } from '@threlte/core'
-  import { pointerIntersection, pointerState } from '../../internal/stores'
+  import { pointerIntersection, pointerState } from '../../internal/state.svelte'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
 
@@ -23,17 +23,18 @@
   const { handedness, children }: Props = $props()
 
   const { scene } = useThrelte()
-  const ref = new Group()
-  const hovering = $derived($pointerState[handedness].hovering)
+  const hovering = $derived(pointerState[handedness].hovering)
   const intersection = $derived(pointerIntersection[handedness])
 
+  const ref = new Group()
+
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) {
+      if (intersection === undefined) {
         return
       }
 
-      const { point, face, object } = intersection.current
+      const { point, face, object } = intersection
       ref.position.lerp(point, 0.4)
 
       if (face === null || face === undefined) {
@@ -50,8 +51,8 @@
   )
 
   $effect.pre(() => {
-    if (hovering && intersection.current) {
-      ref.position.copy(intersection.current?.point)
+    if (hovering && intersection) {
+      ref.position.copy(intersection.point)
       start()
     } else {
       stop()

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 {
@@ -10,10 +10,10 @@
 
   const { handedness, children }: Props = $props()
 
-  const hovering = $derived($teleportState[handedness].hovering)
+  const hovering = $derived(teleportState[handedness].hovering)
   const intersection = $derived(teleportIntersection[handedness])
   const visible = $derived(
-    $pointerState[handedness].enabled || (hovering && $intersection === undefined)
+    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

@@ -12,7 +12,7 @@
 <script lang="ts">
   import { Spring } from 'svelte/motion'
   import { T, useTask, useThrelte } from '@threlte/core'
-  import { teleportIntersection } from '../../internal/stores'
+  import { teleportIntersection } from '../../internal/state.svelte'
   import Cursor from './Cursor.svelte'
   import type { Snippet } from 'svelte'
 
@@ -24,16 +24,17 @@
   const { handedness, children }: Props = $props()
 
   const { scene } = useThrelte()
-  const ref = new Group()
   const intersection = $derived(teleportIntersection[handedness])
 
+  const ref = new Group()
+
   const { start, stop } = useTask(
     () => {
-      if (intersection.current === undefined) {
+      if (intersection === undefined) {
         return
       }
 
-      const { point, face, object } = intersection.current
+      const { point, face, object } = intersection
       ref.position.lerp(point, 0.4)
 
       if (face) {
@@ -50,12 +51,12 @@
   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()
     }
   })
@@ -64,7 +65,7 @@
 <T
   is={ref}
   attach={scene}
-  visible={$intersection !== undefined}
+  visible={intersection !== undefined}
 >
   {#if children}
     {@render children()}

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

@@ -18,7 +18,7 @@
   import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'
   import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
   import { T, useTask, useThrelte } from '@threlte/core'
-  import { teleportIntersection } from '../../internal/stores'
+  import { teleportIntersection } from '../../internal/state.svelte'
 
   interface Props {
     handedness: 'left' | 'right'
@@ -35,9 +35,9 @@
   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
@@ -74,7 +74,7 @@
   )
 
   $effect.pre(() => {
-    if ($intersection === undefined) {
+    if (intersection === undefined) {
       stop()
     } else {
       setCurvePoints(1)
@@ -89,7 +89,7 @@
   <T
     is={Line2}
     attach={scene}
-    visible={$intersection !== undefined}
+    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 { XRHandObject } from '../types';
+import { type CurrentReadable } from './currentReadable.svelte';
+declare class Hands {
+    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 | XRHandObject>;
+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>;

package/dist/hooks/useHandJoint.svelte.js

@@ -0,0 +1,21 @@
+import { useTask, useThrelte } from '@threlte/core';
+import { hands } from './useHand.svelte';
+import { toCurrentReadable } from './currentReadable.svelte';
+/**
+ * Provides a reference to a requested hand joint, once available.
+ */
+export const useHandJoint = (handedness, joint) => {
+    const { invalidate } = useThrelte();
+    const xrhand = $derived(hands[handedness]);
+    let jointSpace = $state.raw();
+    const { stop } = useTask(() => {
+        const space = xrhand?.hand.joints[joint];
+        // The joint radius is a good indicator that the joint is ready
+        if (space?.jointRadius !== undefined) {
+            jointSpace = space;
+            invalidate();
+            stop();
+        }
+    }, { autoInvalidate: false });
+    return toCurrentReadable(() => jointSpace);
+};

package/dist/hooks/useHeadset.js

@@ -1,4 +1,4 @@
-import { headset } from '../internal/setupHeadset';
+import { headset } from '../internal/setupHeadset.svelte';
 export const useHeadset = () => {
     return headset;
 };

package/dist/hooks/useHitTest.svelte.js

@@ -0,0 +1,67 @@
+import { Matrix4 } from 'three';
+import { useThrelte, useTask } from '@threlte/core';
+import { controllers } from './useController.svelte';
+import { isPresenting, session } from '../internal/state.svelte';
+/**
+ * Use this hook to perform a hit test per frame in an AR environment.
+ *
+ * ```ts
+ * useHitTest((hitMatrix, hit) => {
+ *   mesh.matrix.copy(hitMatrix)
+ * }, {
+ *   source: 'viewer' | 'leftInput' | 'rightInput' // Default 'viewer'
+ * })
+ * ```
+ */
+export const useHitTest = (hitTestCallback, options = {}) => {
+    const source = options.source ?? 'viewer';
+    const { xr } = useThrelte().renderer;
+    const hitMatrix = new Matrix4();
+    let hitTestSource = $state.raw();
+    const getHitTestSource = async (space) => {
+        if (space === undefined) {
+            return;
+        }
+        hitTestSource = await session.current?.requestHitTestSource?.({ space });
+    };
+    if (source === 'viewer') {
+        $effect.pre(() => {
+            session.current?.requestReferenceSpace('viewer').then((space) => {
+                getHitTestSource(space);
+            });
+        });
+    }
+    else {
+        const controller = $derived(controllers[source === 'leftInput' ? 'left' : 'right']);
+        $effect.pre(() => {
+            getHitTestSource(controller?.inputSource.targetRaySpace);
+        });
+    }
+    const { start, stop } = useTask(() => {
+        const referenceSpace = xr.getReferenceSpace();
+        if (referenceSpace === null || hitTestSource === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
+        const [hit] = xr.getFrame().getHitTestResults(hitTestSource);
+        const pose = hit?.getPose(referenceSpace);
+        if (pose === undefined) {
+            return hitTestCallback(hitMatrix, undefined);
+        }
+        hitMatrix.fromArray(pose.transform.matrix);
+        hitTestCallback(hitMatrix, hit);
+    }, { autoStart: false });
+    $effect.pre(() => {
+        if (!isPresenting.current) {
+            stop();
+            return;
+        }
+        if (hitTestSource === undefined) {
+            stop();
+            // Execute callback one last time to inform consumers of no hits.
+            hitTestCallback(hitMatrix, undefined);
+        }
+        else {
+            start();
+        }
+    });
+};

package/dist/hooks/useTeleport.js

@@ -19,12 +19,11 @@ const offset = { x: 0, y: 0, z: 0 };
  */
 export const useTeleport = () => {
     const { xr } = useThrelte().renderer;
-    let space = xr.getReferenceSpace();
     /**
      * Teleports a player from the world origin to a position and optional orientation.
      */
     return (position, orientation = quaternion) => {
-        space ??= xr.getReferenceSpace();
+        const space = xr.getReferenceSpace();
         if (space === null)
             return;
         if (Array.isArray(position)) {

package/dist/hooks/useXR.d.ts

@@ -1,12 +1,11 @@
-import type { CurrentWritable } from '@threlte/core';
+import type { WebXRManager } from 'three';
+import { type CurrentReadable } from './currentReadable.svelte';
 /**
  * Provides access to context related to `<XR />`.
  */
 export declare const useXR: () => {
-    isPresenting: CurrentWritable<boolean>;
-    isHandTracking: CurrentWritable<boolean>;
-    session: CurrentWritable<XRSession | undefined>;
-    xrFrame: {
-        current: XRFrame;
-    };
+    isPresenting: CurrentReadable<boolean>;
+    isHandTracking: CurrentReadable<boolean>;
+    session: CurrentReadable<XRSession | undefined>;
+    xr: CurrentReadable<WebXRManager | undefined>;
 };

package/dist/hooks/useXR.js

@@ -1,15 +1,13 @@
-import { isPresenting, isHandTracking, session, xr } from '../internal/stores';
-const stores = {
-    isPresenting,
-    isHandTracking,
-    session,
-    xrFrame: {
-        get current() {
-            return xr.current.getFrame();
-        }
-    }
-};
+import { isPresenting, isHandTracking, session, xr } from '../internal/state.svelte';
+import { toCurrentReadable } from './currentReadable.svelte';
 /**
  * Provides access to context related to `<XR />`.
  */
-export const useXR = () => stores;
+export const useXR = () => {
+    return {
+        isPresenting: toCurrentReadable(() => isPresenting.current),
+        isHandTracking: toCurrentReadable(() => isHandTracking.current),
+        session: toCurrentReadable(() => session.current),
+        xr: toCurrentReadable(() => xr.current)
+    };
+};

package/dist/index.d.ts

@@ -10,11 +10,11 @@ export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
 export { pointerControls } from './plugins/pointerControls';
 export { teleportControls } from './plugins/teleportControls';
-export { useController } from './hooks/useController';
-export { useHand } from './hooks/useHand';
-export { useHandJoint } from './hooks/useHandJoint';
+export { useController } from './hooks/useController.svelte';
+export { useHand } from './hooks/useHand.svelte';
+export { useHandJoint } from './hooks/useHandJoint.svelte';
 export { useHeadset } from './hooks/useHeadset';
-export { useHitTest } from './hooks/useHitTest';
+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/index.js

@@ -14,10 +14,10 @@ export { handJoints } from './lib/handJoints';
 export { pointerControls } from './plugins/pointerControls';
 export { teleportControls } from './plugins/teleportControls';
 // Hooks
-export { useController } from './hooks/useController';
-export { useHand } from './hooks/useHand';
-export { useHandJoint } from './hooks/useHandJoint';
+export { useController } from './hooks/useController.svelte';
+export { useHand } from './hooks/useHand.svelte';
+export { useHandJoint } from './hooks/useHandJoint.svelte';
 export { useHeadset } from './hooks/useHeadset';
-export { useHitTest } from './hooks/useHitTest';
+export { useHitTest } from './hooks/useHitTest.svelte';
 export { useTeleport } from './hooks/useTeleport';
 export { useXR } from './hooks/useXR';

package/dist/internal/raf.d.ts

@@ -0,0 +1 @@
+export { raf } from 'svelte/internal/client';

package/dist/internal/raf.js

@@ -0,0 +1,2 @@
+// eslint-disable-next-line svelte/no-svelte-internal
+export { raf } from 'svelte/internal/client';