@threlte/xr 0.1.0 → 0.1.1

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

@@ -3,28 +3,21 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        force?: "enter" | "exit";
-        styled?: boolean;
-        form?: string | null | undefined;
-        radiogroup?: string | null | undefined;
         name?: string | null | undefined;
+        type?: "button" | "submit" | "reset" | null | undefined;
         style?: string | null | undefined;
-        disabled?: boolean | null | undefined;
-        formaction?: string | null | undefined;
-        formenctype?: string | null | undefined;
-        formmethod?: string | null | undefined;
-        formnovalidate?: boolean | null | undefined;
-        formtarget?: string | null | undefined;
-        type?: "submit" | "reset" | "button" | null | undefined;
+        class?: string | null | undefined;
+        typeof?: string | null | undefined;
         value?: string | number | string[] | null | undefined;
+        form?: string | null | undefined;
+        radiogroup?: string | null | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
-        class?: string | null | undefined;
         contenteditable?: import("svelte/elements").Booleanish | "inherit" | null | undefined;
         contextmenu?: string | null | undefined;
         dir?: string | null | undefined;
         draggable?: import("svelte/elements").Booleanish | null | undefined;
-        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
         id?: string | null | undefined;
         lang?: string | null | undefined;
@@ -43,7 +36,6 @@ declare const __propDef: {
         prefix?: string | null | undefined;
         property?: string | null | undefined;
         resource?: string | null | undefined;
-        typeof?: string | null | undefined;
         vocab?: string | null | undefined;
         autocapitalize?: string | null | undefined;
         autocorrect?: string | null | undefined;
@@ -56,8 +48,8 @@ declare const __propDef: {
         itemref?: string | null | undefined;
         results?: number | null | undefined;
         security?: string | null | undefined;
-        unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "url" | "search" | "none" | "text" | "tel" | "email" | "numeric" | "decimal" | null | undefined;
+        unselectable?: "off" | "on" | null | undefined;
+        inputmode?: "search" | "numeric" | "decimal" | "none" | "text" | "tel" | "url" | "email" | null | undefined;
         is?: string | null | undefined;
         'bind:innerHTML'?: string | null | undefined;
         'bind:textContent'?: string | null | undefined;
@@ -74,9 +66,9 @@ declare const __propDef: {
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-autocomplete'?: "inline" | "list" | "none" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -90,7 +82,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | null | undefined;
         'aria-hidden'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -105,9 +97,9 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-roledescription'?: string | null | undefined;
         'aria-rowcount'?: number | null | undefined;
@@ -115,7 +107,7 @@ declare const __propDef: {
         'aria-rowspan'?: number | null | undefined;
         'aria-selected'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-setsize'?: number | null | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | null | undefined;
+        'aria-sort'?: "other" | "none" | "ascending" | "descending" | null | undefined;
         'aria-valuemax'?: number | null | undefined;
         'aria-valuemin'?: number | null | undefined;
         'aria-valuenow'?: number | null | undefined;
@@ -223,11 +215,19 @@ declare const __propDef: {
         'on:close'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
-        sessionInit?: XRSessionInit & {
+        disabled?: boolean | null | undefined;
+        formaction?: string | null | undefined;
+        formenctype?: string | null | undefined;
+        formmethod?: string | null | undefined;
+        formnovalidate?: boolean | null | undefined;
+        formtarget?: string | null | undefined;
+        force?: "enter" | "exit" | undefined;
+        styled?: boolean | undefined;
+        sessionInit?: (XRSessionInit & {
             domOverlay?: {
                 root: HTMLElement;
             } | undefined;
-        };
+        }) | undefined;
     };
     events: {
         click: CustomEvent<{

package/dist/components/Hand.svelte

@@ -1,5 +1,7 @@
-<script context='module'>import { Group } from "three";
-import { T, useThrelte, createRawEventDispatcher, useFrame } from "@threlte/core";
+<script
+ 
+  context="module"
+>import { T, useThrelte, createRawEventDispatcher, useTask } from "@threlte/core";
 import { isHandTracking, handDispatchers } from "../internal/stores";
 import { left as leftStore, right as rightStore } from "../hooks/useHand";
 import ScenePortal from "./internal/ScenePortal.svelte";
@@ -22,18 +24,21 @@ $:
 $:
   handDispatchers[$handedness].set(dispatch);
 let children;
-const { start, stop } = useFrame(() => {
-  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;
-  children.position.set(position.x, position.y, position.z);
-  children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
-}, { autostart: false });
+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;
+    children.position.set(position.x, position.y, position.z);
+    children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+  },
+  { autoStart: false }
+);
 $:
   if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
     start();
@@ -57,7 +62,7 @@ $:
 
   {#if $$slots['target-ray'] !== undefined}
     <T is={$store.targetRay}>
-      <slot name='target-ray' />
+      <slot name="target-ray" />
     </T>
   {/if}
 {/if}
@@ -65,7 +70,7 @@ $:
 {#if $isHandTracking}
   <ScenePortal>
     <T.Group bind:ref={children}>
-      <slot name='wrist' />
+      <slot name="wrist" />
       <slot />
     </T.Group>
   </ScenePortal>

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

@@ -2,28 +2,21 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        force?: "enter" | "exit";
-        styled?: boolean;
-        form?: string | null | undefined;
-        radiogroup?: string | null | undefined;
         name?: string | null | undefined;
+        type?: "button" | "submit" | "reset" | null | undefined;
         style?: string | null | undefined;
-        disabled?: boolean | null | undefined;
-        formaction?: string | null | undefined;
-        formenctype?: string | null | undefined;
-        formmethod?: string | null | undefined;
-        formnovalidate?: boolean | null | undefined;
-        formtarget?: string | null | undefined;
-        type?: "submit" | "reset" | "button" | null | undefined;
+        class?: string | null | undefined;
+        typeof?: string | null | undefined;
         value?: string | number | string[] | null | undefined;
+        form?: string | null | undefined;
+        radiogroup?: string | null | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
-        class?: string | null | undefined;
         contenteditable?: import("svelte/elements").Booleanish | "inherit" | null | undefined;
         contextmenu?: string | null | undefined;
         dir?: string | null | undefined;
         draggable?: import("svelte/elements").Booleanish | null | undefined;
-        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
         id?: string | null | undefined;
         lang?: string | null | undefined;
@@ -42,7 +35,6 @@ declare const __propDef: {
         prefix?: string | null | undefined;
         property?: string | null | undefined;
         resource?: string | null | undefined;
-        typeof?: string | null | undefined;
         vocab?: string | null | undefined;
         autocapitalize?: string | null | undefined;
         autocorrect?: string | null | undefined;
@@ -55,8 +47,8 @@ declare const __propDef: {
         itemref?: string | null | undefined;
         results?: number | null | undefined;
         security?: string | null | undefined;
-        unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "url" | "search" | "none" | "text" | "tel" | "email" | "numeric" | "decimal" | null | undefined;
+        unselectable?: "off" | "on" | null | undefined;
+        inputmode?: "search" | "numeric" | "decimal" | "none" | "text" | "tel" | "url" | "email" | null | undefined;
         is?: string | null | undefined;
         'bind:innerHTML'?: string | null | undefined;
         'bind:textContent'?: string | null | undefined;
@@ -73,9 +65,9 @@ declare const __propDef: {
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-autocomplete'?: "inline" | "list" | "none" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -89,7 +81,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | null | undefined;
         'aria-hidden'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -104,9 +96,9 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-roledescription'?: string | null | undefined;
         'aria-rowcount'?: number | null | undefined;
@@ -114,7 +106,7 @@ declare const __propDef: {
         'aria-rowspan'?: number | null | undefined;
         'aria-selected'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-setsize'?: number | null | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | null | undefined;
+        'aria-sort'?: "other" | "none" | "ascending" | "descending" | null | undefined;
         'aria-valuemax'?: number | null | undefined;
         'aria-valuemin'?: number | null | undefined;
         'aria-valuenow'?: number | null | undefined;
@@ -222,6 +214,14 @@ declare const __propDef: {
         'on:close'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
+        disabled?: boolean | null | undefined;
+        formaction?: string | null | undefined;
+        formenctype?: string | null | undefined;
+        formmethod?: string | null | undefined;
+        formnovalidate?: boolean | null | undefined;
+        formtarget?: string | null | undefined;
+        force?: "enter" | "exit" | undefined;
+        styled?: boolean | undefined;
     };
     events: {
         click: CustomEvent<{

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

@@ -9,7 +9,7 @@ declare const __propDef: {
            * 0 = no foveation, full resolution
            *
            * 1 = maximum foveation, the edges render at lower resolution
-           */ foveation?: number;
+           */ foveation?: number | undefined;
         /**
            * The target framerate for the XRSystem. Smaller rates give more CPU headroom at the cost of responsiveness.
            * Recommended range is `72`-`120`. Default is unset and left to the device.
@@ -18,7 +18,7 @@ declare const __propDef: {
            * headroom based on your experience.
            * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Rendering#refresh_rate_and_frame_rate
            */ frameRate?: number | undefined;
-        /** Type of WebXR reference space to use. Default is `local-floor` */ referenceSpace?: XRReferenceSpaceType;
+        /** Type of WebXR reference space to use. Default is `local-floor` */ referenceSpace?: XRReferenceSpaceType | undefined;
     };
     slots: {
         default: {};

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

@@ -11,7 +11,7 @@ declare const __propDef: {
         formnovalidate?: boolean | null | undefined;
         formtarget?: string | null | undefined;
         name?: string | null | undefined;
-        type?: "submit" | "reset" | "button" | null | undefined;
+        type?: "button" | "submit" | "reset" | null | undefined;
         value?: string | number | string[] | null | undefined;
         accesskey?: string | null | undefined;
         autofocus?: boolean | null | undefined;
@@ -20,7 +20,7 @@ declare const __propDef: {
         contextmenu?: string | null | undefined;
         dir?: string | null | undefined;
         draggable?: import("svelte/elements").Booleanish | null | undefined;
-        enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | null | undefined;
+        enterkeyhint?: "search" | "done" | "enter" | "go" | "next" | "previous" | "send" | null | undefined;
         hidden?: boolean | null | undefined;
         id?: string | null | undefined;
         lang?: string | null | undefined;
@@ -54,8 +54,8 @@ declare const __propDef: {
         itemref?: string | null | undefined;
         results?: number | null | undefined;
         security?: string | null | undefined;
-        unselectable?: "on" | "off" | null | undefined;
-        inputmode?: "url" | "search" | "none" | "text" | "tel" | "email" | "numeric" | "decimal" | null | undefined;
+        unselectable?: "off" | "on" | null | undefined;
+        inputmode?: "search" | "numeric" | "decimal" | "none" | "text" | "tel" | "url" | "email" | null | undefined;
         is?: string | null | undefined;
         'bind:innerHTML'?: string | null | undefined;
         'bind:textContent'?: string | null | undefined;
@@ -72,9 +72,9 @@ declare const __propDef: {
         'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
         'aria-activedescendant'?: string | null | undefined;
         'aria-atomic'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-autocomplete'?: "inline" | "list" | "none" | "both" | null | undefined;
+        'aria-autocomplete'?: "none" | "inline" | "list" | "both" | null | undefined;
         'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-colcount'?: number | null | undefined;
         'aria-colindex'?: number | null | undefined;
         'aria-colspan'?: number | null | undefined;
@@ -88,7 +88,7 @@ declare const __propDef: {
         'aria-expanded'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-flowto'?: string | null | undefined;
         'aria-grabbed'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-haspopup'?: import("svelte/elements").Booleanish | "dialog" | "grid" | "listbox" | "menu" | "tree" | null | undefined;
+        'aria-haspopup'?: import("svelte/elements").Booleanish | "menu" | "listbox" | "tree" | "grid" | "dialog" | null | undefined;
         'aria-hidden'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | null | undefined;
         'aria-keyshortcuts'?: string | null | undefined;
@@ -103,9 +103,9 @@ declare const __propDef: {
         'aria-owns'?: string | null | undefined;
         'aria-placeholder'?: string | null | undefined;
         'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "true" | "false" | "mixed" | null | undefined;
+        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
         'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-relevant'?: "text" | "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
+        'aria-relevant'?: "additions" | "additions removals" | "additions text" | "all" | "removals" | "removals additions" | "removals text" | "text" | "text additions" | "text removals" | null | undefined;
         'aria-required'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-roledescription'?: string | null | undefined;
         'aria-rowcount'?: number | null | undefined;
@@ -113,7 +113,7 @@ declare const __propDef: {
         'aria-rowspan'?: number | null | undefined;
         'aria-selected'?: import("svelte/elements").Booleanish | null | undefined;
         'aria-setsize'?: number | null | undefined;
-        'aria-sort'?: "none" | "ascending" | "descending" | "other" | null | undefined;
+        'aria-sort'?: "other" | "none" | "ascending" | "descending" | null | undefined;
         'aria-valuemax'?: number | null | undefined;
         'aria-valuemin'?: number | null | undefined;
         'aria-valuenow'?: number | null | undefined;
@@ -222,13 +222,13 @@ declare const __propDef: {
         'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event<EventTarget>, HTMLButtonElement> | null | undefined;
         mode: XRSessionMode;
-        sessionInit?: XRSessionInit & {
+        sessionInit?: (XRSessionInit & {
             domOverlay?: {
                 root: HTMLElement;
             } | undefined;
-        };
-        force?: 'enter' | 'exit';
-        styled?: boolean;
+        }) | undefined;
+        force?: "enter" | "exit" | undefined;
+        styled?: boolean | undefined;
     };
     events: {
         click: CustomEvent<{

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

@@ -3,9 +3,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

@@ -1,5 +1,5 @@
 <script>import { Group, Vector3, Matrix3 } from "three";
-import { T, useFrame } from "@threlte/core";
+import { T, useTask } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
 export let handedness;
@@ -11,7 +11,7 @@ $:
   hovering = $pointerState[handedness].hovering;
 $:
   intersection = pointerIntersection[handedness];
-const { start, stop } = useFrame(
+const { start, stop } = useTask(
   () => {
     if (intersection.current === void 0)
       return;
@@ -24,7 +24,7 @@ const { start, stop } = useFrame(
     }
   },
   {
-    autostart: false
+    autoStart: false
   }
 );
 $:

package/dist/components/internal/TeleportCursor.svelte

@@ -1,6 +1,6 @@
 <script>import { spring } from "svelte/motion";
 import { Group, Matrix3, Vector3 } from "three";
-import { T, useFrame } from "@threlte/core";
+import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
 export let handedness;
@@ -10,7 +10,7 @@ const normalMatrix = new Matrix3();
 const worldNormal = new Vector3();
 $:
   intersection = teleportIntersection[handedness];
-const { start, stop } = useFrame(
+const { start, stop } = useTask(
   () => {
     if (intersection.current === void 0)
       return;
@@ -23,7 +23,7 @@ const { start, stop } = useFrame(
     }
   },
   {
-    autostart: false
+    autoStart: false
   }
 );
 const size = spring(0.1, { stiffness: 0.2 });

package/dist/components/internal/TeleportRay.svelte

@@ -2,7 +2,7 @@
 import { Line2 } from "three/examples/jsm/lines/Line2";
 import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
 import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
-import { T, useFrame } from "@threlte/core";
+import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 export let handedness;
 export let targetRay;
@@ -41,11 +41,11 @@ const setCurvePoints = (alpha = 0.3) => {
   }
   lineGeometry.setPositions(positions);
 };
-const { start, stop } = useFrame(
+const { start, stop } = useTask(
   () => {
     setCurvePoints();
   },
-  { autostart: false }
+  { autoStart: false }
 );
 $:
   if ($intersection === void 0) {

package/dist/hooks/useHandJoint.js

@@ -1,12 +1,13 @@
-import { currentWritable, useFrame } from '@threlte/core';
+import { currentWritable, useTask, useThrelte } from '@threlte/core';
 import { useHand } from './useHand';
 /**
  * Provides a reference to a requested hand joint, once available.
  */
 export const useHandJoint = (handedness, joint) => {
+    const { invalidate } = useThrelte();
     const jointSpaceStore = currentWritable(undefined);
     const xrhand = useHand(handedness);
-    const { stop } = useFrame(({ invalidate }) => {
+    const { stop } = useTask(() => {
         const jointSpace = xrhand.current?.hand.joints[joint];
         // The joint radius is a good indicator that the joint is ready
         if (jointSpace?.jointRadius !== undefined) {
@@ -14,6 +15,6 @@ export const useHandJoint = (handedness, joint) => {
             invalidate();
             stop();
         }
-    }, { invalidate: false });
+    }, { autoInvalidate: false });
     return jointSpaceStore;
 };

package/dist/hooks/useHitTest.js

@@ -1,5 +1,5 @@
 import { Matrix4 } from 'three';
-import { useThrelte, useFrame, watch, currentWritable } from '@threlte/core';
+import { useThrelte, useTask, watch, currentWritable } from '@threlte/core';
 import { useXR } from './useXR';
 import { useController } from './useController';
 /**
@@ -18,7 +18,7 @@ export const useHitTest = (hitTestCallback, options = {}) => {
     const { xr } = useThrelte().renderer;
     const xrState = useXR();
     const hitMatrix = new Matrix4();
-    let hitTestSource = currentWritable(undefined);
+    const hitTestSource = currentWritable(undefined);
     if (source === 'viewer') {
         watch(xrState.session, async (session) => {
             if (session === undefined) {
@@ -49,7 +49,7 @@ export const useHitTest = (hitTestCallback, options = {}) => {
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
     }
-    const { start, stop } = useFrame(() => {
+    const { start, stop } = useTask(() => {
         const referenceSpace = xr.getReferenceSpace();
         if (referenceSpace === null || hitTestSource.current === undefined) {
             return hitTestCallback(hitMatrix, undefined);
@@ -61,7 +61,7 @@ export const useHitTest = (hitTestCallback, options = {}) => {
         }
         hitMatrix.fromArray(pose.transform.matrix);
         hitTestCallback(hitMatrix, hit);
-    }, { autostart: false });
+    }, { autoStart: false });
     watch([xrState.isPresenting, hitTestSource], ([isPresenting, testSource]) => {
         if (!isPresenting) {
             stop();

package/dist/index.d.ts

@@ -17,4 +17,4 @@ export { useHeadset } from './hooks/useHeadset';
 export { useHitTest } from './hooks/useHitTest';
 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, XRSessionEvent, XRControllerEvent, XRController, XRHand, XRHandEvent } from './types';

package/dist/internal/setupHands.js

@@ -23,7 +23,7 @@ export const setupHands = () => {
             if (!hasHands())
                 return;
             const handEvent = event;
-            const handedness = ('handedness' in handEvent) ? handEvent.handedness : handEvent.data.handedness;
+            const handedness = 'handedness' in handEvent ? handEvent.handedness : handEvent.data.handedness;
             handDispatchers[handedness]?.current?.(event.type, event);
         };
         function handleConnected(event) {

package/dist/internal/setupHeadset.js

@@ -1,11 +1,11 @@
 import { Group } from 'three';
-import { useThrelte, useFrame, watch } from '@threlte/core';
+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 { xr } = renderer;
-    const immersiveFrame = useFrame(() => {
+    const immersiveFrame = useTask(() => {
         const space = xr.getReferenceSpace();
         if (space === null)
             return;
@@ -17,11 +17,11 @@ 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, invalidate: false });
-    const nonImmersiveFrame = useFrame(() => {
+    }, { autoStart: false, autoInvalidate: false });
+    const nonImmersiveFrame = useTask(() => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
-    }, { autostart: false, invalidate: false });
+    }, { autoStart: false, autoInvalidate: false });
     watch(useXR().isPresenting, (isPresenting) => {
         if (isPresenting) {
             immersiveFrame.start();

package/dist/internal/useFixed.d.ts

@@ -1,11 +1,11 @@
-import { type ThrelteUseFrameOptions, type ThrelteContext } from '@threlte/core';
-type UseFixedOptions = ThrelteUseFrameOptions & {
+import { type ThrelteUseTaskOptions } from '@threlte/core';
+type UseFixedOptions = ThrelteUseTaskOptions & {
     fixedStep?: number;
 };
 /**
- * A fixed useFrame, based on https://github.com/threlte/threlte/pull/654
+ * A fixed useTask, based on https://github.com/threlte/threlte/pull/654
  *
  * @Todo Can be removed if this or a similar feature is merged.
  */
-export declare const useFixed: (fn: (ctx: ThrelteContext, delta: number) => void, options: UseFixedOptions) => import("@threlte/core/dist/hooks/legacy/useFrame").ThrelteUseFrame;
+export declare const useFixed: (fn: (delta: number) => void, options: UseFixedOptions) => import("@threlte/core").ThrelteUseTask;
 export {};

package/dist/internal/useFixed.js

@@ -1,17 +1,17 @@
-import { useFrame } from '@threlte/core';
+import { useTask } from '@threlte/core';
 /**
- * A fixed useFrame, based on https://github.com/threlte/threlte/pull/654
+ * A fixed useTask, based on https://github.com/threlte/threlte/pull/654
  *
  * @Todo Can be removed if this or a similar feature is merged.
  */
 export const useFixed = (fn, options) => {
     let fixedStepTimeAccumulator = 0;
     let fixedStep = options.fixedStep ?? 1 / 60;
-    return useFrame((ctx, delta) => {
+    return useTask((delta) => {
         fixedStepTimeAccumulator += delta;
         while (fixedStepTimeAccumulator >= fixedStep) {
             fixedStepTimeAccumulator -= fixedStep;
-            fn(ctx, fixedStep);
+            fn(fixedStep);
         }
     }, options);
 };

package/dist/plugins/pointerControls/index.js

@@ -14,7 +14,7 @@ export const pointerControls = (handedness, options) => {
             interactiveObjects: [],
             raycaster: new Raycaster(),
             compute: options?.compute ?? defaultComputeFunction,
-            filter: options?.filter,
+            filter: options?.filter
         });
     }
     const context = getControlsContext();
@@ -28,14 +28,14 @@ export const pointerControls = (handedness, options) => {
             lastEvent: undefined,
             initialClick: [0, 0, 0],
             initialHits: [],
-            hovered: new Map(),
+            hovered: new Map()
         };
         setHandContext(handedness, ctx);
         setupPointerControls(context, ctx, options?.fixedStep);
     }
     const handContext = getHandContext(handedness);
     watch(handContext.enabled, (enabled) => {
-        controlsCounter += (enabled ? 1 : -1);
+        controlsCounter += enabled ? 1 : -1;
         pointerState.update((value) => {
             value[handedness].enabled = controlsCounter > 0;
             return value;
@@ -49,6 +49,6 @@ export const pointerControls = (handedness, options) => {
     });
     return {
         enabled: handContext.enabled,
-        hovered: handContext.hovered,
+        hovered: handContext.hovered
     };
 };

package/package.json

@@ -1,24 +1,28 @@
 {
   "name": "@threlte/xr",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
     "@sveltejs/adapter-auto": "^2.1.0",
-    "@sveltejs/kit": "^1.22.3",
-    "@sveltejs/package": "^2.2.0",
+    "@sveltejs/kit": "^1.26.0",
+    "@sveltejs/package": "^2.2.2",
+    "@typescript-eslint/eslint-plugin": "^6.8.0",
+    "@typescript-eslint/parser": "^6.8.0",
+    "eslint": "^8.51.0",
+    "eslint-plugin-svelte": "^2.34.0",
+    "svelte-check": "^3.5.2",
+    "typescript": "^5.2.2",
     "@types/three": "^0.158.3",
     "autoprefixer": "^10.4.14",
     "postcss": "^8.4.27",
     "publint": "^0.1.16",
     "svelte": "^4.1.1",
-    "svelte-check": "^3.4.6",
     "three": "^0.158.0",
     "tslib": "^2.6.0",
-    "typescript": "^5.1.6",
     "vite": "^4.4.6",
     "vite-plugin-mkcert": "^1.16.0",
-    "@threlte/core": "7.0.0"
+    "@threlte/core": "7.0.2"
   },
   "peerDependencies": {
     "svelte": ">=4",