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

package/dist/components/ARButton.svelte

@@ -4,8 +4,8 @@
 
 ```svelte
   <ARButton
-    on:error={(event) => {}}
-    on:click={(event) => {}}
+    onerror={(event) => {}}
+    onclick={(event) => {}}
   />
 ```
 -->

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

@@ -10,6 +10,16 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
+        children?: ((this: void, args_0: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        onclick?: ((event: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+            nativeEvent: MouseEvent;
+        }) => void) | undefined;
+        onerror?: ((error: Error) => void) | undefined;
     }, "mode" | "sessionInit"> & {
         sessionInit?: (XRSessionInit & {
             domOverlay?: {
@@ -30,8 +40,8 @@ export type ArButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <ARButton
- *   on:error={(event) => {}}
- *   on:click={(event) => {}}
+ *   onerror={(event) => {}}
+ *   onclick={(event) => {}}
  * />
  * ```
  */

package/dist/components/Controller.svelte

@@ -19,11 +19,33 @@ const stores = {
 };
 </script>
 
-<script lang="ts">let { left, right, hand, ...props } = $props();
+<script lang="ts">let {
+  left,
+  right,
+  hand,
+  onconnected,
+  ondisconnected,
+  onselect,
+  onselectend,
+  onselectstart,
+  onsqueeze,
+  onsqueezeend,
+  onsqueezestart
+} = $props();
 const handedness = writable(left ? "left" : right ? "right" : hand);
 $effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-controllerEvents[$handedness].set(props.$$events);
-$effect.pre(() => controllerEvents[$handedness].set(props.$$events));
+$effect.pre(
+  () => controllerEvents[$handedness].set({
+    onconnected,
+    ondisconnected,
+    onselect,
+    onselectend,
+    onselectstart,
+    onsqueeze,
+    onsqueezeend,
+    onsqueezestart
+  })
+);
 let store = $derived(stores[$handedness]);
 let grip = $derived($store?.grip);
 let targetRay = $derived($store?.targetRay);

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import type { XRControllerEvent } from '../types';
+import type { XRControllerEvents } from '../types';
 declare const __propDef: {
-    props: {
+    props: (XRControllerEvents & ({
         /** Whether the controller should be matched with the left hand. */
         left: true;
         right?: undefined;
@@ -16,6 +16,13 @@ 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: {};
@@ -26,16 +33,6 @@ declare const __propDef: {
         'teleport-ray': {};
         'teleport-cursor': {};
     };
-    events: {
-        connected: XRControllerEvent<'connected'>;
-        disconnected: XRControllerEvent<'disconnected'>;
-        select: XRControllerEvent<'select'>;
-        selectstart: XRControllerEvent<'selectstart'>;
-        selectend: XRControllerEvent<'selectend'>;
-        squeeze: XRControllerEvent<'squeeze'>;
-        squeezeend: XRControllerEvent<'squeezeend'>;
-        squeezestart: XRControllerEvent<'squeezestart'>;
-    };
 };
 export type ControllerProps = typeof __propDef.props;
 export type ControllerEvents = typeof __propDef.events;

package/dist/components/Hand.svelte

@@ -13,12 +13,19 @@ const stores = {
 };
 </script>
 
-<script lang="ts">let { left, right, hand, ...props } = $props();
+<script lang="ts">let { left, right, hand, onconnected, ondisconnected, onpinchend, onpinchstart } = $props();
 const { xr } = useThrelte().renderer;
 const space = xr.getReferenceSpace();
 const handedness = writable(left ? "left" : right ? "right" : hand);
 $effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-$effect.pre(() => handEvents[$handedness].set(props.$$events));
+$effect.pre(
+  () => handEvents[$handedness].set({
+    onconnected,
+    ondisconnected,
+    onpinchend,
+    onpinchstart
+  })
+);
 let children = new Group();
 const { start, stop } = useTask(
   () => {

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

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import type { XRHandEvent } from '../types';
+import type { XRHandEvents } from '../types';
 declare const __propDef: {
-    props: ({
+    props: (XRHandEvents & ({
         /** Whether the XRHand should be matched with the left hand. */
         left: true;
         right?: undefined;
@@ -16,25 +16,19 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
-    }) & {
-        $$events: {
-            connected: XRHandEvent<'connected'>;
-            disconnected: XRHandEvent<'disconnected'>;
-            pinchstart: XRHandEvent<'pinchstart'>;
-            pinchend: XRHandEvent<'pinchend'>;
-        };
+    })) & {
+        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: {};
     };
-    events: {
-        connected: XRHandEvent<'connected'>;
-        disconnected: XRHandEvent<'disconnected'>;
-        pinchstart: XRHandEvent<'pinchstart'>;
-        pinchend: XRHandEvent<'pinchend'>;
-    };
 };
 export type HandProps = typeof __propDef.props;
 export type HandEvents = typeof __propDef.events;

package/dist/components/VRButton.svelte

@@ -4,8 +4,8 @@
 
 ```svelte
   <VRButton
-    on:error={(event) => {}}
-    on:click={(event) => {}}
+    onerror={(event) => {}}
+    onclick={(event) => {}}
   />
 ```
 -->

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

@@ -10,6 +10,16 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
+        children?: ((this: void, args_0: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        onclick?: ((event: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+            nativeEvent: MouseEvent;
+        }) => void) | undefined;
+        onerror?: ((error: Error) => void) | undefined;
     }, "mode" | "sessionInit">;
     events: {
         [evt: string]: CustomEvent<any>;
@@ -24,8 +34,8 @@ export type VrButtonSlots = typeof __propDef.slots;
  *
  * ```svelte
  * <VRButton
- *   on:error={(event) => {}}
- *   on:click={(event) => {}}
+ *   onerror={(event) => {}}
+ *   onclick={(event) => {}}
  * />
  * ```
  */

package/dist/components/XR.svelte

@@ -9,16 +9,16 @@ This should be placed within a Threlte `<Canvas />`.
     foveation={1}
     frameRate={90}
     referenceSpace='local-floor'
-    on:sessionstart={(event: XREvent<XRManagerEvent>) => {}}
-    on:sessionend={(event: XREvent<XRManagerEvent>) => {}}
-    on:visibilitychange={(event: XREvent<XRSessionEvent>) => {}}
-    on:inputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
+    onsessionstart={(event: XREvent<XRManagerEvent>) => {}}
+    onsessionend={(event: XREvent<XRManagerEvent>) => {}}
+    onvisibilitychange={(event: XREvent<XRSessionEvent>) => {}}
+    oninputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
   />
 ```
 
 -->
 <script lang="ts">import { onMount } from "svelte";
-import { createRawEventDispatcher, useThrelte, watch } from "@threlte/core";
+import { useThrelte, watch } from "@threlte/core";
 import {
   isHandTracking,
   isPresenting,
@@ -34,7 +34,12 @@ let {
   foveation = 1,
   frameRate,
   referenceSpace = "local-floor",
-  ...props
+  onsessionstart,
+  onsessionend,
+  onvisibilitychange,
+  oninputsourceschange,
+  fallback,
+  children
 } = $props();
 const { renderer, renderMode } = useThrelte();
 const { xr } = renderer;
@@ -45,22 +50,22 @@ setupControllers();
 setupHands();
 const handleSessionStart = () => {
   isPresenting.set(true);
-  props.$$events?.sessionstart?.({ type: "sessionstart", target: $session });
+  onsessionstart?.({ type: "sessionstart", target: $session });
 };
 const handleSessionEnd = () => {
-  props.$$events?.sessionend?.({ type: "sessionend", target: $session });
+  onsessionend?.({ type: "sessionend", target: $session });
   isPresenting.set(false);
   session.set(void 0);
 };
 const handleVisibilityChange = (event) => {
-  props.$$events?.visibilitychange?.({ ...event, target: $session });
+  onvisibilitychange?.({ ...event, target: $session });
 };
 const handleInputSourcesChange = (event) => {
   $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand);
-  props.$$events?.inputsourceschange?.({ ...event, target: $session });
+  oninputsourceschange?.({ ...event, target: $session });
 };
 const handleFramerateChange = (event) => {
-  props.$$events?.visibilitychange?.({ ...event, target: $session });
+  onvisibilitychange?.({ ...event, target: $session });
 };
 const updateTargetFrameRate = (frameRate2) => {
   if (frameRate2 === void 0)
@@ -113,7 +118,7 @@ $effect.pre(() => {
 </script>
 
 {#if $isPresenting}
-  <slot />
+  {@render children?.()}
 {:else}
-  <slot name="fallback" />
+  {@render fallback?.()}
 {/if}

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

@@ -22,32 +22,25 @@ declare const __propDef: {
         frameRate?: number | undefined;
         /** Type of WebXR reference space to use. Default is `local-floor` */
         referenceSpace?: XRReferenceSpaceType | undefined;
-    } & {
-        $$events: {
-            /** Called as an XRSession is requested */
-            sessionstart(): XRSessionEvent<'sessionstart'>;
-            /** Called after an XRSession is terminated */
-            sessionend(): XRSessionEvent<'sessionend'>;
-            /** Called when an XRSession is hidden or unfocused. */
-            visibilitychange(): globalThis.XRSessionEvent;
-            /** Called when available inputsources change */
-            inputsourceschange(): globalThis.XRSessionEvent;
-        };
-    };
-    slots: {
-        default: {};
-        fallback: {};
-    };
-    events: {
+        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;
         /** Called as an XRSession is requested */
-        sessionstart(): XRSessionEvent<'sessionstart'>;
+        onsessionstart?: ((event: XRSessionEvent<'sessionstart'>) => void) | undefined;
         /** Called after an XRSession is terminated */
-        sessionend(): XRSessionEvent<'sessionend'>;
+        onsessionend?: ((event: XRSessionEvent<'sessionend'>) => void) | undefined;
         /** Called when an XRSession is hidden or unfocused. */
-        visibilitychange(): globalThis.XRSessionEvent;
+        onvisibilitychange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
         /** Called when available inputsources change */
-        inputsourceschange(): globalThis.XRSessionEvent;
+        oninputsourceschange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
+    slots: {};
 };
 export type XrProps = typeof __propDef.props;
 export type XrEvents = typeof __propDef.events;
@@ -62,10 +55,10 @@ export type XrSlots = typeof __propDef.slots;
  *   foveation={1}
  *   frameRate={90}
  *   referenceSpace='local-floor'
- *   on:sessionstart={(event: XREvent<XRManagerEvent>) => {}}
- *   on:sessionend={(event: XREvent<XRManagerEvent>) => {}}
- *   on:visibilitychange={(event: XREvent<XRSessionEvent>) => {}}
- *   on:inputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
+ *   onsessionstart={(event: XREvent<XRManagerEvent>) => {}}
+ *   onsessionend={(event: XREvent<XRManagerEvent>) => {}}
+ *   onvisibilitychange={(event: XREvent<XRSessionEvent>) => {}}
+ *   oninputsourceschange={(event: XREvent<XRSessionEvent>) => {}}
  * />
  * ```
  */

package/dist/components/XRButton.svelte

@@ -12,28 +12,28 @@ display info about your WebXR session. This is aliased by `ARButton` and
     }}
     force={'enter' | 'exit' | undefined}
     styled={'true' | 'false'}
-    on:error={(event) => {}}
-    on:click={(event) => {}}
+    onerror={(event) => {}}
+    onclick={(event) => {}}
   />
 ```
 -->
 <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, ...props } = $props();
+let { mode, sessionInit, force, styled = true, onclick, onerror, children, ...props } = $props();
 const handleButtonClick = async (nativeEvent, state) => {
   if (!$xr) {
     throw new Error(
       "The <XR> component was not created. This is required to start an XR session."
     );
   }
-  props.$$events?.click?.({ state, nativeEvent });
+  onclick?.({ state, nativeEvent });
   if (state !== "supported")
     return;
   try {
     await toggleXRSession(mode, sessionInit, force);
   } catch (error) {
-    props.$$events?.error?.(error);
+    onerror?.(error);
   }
 };
 let modeText = $derived(
@@ -62,13 +62,15 @@ let style = $derived(
 
 {#await getXRSupportState(mode) then state}
   <button
-    on:click={(event) => {
+    onclick={(event) => {
       handleButtonClick(event, state)
     }}
     {...props}
     {style}
   >
-    {#if state === 'unsupported'}
+    {#if children}
+      {@render children?.({ state })}
+    {:else if state === 'unsupported'}
       {modeText} unsupported
     {:else if state === 'insecure'}
       HTTPS needed

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

@@ -18,6 +18,16 @@ 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: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }) => typeof import("svelte").SnippetReturn & {
+            _: "functions passed to {@render ...} tags must use the `Snippet` type imported from \"svelte\"";
+        }) | undefined;
+        onclick?: ((event: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+            nativeEvent: MouseEvent;
+        }) => void) | undefined;
+        onerror?: ((error: Error) => void) | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
@@ -40,8 +50,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 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;