@threlte/xr 1.0.0-next.9 → 1.0.0

package/README.md

@@ -33,14 +33,7 @@ Check out our **[documentation](https://threlte.xyz)** and our **[Discord commun
 
 ### Installation
 
-For a quick interactive setup of a fresh Threlte project, run:
-
-```sh
-npm create threlte my-project
-```
-and select the `@threlte/xr` option.
-
-Alternatively you can check out the full [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
+Check out the [installation instructions](https://threlte.xyz/docs/learn/getting-started/installation).
 
 ### Support
 

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,38 +1,3 @@
-/// <reference types="webxr" />
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
-        mode: XRSessionMode;
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | undefined;
-        force?: "enter" | "exit" | undefined;
-        styled?: boolean | undefined;
-        children?: import("svelte").Snippet<[{
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-        }]> | undefined;
-        onclick?: ((event: {
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-            nativeEvent: MouseEvent;
-        }) => void) | undefined;
-        onerror?: ((error: Error) => void) | undefined;
-    }, "mode" | "sessionInit"> & {
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ArButtonProps = typeof __propDef.props;
-export type ArButtonEvents = typeof __propDef.events;
-export type ArButtonSlots = typeof __propDef.slots;
 /**
  * `<ARButton />` is an HTML `<button />` that can be used to init and display info about your immersive AR session.
  *
@@ -43,6 +8,11 @@ export type ArButtonSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class ArButton extends SvelteComponent<ArButtonProps, ArButtonEvents, ArButtonSlots> {
-}
-export {};
+declare const ArButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit"> & {
+    sessionInit?: XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | 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

@@ -1,40 +1,28 @@
-import { SvelteComponent } from "svelte";
 import type { XRControllerEvents } from '../types';
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        children?: Snippet<[]> | undefined;
-        grip?: Snippet<[]> | undefined;
-        targetRay?: Snippet<[]> | undefined;
-        pointerRay?: Snippet<[]> | undefined;
-        pointerCursor?: Snippet<[]> | undefined;
-        teleportRay?: Snippet<[]> | undefined;
-        teleportCursor?: Snippet<[]> | undefined;
-    } & 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;
-    });
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ControllerProps = typeof __propDef.props;
-export type ControllerEvents = typeof __propDef.events;
-export type ControllerSlots = typeof __propDef.slots;
 /** `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model. */
-export default class Controller extends SvelteComponent<ControllerProps, ControllerEvents, ControllerSlots> {
-}
-export {};
+declare const Controller: import("svelte").Component<{
+    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;
+})), {}, "">;
+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,35 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { XRHandEvents } from '../types';
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        children?: Snippet<[]> | undefined;
-        targetRay?: Snippet<[]> | undefined;
-        wrist?: Snippet<[]> | undefined;
-    } & 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;
-    });
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HandProps = typeof __propDef.props;
-export type HandEvents = typeof __propDef.events;
-export type HandSlots = typeof __propDef.slots;
-export default class Hand extends SvelteComponent<HandProps, HandEvents, HandSlots> {
-}
-export {};
+declare const Hand: import("svelte").Component<{
+    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;
+})), {}, "">;
+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,18 +1,20 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        children?: import("svelte").Snippet<[]> | undefined;
+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;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeadsetProps = typeof __propDef.props;
-export type HeadsetEvents = typeof __propDef.events;
-export type HeadsetSlots = typeof __propDef.slots;
-export default class Headset extends SvelteComponent<HeadsetProps, HeadsetEvents, HeadsetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Headset: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Headset = InstanceType<typeof Headset>;
+export default Headset;

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,32 +1,3 @@
-/// <reference types="webxr" />
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
-        mode: XRSessionMode;
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | undefined;
-        force?: "enter" | "exit" | undefined;
-        styled?: boolean | undefined;
-        children?: import("svelte").Snippet<[{
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-        }]> | undefined;
-        onclick?: ((event: {
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-            nativeEvent: MouseEvent;
-        }) => void) | undefined;
-        onerror?: ((error: Error) => void) | undefined;
-    }, "mode" | "sessionInit">;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type VrButtonProps = typeof __propDef.props;
-export type VrButtonEvents = typeof __propDef.events;
-export type VrButtonSlots = typeof __propDef.slots;
 /**
  * `<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
  *
@@ -37,6 +8,5 @@ export type VrButtonSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class VrButton extends SvelteComponent<VrButtonProps, VrButtonEvents, VrButtonSlots> {
-}
-export {};
+declare const VrButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit">, {}, "">;
+export default VrButton;