@threlte/xr 1.0.0-next.2 → 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,10 +9,10 @@ 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>) => {}}
   />
 ```
 
@@ -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: (event: XRSessionEvent<'sessionstart'>) => void;
-            /** Called after an XRSession is terminated */
-            sessionend: (event: XRSessionEvent<'sessionend'>) => void;
-            /** Called when an XRSession is hidden or unfocused. */
-            visibilitychange: (event: globalThis.XRSessionEvent) => void;
-            /** Called when available inputsources change */
-            inputsourceschange: (event: globalThis.XRSessionEvent) => void;
-        };
-    };
-    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: (event: XRSessionEvent<'sessionstart'>) => void;
+        onsessionstart?: ((event: XRSessionEvent<'sessionstart'>) => void) | undefined;
         /** Called after an XRSession is terminated */
-        sessionend: (event: XRSessionEvent<'sessionend'>) => void;
+        onsessionend?: ((event: XRSessionEvent<'sessionend'>) => void) | undefined;
         /** Called when an XRSession is hidden or unfocused. */
-        visibilitychange: (event: globalThis.XRSessionEvent) => void;
+        onvisibilitychange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
         /** Called when available inputsources change */
-        inputsourceschange: (event: globalThis.XRSessionEvent) => void;
+        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/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/plugin.js

@@ -1,6 +1,7 @@
 import { injectPlugin, watch } from '@threlte/core';
 import { writable } from 'svelte/store';
 import { usePointerControls } from './hook';
+import { events } from './types';
 export const injectPointerControlsPlugin = () => {
     injectPlugin('threlte-pointer-controls', ({ ref, props }) => {
         if (!ref.isObject3D)
@@ -8,9 +9,12 @@ export const injectPointerControlsPlugin = () => {
         const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
         const refStore = writable(ref);
         watch(refStore, ($refStore) => {
-            if (props.$$events === undefined)
+            const hasEventHandlers = Object.entries(props).some(([key, value]) => {
+                return value !== undefined && events.includes(key);
+            });
+            if (!hasEventHandlers)
                 return;
-            addInteractiveObject($refStore, props.$$events);
+            addInteractiveObject($refStore, props);
             return () => removeInteractiveObject($refStore);
         });
         return {

package/dist/plugins/pointerControls/setup.js

@@ -24,10 +24,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             return;
         handContext.initialClick = [hit.point.x, hit.point.y, hit.point.z];
         handContext.initialHits = hits.map((hit) => hit.eventObject);
-        handleEvent('pointerdown', event);
+        handleEvent('onpointerdown', event);
     };
     const handlePointerUp = (event) => {
-        handleEvent('pointerup', event);
+        handleEvent('onpointerup', event);
     };
     const handleClick = (event) => {
         // If a click yields no results, pass it back to the user as a miss
@@ -35,7 +35,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (hits.length === 0) {
             pointerMissed(context.interactiveObjects, event);
         }
-        handleEvent('click', event);
+        handleEvent('onclick', event);
     };
     function cancelPointer(intersections) {
         for (const [, hoveredObj] of handContext.hovered) {
@@ -51,8 +51,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                 if (events !== undefined) {
                     // Clear out intersects, they are outdated by now
                     const data = { ...hoveredObj, intersections };
-                    events.pointerout?.(data);
-                    events.pointerleave?.(data);
+                    events.onpointerout?.(data);
+                    events.onpointerleave?.(data);
                     // Deal with cancelation
                     handContext.pointerOverTarget.set(false);
                     cancelPointer([]);
@@ -88,8 +88,8 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         return getHits();
     }
     const handleEvent = (name, event) => {
-        const isPointerMove = name === 'pointermove';
-        const isClickEvent = name === 'click' || name === 'contextmenu';
+        const isPointerMove = name === 'onpointermove';
+        const isClickEvent = name === 'onclick' || name === 'oncontextmenu';
         // Take care of unhover
         if (isPointerMove)
             cancelPointer(hits);
@@ -121,17 +121,17 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             if (isPointerMove) {
                 // Move event ...
                 handContext.pointer.update((value) => value.copy(intersectionEvent.point));
-                if (events.pointerover ||
-                    events.pointerenter ||
-                    events.pointerout ||
-                    events.pointerleave) {
+                if (events.onpointerover ||
+                    events.onpointerenter ||
+                    events.onpointerout ||
+                    events.onpointerleave) {
                     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);
-                        events.pointerover?.(intersectionEvent);
-                        events.pointerenter?.(intersectionEvent);
+                        events.onpointerover?.(intersectionEvent);
+                        events.onpointerenter?.(intersectionEvent);
                         handContext.pointerOverTarget.set(true);
                     }
                     else if (hoveredItem.stopped) {
@@ -140,10 +140,10 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
                     }
                 }
                 // Call pointer move
-                events.pointermove?.(intersectionEvent);
+                events.onpointermove?.(intersectionEvent);
             }
             else if ((!isClickEvent || handContext.initialHits.includes(hit.eventObject)) &&
-                events[name]) {
+                events[name] !== undefined) {
                 // Missed events have to come first
                 pointerMissed(context.interactiveObjects.filter((object) => !handContext.initialHits.includes(object)), event);
                 // Call the event
@@ -162,7 +162,7 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
         if (targetRay === undefined)
             return;
         if (targetRay.position.distanceTo(lastPosition) > EPSILON) {
-            handleEvent('pointermove');
+            handleEvent('onpointermove');
         }
         lastPosition.copy(targetRay.position);
     }, {
@@ -181,17 +181,18 @@ export const setupPointerControls = (context, handContext, fixedStep = 1 / 40) =
             input.targetRay.removeEventListener('select', handleClick);
         };
     });
-    // watch(hand, (input) => {
-    //   if (input === undefined) return
-    //   input.hand.addEventListener('pinchstart', handlePointerDown)
-    //   input.hand.addEventListener('pinchend', handlePointerUp)
-    //   input.hand.addEventListener('pinchend', handleClick)
-    //   return () => {
-    //     input.hand.removeEventListener('pinchstart', handlePointerDown)
-    //     input.hand.removeEventListener('pinchend', handlePointerUp)
-    //     input.hand.removeEventListener('pinchend', handleClick)
-    //   }
-    // })
+    watch(hand, (input) => {
+        if (input === undefined)
+            return;
+        input.hand.addEventListener('pinchstart', handlePointerDown);
+        input.hand.addEventListener('pinchend', handlePointerUp);
+        input.hand.addEventListener('pinchend', handleClick);
+        return () => {
+            input.hand.removeEventListener('pinchstart', handlePointerDown);
+            input.hand.removeEventListener('pinchend', handlePointerUp);
+            input.hand.removeEventListener('pinchend', handleClick);
+        };
+    });
     watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
         if (isPresenting && enabled) {
             start();

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

@@ -48,15 +48,15 @@ export interface PointerCaptureTarget {
     target: Element;
 }
 export type ThrelteXREvents = {
-    click: IntersectionEvent;
-    contextmenu: IntersectionEvent;
-    pointerup: IntersectionEvent;
-    pointerdown: IntersectionEvent;
-    pointerover: IntersectionEvent;
-    pointerout: IntersectionEvent;
-    pointerenter: IntersectionEvent;
-    pointerleave: IntersectionEvent;
-    pointermove: IntersectionEvent;
-    pointermissed: IntersectionEvent;
+    onclick: IntersectionEvent;
+    oncontextmenu: IntersectionEvent;
+    onpointerup: IntersectionEvent;
+    onpointerdown: IntersectionEvent;
+    onpointerover: IntersectionEvent;
+    onpointerout: IntersectionEvent;
+    onpointerenter: IntersectionEvent;
+    onpointerleave: IntersectionEvent;
+    onpointermove: IntersectionEvent;
+    onpointermissed: IntersectionEvent;
 };
 export declare const events: (keyof ThrelteXREvents)[];

package/dist/plugins/pointerControls/types.js

@@ -1,11 +1,11 @@
 export const events = [
-    'click',
-    'contextmenu',
-    'pointerup',
-    'pointerdown',
-    'pointerover',
-    'pointerout',
-    'pointerenter',
-    'pointerleave',
-    'pointermove'
+    'onclick',
+    'oncontextmenu',
+    'onpointerup',
+    'onpointerdown',
+    'onpointerover',
+    'onpointerout',
+    'onpointerenter',
+    'onpointerleave',
+    'onpointermove'
 ];

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

@@ -1,6 +1,8 @@
-import type { Mesh, Raycaster, Intersection } from 'three';
+import { type Mesh, Raycaster, type Intersection } from 'three';
 import type { CurrentWritable } from '@threlte/core';
+import type { TeleportControlsOptions } from '.';
 export type ComputeFunction = (context: Context, handContext: HandContext) => void;
+export type TeleportEvents = {};
 export interface Context {
     interactiveObjects: Mesh[];
     surfaces: Map<string, Mesh>;
@@ -8,6 +10,10 @@ export interface Context {
     dispatchers: WeakMap<Mesh, Record<string, (arg: unknown) => void>>;
     raycaster: Raycaster;
     compute: ComputeFunction;
+    addBlocker: (mesh: Mesh) => void;
+    removeBlocker: (mesh: Mesh) => void;
+    addSurface: (mesh: Mesh, events: TeleportEvents) => void;
+    removeSurface: (mesh: Mesh) => void;
 }
 export interface HandContext {
     hand: 'left' | 'right';
@@ -17,5 +23,5 @@ export interface HandContext {
 }
 export declare const getHandContext: (hand: 'left' | 'right') => HandContext;
 export declare const setHandContext: (hand: 'left' | 'right', context: HandContext) => void;
-export declare const getTeleportContext: () => Context;
-export declare const setTeleportContext: (context: Context) => void;
+export declare const useTeleportControls: () => Context;
+export declare const createTeleportContext: (compute: TeleportControlsOptions['compute']) => Context;

package/dist/plugins/teleportControls/context.js

@@ -1,4 +1,6 @@
+import { Raycaster } from 'three';
 import { getContext, setContext } from 'svelte';
+import { defaultComputeFunction } from './compute';
 const handContextKeys = {
     left: Symbol('teleport-controls-context-left-hand'),
     right: Symbol('teleport-controls-context-right-hand')
@@ -10,9 +12,50 @@ export const getHandContext = (hand) => {
 export const setHandContext = (hand, context) => {
     setContext(handContextKeys[hand], context);
 };
-export const getTeleportContext = () => {
+export const useTeleportControls = () => {
     return getContext(contextKey);
 };
-export const setTeleportContext = (context) => {
+export const createTeleportContext = (compute) => {
+    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, events);
+    };
+    const removeSurface = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.surfaces.delete(mesh.uuid);
+        context.dispatchers.delete(mesh);
+    };
+    const addBlocker = (mesh) => {
+        // check if the object is already in the list
+        if (context.interactiveObjects.indexOf(mesh) > -1) {
+            return;
+        }
+        context.interactiveObjects.push(mesh);
+        context.blockers.set(mesh.uuid, mesh);
+    };
+    const removeBlocker = (mesh) => {
+        const index = context.interactiveObjects.indexOf(mesh);
+        context.interactiveObjects.splice(index, 1);
+        context.blockers.delete(mesh.uuid);
+    };
+    const context = {
+        interactiveObjects: [],
+        surfaces: new Map(),
+        blockers: new Map(),
+        dispatchers: new WeakMap(),
+        raycaster: new Raycaster(),
+        compute: compute ?? defaultComputeFunction,
+        addBlocker,
+        removeBlocker,
+        addSurface,
+        removeSurface
+    };
     setContext(contextKey, context);
+    return context;
 };

package/dist/plugins/teleportControls/index.js

@@ -1,25 +1,16 @@
-import { Raycaster } from 'three';
 import { currentWritable, watch } from '@threlte/core';
-import { setTeleportContext, getTeleportContext, getHandContext } from './context';
+import { createTeleportContext, useTeleportControls, getHandContext } from './context';
 import { injectTeleportControlsPlugin } from './plugin';
-import { defaultComputeFunction } from './compute';
 import { setHandContext } from './context';
 import { setupTeleportControls } from './setup';
 import { teleportState } from '../../internal/stores';
 let controlsCounter = 0;
 export const teleportControls = (handedness, options) => {
-    if (getTeleportContext() === undefined) {
+    if (useTeleportControls() === undefined) {
         injectTeleportControlsPlugin();
-        setTeleportContext({
-            interactiveObjects: [],
-            surfaces: new Map(),
-            blockers: new Map(),
-            dispatchers: new WeakMap(),
-            raycaster: new Raycaster(),
-            compute: options?.compute ?? defaultComputeFunction
-        });
+        createTeleportContext(options?.compute);
     }
-    const context = getTeleportContext();
+    const context = useTeleportControls();
     if (getHandContext(handedness) === undefined) {
         const enabled = options?.enabled ?? true;
         controlsCounter += enabled ? 1 : -1;

package/dist/plugins/teleportControls/plugin.js

@@ -1,7 +1,7 @@
 import { writable } from 'svelte/store';
 import { watch } from '@threlte/core';
 import { injectPlugin } from '@threlte/core';
-import { useTeleportControls } from './hook';
+import { useTeleportControls } from './context';
 /**
  * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
  */
@@ -24,7 +24,7 @@ export const injectTeleportControlsPlugin = () => {
                     return noop;
                 }
                 else {
-                    addSurface($refStore, props.$$events ?? {});
+                    addSurface($refStore, props);
                     return () => removeSurface($refStore);
                 }
             }

package/dist/plugins/teleportControls/setup.js

@@ -49,7 +49,7 @@ export const setupTeleportControls = (context, handContext, fixedStep = 1 / 40)
         handContext.hovered.set(intersect);
     }, {
         fixedStep,
-        autostart: false
+        autoStart: false
     });
     watch([useXR().isPresenting, handContext.enabled], ([isPresenting, enabled]) => {
         if (isPresenting && enabled) {

package/dist/types.d.ts

@@ -4,16 +4,26 @@ import type { XRControllerModel } from 'three/examples/jsm/webxr/XRControllerMod
 import type { XRHandModel } from 'three/examples/jsm/webxr/XRHandModelFactory.js';
 export type XRSessionEventType = 'sessionstart' | 'sessionend' | 'visibilitychange' | 'frameratechange';
 export type XRControllerEventType = 'select' | 'selectstart' | 'selectend' | 'squeeze' | 'squeezeend' | 'squeezestart' | 'disconnected' | 'connected';
+export type XRControllerEvents = {
+    onconnected?: XRControllerEvent<'connected'>;
+    ondisconnected?: XRControllerEvent<'disconnected'>;
+    onselect?: XRControllerEvent<'select'>;
+    onselectstart?: XRControllerEvent<'selectstart'>;
+    onselectend?: XRControllerEvent<'selectend'>;
+    onsqueeze?: XRControllerEvent<'squeeze'>;
+    onsqueezeend?: XRControllerEvent<'squeezeend'>;
+    onsqueezestart?: XRControllerEvent<'squeezestart'>;
+};
 export type XRHandEventType = 'pinchstart' | 'pinchend' | 'connected' | 'disconnected';
-export type XRSessionEvent<Type = XRSessionEventType> = Event & {
+export type XRSessionEvent<Type = XRSessionEventType> = (event: Event & {
     type: Type;
     target: XRSession;
-};
-export type XRControllerEvent<Type = XRControllerEventType> = Event & {
+}) => void;
+export type XRControllerEvent<Type = XRControllerEventType> = (event: Event & {
     type: Type;
     target: Group;
     data: XRInputSource;
-};
+}) => void;
 export type XRController = {
     targetRay: XRTargetRaySpace;
     grip: XRGripSpace;
@@ -26,12 +36,18 @@ export type XRHand = {
     model?: XRHandModel;
     inputSource: globalThis.XRHand;
 };
-export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? {
+export type XRHandEvents = {
+    onconnected?: XRHandEvent<'connected'>;
+    ondisconnected?: XRHandEvent<'disconnected'>;
+    onpinchstart?: XRHandEvent<'pinchstart'>;
+    onpinchend?: XRHandEvent<'pinchend'>;
+};
+export type XRHandEvent<Type = XRHandEventType> = Type extends 'connected' | 'disconnected' ? (event: {
     type: Type;
     target: XRHandSpace;
     data: XRInputSource;
-} : Type extends 'pinchstart' | 'pinchend' ? {
+}) => void : Type extends 'pinchstart' | 'pinchend' ? (event: {
     type: Type;
     handedness: 'left' | 'right';
     target: null;
-} : never;
+}) => void : never;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.2",
+  "version": "1.0.0-next.3",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {
@@ -23,11 +23,11 @@
     "tslib": "^2.6.2",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.3"
+    "@threlte/core": "8.0.0-next.6"
   },
   "peerDependencies": {
     "svelte": ">=5",
-    "three": ">=0.152"
+    "three": ">=0.155"
   },
   "type": "module",
   "exports": {

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

@@ -1,7 +0,0 @@
-import type { Mesh } from 'three';
-export declare const useTeleportControls: () => {
-    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,38 +0,0 @@
-import { getTeleportContext } from './context';
-export const useTeleportControls = () => {
-    const context = getTeleportContext();
-    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, events);
-    };
-    const removeSurface = (mesh) => {
-        const index = context.interactiveObjects.indexOf(mesh);
-        context.interactiveObjects.splice(index, 1);
-        context.surfaces.delete(mesh.uuid);
-        context.dispatchers.delete(mesh);
-    };
-    const addBlocker = (mesh) => {
-        // check if the object is already in the list
-        if (context.interactiveObjects.indexOf(mesh) > -1) {
-            return;
-        }
-        context.interactiveObjects.push(mesh);
-        context.blockers.set(mesh.uuid, mesh);
-    };
-    const removeBlocker = (mesh) => {
-        const index = context.interactiveObjects.indexOf(mesh);
-        context.interactiveObjects.splice(index, 1);
-        context.blockers.delete(mesh.uuid);
-    };
-    return {
-        addSurface,
-        removeSurface,
-        addBlocker,
-        removeBlocker
-    };
-};