@threlte/xr 1.0.0-next.12 → 1.0.0-next.14

package/dist/components/ARButton.svelte

@@ -9,9 +9,16 @@
   />
 ```
 -->
-<script lang="ts">import XRButton from "./XRButton.svelte";
-import { defaultFeatures } from "../internal/defaultFeatures";
-let { children, ...props } = $props();
+<script lang="ts">
+  import type { ComponentProps } from 'svelte'
+  import XRButton from './XRButton.svelte'
+  import { defaultFeatures } from '../internal/defaultFeatures'
+
+  type Props = Omit<ComponentProps<XRButton>, 'mode' | 'sessionInit'> & {
+    sessionInit?: XRSessionInit & { domOverlay?: { root: HTMLElement } | undefined }
+  }
+
+  let { children, ...props }: Props = $props()
 </script>
 
 <XRButton

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

@@ -1,5 +1,3 @@
-/// <reference types="webxr" />
-/// <reference types="svelte" />
 /**
  * `<ARButton />` is an HTML `<button />` that can be used to init and display info about your immersive AR session.
  *
@@ -11,10 +9,10 @@
  * ```
  */
 declare const ArButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit"> & {
-    sessionInit?: (XRSessionInit & {
+    sessionInit?: XRSessionInit & {
         domOverlay?: {
             root: HTMLElement;
         } | undefined;
-    }) | undefined;
+    };
 }, {}, "">;
 export default ArButton;

package/dist/components/Controller.svelte

@@ -4,45 +4,61 @@
 <script
   lang="ts"
   context="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";
-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";
-const stores = {
-  left: leftStore,
-  right: rightStore
-};
+>
+  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'
+  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">let {
-  left,
-  right,
-  hand,
-  onconnected,
-  ondisconnected,
-  onselect,
-  onselectend,
-  onselectstart,
-  onsqueeze,
-  onsqueezeend,
-  onsqueezestart,
-  children,
-  grip: gripSnippet,
-  targetRay: targetRaySnippet,
-  pointerRay: pointerRaySnippet,
-  pointerCursor: pointerCursorSnippet,
-  teleportRay: teleportRaySnippet,
-  teleportCursor: teleportCursorSnippet
-} = $props();
-const handedness = writable(left ? "left" : right ? "right" : hand);
-$effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-$effect.pre(
-  () => controllerEvents[$handedness].set({
+<script lang="ts">
+  type Props = {
+    children?: Snippet
+    grip?: Snippet
+    targetRay?: Snippet
+    pointerRay?: Snippet
+    pointerCursor?: Snippet
+    teleportRay?: Snippet
+    teleportCursor?: Snippet
+  } & XRControllerEvents &
+    (
+      | {
+          /** Whether the controller should be matched with the left hand. */
+          left: true
+          right?: undefined
+          hand?: undefined
+        }
+      | {
+          /** Whether the controller should be matched with the right hand. */
+          right: true
+          left?: undefined
+          hand?: undefined
+        }
+      | {
+          /** Whether the controller should be matched with the left or right hand. */
+          hand: 'left' | 'right'
+          left?: undefined
+          right?: undefined
+        }
+    )
+
+  let {
+    left,
+    right,
+    hand,
+
     onconnected,
     ondisconnected,
     onselect,
@@ -50,15 +66,39 @@ $effect.pre(
     onselectstart,
     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);
+    onsqueezestart,
+
+    children,
+    grip: gripSnippet,
+    targetRay: targetRaySnippet,
+    pointerRay: pointerRaySnippet,
+    pointerCursor: pointerCursorSnippet,
+    teleportRay: teleportRaySnippet,
+    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')))
+
+  $effect.pre(() =>
+    controllerEvents[$handedness].set({
+      onconnected,
+      ondisconnected,
+      onselect,
+      onselectend,
+      onselectstart,
+      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)
 </script>
 
 {#if !$isHandTracking}

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

@@ -2,14 +2,14 @@ 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<{
-    children?: Snippet<[]> | undefined;
-    grip?: Snippet<[]> | undefined;
-    targetRay?: Snippet<[]> | undefined;
-    pointerRay?: Snippet<[]> | undefined;
-    pointerCursor?: Snippet<[]> | undefined;
-    teleportRay?: Snippet<[]> | undefined;
-    teleportCursor?: Snippet<[]> | undefined;
-} & XRControllerEvents & ({
+    children?: Snippet;
+    grip?: Snippet;
+    targetRay?: Snippet;
+    pointerRay?: Snippet;
+    pointerCursor?: Snippet;
+    teleportRay?: Snippet;
+    teleportCursor?: Snippet;
+} & (XRControllerEvents & ({
     /** Whether the controller should be matched with the left hand. */
     left: true;
     right?: undefined;
@@ -21,8 +21,8 @@ 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;
-}), {}, "">;
+})), {}, "">;
 export default Controller;

package/dist/components/Hand.svelte

@@ -1,72 +1,121 @@
 <script
   lang="ts"
   context="module"
->import { Group } from "three";
-import { T, useThrelte, useTask } from "@threlte/core";
-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";
-const stores = {
-  left: leftStore,
-  right: rightStore
-};
+>
+  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 type { Snippet } from 'svelte'
+
+  const stores = {
+    left: leftStore,
+    right: rightStore
+  } as const
 </script>
 
-<script lang="ts">let {
-  left,
-  right,
-  hand,
-  onconnected,
-  ondisconnected,
-  onpinchend,
-  onpinchstart,
-  children,
-  targetRay,
-  wrist
-} = $props();
-const { renderer, scheduler, renderStage } = useThrelte();
-const { xr } = renderer;
-const space = xr.getReferenceSpace();
-const handedness = writable(left ? "left" : right ? "right" : hand);
-$effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-$effect.pre(
-  () => handEvents[$handedness].set({
+<script lang="ts">
+  type Props = {
+    children?: Snippet
+    targetRay?: Snippet
+    wrist?: Snippet
+  } & XRHandEvents &
+    (
+      | {
+          /** Whether the XRHand should be matched with the left hand. */
+          left: true
+          right?: undefined
+          hand?: undefined
+        }
+      | {
+          /** Whether the XRHand should be matched with the right hand. */
+          right: true
+          left?: undefined
+          hand?: undefined
+        }
+      | {
+          /** Whether the XRHand should be matched with the left or right hand. */
+          hand: 'left' | 'right'
+          left?: undefined
+          right?: undefined
+        }
+    )
+
+  let {
+    left,
+    right,
+    hand,
     onconnected,
     ondisconnected,
     onpinchend,
-    onpinchstart
+    onpinchstart,
+    children,
+    targetRay,
+    wrist
+  }: Props = $props()
+
+  const { renderer, scheduler, renderStage } = useThrelte()
+  const { xr } = renderer
+  const space = xr.getReferenceSpace()
+
+  const handedness = writable<'left' | 'right'>(left ? 'left' : right ? 'right' : hand)
+  $effect.pre(() => handedness.set(left ? 'left' : right ? 'right' : (hand as 'left' | 'right')))
+
+  $effect.pre(() =>
+    handEvents[$handedness].set({
+      onconnected,
+      ondisconnected,
+      onpinchend,
+      onpinchstart
+    })
+  )
+
+  let group = new Group()
+
+  /**
+   * Currently children of a hand XRSpace or model will not
+   * move relative to their parent, so this hack of checking wrist position
+   * and syncing any snippets is used.
+   *
+   * @todo(mp) investigate why this is happening and see if there's
+   * a way to just parent to the hand to avoid this.
+   */
+  const { start, stop } = useTask(
+    () => {
+      const frame = xr.getFrame()
+      const joint = inputSource?.get('wrist' as unknown as number)
+
+      if (joint === undefined || space === null) return
+
+      const pose = frame.getJointPose?.(joint, space)
+
+      // This isn't correctly typed by @types/xr. Pose can also be null.
+      if (pose === undefined || pose === null) return
+
+      const { position, orientation } = pose.transform
+      group.position.set(position.x, position.y, position.z)
+      group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w)
+    },
+    {
+      autoStart: false,
+      stage: scheduler.createStage(Symbol('xr-hand-stage'), { before: renderStage })
+    }
+  )
+
+  $effect.pre(() => {
+    if ($isHandTracking && (wrist !== undefined || children !== undefined) && inputSource) {
+      start()
+    } else {
+      stop()
+    }
   })
-);
-let group = new Group();
-const { start, stop } = useTask(
-  () => {
-    const frame = xr.getFrame();
-    const joint = inputSource?.get("wrist");
-    if (joint === void 0 || space === null)
-      return;
-    const pose = frame.getJointPose?.(joint, space);
-    if (pose === void 0 || pose === null)
-      return;
-    const { position, orientation } = pose.transform;
-    group.position.set(position.x, position.y, position.z);
-    group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
-  },
-  {
-    autoStart: false,
-    stage: scheduler.createStage(Symbol("xr-hand-stage"), { before: renderStage })
-  }
-);
-$effect.pre(() => {
-  if ($isHandTracking && (wrist !== void 0 || children !== void 0) && inputSource) {
-    start();
-  } else {
-    stop();
-  }
-});
-let store = $derived(stores[$handedness]);
-let inputSource = $derived($store?.inputSource);
-let model = $derived($store?.model);
+
+  let store = $derived(stores[$handedness])
+  let inputSource = $derived($store?.inputSource)
+  let model = $derived($store?.model)
 </script>
 
 {#if $store?.hand && $isHandTracking}

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<{
-    children?: Snippet<[]> | undefined;
-    targetRay?: Snippet<[]> | undefined;
-    wrist?: Snippet<[]> | undefined;
-} & XRHandEvents & ({
+    children?: Snippet;
+    targetRay?: Snippet;
+    wrist?: Snippet;
+} & (XRHandEvents & ({
     /** Whether the XRHand should be matched with the left hand. */
     left: true;
     right?: undefined;
@@ -16,8 +16,8 @@ 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;
-}), {}, "">;
+})), {}, "">;
 export default Hand;

package/dist/components/Headset.svelte

@@ -1,7 +1,9 @@
-<script lang="ts">import { T } from "@threlte/core";
-import { useHeadset } from "../hooks/useHeadset";
-import ScenePortal from "./internal/ScenePortal.svelte";
-const headset = useHeadset();
+<script lang="ts">
+  import { T } from '@threlte/core'
+  import { useHeadset } from '../hooks/useHeadset'
+  import ScenePortal from './internal/ScenePortal.svelte'
+
+  const headset = useHeadset()
 </script>
 
 <ScenePortal>

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

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 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;

package/dist/components/VRButton.svelte

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

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

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 /**
  * `<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
  *