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

package/dist/components/ARButton.svelte

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

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

@@ -10,6 +10,14 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
+        children?: import("svelte").Snippet<[{
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }]> | undefined;
+        onclick?: ((event: {
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+            nativeEvent: MouseEvent;
+        }) => void) | undefined;
+        onerror?: ((error: Error) => void) | undefined;
     }, "mode" | "sessionInit"> & {
         sessionInit?: (XRSessionInit & {
             domOverlay?: {
@@ -30,8 +38,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,40 @@ 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,
+  children,
+  grip: gripSnippet,
+  targetRay: targetRaySnippet,
+  pointerRay: pointerRaySnippet,
+  pointerCursor: pointerCursorSnippet,
+  teleportRay: teleportRaySnippet,
+  teleportCursor: teleportCursorSnippet
+} = $props();
 const handedness = writable(left ? "left" : right ? "right" : hand);
 $effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-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);
@@ -35,26 +64,25 @@ let hasTeleportControls = $derived($teleportState[$handedness].enabled);
 {#if !$isHandTracking}
   {#if grip}
     <T is={grip}>
-      <slot>
+      {#if children}
+        {@render children?.()}
+      {:else}
         <T is={model} />
-      </slot>
+      {/if}
 
-      <slot name="grip" />
+      {@render gripSnippet?.()}
     </T>
   {/if}
 
   {#if targetRay}
     <T is={targetRay}>
-      <slot name="target-ray" />
+      {@render targetRaySnippet?.()}
 
       {#if hasPointerControls || hasTeleportControls}
-        {#if $$slots['pointer-ray']}
-          <ShortRay handedness={$handedness}>
-            <slot name="pointer-ray" />
-          </ShortRay>
-        {:else}
-          <ShortRay handedness={$handedness} />
-        {/if}
+        <ShortRay
+          handedness={$handedness}
+          children={pointerRaySnippet}
+        />
       {/if}
     </T>
   {/if}
@@ -62,36 +90,22 @@ let hasTeleportControls = $derived($teleportState[$handedness].enabled);
 
 <ScenePortal>
   {#if hasPointerControls}
-    {#if $$slots['pointer-cursor']}
-      <PointerCursor handedness={$handedness}>
-        <slot name="pointer-cursor" />
-      </PointerCursor>
-    {:else}
-      <PointerCursor handedness={$handedness} />
-    {/if}
+    <PointerCursor
+      handedness={$handedness}
+      children={pointerCursorSnippet}
+    />
   {/if}
 
   {#if hasTeleportControls && targetRay !== undefined}
-    {#if $$slots['teleport-ray']}
-      <TeleportRay
-        {targetRay}
-        handedness={$handedness}
-      >
-        <slot name="teleport-ray" />
-      </TeleportRay>
-    {:else}
-      <TeleportRay
-        {targetRay}
-        handedness={$handedness}
-      />
-    {/if}
+    <TeleportRay
+      {targetRay}
+      handedness={$handedness}
+      children={teleportRaySnippet}
+    />
 
-    {#if $$slots['teleport-ray']}
-      <TeleportCursor handedness={$handedness}>
-        <slot name="teleport-cursor" />
-      </TeleportCursor>
-    {:else}
-      <TeleportCursor handedness={$handedness} />
-    {/if}
+    <TeleportCursor
+      handedness={$handedness}
+      children={teleportCursorSnippet}
+    />
   {/if}
 </ScenePortal>

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

@@ -1,7 +1,16 @@
 import { SvelteComponent } from "svelte";
-import type { XRControllerEvent } from '../types';
+import type { XRControllerEvents } from '../types';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
     props: {
+        children?: Snippet<[]> | undefined;
+        grip?: Snippet<[]> | undefined;
+        targetRay?: Snippet<[]> | undefined;
+        pointerRay?: Snippet<[]> | undefined;
+        pointerCursor?: Snippet<[]> | undefined;
+        teleportRay?: Snippet<[]> | undefined;
+        teleportCursor?: Snippet<[]> | undefined;
+    } & XRControllerEvents & ({
         /** Whether the controller should be matched with the left hand. */
         left: true;
         right?: undefined;
@@ -16,26 +25,11 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
-    };
-    slots: {
-        default: {};
-        grip: {};
-        'target-ray': {};
-        'pointer-ray': {};
-        'pointer-cursor': {};
-        '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'>;
+        [evt: string]: CustomEvent<any>;
     };
+    slots: {};
 };
 export type ControllerProps = typeof __propDef.props;
 export type ControllerEvents = typeof __propDef.events;

package/dist/components/Hand.svelte

@@ -13,30 +13,52 @@ const stores = {
 };
 </script>
 
-<script lang="ts">let { left, right, hand, ...props } = $props();
-const { xr } = useThrelte().renderer;
+<script lang="ts">let {
+  left,
+  right,
+  hand,
+  onconnected,
+  ondisconnected,
+  onpinchend,
+  onpinchstart,
+  children,
+  targetRay,
+  wrist
+} = $props();
+const { renderer, scheduler, renderStage } = useThrelte();
+const { xr } = renderer;
 const space = xr.getReferenceSpace();
 const handedness = writable(left ? "left" : right ? "right" : hand);
 $effect.pre(() => handedness.set(left ? "left" : right ? "right" : hand));
-$effect.pre(() => handEvents[$handedness].set(props.$$events));
-let children = new Group();
+$effect.pre(
+  () => handEvents[$handedness].set({
+    onconnected,
+    ondisconnected,
+    onpinchend,
+    onpinchstart
+  })
+);
+let group = new Group();
 const { start, stop } = useTask(
   () => {
     const frame = xr.getFrame();
-    const joint = inputSource.get("wrist");
+    const joint = inputSource?.get("wrist");
     if (joint === void 0 || space === null)
       return;
     const pose = frame.getJointPose?.(joint, space);
     if (pose === void 0 || pose === null)
       return;
     const { position, orientation } = pose.transform;
-    children.position.set(position.x, position.y, position.z);
-    children.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
+    group.position.set(position.x, position.y, position.z);
+    group.quaternion.set(orientation.x, orientation.y, orientation.z, orientation.w);
   },
-  { autoStart: false }
+  {
+    autoStart: false,
+    stage: scheduler.createStage(Symbol("xr-hand-stage"), { before: renderStage })
+  }
 );
 $effect.pre(() => {
-  if ($isHandTracking && ($$slots.wrist || $$slots.default) && inputSource) {
+  if ($isHandTracking && (wrist !== void 0 || children !== void 0) && inputSource) {
     start();
   } else {
     stop();
@@ -49,23 +71,23 @@ let model = $derived($store?.model);
 
 {#if $store?.hand && $isHandTracking}
   <T is={$store.hand}>
-    {#if $$slots.default === undefined}
+    {#if children === undefined}
       <T is={model} />
     {/if}
   </T>
 
-  {#if $$slots['target-ray'] !== undefined}
+  {#if targetRay !== undefined}
     <T is={$store.targetRay}>
-      <slot name="target-ray" />
+      {@render targetRay()}
     </T>
   {/if}
 {/if}
 
 {#if $isHandTracking}
   <ScenePortal>
-    <T is={children}>
-      <slot name="wrist" />
-      <slot />
+    <T is={group}>
+      {@render wrist?.()}
+      {@render children?.()}
     </T>
   </ScenePortal>
 {/if}

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

@@ -1,7 +1,12 @@
 import { SvelteComponent } from "svelte";
-import type { XRHandEvent } from '../types';
+import type { XRHandEvents } from '../types';
+import type { Snippet } from 'svelte';
 declare const __propDef: {
-    props: ({
+    props: {
+        children?: Snippet<[]> | undefined;
+        targetRay?: Snippet<[]> | undefined;
+        wrist?: Snippet<[]> | undefined;
+    } & XRHandEvents & ({
         /** Whether the XRHand should be matched with the left hand. */
         left: true;
         right?: undefined;
@@ -16,25 +21,11 @@ declare const __propDef: {
         hand: 'left' | 'right';
         left?: undefined;
         right?: undefined;
-    }) & {
-        $$events: {
-            connected: XRHandEvent<'connected'>;
-            disconnected: XRHandEvent<'disconnected'>;
-            pinchstart: XRHandEvent<'pinchstart'>;
-            pinchend: XRHandEvent<'pinchend'>;
-        };
-    };
-    slots: {
-        'target-ray': {};
-        wrist: {};
-        default: {};
-    };
+    });
     events: {
-        connected: XRHandEvent<'connected'>;
-        disconnected: XRHandEvent<'disconnected'>;
-        pinchstart: XRHandEvent<'pinchstart'>;
-        pinchend: XRHandEvent<'pinchend'>;
+        [evt: string]: CustomEvent<any>;
     };
+    slots: {};
 };
 export type HandProps = typeof __propDef.props;
 export type HandEvents = typeof __propDef.events;

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

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

package/dist/components/VRButton.svelte

@@ -4,18 +4,19 @@
 
 ```svelte
   <VRButton
-    on:error={(event) => {}}
-    on:click={(event) => {}}
+    onerror={(event) => {}}
+    onclick={(event) => {}}
   />
 ```
 -->
 <script lang="ts">import XRButton from "./XRButton.svelte";
+import { defaultFeatures } from "../internal/defaultFeatures";
 let { ...props } = $props();
 </script>
 
 <XRButton
   sessionInit={{
-    optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
+    ...defaultFeatures
   }}
   {...props}
   mode="immersive-vr"

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

@@ -10,6 +10,14 @@ declare const __propDef: {
         }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
+        children?: import("svelte").Snippet<[{
+            state: "blocked" | "unsupported" | "insecure" | "supported";
+        }]> | 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 +32,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

@@ -1,5 +1,6 @@
 /// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
+import { type Snippet } from 'svelte';
 import type { XRSessionEvent } from '../types';
 declare const __propDef: {
     props: {
@@ -22,32 +23,21 @@ 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?: Snippet<[]> | undefined;
+        children?: Snippet<[]> | 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 +52,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,37 @@ 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 +71,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

@@ -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) => {}}
  * />
  * ```
  */