@threlte/xr 0.0.9 → 0.0.11

package/dist/components/ARButton.svelte

@@ -14,13 +14,14 @@
 </script>
 
 <XRButton
-  {...$$restProps}
-  mode='immersive-ar'
   sessionInit={{
     domOverlay: typeof document !== 'undefined' ? { root: document.body } : undefined,
     requiredFeatures: ['plane-detection'],
     optionalFeatures: ['hit-test', 'light-estimation', 'dom-overlay', 'dom-overlay-for-handheld-ar']
   }}
+  {...$$restProps}
+  mode='immersive-ar'
+  
   on:click
   on:error
 />

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

@@ -1,3 +1,4 @@
+/// <reference types="webxr" />
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
@@ -221,10 +222,16 @@ declare const __propDef: {
         '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;
+        sessionInit?: XRSessionInit & {
+            domOverlay?: {
+                root: HTMLElement;
+            } | undefined;
+        };
     };
     events: {
         click: CustomEvent<{
             state: "unsupported" | "insecure" | "blocked" | "supported";
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/components/VRButton.svelte

@@ -14,11 +14,11 @@
 </script>
 
 <XRButton
-  {...$$restProps}
-  mode='immersive-vr'
   sessionInit={{
     optionalFeatures: ['local-floor', 'bounded-floor', 'hand-tracking', 'layers']
   }}
+  {...$$restProps}
+  mode='immersive-vr'
   on:click
   on:error
 />

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

@@ -225,6 +225,7 @@ declare const __propDef: {
     events: {
         click: CustomEvent<{
             state: "unsupported" | "insecure" | "blocked" | "supported";
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/components/XR.svelte

@@ -27,11 +27,13 @@ import {
   session,
   xr as xrStore
 } from "../internal/stores";
+import { updateRaf } from "../internal/updateRaf";
 import { useUpdateHeadset } from "../internal/headset";
 export let foveation = 1;
 export let frameRate = void 0;
 export let referenceSpace = "local-floor";
 const dispatch = createRawEventDispatcher();
+updateRaf();
 const { renderer, frameloop } = useThrelte();
 const { xr } = renderer;
 const handleSessionStart = (event) => {

package/dist/components/XRButton.svelte

@@ -27,11 +27,11 @@ export let sessionInit = void 0;
 export let force = void 0;
 export let styled = true;
 const dispatch = createEventDispatcher();
-const handleButtonClick = async (state) => {
+const handleButtonClick = async (nativeEvent, state) => {
   if (!$initialized) {
     throw new Error("The <XR> component was not created. This is required to start an XR session.");
   }
-  dispatch("click", { state });
+  dispatch("click", { state, nativeEvent });
   if (state !== "supported")
     return;
   try {
@@ -65,7 +65,10 @@ $:
 </script>
 
 {#await getXRSupportState(mode) then state}
-  <button {...$$restProps} on:click={() => handleButtonClick(state)}>
+  <button
+    {...$$restProps}
+    on:click={(event) => handleButtonClick(event, state)}
+  >
     {#if state === 'unsupported'}
       {modeText} unsupported
     {:else if state === 'insecure'}

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

@@ -232,6 +232,7 @@ declare const __propDef: {
     events: {
         click: CustomEvent<{
             state: 'unsupported' | 'insecure' | 'blocked' | 'supported';
+            nativeEvent: MouseEvent;
         }>;
         error: CustomEvent<Error>;
     } & {

package/dist/internal/headset.js

@@ -11,7 +11,9 @@ export const useUpdateHeadset = () => {
         if (space === null)
             return;
         const pose = xr.getFrame().getViewerPose(space);
-        if (pose === undefined)
+        // Although pose is only typed as possibly undefined,
+        // It can be null on android chrome when using phone AR.
+        if (pose === undefined || pose === null)
             return;
         const { position, orientation } = pose.transform;
         headset.position.set(position.x, position.y, position.z);

package/dist/internal/updateRaf.d.ts

@@ -0,0 +1 @@
+export declare const updateRaf: () => void;

package/dist/internal/updateRaf.js

@@ -0,0 +1,21 @@
+// @ts-expect-error svelte/internal is untyped.
+import { set_raf } from 'svelte/internal';
+import { onDestroy } from 'svelte';
+import { watch } from '@threlte/core';
+import { session } from './stores';
+export const updateRaf = () => {
+    if (typeof window === 'undefined')
+        return;
+    const browserRaf = (fn) => requestAnimationFrame(fn);
+    const currentRaf = { fn: browserRaf };
+    set_raf((fn) => currentRaf.fn(fn));
+    watch(session, (session) => {
+        if (session) {
+            currentRaf.fn = (fn) => (session.requestAnimationFrame(fn));
+        }
+        else {
+            currentRaf.fn = browserRaf;
+        }
+    });
+    onDestroy(() => (currentRaf.fn = browserRaf));
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threlte/xr",
-  "version": "0.0.9",
+  "version": "0.0.11",
   "author": "Micheal Parks <michealparks1989@gmail.com> (https://parks.lol)",
   "license": "MIT",
   "devDependencies": {