@threlte/xr 1.0.0-next.3 → 1.0.0-next.5

package/dist/components/ARButton.svelte

@@ -10,15 +10,17 @@
 ```
 -->
 <script lang="ts">import XRButton from "./XRButton.svelte";
-let { ...props } = $props();
+import { defaultFeatures } from "../internal/defaultFeatures";
+let { children, ...props } = $props();
 </script>
 
 <XRButton
   sessionInit={{
     domOverlay: typeof document !== 'undefined' ? { root: document.body } : undefined,
-    requiredFeatures: ['plane-detection'],
-    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers', 'hit-test']
+    ...defaultFeatures
   }}
   {...props}
   mode="immersive-ar"
-/>
+>
+  {@render children?.()}
+</XRButton>

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

@@ -10,11 +10,9 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
-        children?: ((this: void, args_0: {
+        children?: import("svelte").Snippet<[{
             state: "blocked" | "unsupported" | "insecure" | "supported";
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        }]> | undefined;
         onclick?: ((event: {
             state: "blocked" | "unsupported" | "insecure" | "supported";
             nativeEvent: MouseEvent;

package/dist/components/Controller.svelte

@@ -30,7 +30,14 @@ const stores = {
   onselectstart,
   onsqueeze,
   onsqueezeend,
-  onsqueezestart
+  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));
@@ -57,26 +64,25 @@ let hasTeleportControls = $derived($teleportState[$handedness].enabled);
 {#if !$isHandTracking}
   {#if grip}
     <T is={grip}>
-      <slot>
+      {#if children}
+        {@render children?.()}
+      {:else}
         <T is={model} />
-      </slot>
+      {/if}
 
-      <slot name="grip" />
+      {@render gripSnippet?.()}
     </T>
   {/if}
 
   {#if targetRay}
     <T is={targetRay}>
-      <slot name="target-ray" />
+      {@render targetRaySnippet?.()}
 
       {#if hasPointerControls || hasTeleportControls}
-        {#if $$slots['pointer-ray']}
-          <ShortRay handedness={$handedness}>
-            <slot name="pointer-ray" />
-          </ShortRay>
-        {:else}
-          <ShortRay handedness={$handedness} />
-        {/if}
+        <ShortRay
+          handedness={$handedness}
+          children={pointerRaySnippet}
+        />
       {/if}
     </T>
   {/if}
@@ -84,36 +90,22 @@ let hasTeleportControls = $derived($teleportState[$handedness].enabled);
 
 <ScenePortal>
   {#if hasPointerControls}
-    {#if $$slots['pointer-cursor']}
-      <PointerCursor handedness={$handedness}>
-        <slot name="pointer-cursor" />
-      </PointerCursor>
-    {:else}
-      <PointerCursor handedness={$handedness} />
-    {/if}
+    <PointerCursor
+      handedness={$handedness}
+      children={pointerCursorSnippet}
+    />
   {/if}
 
   {#if hasTeleportControls && targetRay !== undefined}
-    {#if $$slots['teleport-ray']}
-      <TeleportRay
-        {targetRay}
-        handedness={$handedness}
-      >
-        <slot name="teleport-ray" />
-      </TeleportRay>
-    {:else}
-      <TeleportRay
-        {targetRay}
-        handedness={$handedness}
-      />
-    {/if}
+    <TeleportRay
+      {targetRay}
+      handedness={$handedness}
+      children={teleportRaySnippet}
+    />
 
-    {#if $$slots['teleport-ray']}
-      <TeleportCursor handedness={$handedness}>
-        <slot name="teleport-cursor" />
-      </TeleportCursor>
-    {:else}
-      <TeleportCursor handedness={$handedness} />
-    {/if}
+    <TeleportCursor
+      handedness={$handedness}
+      children={teleportCursorSnippet}
+    />
   {/if}
 </ScenePortal>

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

@@ -1,7 +1,16 @@
 import { SvelteComponent } from "svelte";
 import type { XRControllerEvents } from '../types';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
-    props: (XRControllerEvents & ({
+    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;
@@ -16,23 +25,11 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
-    })) & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    };
+    });
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-        grip: {};
-        'target-ray': {};
-        'pointer-ray': {};
-        'pointer-cursor': {};
-        'teleport-ray': {};
-        'teleport-cursor': {};
-    };
+    slots: {};
 };
 export type ControllerProps = typeof __propDef.props;
 export type ControllerEvents = typeof __propDef.events;

package/dist/components/Hand.svelte

@@ -13,8 +13,20 @@ const stores = {
 };
 </script>
 
-<script lang="ts">let { left, right, hand, onconnected, ondisconnected, onpinchend, onpinchstart } = $props();
-const { xr } = useThrelte().renderer;
+<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));
@@ -26,24 +38,27 @@ $effect.pre(
     onpinchstart
   })
 );
-let children = new Group();
+let group = new Group();
 const { start, stop } = useTask(
   () => {
     const frame = xr.getFrame();
-    const joint = inputSource.get("wrist");
+    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;
-    children.position.set(position.x, position.y, position.z);
-    children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+    group.position.set(position.x, position.y, position.z);
+    group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
   },
-  { autoStart: false }
+  {
+    autoStart: false,
+    stage: scheduler.createStage(Symbol("xr-hand-stage"), { before: renderStage })
+  }
 );
 $effect.pre(() => {
-  if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
+  if ($isHandTracking && (wrist !== void 0 || children !== void 0) && inputSource) {
     start();
   } else {
     stop();
@@ -56,23 +71,23 @@ let model = $derived($store?.model);
 
 {#if $store?.hand && $isHandTracking}
   <T is={$store.hand}>
-    {#if $$slots.default === undefined}
+    {#if children === undefined}
       <T is={model} />
     {/if}
   </T>
 
-  {#if $$slots['target-ray'] !== undefined}
+  {#if targetRay !== undefined}
     <T is={$store.targetRay}>
-      <slot name="target-ray" />
+      {@render targetRay()}
     </T>
   {/if}
 {/if}
 
 {#if $isHandTracking}
   <ScenePortal>
-    <T is={children}>
-      <slot name="wrist" />
-      <slot />
+    <T is={group}>
+      {@render wrist?.()}
+      {@render children?.()}
     </T>
   </ScenePortal>
 {/if}

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

@@ -1,7 +1,12 @@
 import { SvelteComponent } from "svelte";
 import type { XRHandEvents } from '../types';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
-    props: (XRHandEvents & ({
+    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;
@@ -16,19 +21,11 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
-    })) & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-    };
+    });
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        'target-ray': {};
-        wrist: {};
-        default: {};
-    };
+    slots: {};
 };
 export type HandProps = typeof __propDef.props;
 export type HandEvents = typeof __propDef.events;

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

@@ -1,9 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/VRButton.svelte

@@ -10,12 +10,13 @@
 ```
 -->
 <script lang="ts">import XRButton from "./XRButton.svelte";
+import { defaultFeatures } from "../internal/defaultFeatures";
 let { ...props } = $props();
 </script>
 
 <XRButton
   sessionInit={{
-    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+    ...defaultFeatures
   }}
   {...props}
   mode="immersive-vr"

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

@@ -10,11 +10,9 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
-        children?: ((this: void, args_0: {
+        children?: import("svelte").Snippet<[{
             state: "blocked" | "unsupported" | "insecure" | "supported";
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        }]> | undefined;
         onclick?: ((event: {
             state: "blocked" | "unsupported" | "insecure" | "supported";
             nativeEvent: MouseEvent;

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

@@ -1,5 +1,6 @@
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
 import type { XRSessionEvent } from '../types';
 declare const __propDef: {
     props: {
@@ -22,12 +23,8 @@ declare const __propDef: {
         frameRate?: number | undefined;
         /** Type of WebXR reference space to use. Default is `local-floor` */
         referenceSpace?: XRReferenceSpaceType | undefined;
-        fallback?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        fallback?: Snippet<[]> | undefined;
+        children?: Snippet<[]> | undefined;
         /** Called as an XRSession is requested */
         onsessionstart?: ((event: XRSessionEvent<'sessionstart'>) => void) | undefined;
         /** Called after an XRSession is terminated */

package/dist/components/XRButton.svelte

@@ -20,7 +20,16 @@ display info about your WebXR session. This is aliased by `ARButton` and
 <script lang="ts">import { getXRSupportState } from "../lib/getXRSupportState";
 import { toggleXRSession } from "../lib/toggleXRSession";
 import { session, xr } from "../internal/stores";
-let { mode, sessionInit, force, styled = true, onclick, onerror, children, ...props } = $props();
+let {
+  mode,
+  sessionInit,
+  force,
+  styled = true,
+  onclick,
+  onerror,
+  children,
+  ...props
+} = $props();
 const handleButtonClick = async (nativeEvent, state) => {
   if (!$xr) {
     throw new Error(

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

@@ -1,6 +1,7 @@
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: HTMLButtonAttributes & {
         /** The type of `XRSession` to create */
@@ -18,11 +19,9 @@ declare const __propDef: {
         force?: "enter" | "exit" | undefined;
         /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
         styled?: boolean | undefined;
-        children?: ((this: void, args_0: {
+        children?: Snippet<[{
             state: "blocked" | "unsupported" | "insecure" | "supported";
-        }) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        }]> | undefined;
         onclick?: ((event: {
             state: "blocked" | "unsupported" | "insecure" | "supported";
             nativeEvent: MouseEvent;

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

@@ -2,9 +2,9 @@ import { SvelteComponent } from "svelte";
 import { type ColorRepresentation } from 'three';
 declare const __propDef: {
     props: {
-        color: ColorRepresentation;
-        size: number;
-        thickness: number;
+        color?: ColorRepresentation | undefined;
+        size?: number | undefined;
+        thickness?: number | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/internal/PointerCursor.svelte

@@ -2,7 +2,7 @@
 import { T, useTask } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-let { handedness } = $props();
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
@@ -39,7 +39,9 @@ $effect.pre(() => {
   is={ref}
   visible={hovering}
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <Cursor />
-  </slot>
+  {/if}
 </T>

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

@@ -1,18 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type PointerCursorProps = typeof __propDef.props;
 export type PointerCursorEvents = typeof __propDef.events;

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

@@ -1,9 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: import("svelte").Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/internal/ShortRay.svelte

@@ -1,15 +1,33 @@
 <script lang="ts">import { T } from "@threlte/core";
 import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
-let { handedness } = $props();
+let { handedness, children } = $props();
 let hovering = $derived($teleportState[handedness].hovering);
 let intersection = $derived(teleportIntersection[handedness]);
 let visible = $derived(
   $pointerState[handedness].enabled || hovering && $intersection === void 0
 );
+const vertexShader = `
+    uniform mat4 modelViewMatrix;
+    uniform mat4 projectionMatrix;
+    attribute vec2 uv;
+    attribute vec3 position;
+    varying vec2 vUv;
+    void main() {
+      vUv = uv;
+      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+    }`;
+const fragmentShader = `
+    precision mediump float;
+    varying vec2 vUv;
+    void main() {
+      gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
+    }`;
 </script>
 
 <T.Group {visible}>
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <T.Mesh
       rotation.x={-Math.PI / 2}
       position.z={-0.1}
@@ -17,25 +35,9 @@ let visible = $derived(
       <T.CylinderGeometry args={[0.002, 0.002, 0.2, 16, 1, false]} />
       <T.RawShaderMaterial
         transparent
-        vertexShader={`
-          uniform mat4 modelViewMatrix;
-          uniform mat4 projectionMatrix;
-          attribute vec2 uv;
-          attribute vec3 position;
-          varying vec2 vUv;
-          void main() {
-            vUv = uv;
-            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }
-        `}
-        fragmentShader={`
-          precision mediump float;
-          varying vec2 vUv;
-          void main() {
-            gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
-          }
-        `}
+        {vertexShader}
+        {fragmentShader}
       />
     </T.Mesh>
-  </slot>
+  {/if}
 </T.Group>

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

@@ -1,18 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type ShortRayProps = typeof __propDef.props;
 export type ShortRayEvents = typeof __propDef.events;

package/dist/components/internal/TeleportCursor.svelte

@@ -3,7 +3,7 @@ import { Group, Matrix3, Vector3 } from "three";
 import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-let { handedness } = $props();
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
@@ -42,10 +42,12 @@ $effect.pre(() => {
   is={ref}
   visible={$intersection !== undefined}
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <Cursor
       size={$size}
       thickness={0.015}
     />
-  </slot>
+  {/if}
 </T>

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

@@ -1,18 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
-    } & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TeleportCursorProps = typeof __propDef.props;
 export type TeleportCursorEvents = typeof __propDef.events;

package/dist/components/internal/TeleportRay.svelte

@@ -4,7 +4,7 @@ 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";
-let { handedness, targetRay } = $props();
+let { handedness, targetRay, children } = $props();
 let lineGeometry = new LineGeometry();
 const rayStart = new Vector3();
 const rayMidpoint = new Vector3();
@@ -55,7 +55,9 @@ $effect.pre(() => {
 });
 </script>
 
-<slot>
+{#if children}
+  {@render children()}
+{:else}
   <T
     is={Line2}
     visible={$intersection !== undefined}
@@ -67,4 +69,4 @@ $effect.pre(() => {
       linewidth={0.004}
     />
   </T>
-</slot>
+{/if}

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

@@ -1,20 +1,16 @@
 import { SvelteComponent } from "svelte";
 import { type XRTargetRaySpace } from 'three';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
         targetRay: XRTargetRaySpace;
-    } & {
-        children?: ((this: void) => typeof import("svelte").SnippetReturn & {
-            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
-        }) | undefined;
+        children?: Snippet<[]> | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {
-        default: {};
-    };
+    slots: {};
 };
 export type TeleportRayProps = typeof __propDef.props;
 export type TeleportRayEvents = typeof __propDef.events;

package/dist/internal/defaultFeatures.d.ts

@@ -0,0 +1,4 @@
+export declare const defaultFeatures: {
+    requiredFeatures: never[];
+    optionalFeatures: string[];
+};

package/dist/internal/defaultFeatures.js

@@ -0,0 +1,14 @@
+export const defaultFeatures = {
+    requiredFeatures: [],
+    optionalFeatures: [
+        'local-floor',
+        'bounded-floor',
+        'anchors',
+        'hand-tracking',
+        'plane-detection',
+        'layers',
+        'depth-sorted-layers',
+        'hit-test',
+        'mesh-detection'
+    ]
+};

package/dist/internal/setupControllers.js

@@ -23,7 +23,7 @@ export const setupControllers = () => {
             if (hasHands())
                 return;
             const { data } = event;
-            controllerEvents[data.handedness]?.[event.type]?.(event);
+            controllerEvents[data.handedness]?.current?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const { model, targetRay, grip } = indexMap.get(this);

package/dist/internal/setupHands.js

@@ -24,7 +24,7 @@ export const setupHands = () => {
                 return;
             const handEvent = event;
             const handedness = 'handedness' in handEvent ? handEvent.handedness : handEvent.data.handedness;
-            handEvents[handedness]?.[event.type]?.(event);
+            handEvents[handedness]?.current?.[`on${event.type}`]?.(event);
         };
         function handleConnected(event) {
             const hand = this;

package/dist/internal/setupHeadset.js

@@ -3,8 +3,9 @@ import { useThrelte, useTask, watch } from '@threlte/core';
 import { useXR } from '../hooks/useXR';
 export const headset = new Group();
 export const setupHeadset = () => {
-    const { renderer, camera } = useThrelte();
+    const { renderer, camera, scheduler, renderStage } = useThrelte();
     const { xr } = renderer;
+    const stage = scheduler.createStage(Symbol('xr-headset-stage'), { before: renderStage });
     const immersiveFrame = useTask(() => {
         const space = xr.getReferenceSpace();
         if (space === null)
@@ -17,13 +18,21 @@ export const setupHeadset = () => {
         const { position, orientation } = pose.transform;
         headset.position.set(position.x, position.y, position.z);
         headset.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
-    }, { autoStart: false, autoInvalidate: false });
+    }, {
+        autoStart: false,
+        autoInvalidate: false,
+        stage
+    });
     const nonImmersiveFrame = useTask(() => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
-    }, { autoStart: false, autoInvalidate: false });
-    watch(useXR().isPresenting, (isPresenting) => {
-        if (isPresenting) {
+    }, {
+        autoStart: false,
+        autoInvalidate: false,
+        stage
+    });
+    watch(useXR().isPresenting, ($isPresenting) => {
+        if ($isPresenting) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();
         }

package/dist/internal/setupRaf.js

@@ -1,21 +1,17 @@
-// @ts-expect-error svelte/internal is untyped.
-// import { set_raf } from 'svelte/internal'
 import { onDestroy } from 'svelte';
+// @ts-expect-error untyped internal import, when have you ever done me wrong?
+import { raf } from 'svelte/internal/client';
 import { watch } from '@threlte/core';
 import { session } from './stores';
 export const setupRaf = () => {
     if (typeof window === 'undefined')
         return;
-    const browserRaf = (fn) => requestAnimationFrame(fn);
-    const currentRaf = { fn: browserRaf };
-    // set_raf((fn: FrameRequestCallback) => currentRaf.fn(fn))
+    const originalTick = raf.tick;
     watch(session, (session) => {
-        if (session) {
-            currentRaf.fn = (fn) => session.requestAnimationFrame(fn);
-        }
-        else {
-            currentRaf.fn = browserRaf;
-        }
+        raf.tick =
+            session === undefined
+                ? originalTick
+                : (fn) => session.requestAnimationFrame(fn);
     });
-    onDestroy(() => (currentRaf.fn = browserRaf));
+    onDestroy(() => (raf.tick = originalTick));
 };

package/dist/types.d.ts

@@ -5,25 +5,26 @@ import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js
 export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
 export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
 export type XRControllerEvents = {
-    onconnected?: XRControllerEvent<'connected'>;
-    ondisconnected?: XRControllerEvent<'disconnected'>;
-    onselect?: XRControllerEvent<'select'>;
-    onselectstart?: XRControllerEvent<'selectstart'>;
-    onselectend?: XRControllerEvent<'selectend'>;
-    onsqueeze?: XRControllerEvent<'squeeze'>;
-    onsqueezeend?: XRControllerEvent<'squeezeend'>;
-    onsqueezestart?: XRControllerEvent<'squeezestart'>;
+    onconnected?: XRControllerEventCallback<'connected'>;
+    ondisconnected?: XRControllerEventCallback<'disconnected'>;
+    onselect?: XRControllerEventCallback<'select'>;
+    onselectstart?: XRControllerEventCallback<'selectstart'>;
+    onselectend?: XRControllerEventCallback<'selectend'>;
+    onsqueeze?: XRControllerEventCallback<'squeeze'>;
+    onsqueezeend?: XRControllerEventCallback<'squeezeend'>;
+    onsqueezestart?: XRControllerEventCallback<'squeezestart'>;
 };
 export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
 export type XRSessionEvent<Type = XRSessionEventType> = (event: Event & {
     type: Type;
     target: XRSession;
 }) => void;
-export type XRControllerEvent<Type = XRControllerEventType> = (event: Event & {
+export type XRControllerEvent<Type = XRControllerEventType> = Event & {
     type: Type;
     target: Group;
     data: XRInputSource;
-}) => void;
+};
+export type XRControllerEventCallback<Type = XRControllerEventType> = (event: XRControllerEvent<Type>) => void;
 export type XRController = {
     targetRay: XRTargetRaySpace;
     grip: XRGripSpace;
@@ -36,18 +37,19 @@ export type XRHand = {
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
-export type XRHandEvents = {
-    onconnected?: XRHandEvent<'connected'>;
-    ondisconnected?: XRHandEvent<'disconnected'>;
-    onpinchstart?: XRHandEvent<'pinchstart'>;
-    onpinchend?: XRHandEvent<'pinchend'>;
-};
-export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? (event: {
+export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
     type: Type;
     target: XRHandSpace;
     data: XRInputSource;
-}) => void : Type extends 'pinchstart' | 'pinchend' ? (event: {
+} : Type extends 'pinchstart' | 'pinchend' ? {
     type: Type;
     handedness: 'left' | 'right';
     target: null;
-}) => void : never;
+} : never;
+export type XRHandEventCallback<Type> = (event: XRHandEvent<Type>) => void;
+export type XRHandEvents = {
+    onconnected?: XRHandEventCallback<'connected'>;
+    ondisconnected?: XRHandEventCallback<'disconnected'>;
+    onpinchstart?: XRHandEventCallback<'pinchstart'>;
+    onpinchend?: XRHandEventCallback<'pinchend'>;
+};

package/package.json

@@ -1,8 +1,9 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.3",
+  "version": "1.0.0-next.5",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
+  "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.5.5",
@@ -14,22 +15,41 @@
     "eslint-plugin-svelte": "^2.36.0",
     "svelte-check": "^3.6.9",
     "typescript": "^5.4.5",
-    "@types/three": "^0.163.0",
+    "@types/three": "^0.165.0",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^5.0.0-next.107",
-    "three": "^0.163.0",
+    "svelte": "^5.0.0-next.181",
+    "three": "^0.165.0",
     "tslib": "^2.6.2",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.6"
+    "@threlte/core": "8.0.0-next.10"
   },
   "peerDependencies": {
     "svelte": ">=5",
     "three": ">=0.155"
   },
   "type": "module",
+  "keywords": [
+    "webxr",
+    "vr",
+    "ar",
+    "threlte",
+    "svelte",
+    "three",
+    "three.js",
+    "3d"
+  ],
+  "homepage": "https://threlte.xyz",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/threlte/threlte.git",
+    "directory": "packages/xr"
+  },
+  "bugs": {
+    "url": "https://github.com/threlte/threlte/issues"
+  },
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
@@ -48,8 +68,8 @@
     "package": "svelte-kit sync && svelte-package && node ./scripts/cleanupPackage.js && publint",
     "check": "svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --check --plugin-search-dir=. . && eslint .",
-    "format": "prettier --write --plugin-search-dir=. .",
+    "lint": "prettier --check .",
+    "format": "prettier --write .",
     "cleanup": "rimraf node_modules .svelte-kit dist"
   }
 }