@threlte/xr 0.1.2 → 1.0.0-next.0

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

@@ -1,234 +1,17 @@
+/// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
-    props: {
-        type?: "button" | "reset" | "submit" | null | undefined;
-        id?: string | null | undefined;
-        name?: string | null | undefined;
-        color?: string | null | undefined;
-        translate?: "" | "yes" | "no" | null | undefined;
-        value?: string | number | string[] | null | undefined;
-        hidden?: boolean | null | undefined;
-        form?: string | null | undefined;
-        slot?: string | null | undefined;
-        style?: string | null | undefined;
-        title?: string | null | undefined;
-        dir?: string | null | undefined;
-        contextmenu?: string | null | undefined;
-        autocapitalize?: string | null | undefined;
-        draggable?: import("svelte/elements").Booleanish | null | undefined;
-        inert?: boolean | null | undefined;
-        lang?: string | null | undefined;
-        spellcheck?: import("svelte/elements").Booleanish | null | undefined;
-        part?: string | null | undefined;
-        prefix?: string | null | undefined;
-        role?: import("svelte/elements").AriaRole | null | undefined;
-        autofocus?: boolean | null | undefined;
-        disabled?: boolean | null | undefined;
-        class?: string | null | undefined;
-        typeof?: string | null | undefined;
-        radiogroup?: string | null | undefined;
-        accesskey?: string | null | undefined;
-        contenteditable?: "inherit" | import("svelte/elements").Booleanish | null | undefined;
-        enterkeyhint?: "search" | "next" | "done" | "enter" | "go" | "previous" | "send" | null | undefined;
-        placeholder?: string | null | undefined;
-        tabindex?: number | null | undefined;
-        about?: string | null | undefined;
-        datatype?: string | null | undefined;
-        inlist?: any;
-        property?: string | null | undefined;
-        resource?: string | null | undefined;
-        vocab?: string | null | undefined;
-        autocorrect?: string | null | undefined;
-        autosave?: string | null | undefined;
-        itemprop?: string | null | undefined;
-        itemscope?: boolean | null | undefined;
-        itemtype?: string | null | undefined;
-        itemid?: string | null | undefined;
-        itemref?: string | null | undefined;
-        results?: number | null | undefined;
-        security?: string | null | undefined;
-        unselectable?: "off" | "on" | null | undefined;
-        inputmode?: "search" | "numeric" | "none" | "url" | "text" | "email" | "tel" | "decimal" | null | undefined;
-        is?: string | null | undefined;
-        'bind:innerHTML'?: string | null | undefined;
-        'bind:textContent'?: string | null | undefined;
-        'bind:innerText'?: string | null | undefined;
-        'bind:contentRect'?: DOMRectReadOnly | null | undefined;
-        'bind:contentBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'bind:borderBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'bind:devicePixelContentBoxSize'?: ResizeObserverSize[] | null | undefined;
-        'data-sveltekit-keepfocus'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-noscroll'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-preload-code'?: true | "" | "off" | "eager" | "viewport" | "hover" | "tap" | null | undefined;
-        'data-sveltekit-preload-data'?: true | "" | "off" | "hover" | "tap" | null | undefined;
-        'data-sveltekit-reload'?: true | "" | "off" | null | undefined;
-        'data-sveltekit-replacestate'?: true | "" | "off" | null | undefined;
-        'aria-activedescendant'?: string | null | undefined;
-        'aria-atomic'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-autocomplete'?: "inline" | "both" | "none" | "list" | null | undefined;
-        'aria-busy'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-checked'?: boolean | "false" | "true" | "mixed" | null | undefined;
-        'aria-colcount'?: number | null | undefined;
-        'aria-colindex'?: number | null | undefined;
-        'aria-colspan'?: number | null | undefined;
-        'aria-controls'?: string | null | undefined;
-        'aria-current'?: "time" | "location" | "page" | import("svelte/elements").Booleanish | "step" | "date" | null | undefined;
-        'aria-describedby'?: string | null | undefined;
-        'aria-details'?: string | null | undefined;
-        'aria-disabled'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-dropeffect'?: "link" | "none" | "copy" | "move" | "execute" | "popup" | null | undefined;
-        'aria-errormessage'?: string | null | undefined;
-        'aria-expanded'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-flowto'?: string | null | undefined;
-        'aria-grabbed'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-haspopup'?: "grid" | "dialog" | "menu" | import("svelte/elements").Booleanish | "listbox" | "tree" | null | undefined;
-        'aria-hidden'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-invalid'?: import("svelte/elements").Booleanish | "grammar" | "spelling" | null | undefined;
-        'aria-keyshortcuts'?: string | null | undefined;
-        'aria-label'?: string | null | undefined;
-        'aria-labelledby'?: string | null | undefined;
-        'aria-level'?: number | null | undefined;
-        'aria-live'?: "off" | "assertive" | "polite" | null | undefined;
-        'aria-modal'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-multiline'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-multiselectable'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-orientation'?: "horizontal" | "vertical" | null | undefined;
-        'aria-owns'?: string | null | undefined;
-        'aria-placeholder'?: string | null | undefined;
-        'aria-posinset'?: number | null | undefined;
-        'aria-pressed'?: boolean | "false" | "true" | "mixed" | null | undefined;
-        'aria-readonly'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-relevant'?: "all" | "text" | "additions" | "additions removals" | "additions text" | "removals" | "removals additions" | "removals text" | "text additions" | "text removals" | null | undefined;
-        'aria-required'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-roledescription'?: string | null | undefined;
-        'aria-rowcount'?: number | null | undefined;
-        'aria-rowindex'?: number | null | undefined;
-        'aria-rowspan'?: number | null | undefined;
-        'aria-selected'?: import("svelte/elements").Booleanish | null | undefined;
-        'aria-setsize'?: number | null | undefined;
-        'aria-sort'?: "none" | "other" | "ascending" | "descending" | null | undefined;
-        'aria-valuemax'?: number | null | undefined;
-        'aria-valuemin'?: number | null | undefined;
-        'aria-valuenow'?: number | null | undefined;
-        'aria-valuetext'?: string | null | undefined;
-        'on:copy'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:cut'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:paste'?: import("svelte/elements").ClipboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionend'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionstart'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:compositionupdate'?: import("svelte/elements").CompositionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focus'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focusin'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:focusout'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:blur'?: import("svelte/elements").FocusEventHandler<HTMLButtonElement> | null | undefined;
-        'on:change'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:beforeinput'?: import("svelte/elements").EventHandler<InputEvent, HTMLButtonElement> | null | undefined;
-        'on:input'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:reset'?: import("svelte/elements").FormEventHandler<HTMLButtonElement> | null | undefined;
-        'on:submit'?: import("svelte/elements").EventHandler<SubmitEvent, HTMLButtonElement> | null | undefined;
-        'on:invalid'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:formdata'?: import("svelte/elements").EventHandler<FormDataEvent, HTMLButtonElement> | null | undefined;
-        'on:load'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:error'?: import("svelte/elements").EventHandler<Event, Element> | null | undefined;
-        'on:toggle'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:keydown'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:keypress'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:keyup'?: import("svelte/elements").KeyboardEventHandler<HTMLButtonElement> | null | undefined;
-        'on:abort'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplay'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:canplaythrough'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cuechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:durationchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:emptied'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:encrypted'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ended'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadeddata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadedmetadata'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:loadstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:pause'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:play'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:playing'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:progress'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:ratechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeked'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:seeking'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:stalled'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:suspend'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:timeupdate'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:volumechange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:waiting'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:auxclick'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:click'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:contextmenu'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dblclick'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:drag'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragend'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragenter'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragexit'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragleave'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragover'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:dragstart'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:drop'?: import("svelte/elements").DragEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mousedown'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseenter'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseleave'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mousemove'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseout'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseover'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:mouseup'?: import("svelte/elements").MouseEventHandler<HTMLButtonElement> | null | undefined;
-        'on:select'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectionchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:selectstart'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:touchcancel'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchend'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchmove'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:touchstart'?: import("svelte/elements").TouchEventHandler<HTMLButtonElement> | null | undefined;
-        'on:gotpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointercancel'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerdown'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerenter'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerleave'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointermove'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerout'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerover'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:pointerup'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:lostpointercapture'?: import("svelte/elements").PointerEventHandler<HTMLButtonElement> | null | undefined;
-        'on:scroll'?: import("svelte/elements").UIEventHandler<HTMLButtonElement> | null | undefined;
-        'on:resize'?: import("svelte/elements").UIEventHandler<HTMLButtonElement> | null | undefined;
-        'on:wheel'?: import("svelte/elements").WheelEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationstart'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationend'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:animationiteration'?: import("svelte/elements").AnimationEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionstart'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionrun'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitionend'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:transitioncancel'?: import("svelte/elements").TransitionEventHandler<HTMLButtonElement> | null | undefined;
-        'on:outrostart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:outroend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:introstart'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:introend'?: import("svelte/elements").EventHandler<CustomEvent<null>, HTMLButtonElement> | null | undefined;
-        'on:message'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
-        'on:messageerror'?: import("svelte/elements").MessageEventHandler<HTMLButtonElement> | null | undefined;
-        'on:visibilitychange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:cancel'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:close'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenchange'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        'on:fullscreenerror'?: import("svelte/elements").EventHandler<Event, HTMLButtonElement> | null | undefined;
-        formaction?: string | null | undefined;
-        formenctype?: string | null | undefined;
-        formmethod?: string | null | undefined;
-        formnovalidate?: boolean | null | undefined;
-        formtarget?: string | null | undefined;
+    props: Omit<import("svelte/elements").HTMLButtonAttributes & {
+        mode: XRSessionMode;
+        sessionInit?: (XRSessionInit & {
+            domOverlay?: {
+                root: HTMLElement;
+            } | undefined;
+        }) | undefined;
         force?: "enter" | "exit" | undefined;
         styled?: boolean | undefined;
-    };
+    }, "mode" | "sessionInit">;
     events: {
-        click: CustomEvent<{
-            state: "blocked" | "unsupported" | "insecure" | "supported";
-            nativeEvent: MouseEvent;
-        }>;
-        error: CustomEvent<Error>;
-    } & {
         [evt: string]: CustomEvent<any>;
     };
     slots: {};

package/dist/components/XR.svelte

@@ -30,10 +30,12 @@ import { setupRaf } from "../internal/setupRaf";
 import { setupHeadset } from "../internal/setupHeadset";
 import { setupControllers } from "../internal/setupControllers";
 import { setupHands } from "../internal/setupHands";
-export let foveation = 1;
-export let frameRate = void 0;
-export let referenceSpace = "local-floor";
-const dispatch = createRawEventDispatcher();
+let {
+  foveation = 1,
+  frameRate,
+  referenceSpace = "local-floor",
+  ...props
+} = $props();
 const { renderer, renderMode } = useThrelte();
 const { xr } = renderer;
 let originalRenderMode = $renderMode;
@@ -43,22 +45,22 @@ setupControllers();
 setupHands();
 const handleSessionStart = () => {
   isPresenting.set(true);
-  dispatch("sessionstart", { type: "sessionstart", target: $session });
+  props.$$events?.sessionstart?.({ type: "sessionstart", target: $session });
 };
 const handleSessionEnd = () => {
-  dispatch("sessionend", { type: "sessionend", target: $session });
+  props.$$events?.sessionend?.({ type: "sessionend", target: $session });
   isPresenting.set(false);
   session.set(void 0);
 };
 const handleVisibilityChange = (event) => {
-  dispatch("visibilitychange", { ...event, target: $session });
+  props.$$events?.visibilitychange?.({ ...event, target: $session });
 };
 const handleInputSourcesChange = (event) => {
   $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand);
-  dispatch("inputsourceschange", { ...event, target: $session });
+  props.$$events?.inputsourceschange?.({ ...event, target: $session });
 };
 const handleFramerateChange = (event) => {
-  dispatch("visibilitychange", { ...event, target: $session });
+  props.$$events?.visibilitychange?.({ ...event, target: $session });
 };
 const updateTargetFrameRate = (frameRate2) => {
   if (frameRate2 === void 0)
@@ -102,14 +104,12 @@ onMount(() => {
     xr.removeEventListener("sessionend", handleSessionEnd);
   };
 });
-$:
-  updateTargetFrameRate(frameRate);
-$:
-  xr.setFoveation(foveation);
-$: {
+$effect.pre(() => updateTargetFrameRate(frameRate));
+$effect.pre(() => xr.setFoveation(foveation));
+$effect.pre(() => {
   xr.setReferenceSpaceType(referenceSpace);
   $referenceSpaceType = referenceSpace;
-}
+});
 </script>
 
 {#if $isPresenting}

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

@@ -4,21 +4,35 @@ 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;
+         * 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;
+         * 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;
+    } & {
+        $$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: {};
@@ -26,13 +40,13 @@ declare const __propDef: {
     };
     events: {
         /** Called as an XRSession is requested */
-        sessionstart: XRSessionEvent<'sessionstart'>;
+        sessionstart(): XRSessionEvent<'sessionstart'>;
         /** Called after an XRSession is terminated */
-        sessionend: XRSessionEvent<'sessionend'>;
+        sessionend(): XRSessionEvent<'sessionend'>;
         /** Called when an XRSession is hidden or unfocused. */
-        visibilitychange: globalThis.XRSessionEvent;
+        visibilitychange(): globalThis.XRSessionEvent;
         /** Called when available inputsources change */
-        inputsourceschange: globalThis.XRSessionEvent;
+        inputsourceschange(): globalThis.XRSessionEvent;
     };
 };
 export type XrProps = typeof __propDef.props;

package/dist/components/XRButton.svelte

@@ -17,38 +17,34 @@ display info about your WebXR session. This is aliased by `ARButton` and
   />
 ```
 -->
-
-<script>import { createEventDispatcher } from "svelte";
-import { getXRSupportState } from "../lib/getXRSupportState";
+<script>import { getXRSupportState } from "../lib/getXRSupportState";
 import { toggleXRSession } from "../lib/toggleXRSession";
 import { session, xr } from "../internal/stores";
-export let mode;
-export let sessionInit = void 0;
-export let force = void 0;
-export let styled = true;
-const dispatch = createEventDispatcher();
+let { mode, sessionInit, force, styled = true, ...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.");
+    throw new Error(
+      "The <XR> component was not created. This is required to start an XR session."
+    );
   }
-  dispatch("click", { state, nativeEvent });
+  props.$$events?.click?.({ state, nativeEvent });
   if (state !== "supported")
     return;
   try {
     await toggleXRSession(mode, sessionInit, force);
   } catch (error) {
-    dispatch("error", error);
+    props.$$events?.error?.(error);
   }
 };
-$:
-  modeText = {
+let modeText = $derived(
+  {
     "immersive-vr": "VR",
     "immersive-ar": "AR",
     inline: "inline"
-  }[mode];
-$:
-  if (styled) {
-    $$restProps.style = `
+  }[mode]
+);
+let style = $derived(
+  styled ? `
       position: absolute;
       bottom: 24px;
       left: 50%;
@@ -59,15 +55,18 @@ $:
       color: white;
       outline: none;
       z-index: 10;
-      ${$$restProps.style ?? ""}
-    `;
-  }
+      ${props.style ?? ""}
+    ` : props.style
+);
 </script>
 
 {#await getXRSupportState(mode) then state}
   <button
-    {...$$restProps}
-    on:click={(event) => handleButtonClick(event, state)}
+    on:click={(event) => {
+      handleButtonClick(event, state)
+    }}
+    {...props}
+    {style}
   >
     {#if state === 'unsupported'}
       {modeText} unsupported