@threlte/xr 1.0.0-next.8 → 1.0.0

package/dist/components/XR.svelte

@@ -17,104 +17,164 @@ This should be placed within a Threlte `<Canvas />`.
 ```
 
 -->
-<script lang="ts">import { onMount } from "svelte";
-import { useThrelte, watch } from "@threlte/core";
-import {
-  isHandTracking,
-  isPresenting,
-  referenceSpaceType,
-  session,
-  xr as xrStore
-} from "../internal/stores";
-import { setupRaf } from "../internal/setupRaf";
-import { setupHeadset } from "../internal/setupHeadset";
-import { setupControllers } from "../internal/setupControllers";
-import { setupHands } from "../internal/setupHands";
-let {
-  foveation = 1,
-  frameRate,
-  referenceSpace = "local-floor",
-  onsessionstart,
-  onsessionend,
-  onvisibilitychange,
-  oninputsourceschange,
-  fallback,
-  children
-} = $props();
-const { renderer, renderMode } = useThrelte();
-const { xr } = renderer;
-let originalRenderMode = $renderMode;
-setupRaf();
-setupHeadset();
-setupControllers();
-setupHands();
-const handleSessionStart = () => {
-  isPresenting.set(true);
-  onsessionstart?.({ type: "sessionstart", target: $session });
-};
-const handleSessionEnd = () => {
-  onsessionend?.({ type: "sessionend", target: $session });
-  isPresenting.set(false);
-  session.set(void 0);
-};
-const handleVisibilityChange = (event) => {
-  onvisibilitychange?.({ ...event, target: $session });
-};
-const handleInputSourcesChange = (event) => {
-  $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand);
-  oninputsourceschange?.({ ...event, target: $session });
-};
-const handleFramerateChange = (event) => {
-  onvisibilitychange?.({ ...event, target: $session });
-};
-const updateTargetFrameRate = (frameRate2) => {
-  if (frameRate2 === void 0)
-    return;
-  try {
-    $session?.updateTargetFrameRate(frameRate2);
-  } catch {
+<script lang="ts">
+  import { onMount, type Snippet } from 'svelte'
+  import { useThrelte, watch } from '@threlte/core'
+  import type { XRSessionEvent } from '../types'
+  import {
+    isHandTracking,
+    isPresenting,
+    referenceSpaceType,
+    session,
+    xr as xrStore
+  } from '../internal/stores'
+  import { setupRaf } from '../internal/setupRaf'
+  import { setupHeadset } from '../internal/setupHeadset'
+  import { setupControllers } from '../internal/setupControllers'
+  import { setupHands } from '../internal/setupHands'
+
+  interface 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
+
+    /**
+     * 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
+
+    fallback?: Snippet
+    children?: Snippet
+
+    /** Called as an XRSession is requested */
+    onsessionstart?: (event: XRSessionEvent<'sessionstart'>) => void
+
+    /** Called after an XRSession is terminated */
+    onsessionend?: (event: XRSessionEvent<'sessionend'>) => void
+
+    /** Called when an XRSession is hidden or unfocused. */
+    onvisibilitychange?: (event: globalThis.XRSessionEvent) => void
+
+    /** Called when available inputsources change */
+    oninputsourceschange?: (event: globalThis.XRSessionEvent) => void
   }
-};
-watch(session, (currentSession) => {
-  if (currentSession === void 0)
-    return;
-  currentSession.addEventListener("visibilitychange", handleVisibilityChange);
-  currentSession.addEventListener("inputsourceschange", handleInputSourcesChange);
-  currentSession.addEventListener("frameratechange", handleFramerateChange);
-  xr.setFoveation(foveation);
-  updateTargetFrameRate(frameRate);
-  return () => {
-    currentSession.removeEventListener("visibilitychange", handleVisibilityChange);
-    currentSession.removeEventListener("inputsourceschange", handleInputSourcesChange);
-    currentSession.removeEventListener("frameratechange", handleFramerateChange);
-  };
-});
-watch(isPresenting, (presenting) => {
-  if (presenting) {
-    originalRenderMode = renderMode.current;
-    renderMode.set("always");
-  } else {
-    renderMode.set(originalRenderMode);
+
+  let {
+    foveation = 1,
+    frameRate,
+    referenceSpace = 'local-floor',
+    onsessionstart,
+    onsessionend,
+    onvisibilitychange,
+    oninputsourceschange,
+    fallback,
+    children
+  }: Props = $props()
+
+  const { renderer, renderMode } = useThrelte()
+  const { xr } = renderer
+
+  let originalRenderMode = $renderMode
+
+  setupRaf()
+  setupHeadset()
+  setupControllers()
+  setupHands()
+
+  const handleSessionStart = () => {
+    isPresenting.set(true)
+    onsessionstart?.({ type: 'sessionstart', target: $session! })
+  }
+
+  const handleSessionEnd = () => {
+    onsessionend?.({ type: 'sessionend', target: $session! })
+    isPresenting.set(false)
+    session.set(undefined)
+  }
+
+  const handleVisibilityChange = (event: globalThis.XRSessionEvent) => {
+    onvisibilitychange?.({ ...event, target: $session! })
   }
-});
-onMount(() => {
-  $xrStore = xr;
-  xr.enabled = true;
-  xr.addEventListener("sessionstart", handleSessionStart);
-  xr.addEventListener("sessionend", handleSessionEnd);
-  return () => {
-    $xrStore = void 0;
-    xr.enabled = false;
-    xr.removeEventListener("sessionstart", handleSessionStart);
-    xr.removeEventListener("sessionend", handleSessionEnd);
-  };
-});
-$effect.pre(() => updateTargetFrameRate(frameRate));
-$effect.pre(() => xr.setFoveation(foveation));
-$effect.pre(() => {
-  xr.setReferenceSpaceType(referenceSpace);
-  $referenceSpaceType = referenceSpace;
-});
+
+  const handleInputSourcesChange = (event: XRInputSourceChangeEvent) => {
+    $isHandTracking = Object.values(event.session.inputSources).some((source) => source.hand)
+    oninputsourceschange?.({ ...event, target: $session! })
+  }
+
+  const handleFramerateChange = (event: globalThis.XRSessionEvent) => {
+    onvisibilitychange?.({ ...event, target: $session! })
+  }
+
+  const updateTargetFrameRate = (frameRate?: number) => {
+    if (frameRate === undefined) return
+
+    try {
+      $session?.updateTargetFrameRate(frameRate)
+    } catch {
+      // Do nothing
+    }
+  }
+
+  watch(session, (currentSession) => {
+    if (currentSession === undefined) return
+
+    currentSession.addEventListener('visibilitychange', handleVisibilityChange)
+    currentSession.addEventListener('inputsourceschange', handleInputSourcesChange)
+    currentSession.addEventListener('frameratechange', handleFramerateChange)
+
+    xr.setFoveation(foveation)
+
+    updateTargetFrameRate(frameRate)
+
+    return () => {
+      currentSession.removeEventListener('visibilitychange', handleVisibilityChange)
+      currentSession.removeEventListener('inputsourceschange', handleInputSourcesChange)
+      currentSession.removeEventListener('frameratechange', handleFramerateChange)
+    }
+  })
+
+  watch(isPresenting, (presenting) => {
+    if (presenting) {
+      originalRenderMode = renderMode.current
+      renderMode.set('always')
+    } else {
+      renderMode.set(originalRenderMode)
+    }
+  })
+
+  onMount(() => {
+    $xrStore = xr
+    xr.enabled = true
+    xr.addEventListener('sessionstart', handleSessionStart)
+    xr.addEventListener('sessionend', handleSessionEnd)
+
+    return () => {
+      $xrStore = undefined
+      xr.enabled = false
+      xr.removeEventListener('sessionstart', handleSessionStart)
+      xr.removeEventListener('sessionend', handleSessionEnd)
+    }
+  })
+
+  $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

@@ -1,47 +1,5 @@
-/// <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 +17,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;
+    /**
+     * 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;
+    fallback?: Snippet;
+    children?: Snippet;
+    /** Called as an XRSession is requested */
+    onsessionstart?: (event: XRSessionEvent<"sessionstart">) => void;
+    /** Called after an XRSession is terminated */
+    onsessionend?: (event: XRSessionEvent<"sessionend">) => void;
+    /** Called when an XRSession is hidden or unfocused. */
+    onvisibilitychange?: (event: globalThis.XRSessionEvent) => void;
+    /** Called when available inputsources change */
+    oninputsourceschange?: (event: globalThis.XRSessionEvent) => void;
+}, {}, "">;
+export default Xr;

package/dist/components/XRButton.svelte

@@ -17,43 +17,75 @@ display info about your WebXR session. This is aliased by `ARButton` and
   />
 ```
 -->
-<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,
-  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."
-    );
+<script lang="ts">
+  import type { HTMLButtonAttributes } from 'svelte/elements'
+  import { getXRSupportState } from '../lib/getXRSupportState'
+  import { toggleXRSession } from '../lib/toggleXRSession'
+  import { session, xr } from '../internal/stores'
+  import type { Snippet } from 'svelte'
+
+  type 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 }
+    /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
+    force?: 'enter' | 'exit'
+    /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
+    styled?: boolean
+
+    children?: Snippet<[{ state: SupportState }]>
+
+    onclick?: (event: { state: SupportState; nativeEvent: MouseEvent }) => void
+    onerror?: (error: Error) => void
   }
-  onclick?.({ state, nativeEvent });
-  if (state !== "supported")
-    return;
-  try {
-    await toggleXRSession(mode, sessionInit, force);
-  } catch (error) {
-    onerror?.(error);
+
+  let {
+    mode,
+    sessionInit,
+    force,
+    styled = true,
+    onclick,
+    onerror,
+    children,
+    ...props
+  }: Props = $props()
+
+  type SupportState = 'unsupported' | 'insecure' | 'blocked' | 'supported'
+
+  const handleButtonClick = async (nativeEvent: MouseEvent, state: SupportState) => {
+    if (!$xr) {
+      throw new Error(
+        'The <XR> component was not created. This is required to start an XR session.'
+      )
+    }
+
+    onclick?.({ state, nativeEvent })
+
+    if (state !== 'supported') return
+
+    try {
+      await toggleXRSession(mode, sessionInit, force)
+    } catch (error) {
+      /** This callback gets fired if XR initialization fails. */
+      onerror?.(error as Error)
+    }
   }
-};
-let modeText = $derived(
-  {
-    "immersive-vr": "VR",
-    "immersive-ar": "AR",
-    inline: "inline"
-  }[mode]
-);
-let style = $derived(
-  styled ? `
+
+  let modeText = $derived(
+    {
+      'immersive-vr': 'VR',
+      'immersive-ar': 'AR',
+      inline: 'inline'
+    }[mode]
+  )
+
+  let style = $derived(
+    styled
+      ? `
       position: absolute;
       bottom: 24px;
       left: 50%;
@@ -64,9 +96,10 @@ let style = $derived(
       color: white;
       outline: none;
       z-index: 10;
-      ${props.style ?? ""}
-    ` : props.style
-);
+      ${props.style ?? ''}
+    `
+      : props.style
+  )
 </script>
 
 {#await getXRSupportState(mode) then state}

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

@@ -1,41 +1,5 @@
-/// <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 +18,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;
+    };
+    /** Whether this button should only enter / exit an `XRSession`. Default is to toggle both ways */
+    force?: "enter" | "exit";
+    /** Whether to apply automatic styling to the button. Set false to apply custom styles. Default is true. */
+    styled?: boolean;
+    children?: Snippet<[{
+        state: "blocked" | "unsupported" | "insecure" | "supported";
+    }]>;
+    onclick?: (event: {
+        state: "blocked" | "unsupported" | "insecure" | "supported";
+        nativeEvent: MouseEvent;
+    }) => void;
+    onerror?: (error: Error) => void;
+}, {}, "">;
+export default XrButton;

package/dist/components/internal/Cursor.svelte

@@ -1,7 +1,16 @@
-<script lang="ts">import { Color, DoubleSide, RawShaderMaterial } from "three";
-import { T } from "@threlte/core";
-let { color = new Color("white"), size = 0.03, thickness = 0.035 } = $props();
-const vertexShader = `
+<script lang="ts">
+  import { Color, DoubleSide, RawShaderMaterial, type ColorRepresentation } from 'three'
+  import { T } from '@threlte/core'
+
+  interface Props {
+    color?: ColorRepresentation
+    size?: number
+    thickness?: number
+  }
+
+  let { color = new Color('white'), size = 0.03, thickness = 0.035 }: Props = $props()
+
+  const vertexShader = `
     uniform mat4 projectionMatrix;
     uniform mat4 modelViewMatrix;
     attribute vec2 uv;
@@ -11,8 +20,9 @@ const vertexShader = `
       vUv = uv;
       gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
     }
-  `;
-const fragmentShader = `
+  `
+
+  const fragmentShader = `
     precision mediump float;
     uniform float thickness;
     uniform vec3 color;
@@ -23,25 +33,28 @@ const fragmentShader = `
       float alpha = 1.0 - step(thickness, abs(distance(vUv, vec2(0.5)) - 0.25));
       gl_FragColor = vec4(color, alpha);
     }
-  `;
-const uniforms = {
-  thickness: { value: thickness },
-  color: { value: color }
-};
-const shaderMaterial = new RawShaderMaterial({
-  vertexShader,
-  fragmentShader,
-  uniforms,
-  side: DoubleSide,
-  transparent: true,
-  depthTest: false
-});
-$effect.pre(() => {
-  uniforms.thickness.value = thickness;
-});
-$effect.pre(() => {
-  uniforms.color.value = color;
-});
+  `
+
+  const uniforms = {
+    thickness: { value: thickness },
+    color: { value: color }
+  }
+
+  const shaderMaterial = new RawShaderMaterial({
+    vertexShader,
+    fragmentShader,
+    uniforms,
+    side: DoubleSide,
+    transparent: true,
+    depthTest: false
+  })
+
+  $effect.pre(() => {
+    uniforms.thickness.value = thickness
+  })
+  $effect.pre(() => {
+    uniforms.color.value = color
+  })
 </script>
 
 <T.Mesh scale={size}>

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

@@ -1,19 +1,7 @@
-import { SvelteComponent } from "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;
+    size?: number;
+    thickness?: number;
+}, {}, "">;
+export default Cursor;