@threlte/xr 1.0.0-next.1 → 1.0.0-next.2

package/dist/components/XR.svelte

@@ -18,7 +18,7 @@ This should be placed within a Threlte `<Canvas />`.
 
 -->
 <script lang="ts">import { onMount } from "svelte";
-import { createRawEventDispatcher, useThrelte, watch } from "@threlte/core";
+import { useThrelte, watch } from "@threlte/core";
 import {
   isHandTracking,
   isPresenting,

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

@@ -25,13 +25,13 @@ declare const __propDef: {
     } & {
         $$events: {
             /** Called as an XRSession is requested */
-            sessionstart(): XRSessionEvent<'sessionstart'>;
+            sessionstart: (event: XRSessionEvent<'sessionstart'>) => void;
             /** Called after an XRSession is terminated */
-            sessionend(): XRSessionEvent<'sessionend'>;
+            sessionend: (event: XRSessionEvent<'sessionend'>) => void;
             /** Called when an XRSession is hidden or unfocused. */
-            visibilitychange(): globalThis.XRSessionEvent;
+            visibilitychange: (event: globalThis.XRSessionEvent) => void;
             /** Called when available inputsources change */
-            inputsourceschange(): globalThis.XRSessionEvent;
+            inputsourceschange: (event: globalThis.XRSessionEvent) => void;
         };
     };
     slots: {
@@ -40,13 +40,13 @@ declare const __propDef: {
     };
     events: {
         /** Called as an XRSession is requested */
-        sessionstart(): XRSessionEvent<'sessionstart'>;
+        sessionstart: (event: XRSessionEvent<'sessionstart'>) => void;
         /** Called after an XRSession is terminated */
-        sessionend(): XRSessionEvent<'sessionend'>;
+        sessionend: (event: XRSessionEvent<'sessionend'>) => void;
         /** Called when an XRSession is hidden or unfocused. */
-        visibilitychange(): globalThis.XRSessionEvent;
+        visibilitychange: (event: globalThis.XRSessionEvent) => void;
         /** Called when available inputsources change */
-        inputsourceschange(): globalThis.XRSessionEvent;
+        inputsourceschange: (event: globalThis.XRSessionEvent) => void;
     };
 };
 export type XrProps = typeof __propDef.props;

package/dist/components/internal/Cursor.svelte

@@ -1,8 +1,6 @@
 <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/Cursor.svelte.d.ts

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

package/dist/components/internal/PointerCursor.svelte

@@ -2,15 +2,13 @@
 import { T, useTask } from "@threlte/core";
 import { pointerIntersection, pointerState } from "../../internal/stores";
 import Cursor from "./Cursor.svelte";
-export let handedness;
+let { handedness } = $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,13 +25,14 @@ const { start, stop } = useTask(
     autoStart: false
   }
 );
-$:
+$effect.pre(() => {
   if (hovering) {
     ref.position.copy(intersection.current.point);
     start();
   } else {
     stop();
   }
+});
 </script>
 
 <T

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

@@ -2,6 +2,7 @@ import { SvelteComponent } 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;

package/dist/components/internal/ShortRay.svelte

@@ -1,12 +1,11 @@
 <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 } = $props();
+let hovering = $derived($teleportState[handedness].hovering);
+let intersection = $derived(teleportIntersection[handedness]);
+let visible = $derived(
+  $pointerState[handedness].enabled || hovering && $intersection === void 0
+);
 </script>
 
 <T.Group {visible}>

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

@@ -2,6 +2,7 @@ import { SvelteComponent } 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;

package/dist/components/internal/TeleportCursor.svelte

@@ -3,13 +3,12 @@ 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 } = $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,6 +35,7 @@ $:
     ref.position.copy($intersection.point);
     start();
   }
+});
 </script>
 
 <T

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

@@ -2,6 +2,7 @@ import { SvelteComponent } 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;

package/dist/components/internal/TeleportRay.svelte

@@ -4,8 +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";
-export let handedness;
-export let targetRay;
+let { handedness, targetRay } = $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,13 +45,14 @@ const { start, stop } = useTask(
   },
   { autoStart: false }
 );
-$:
+$effect.pre(() => {
   if ($intersection === void 0) {
     stop();
   } else {
     setCurvePoints(1);
     start();
   }
+});
 </script>
 
 <slot>

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

@@ -4,6 +4,7 @@ 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;

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,17 @@
 import { injectPlugin, watch } from '@threlte/core';
 import { writable } from 'svelte/store';
 import { usePointerControls } from './hook';
-import { useComponentHasEventHandlers } from './useComponentEventHandlers';
 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.
-            if (!hasEventHandlers)
+        watch(refStore, ($refStore) => {
+            if (props.$$events === undefined)
                 return;
-            addInteractiveObject(ref);
-            return () => removeInteractiveObject(ref);
+            addInteractiveObject($refStore, props.$$events);
+            return () => removeInteractiveObject($refStore);
         });
         return {
             onRefChange(ref) {

package/dist/plugins/pointerControls/setup.js

@@ -47,12 +47,12 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     hit.instanceId === hoveredObj.instanceId)) {
                 const { eventObject } = hoveredObj;
                 handContext.hovered.delete(getIntersectionId(hoveredObj));
-                const eventDispatcher = dispatchers.get(eventObject);
-                if (eventDispatcher) {
+                const events = dispatchers.get(eventObject);
+                if (events !== undefined) {
                     // Clear out intersects, they are outdated by now
                     const data = { ...hoveredObj, intersections };
-                    eventDispatcher('pointerout', data);
-                    eventDispatcher('pointerleave', data);
+                    events.pointerout?.(data);
+                    events.pointerleave?.(data);
                     // Deal with cancelation
                     handContext.pointerOverTarget.set(false);
                     cancelPointer([]);
@@ -80,7 +80,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
     };
     function pointerMissed(objects, event) {
         for (const object of objects) {
-            dispatchers.get(object)?.('pointermissed', event);
+            dispatchers.get(object)?.pointermissed?.(event);
         }
     }
     function processHits() {
@@ -115,23 +115,23 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 pointer: handContext.pointer.current,
                 ray: context.raycaster.ray
             };
-            const eventDispatcher = dispatchers.get(hit.eventObject);
-            if (eventDispatcher === undefined)
+            const events = dispatchers.get(hit.eventObject);
+            if (events === undefined)
                 return;
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));
-                if (eventDispatcher.hasEventListener('pointerover') ||
-                    eventDispatcher.hasEventListener('pointerenter') ||
-                    eventDispatcher.hasEventListener('pointerout') ||
-                    eventDispatcher.hasEventListener('pointerleave')) {
+                if (events.pointerover ||
+                    events.pointerenter ||
+                    events.pointerout ||
+                    events.pointerleave) {
                     const id = getIntersectionId(intersectionEvent);
                     const hoveredItem = handContext.hovered.get(id);
                     if (hoveredItem === undefined) {
                         // If the object wasn't previously hovered, book it and call its handler
                         handContext.hovered.set(id, intersectionEvent);
-                        eventDispatcher('pointerover', intersectionEvent);
-                        eventDispatcher('pointerenter', intersectionEvent);
+                        events.pointerover?.(intersectionEvent);
+                        events.pointerenter?.(intersectionEvent);
                         handContext.pointerOverTarget.set(true);
                     }
                     else if (hoveredItem.stopped) {
@@ -140,14 +140,14 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     }
                 }
                 // Call pointer move
-                eventDispatcher('pointermove', intersectionEvent);
+                events.pointermove?.(intersectionEvent);
             }
             else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                eventDispatcher.hasEventListener(name)) {
+                events[name]) {
                 // Missed events have to come first
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
                 // Call the event
-                eventDispatcher(name, intersectionEvent);
+                events[name]?.(intersectionEvent);
             }
             else if (isClickEvent && handContext.initialHits.includes(hit.eventObject)) {
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
@@ -167,7 +167,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         lastPosition.copy(targetRay.position);
     }, {
         fixedStep,
-        autostart: false
+        autoStart: false
     });
     watch(controller, (input) => {
         if (input === undefined)

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

@@ -1,11 +1,11 @@
 import type { Mesh, Raycaster, Intersection } from 'three';
-import type { CurrentWritable, createRawEventDispatcher } from '@threlte/core';
+import type { CurrentWritable } from '@threlte/core';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
 export interface Context {
     interactiveObjects: Mesh[];
     surfaces: Map<string, Mesh>;
     blockers: Map<string, Mesh>;
-    dispatchers: WeakMap<Mesh, ReturnType<typeof createRawEventDispatcher>>;
+    dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
     raycaster: Raycaster;
     compute: ComputeFunction;
 }

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

@@ -1,6 +1,6 @@
 import type { Mesh } from 'three';
 export declare const useTeleportControls: () => {
-    addSurface: (mesh: Mesh) => void;
+    addSurface: (mesh: Mesh, events: Record<string, (arg: unknown) => void>) => void;
     removeSurface: (mesh: Mesh) => void;
     addBlocker: (mesh: Mesh) => void;
     removeBlocker: (mesh: Mesh) => void;

package/dist/plugins/teleportControls/hook.js

@@ -1,16 +1,14 @@
-import { createRawEventDispatcher } from '@threlte/core';
 import { getTeleportContext } from './context';
 export const useTeleportControls = () => {
     const context = getTeleportContext();
-    const eventDispatcher = createRawEventDispatcher();
-    const addSurface = (mesh) => {
+    const addSurface = (mesh, events) => {
         // check if the object is already in the list
         if (context.interactiveObjects.indexOf(mesh) > -1) {
             return;
         }
         context.interactiveObjects.push(mesh);
         context.surfaces.set(mesh.uuid, mesh);
-        context.dispatchers.set(mesh, eventDispatcher);
+        context.dispatchers.set(mesh, events);
     };
     const removeSurface = (mesh) => {
         const index = context.interactiveObjects.indexOf(mesh);

package/dist/plugins/teleportControls/plugin.js

@@ -17,25 +17,25 @@ export const injectTeleportControlsPlugin = () => {
         const { addBlocker, addSurface, removeBlocker, removeSurface } = useTeleportControls();
         const refStore = writable(ref);
         const propsStore = writable(props);
-        watch([refStore, propsStore], ([nextRef, nextProps]) => {
+        watch([refStore, propsStore], ([$refStore, $propsStore]) => {
             if (isSurface) {
-                if (nextProps.teleportSurface === false) {
-                    removeSurface(nextRef);
+                if ($propsStore.teleportSurface === false) {
+                    removeSurface($refStore);
                     return noop;
                 }
                 else {
-                    addSurface(nextRef);
-                    return () => removeSurface(nextRef);
+                    addSurface($refStore, props.$$events ?? {});
+                    return () => removeSurface($refStore);
                 }
             }
             else if (isBlocker) {
                 if (props.teleportBlocker === false) {
-                    removeBlocker(nextRef);
+                    removeBlocker($refStore);
                     return noop;
                 }
                 else {
-                    addBlocker(nextRef);
-                    return () => removeBlocker(nextRef);
+                    addBlocker($refStore);
+                    return () => removeBlocker($refStore);
                 }
             }
             else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.1",
+  "version": "1.0.0-next.2",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
@@ -18,12 +18,12 @@
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^5.0.0-next.95",
+    "svelte": "^5.0.0-next.107",
     "three": "^0.163.0",
     "tslib": "^2.6.2",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.2"
+    "@threlte/core": "8.0.0-next.3"
   },
   "peerDependencies": {
     "svelte": ">=5",

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

@@ -1,4 +0,0 @@
-/// <reference types="svelte" />
-export declare const useComponentHasEventHandlers: () => {
-    hasEventHandlers: import("svelte/store").Writable<boolean>;
-};

package/dist/plugins/pointerControls/useComponentEventHandlers.js

@@ -1,13 +0,0 @@
-import { onMount } from 'svelte';
-import { writable } from 'svelte/store';
-// import { events } from './types'
-export const useComponentHasEventHandlers = () => {
-    const hasEventHandlers = writable(false);
-    onMount(() => {
-        // const match = Object.keys(component.$$.callbacks).some((callback) => events.includes(callback))
-        hasEventHandlers.set(true);
-    });
-    return {
-        hasEventHandlers
-    };
-};