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

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

@@ -1,38 +1,5 @@
 /// <reference types="webxr" />
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
-        mode: XRSessionMode;
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | 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?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ArButtonProps = typeof __propDef.props;
-export type ArButtonEvents = typeof __propDef.events;
-export type ArButtonSlots = typeof __propDef.slots;
+/// <reference types="svelte" />
 /**
  * `<ARButton />` is an HTML `<button />` that can be used to init and display info about your immersive AR session.
  *
@@ -43,6 +10,11 @@ export type ArButtonSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class ArButton extends SvelteComponent<ArButtonProps, ArButtonEvents, ArButtonSlots> {
-}
-export {};
+declare const ArButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit"> & {
+    sessionInit?: (XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | undefined;
+    }) | undefined;
+}, {}, "">;
+export default ArButton;

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

@@ -1,40 +1,28 @@
-import { SvelteComponent } from "svelte";
 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;
-        hand?: undefined;
-    } | {
-        /** Whether the controller should be matched with the right hand. */
-        right: true;
-        left?: undefined;
-        hand?: undefined;
-    } | {
-        /** Whether the controller should be matched with the left or right hand. */
-        hand: 'left' | 'right';
-        left?: undefined;
-        right?: undefined;
-    });
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ControllerProps = typeof __propDef.props;
-export type ControllerEvents = typeof __propDef.events;
-export type ControllerSlots = typeof __propDef.slots;
 /** `<Controller />` represents a THREE.XRTargetRaySpace, a THREE.XRGripSpace, and a controller model. */
-export default class Controller extends SvelteComponent<ControllerProps, ControllerEvents, ControllerSlots> {
-}
-export {};
+declare const Controller: import("svelte").Component<{
+    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;
+    hand?: undefined;
+} | {
+    /** Whether the controller should be matched with the right hand. */
+    right: true;
+    left?: undefined;
+    hand?: undefined;
+} | {
+    /** Whether the controller should be matched with the left or right hand. */
+    hand: 'left' | 'right';
+    left?: undefined;
+    right?: undefined;
+}), {}, "">;
+export default Controller;

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

@@ -1,35 +1,23 @@
-import { SvelteComponent } from "svelte";
 import type { XRHandEvents } from '../types';
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    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;
-        hand?: undefined;
-    } | {
-        /** Whether the XRHand should be matched with the right hand. */
-        right: true;
-        left?: undefined;
-        hand?: undefined;
-    } | {
-        /** Whether the XRHand should be matched with the left or right hand. */
-        hand: 'left' | 'right';
-        left?: undefined;
-        right?: undefined;
-    });
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type HandProps = typeof __propDef.props;
-export type HandEvents = typeof __propDef.events;
-export type HandSlots = typeof __propDef.slots;
-export default class Hand extends SvelteComponent<HandProps, HandEvents, HandSlots> {
-}
-export {};
+declare const Hand: import("svelte").Component<{
+    children?: Snippet<[]> | undefined;
+    targetRay?: Snippet<[]> | undefined;
+    wrist?: Snippet<[]> | undefined;
+} & XRHandEvents & ({
+    /** Whether the XRHand should be matched with the left hand. */
+    left: true;
+    right?: undefined;
+    hand?: undefined;
+} | {
+    /** Whether the XRHand should be matched with the right hand. */
+    right: true;
+    left?: undefined;
+    hand?: undefined;
+} | {
+    /** Whether the XRHand should be matched with the left or right hand. */
+    hand: 'left' | 'right';
+    left?: undefined;
+    right?: undefined;
+}), {}, "">;
+export default Hand;

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

@@ -1,18 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        children?: import("svelte").Snippet<[]> | undefined;
+/// <reference types="svelte" />
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type HeadsetProps = typeof __propDef.props;
-export type HeadsetEvents = typeof __propDef.events;
-export type HeadsetSlots = typeof __propDef.slots;
-export default class Headset extends SvelteComponent<HeadsetProps, HeadsetEvents, HeadsetSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const Headset: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type Headset = InstanceType<typeof Headset>;
+export default Headset;

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

@@ -1,32 +1,4 @@
-/// <reference types="webxr" />
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
-        mode: XRSessionMode;
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | 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>;
-    };
-    slots: {};
-};
-export type VrButtonProps = typeof __propDef.props;
-export type VrButtonEvents = typeof __propDef.events;
-export type VrButtonSlots = typeof __propDef.slots;
+/// <reference types="svelte" />
 /**
  * `<VRButton />` is an HTML `<button />` that can be used to init and display info about your immersive VR session.
  *
@@ -37,6 +9,5 @@ export type VrButtonSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class VrButton extends SvelteComponent<VrButtonProps, VrButtonEvents, VrButtonSlots> {
-}
-export {};
+declare const VrButton: import("svelte").Component<Omit<Record<string, any>, "mode" | "sessionInit">, {}, "">;
+export default VrButton;

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

@@ -1,47 +1,6 @@
 /// <reference types="webxr" />
-import { SvelteComponent } from "svelte";
 import { type Snippet } from 'svelte';
 import type { XRSessionEvent } from '../types';
-declare const __propDef: {
-    props: {
-        /**
-         * Enables foveated rendering. Default is `1`, the three.js default.
-         *
-         * 0 = no foveation, full resolution
-         *
-         * 1 = maximum foveation, the edges render at lower resolution
-         */
-        foveation?: number | undefined;
-        /**
-         * The target framerate for the XRSystem. Smaller rates give more CPU headroom at the cost of responsiveness.
-         * Recommended range is `72`-`120`. Default is unset and left to the device.
-         * @note If your experience cannot effectively reach the target framerate, it will be subject to frame reprojection
-         * which will halve the effective framerate. Choose a conservative estimate that balances responsiveness and
-         * headroom based on your experience.
-         * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Rendering#refresh_rate_and_frame_rate
-         */
-        frameRate?: number | undefined;
-        /** Type of WebXR reference space to use. Default is `local-floor` */
-        referenceSpace?: XRReferenceSpaceType | undefined;
-        fallback?: Snippet<[]> | undefined;
-        children?: Snippet<[]> | undefined;
-        /** Called as an XRSession is requested */
-        onsessionstart?: ((event: XRSessionEvent<'sessionstart'>) => void) | undefined;
-        /** Called after an XRSession is terminated */
-        onsessionend?: ((event: XRSessionEvent<'sessionend'>) => void) | undefined;
-        /** Called when an XRSession is hidden or unfocused. */
-        onvisibilitychange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
-        /** Called when available inputsources change */
-        oninputsourceschange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type XrProps = typeof __propDef.props;
-export type XrEvents = typeof __propDef.events;
-export type XrSlots = typeof __propDef.slots;
 /**
  * `<XR />` is a WebXR manager that configures your scene for XR rendering and interaction.
  *
@@ -59,6 +18,35 @@ export type XrSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class Xr extends SvelteComponent<XrProps, XrEvents, XrSlots> {
-}
-export {};
+declare const Xr: import("svelte").Component<{
+    /**
+     * Enables foveated rendering. Default is `1`, the three.js default.
+     *
+     * 0 = no foveation, full resolution
+     *
+     * 1 = maximum foveation, the edges render at lower resolution
+     */
+    foveation?: number | undefined;
+    /**
+     * The target framerate for the XRSystem. Smaller rates give more CPU headroom at the cost of responsiveness.
+     * Recommended range is `72`-`120`. Default is unset and left to the device.
+     * @note If your experience cannot effectively reach the target framerate, it will be subject to frame reprojection
+     * which will halve the effective framerate. Choose a conservative estimate that balances responsiveness and
+     * headroom based on your experience.
+     * @see https://developer.mozilla.org/en-US/docs/Web/API/WebXR_Device_API/Rendering#refresh_rate_and_frame_rate
+     */
+    frameRate?: number | undefined;
+    /** Type of WebXR reference space to use. Default is `local-floor` */
+    referenceSpace?: XRReferenceSpaceType | undefined;
+    fallback?: Snippet<[]> | undefined;
+    children?: Snippet<[]> | undefined;
+    /** Called as an XRSession is requested */
+    onsessionstart?: ((event: XRSessionEvent<'sessionstart'>) => void) | undefined;
+    /** Called after an XRSession is terminated */
+    onsessionend?: ((event: XRSessionEvent<'sessionend'>) => void) | undefined;
+    /** Called when an XRSession is hidden or unfocused. */
+    onvisibilitychange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
+    /** Called when available inputsources change */
+    oninputsourceschange?: ((event: globalThis.XRSessionEvent) => void) | undefined;
+}, {}, "">;
+export default Xr;

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

@@ -1,41 +1,6 @@
 /// <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 */
-        mode: XRSessionMode;
-        /**
-         * `XRSession` configuration options
-         * @see https://immersive-web.github.io/webxr/#feature-dependencies
-         */
-        sessionInit?: (XRSessionInit & {
-            domOverlay?: {
-                root: HTMLElement;
-            } | undefined;
-        }) | undefined;
-        /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
-        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>;
-    };
-    slots: {};
-};
-export type XrButtonProps = typeof __propDef.props;
-export type XrButtonEvents = typeof __propDef.events;
-export type XrButtonSlots = typeof __propDef.slots;
 /**
  * `<XRButton />` is an HTML `<button />` that can be used to init and
  * display info about your WebXR session. This is aliased by `ARButton` and
@@ -54,6 +19,29 @@ export type XrButtonSlots = typeof __propDef.slots;
  * />
  * ```
  */
-export default class XrButton extends SvelteComponent<XrButtonProps, XrButtonEvents, XrButtonSlots> {
-}
-export {};
+declare const XrButton: import("svelte").Component<HTMLButtonAttributes & {
+    /** The type of `XRSession` to create */
+    mode: XRSessionMode;
+    /**
+     * `XRSession` configuration options
+     * @see https://immersive-web.github.io/webxr/#feature-dependencies
+     */
+    sessionInit?: (XRSessionInit & {
+        domOverlay?: {
+            root: HTMLElement;
+        } | undefined;
+    }) | undefined;
+    /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
+    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;
+}, {}, "">;
+export default XrButton;

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
+/// <reference types="svelte" />
 import { type ColorRepresentation } from 'three';
-declare const __propDef: {
-    props: {
-        color?: ColorRepresentation | undefined;
-        size?: number | undefined;
-        thickness?: number | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type CursorProps = typeof __propDef.props;
-export type CursorEvents = typeof __propDef.events;
-export type CursorSlots = typeof __propDef.slots;
-export default class Cursor extends SvelteComponent<CursorProps, CursorEvents, CursorSlots> {
-}
-export {};
+declare const Cursor: import("svelte").Component<{
+    color?: ColorRepresentation | undefined;
+    size?: number | undefined;
+    thickness?: number | undefined;
+}, {}, "">;
+export default Cursor;

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

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        handedness: 'left' | 'right';
-        children?: Snippet<[]> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type PointerCursorProps = typeof __propDef.props;
-export type PointerCursorEvents = typeof __propDef.events;
-export type PointerCursorSlots = typeof __propDef.slots;
-export default class PointerCursor extends SvelteComponent<PointerCursorProps, PointerCursorEvents, PointerCursorSlots> {
-}
-export {};
+declare const PointerCursor: import("svelte").Component<{
+    handedness: 'left' | 'right';
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+export default PointerCursor;

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

@@ -1,18 +1,21 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        children?: import("svelte").Snippet<[]> | undefined;
+/// <reference types="svelte" />
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
     };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ScenePortalProps = typeof __propDef.props;
-export type ScenePortalEvents = typeof __propDef.events;
-export type ScenePortalSlots = typeof __propDef.slots;
-export default class ScenePortal extends SvelteComponent<ScenePortalProps, ScenePortalEvents, ScenePortalSlots> {
+    z_$$bindings?: Bindings;
 }
-export {};
+declare const ScenePortal: $$__sveltets_2_IsomorphicComponent<any, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}, {}, string>;
+type ScenePortal = InstanceType<typeof ScenePortal>;
+export default ScenePortal;

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

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        handedness: 'left' | 'right';
-        children?: Snippet<[]> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ShortRayProps = typeof __propDef.props;
-export type ShortRayEvents = typeof __propDef.events;
-export type ShortRaySlots = typeof __propDef.slots;
-export default class ShortRay extends SvelteComponent<ShortRayProps, ShortRayEvents, ShortRaySlots> {
-}
-export {};
+declare const ShortRay: import("svelte").Component<{
+    handedness: 'left' | 'right';
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+export default ShortRay;

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

@@ -1,18 +1,6 @@
-import { SvelteComponent } from "svelte";
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        handedness: 'left' | 'right';
-        children?: Snippet<[]> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TeleportCursorProps = typeof __propDef.props;
-export type TeleportCursorEvents = typeof __propDef.events;
-export type TeleportCursorSlots = typeof __propDef.slots;
-export default class TeleportCursor extends SvelteComponent<TeleportCursorProps, TeleportCursorEvents, TeleportCursorSlots> {
-}
-export {};
+declare const TeleportCursor: import("svelte").Component<{
+    handedness: 'left' | 'right';
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+export default TeleportCursor;

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

@@ -1,20 +1,8 @@
-import { SvelteComponent } from "svelte";
 import { type XRTargetRaySpace } from 'three';
 import type { Snippet } from 'svelte';
-declare const __propDef: {
-    props: {
-        handedness: 'left' | 'right';
-        targetRay: XRTargetRaySpace;
-        children?: Snippet<[]> | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type TeleportRayProps = typeof __propDef.props;
-export type TeleportRayEvents = typeof __propDef.events;
-export type TeleportRaySlots = typeof __propDef.slots;
-export default class TeleportRay extends SvelteComponent<TeleportRayProps, TeleportRayEvents, TeleportRaySlots> {
-}
-export {};
+declare const TeleportRay: import("svelte").Component<{
+    handedness: 'left' | 'right';
+    targetRay: XRTargetRaySpace;
+    children?: Snippet<[]> | undefined;
+}, {}, "">;
+export default TeleportRay;

package/dist/plugins/pointerControls/index.js

@@ -1,7 +1,7 @@
 import { Raycaster, Vector3 } from 'three';
 import { currentWritable, watch } from '@threlte/core';
 import { defaultComputeFunction } from './compute';
-import { injectPointerControlsPlugin } from './plugin';
+import { injectPointerControlsPlugin } from './plugin.svelte';
 import { setupPointerControls } from './setup';
 import { getControlsContext, getHandContext, setControlsContext, setHandContext, setInternalContext } from './context';
 import { pointerState } from '../../internal/stores';

package/dist/plugins/pointerControls/plugin.svelte.js

@@ -0,0 +1,22 @@
+import { injectPlugin, isInstanceOf, observe } from '@threlte/core';
+import { usePointerControls } from './hook';
+import { events } from './types';
+export const injectPointerControlsPlugin = () => {
+    injectPlugin('threlte-pointer-controls', (args) => {
+        if (!isInstanceOf(args.ref, 'Object3D'))
+            return;
+        const hasEventHandlers = Object.entries(args.props).some(([key, value]) => {
+            return value !== undefined && events.includes(key);
+        });
+        if (!hasEventHandlers)
+            return;
+        const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
+        observe.pre(() => [args.ref], ([ref]) => {
+            addInteractiveObject(ref, args.props);
+            return () => removeInteractiveObject(ref);
+        });
+        return {
+            pluginProps: events
+        };
+    });
+};

package/dist/plugins/teleportControls/index.js

@@ -1,6 +1,6 @@
 import { currentWritable, watch } from '@threlte/core';
 import { createTeleportContext, useTeleportControls, getHandContext } from './context';
-import { injectTeleportControlsPlugin } from './plugin';
+import { injectTeleportControlsPlugin } from './plugin.svelte';
 import { setHandContext } from './context';
 import { setupTeleportControls } from './setup';
 import { teleportState } from '../../internal/stores';

package/dist/plugins/teleportControls/plugin.svelte.js

@@ -0,0 +1,31 @@
+import { injectPlugin, isInstanceOf, observe } from '@threlte/core';
+import { useTeleportControls } from './context';
+/**
+ * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
+ */
+export const injectTeleportControlsPlugin = () => {
+    injectPlugin('threlte-teleport-controls', (args) => {
+        if (!isInstanceOf(args.ref, 'Mesh'))
+            return;
+        const isSurface = $derived('teleportSurface' in args.props && !!args.props.teleportSurface);
+        const isBlocker = $derived('teleportBlocker' in args.props && !!args.props.teleportBlocker);
+        const surfaceRef = $derived(isSurface ? args.ref : undefined);
+        const blockerRef = $derived(isBlocker ? args.ref : undefined);
+        if (!isSurface && !isBlocker)
+            return;
+        const { addBlocker, addSurface, removeBlocker, removeSurface } = useTeleportControls();
+        observe.pre(() => [surfaceRef, blockerRef], ([surfaceRef, blockerRef]) => {
+            if (surfaceRef) {
+                addSurface(surfaceRef, args.props);
+                return removeSurface(surfaceRef);
+            }
+            else if (blockerRef) {
+                addBlocker(blockerRef);
+                return removeBlocker(blockerRef);
+            }
+        });
+        return {
+            pluginProps: ['teleportSurface', 'teleportBlocker']
+        };
+    });
+};

package/package.json

@@ -1,30 +1,30 @@
 {
   "name": "@threlte/xr",
-  "version": "1.0.0-next.10",
+  "version": "1.0.0-next.12",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "description": "Tools to more easily create VR and AR experiences with Threlte",
   "devDependencies": {
     "@sveltejs/adapter-auto": "^3.2.0",
     "@sveltejs/kit": "^2.7.2",
-    "@sveltejs/package": "^2.3.1",
+    "@sveltejs/package": "^2.3.7",
     "@sveltejs/vite-plugin-svelte": "^3.1.0",
+    "@types/three": "^0.169.0",
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
+    "autoprefixer": "^10.4.19",
     "eslint": "^9.0.0",
     "eslint-plugin-svelte": "^2.36.0",
-    "svelte-check": "^3.6.9",
-    "typescript": "^5.4.5",
-    "@types/three": "^0.169.0",
-    "autoprefixer": "^10.4.19",
     "postcss": "^8.4.38",
     "publint": "^0.2.7",
-    "svelte": "^5.0.5",
+    "svelte": "^5.1.6",
+    "svelte-check": "^3.6.9",
     "three": "^0.169.0",
     "tslib": "^2.6.2",
+    "typescript": "^5.4.5",
     "vite": "^5.2.8",
     "vite-plugin-mkcert": "^1.17.5",
-    "@threlte/core": "8.0.0-next.21"
+    "@threlte/core": "8.0.0-next.23"
   },
   "peerDependencies": {
     "svelte": ">=5",

package/dist/plugins/pointerControls/plugin.js

@@ -1,26 +0,0 @@
-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)
-            return;
-        const { addInteractiveObject, removeInteractiveObject } = usePointerControls();
-        const refStore = writable(ref);
-        watch(refStore, ($refStore) => {
-            const hasEventHandlers = Object.entries(props).some(([key, value]) => {
-                return value !== undefined && events.includes(key);
-            });
-            if (!hasEventHandlers)
-                return;
-            addInteractiveObject($refStore, props);
-            return () => removeInteractiveObject($refStore);
-        });
-        return {
-            onRefChange(ref) {
-                refStore.set(ref);
-            }
-        };
-    });
-};

package/dist/plugins/teleportControls/plugin.js

@@ -1,54 +0,0 @@
-import { writable } from 'svelte/store';
-import { isInstanceOf, watch } from '@threlte/core';
-import { injectPlugin } from '@threlte/core';
-import { useTeleportControls } from './context';
-/**
- * Registers T components with "teleportSurface" or "teleportBlocker" attributes.
- */
-export const injectTeleportControlsPlugin = () => {
-    const noop = () => { };
-    injectPlugin('threlte-teleport-controls', ({ ref, props }) => {
-        if (!isInstanceOf(ref, 'Mesh'))
-            return;
-        const isSurface = 'teleportSurface' in props;
-        const isBlocker = 'teleportBlocker' in props;
-        if (!isSurface && !isBlocker)
-            return;
-        const { addBlocker, addSurface, removeBlocker, removeSurface } = useTeleportControls();
-        const refStore = writable(ref);
-        const propsStore = writable(props);
-        watch([refStore, propsStore], ([$refStore, $propsStore]) => {
-            if (isSurface) {
-                if ($propsStore.teleportSurface === false) {
-                    removeSurface($refStore);
-                    return noop;
-                }
-                else {
-                    addSurface($refStore, props);
-                    return () => removeSurface($refStore);
-                }
-            }
-            else if (isBlocker) {
-                if (props.teleportBlocker === false) {
-                    removeBlocker($refStore);
-                    return noop;
-                }
-                else {
-                    addBlocker($refStore);
-                    return () => removeBlocker($refStore);
-                }
-            }
-            else {
-                return noop;
-            }
-        });
-        return {
-            onRefChange(ref) {
-                refStore.set(ref);
-            },
-            onPropsChange(props) {
-                propsStore.set(props);
-            }
-        };
-    });
-};