@threlte/xr 1.0.0-next.0 → 1.0.0-next.10

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,6 +19,14 @@ 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?: Snippet<[{
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }]> | undefined;
+        onclick?: ((event: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+            nativeEvent: MouseEvent;
+        }) => void) | undefined;
+        onerror?: ((error: Error) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -40,8 +49,8 @@ export type XrButtonSlots = typeof __propDef.slots;
  *   }}
  *   force={'enter' | 'exit' | undefined}
  *   styled={'true' | 'false'}
- *   on:error={(event) => {}}
- *   on:click={(event) => {}}
+ *   onerror={(event) => {}}
+ *   onclick={(event) => {}}
  * />
  * ```
  */

package/dist/components/internal/Cursor.svelte

@@ -1,8 +1,6 @@
-<script>import { Color, DoubleSide, RawShaderMaterial } from "three";
+<script lang="ts">import { Color, DoubleSide, RawShaderMaterial } from "three";
 import { T } from "@threlte/core";
-export let color = new Color("white");
-export let size = 0.03;
-export let thickness = 0.035;
+let { color = new Color("white"), size = 0.03, thickness = 0.035 } = $props();
 const vertexShader = `
     uniform mat4 projectionMatrix;
     uniform mat4 modelViewMatrix;
@@ -26,21 +24,24 @@ const fragmentShader = `
       gl_FragColor = vec4(color, alpha);
     }
   `;
+const uniforms = {
+  thickness: { value: thickness },
+  color: { value: color }
+};
 const shaderMaterial = new RawShaderMaterial({
   vertexShader,
   fragmentShader,
-  uniforms: {
-    thickness: { value: thickness },
-    color: { value: color }
-  },
+  uniforms,
   side: DoubleSide,
   transparent: true,
   depthTest: false
 });
-$:
-  shaderMaterial.uniforms.thickness.value = thickness;
-$:
-  shaderMaterial.uniforms.color.value = color;
+$effect.pre(() => {
+  uniforms.thickness.value = thickness;
+});
+$effect.pre(() => {
+  uniforms.color.value = color;
+});
 </script>
 
 <T.Mesh scale={size}>

package/dist/components/internal/PointerCursor.svelte

@@ -1,16 +1,14 @@
-<script>import { Group, Vector3, Matrix3 } from "three";
+<script lang="ts">import { Group, Vector3, Matrix3 } from "three";
 import { T, useTask } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-export let handedness;
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
 const worldNormal = new Vector3();
-$:
-  hovering = $pointerState[handedness].hovering;
-$:
-  intersection = pointerIntersection[handedness];
+let hovering = $derived($pointerState[handedness].hovering);
+let intersection = $derived(pointerIntersection[handedness]);
 const { start, stop } = useTask(
   () => {
     if (intersection.current === void 0)
@@ -27,20 +25,23 @@ const { start, stop } = useTask(
     autoStart: false
   }
 );
-$:
+$effect.pre(() => {
   if (hovering) {
     ref.position.copy(intersection.current.point);
     start();
   } else {
     stop();
   }
+});
 </script>
 
 <T
   is={ref}
   visible={hovering}
 >
-  <slot>
+  {#if children}
+    {@render children()}
+  {:else}
     <Cursor />
-  </slot>
+  {/if}
 </T>

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

@@ -1,14 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
+        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

@@ -1,10 +1,20 @@
-<script>import { useThrelte, HierarchicalObject } from "@threlte/core";
+<script lang="ts">import { T, useThrelte } from "@threlte/core";
+import { Object3D } from "three";
 const { scene } = useThrelte();
+const proxy = new Object3D();
+proxy.add = (child) => {
+  scene.add(child);
+  return child;
+};
+proxy.remove = (child) => {
+  scene.remove(child);
+  return child;
+};
 </script>
 
-<HierarchicalObject
-  onChildMount={(child) => scene.add(child)}
-  onChildDestroy={(child) => scene.remove(child)}
+<T
+  is={proxy}
+  attach={false}
 >
   <slot />
-</HierarchicalObject>
+</T>

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

@@ -1,6 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: Record<string, never>;
+    props: {
+        children?: import("svelte").Snippet<[]> | undefined;
+    };
     events: {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/internal/ShortRay.svelte

@@ -1,16 +1,33 @@
-<script>import { T } from "@threlte/core";
+<script lang="ts">import { T } from "@threlte/core";
 import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
-export let handedness;
-$:
-  hovering = $teleportState[handedness].hovering;
-$:
-  intersection = teleportIntersection[handedness];
-$:
-  visible = $pointerState[handedness].enabled || hovering && $intersection === void 0;
+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}
@@ -18,25 +35,9 @@ $:
       <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,14 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
+        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

@@ -1,15 +1,14 @@
-<script>import { spring } from "svelte/motion";
+<script lang="ts">import { spring } from "svelte/motion";
 import { Group, Matrix3, Vector3 } from "three";
 import { T, useTask } from "@threlte/core";
 import { teleportIntersection } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-export let handedness;
+let { handedness, children } = $props();
 const ref = new Group();
 const vec3 = new Vector3();
 const normalMatrix = new Matrix3();
 const worldNormal = new Vector3();
-$:
-  intersection = teleportIntersection[handedness];
+let intersection = $derived(teleportIntersection[handedness]);
 const { start, stop } = useTask(
   () => {
     if (intersection.current === void 0)
@@ -27,7 +26,7 @@ const { start, stop } = useTask(
   }
 );
 const size = spring(0.1, { stiffness: 0.2 });
-$:
+$effect.pre(() => {
   if ($intersection === void 0) {
     size.set(0.1);
     stop();
@@ -36,16 +35,19 @@ $:
     ref.position.copy($intersection.point);
     start();
   }
+});
 </script>
 
 <T
   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,14 +1,14 @@
 import { SvelteComponent } from "svelte";
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
         handedness: 'left' | 'right';
+        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

@@ -1,11 +1,10 @@
-<script>import { Vector3, QuadraticBezierCurve3, Vector2 } from "three";
+<script lang="ts">import { Vector3, QuadraticBezierCurve3, Vector2 } from "three";
 import { Line2 } from "three/examples/jsm/lines/Line2.js";
 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";
-export let handedness;
-export let targetRay;
+let { handedness, targetRay, children } = $props();
 let lineGeometry = new LineGeometry();
 const rayStart = new Vector3();
 const rayMidpoint = new Vector3();
@@ -15,8 +14,7 @@ const positions = new Float32Array(rayDivisions * 3);
 const vec3 = new Vector3();
 const v2_1 = new Vector2();
 const v2_2 = new Vector2();
-$:
-  intersection = teleportIntersection[handedness];
+let intersection = $derived(teleportIntersection[handedness]);
 const setCurvePoints = (alpha = 0.3) => {
   if (intersection.current === void 0)
     return;
@@ -47,16 +45,19 @@ const { start, stop } = useTask(
   },
   { autoStart: false }
 );
-$:
+$effect.pre(() => {
   if ($intersection === void 0) {
     stop();
   } else {
     setCurvePoints(1);
     start();
   }
+});
 </script>
 
-<slot>
+{#if children}
+  {@render children()}
+{:else}
   <T
     is={Line2}
     visible={$intersection !== undefined}
@@ -68,4 +69,4 @@ $:
       linewidth={0.004}
     />
   </T>
-</slot>
+{/if}

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

@@ -1,16 +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?: 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/internal/stores.d.ts

@@ -1,17 +1,18 @@
 /// <reference types="webxr" />
 import type { WebXRManager, Intersection } from 'three';
+import type { XRControllerEvents, XRHandEvents } from '../types';
 export declare const isPresenting: import("@threlte/core").CurrentWritable<boolean>;
 export declare const isHandTracking: import("@threlte/core").CurrentWritable<boolean>;
 export declare const session: import("@threlte/core").CurrentWritable<XRSession | undefined>;
 export declare const referenceSpaceType: import("@threlte/core").CurrentWritable<XRReferenceSpaceType | undefined>;
 export declare const xr: import("@threlte/core").CurrentWritable<WebXRManager | undefined>;
 export declare const controllerEvents: {
-    left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
+    left: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
+    right: import("@threlte/core").CurrentWritable<XRControllerEvents | undefined>;
 };
 export declare const handEvents: {
-    left: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
-    right: import("@threlte/core").CurrentWritable<Record<string, (arg: unknown) => void> | undefined>;
+    left: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
+    right: import("@threlte/core").CurrentWritable<XRHandEvents | undefined>;
 };
 export declare const teleportState: import("@threlte/core").CurrentWritable<{
     left: {

package/dist/plugins/pointerControls/context.d.ts

@@ -0,0 +1,12 @@
+import type { Object3D } from 'three';
+import type { ControlsContext, HandContext } from './types';
+export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
+export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
+export declare const getControlsContext: () => ControlsContext;
+export declare const setControlsContext: (context: ControlsContext) => void;
+interface InternalContext {
+    dispatchers: WeakMap<Object3D, Record<string, (arg: unknown) => void>>;
+}
+export declare const getInternalContext: () => InternalContext;
+export declare const setInternalContext: () => void;
+export {};

package/dist/plugins/pointerControls/hook.d.ts

@@ -1,5 +1,5 @@
 import type { Object3D } from 'three';
 export declare const usePointerControls: () => {
-    addInteractiveObject: (object: Object3D) => void;
+    addInteractiveObject: (object: Object3D, events: Record<string, (arg: unknown) => void>) => void;
     removeInteractiveObject: (object: Object3D) => void;
 };

package/dist/plugins/pointerControls/hook.js

@@ -1,15 +1,16 @@
-import { createRawEventDispatcher } from '@threlte/core';
 import { getControlsContext, getInternalContext } from './context';
 export const usePointerControls = () => {
-    const { dispatchers } = getInternalContext();
     const context = getControlsContext();
-    const eventDispatcher = createRawEventDispatcher();
-    const addInteractiveObject = (object) => {
+    const { dispatchers } = getInternalContext();
+    if (!context) {
+        throw new Error('No pointer controls context found. Did you forget to implement pointerControls()?');
+    }
+    const addInteractiveObject = (object, events) => {
         // check if the object is already in the list
         if (context.interactiveObjects.indexOf(object) > -1) {
             return;
         }
-        dispatchers.set(object, eventDispatcher);
+        dispatchers.set(object, events);
         context.interactiveObjects.push(object);
     };
     const removeInteractiveObject = (object) => {

package/dist/plugins/pointerControls/plugin.js

@@ -1,23 +1,21 @@
 import { injectPlugin, watch } from '@threlte/core';
 import { writable } from 'svelte/store';
 import { usePointerControls } from './hook';
-import { useComponentHasEventHandlers } from './useComponentEventHandlers';
+import { events } from './types';
 export const injectPointerControlsPlugin = () => {
-    injectPlugin('threlte-pointer-controls', ({ ref }) => {
-        if (ref.isMesh !== true)
+    injectPlugin('threlte-pointer-controls', ({ ref, props }) => {
+        if (!ref.isObject3D)
             return;
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
         const refStore = writable(ref);
-        const { hasEventHandlers } = useComponentHasEventHandlers();
-        watch([hasEventHandlers, refStore], ([hasEventHandlers, ref]) => {
-            // Because hasEventHandlers will only be set from false to true in the
-            // lifecycle of the component, we can safely assume that we do not need to
-            // remove the object from the list of interactive objects when
-            // hasEventHandlers is false.
+        watch(refStore, ($refStore) => {
+            const hasEventHandlers = Object.entries(props).some(([key, value]) => {
+                return value !== undefined && events.includes(key);
+            });
             if (!hasEventHandlers)
                 return;
-            addInteractiveObject(ref);
-            return () => removeInteractiveObject(ref);
+            addInteractiveObject($refStore, props);
+            return () => removeInteractiveObject($refStore);
         });
         return {
             onRefChange(ref) {