@threlte/xr 0.0.11 → 0.0.13

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

@@ -0,0 +1,16 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    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> {
+}
+export {};

package/dist/components/internal/ShortRay.svelte

@@ -0,0 +1,45 @@
+<script>import { T } from "@threlte/core";
+import { pointerState, teleportState, teleportIntersection } from "../../internal/stores";
+export let handedness;
+$:
+  hovering = $teleportState[handedness].hovering;
+$:
+  intersection = teleportIntersection[handedness];
+$:
+  visible = $pointerState[handedness].enabled || hovering && $intersection === void 0;
+</script>
+
+<T.Group {visible}>
+  <slot>
+    <T.Mesh
+      rotation.x={-Math.PI / 2}
+      position.z={-0.1}
+    >
+      <T.CylinderGeometry
+        args={[0.002, 0.002, 0.2, 16, 1, false]}
+      />
+      <T.RawShaderMaterial
+        transparent
+        vertexShader={`
+          uniform mat4 modelViewMatrix;
+          uniform mat4 projectionMatrix;
+          attribute vec2 uv;
+          attribute vec3 position;
+          varying vec2 vUv;
+          void main() {
+            vUv = uv;
+            gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+          }
+        `}
+        fragmentShader={`
+          precision mediump float;
+          varying vec2 vUv;
+          void main() {
+            gl_FragColor = vec4(1.0, 1.0, 1.0, pow(vUv.y - 1.0, 2.0));
+          }
+        `}
+      />
+    </T.Mesh>
+  </slot>
+</T.Group>
+

package/dist/components/{ShortRay.svelte.d.ts → internal/ShortRay.svelte.d.ts}

@@ -1,12 +1,14 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        [x: string]: any;
+        handedness: 'left' | 'right';
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        default: {};
+    };
 };
 export type ShortRayProps = typeof __propDef.props;
 export type ShortRayEvents = typeof __propDef.events;

package/dist/components/internal/TeleportCursor.svelte

@@ -0,0 +1,51 @@
+<script>import { spring } from "svelte/motion";
+import { Group, Matrix3, Vector3 } from "three";
+import { T, useFrame } from "@threlte/core";
+import { teleportIntersection } from "../../internal/stores";
+import Cursor from "./Cursor.svelte";
+export let handedness;
+const ref = new Group();
+const vec3 = new Vector3();
+const normalMatrix = new Matrix3();
+const worldNormal = new Vector3();
+$:
+  intersection = teleportIntersection[handedness];
+const { start, stop } = useFrame(
+  () => {
+    if (intersection.current === void 0)
+      return;
+    const { point, face, object } = intersection.current;
+    ref.position.lerp(point, 0.4);
+    if (face) {
+      normalMatrix.getNormalMatrix(object.matrixWorld);
+      worldNormal.copy(face.normal).applyMatrix3(normalMatrix).normalize();
+      ref.lookAt(vec3.addVectors(point, worldNormal));
+    }
+  },
+  {
+    autostart: false
+  }
+);
+const size = spring(0.1, { stiffness: 0.2 });
+$:
+  if ($intersection === void 0) {
+    size.set(0.1);
+    stop();
+  } else {
+    size.set(1);
+    ref.position.copy($intersection.point);
+    start();
+  }
+</script>
+
+<T
+  is={ref}
+  visible={$intersection !== undefined}
+>
+  <slot>
+    <Cursor
+      size={$size}
+      thickness={0.015}
+    />
+  </slot>
+</T>

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

@@ -0,0 +1,18 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        handedness: 'left' | 'right';
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};

package/dist/components/internal/TeleportRay.svelte

@@ -0,0 +1,71 @@
+<script>import { Vector3, QuadraticBezierCurve3, Vector2 } from "three";
+import { Line2 } from "three/examples/jsm/lines/Line2";
+import { LineGeometry } from "three/examples/jsm/lines/LineGeometry";
+import { LineMaterial } from "three/examples/jsm/lines/LineMaterial";
+import { T, useFrame } from "@threlte/core";
+import { teleportIntersection } from "../../internal/stores";
+export let handedness;
+export let targetRay;
+let lineGeometry = new LineGeometry();
+const rayStart = new Vector3();
+const rayMidpoint = new Vector3();
+const curve = new QuadraticBezierCurve3();
+const rayDivisions = 40;
+const positions = new Float32Array(rayDivisions * 3);
+const vec3 = new Vector3();
+const v2_1 = new Vector2();
+const v2_2 = new Vector2();
+$:
+  intersection = teleportIntersection[handedness];
+const setCurvePoints = (alpha = 0.3) => {
+  if (intersection.current === void 0)
+    return;
+  const rayEnd = intersection.current.point;
+  targetRay.getWorldPosition(rayStart);
+  rayMidpoint.x = (rayStart.x + rayEnd.x) / 2;
+  rayMidpoint.y = (rayStart.y + rayEnd.y) / 2;
+  rayMidpoint.z = (rayStart.z + rayEnd.z) / 2;
+  const arc = Math.log1p(
+    v2_1.set(rayStart.x, rayStart.z).distanceTo(v2_2.set(rayEnd.x, rayEnd.z))
+  );
+  rayMidpoint.y += arc;
+  curve.v0.lerp(rayStart, alpha);
+  curve.v1.lerp(rayMidpoint, alpha);
+  curve.v2.lerp(rayEnd, alpha);
+  for (let i = 0, j = 0; i < rayDivisions; i += 1, j += 3) {
+    const t = i / rayDivisions;
+    curve.getPoint(t, vec3);
+    positions[j + 0] = vec3.x;
+    positions[j + 1] = vec3.y;
+    positions[j + 2] = vec3.z;
+  }
+  lineGeometry.setPositions(positions);
+};
+const { start, stop } = useFrame(
+  () => {
+    setCurvePoints();
+  },
+  { autostart: false }
+);
+$:
+  if ($intersection === void 0) {
+    stop();
+  } else {
+    setCurvePoints(1);
+    start();
+  }
+</script>
+
+<slot>
+  <T
+    is={Line2}
+    visible={$intersection !== undefined}
+    position.z={-0.01}
+  >
+    <T is={lineGeometry} />
+    <T
+      is={LineMaterial}
+      linewidth={0.004}
+    />
+  </T>
+</slot>

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

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import { type XRTargetRaySpace } from 'three';
+declare const __propDef: {
+    props: {
+        handedness: 'left' | 'right';
+        targetRay: XRTargetRaySpace;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+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 {};

package/dist/hooks/useController.d.ts

@@ -8,7 +8,3 @@ export declare const gaze: CurrentWritable<XRController | undefined>;
  * Provides a reference to a current XRController, filtered by handedness.
  */
 export declare const useController: (handedness: XRHandedness) => CurrentWritable<XRController | undefined>;
-/**
- * Provides a reference to the gamepad attached to a current XRController.
- */
-export declare const useGamepad: (handedness: 'left' | 'right') => CurrentWritable<Gamepad | undefined>;

package/dist/hooks/useController.js

@@ -2,10 +2,6 @@ import { currentWritable } from '@threlte/core';
 export const left = currentWritable(undefined);
 export const right = currentWritable(undefined);
 export const gaze = currentWritable(undefined);
-const gamepadLeft = currentWritable(undefined);
-const gamepadRight = currentWritable(undefined);
-left.subscribe((value) => gamepadLeft.set(value?.inputSource.gamepad));
-right.subscribe((value) => gamepadRight.set(value?.inputSource.gamepad));
 /**
  * Provides a reference to a current XRController, filtered by handedness.
  */
@@ -17,16 +13,7 @@ export const useController = (handedness) => {
             return right;
         case 'none':
             return gaze;
-    }
-};
-/**
- * Provides a reference to the gamepad attached to a current XRController.
- */
-export const useGamepad = (handedness) => {
-    switch (handedness) {
-        case 'left':
-            return gamepadLeft;
-        case 'right':
-            return gamepadRight;
+        default:
+            throw new Error('useController handedness must be left, right, or none.');
     }
 };

package/dist/hooks/useHand.js

@@ -10,5 +10,7 @@ export const useHand = (handedness) => {
             return left;
         case 'right':
             return right;
+        default:
+            throw new Error('useHand handedness must be left or right.');
     }
 };

package/dist/hooks/useHandJoint.d.ts

@@ -1,6 +1,6 @@
-import type * as THREE from 'three';
+import type { XRJointSpace } from 'three';
 import type { HandJoints } from '../lib/handJoints';
 /**
  * Provides a reference to a requested hand joint, once available.
  */
-export declare const useHandJoint: (handedness: 'left' | 'right', joint: HandJoints) => import("@threlte/core").CurrentWritable<THREE.XRJointSpace | undefined>;
+export declare const useHandJoint: (handedness: 'left' | 'right', joint: HandJoints) => import("@threlte/core").CurrentWritable<XRJointSpace | undefined>;

package/dist/hooks/useHeadset.d.ts

@@ -1 +1,2 @@
-export declare const useHeadset: () => Readonly<THREE.Group>;
+import type { Group } from 'three';
+export declare const useHeadset: () => Readonly<Group>;

package/dist/hooks/useHeadset.js

@@ -1,4 +1,4 @@
-import { headset } from '../internal/headset';
+import { headset } from '../internal/setupHeadset';
 export const useHeadset = () => {
     return headset;
 };

package/dist/hooks/useHitTest.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="webxr" />
-import * as THREE from 'three';
-export type HitTestCallback = (hitMatrix: THREE.Matrix4, hit: XRHitTestResult | undefined) => void;
+import { Matrix4 } from 'three';
+export type HitTestCallback = (hitMatrix: Matrix4, hit: XRHitTestResult | undefined) => void;
 export type UseHitTestOptions = {
     /**
      * The ray source when performing hit testing.

package/dist/hooks/useHitTest.js

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Matrix4 } from 'three';
 import { useThrelte, useFrame, watch, currentWritable } from '@threlte/core';
 import { useXR } from './useXR';
 import { useController } from './useController';
@@ -17,12 +17,14 @@ export const useHitTest = (hitTestCallback, options = {}) => {
     const source = options.source ?? 'viewer';
     const { xr } = useThrelte().renderer;
     const xrState = useXR();
-    const hitMatrix = new THREE.Matrix4();
+    const hitMatrix = new Matrix4();
     let hitTestSource = currentWritable(undefined);
     if (source === 'viewer') {
         watch(xrState.session, async (session) => {
-            if (session === undefined)
+            if (session === undefined) {
+                hitTestSource.set(undefined);
                 return;
+            }
             const space = await session.requestReferenceSpace('viewer');
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
@@ -31,14 +33,18 @@ export const useHitTest = (hitTestCallback, options = {}) => {
         const controller = useController(source === 'leftInput' ? 'left' : 'right');
         const hand = useController(source === 'leftInput' ? 'left' : 'right');
         watch([xrState.session, controller], async ([session, input]) => {
-            if (input === undefined || session === undefined)
+            if (input === undefined || session === undefined) {
+                hitTestSource.set(undefined);
                 return;
+            }
             const space = input.inputSource.targetRaySpace;
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
         watch([xrState.session, hand], async ([session, input]) => {
-            if (input === undefined || session === undefined)
+            if (input === undefined || session === undefined) {
+                hitTestSource.set(undefined);
                 return;
+            }
             const space = input.inputSource.targetRaySpace;
             hitTestSource.set(await session.requestHitTestSource?.({ space }));
         });
@@ -56,7 +62,11 @@ export const useHitTest = (hitTestCallback, options = {}) => {
         hitMatrix.fromArray(pose.transform.matrix);
         hitTestCallback(hitMatrix, hit);
     }, { autostart: false });
-    watch(hitTestSource, (testSource) => {
+    watch([xrState.isPresenting, hitTestSource], ([isPresenting, testSource]) => {
+        if (!isPresenting) {
+            stop();
+            return;
+        }
         if (testSource === undefined) {
             stop();
             // Execute callback one last time to inform consumers of no hits.

package/dist/hooks/useTeleport.d.ts

@@ -1,4 +1,4 @@
-import * as THREE from 'three';
+import { Quaternion, type Vector3, type Vector3Tuple } from 'three';
 /**
  * Returns a callback to teleport the player from the world origin to a position and optional orientation.
  *
@@ -14,4 +14,4 @@ import * as THREE from 'three';
  *
  * teleport(vec3, quat)
  */
-export declare const useTeleport: () => (position: THREE.Vector3 | THREE.Vector3Tuple, orientation?: THREE.Quaternion) => void;
+export declare const useTeleport: () => (position: Vector3 | Vector3Tuple, orientation?: Quaternion) => void;

package/dist/hooks/useTeleport.js

@@ -1,6 +1,6 @@
-import * as THREE from 'three';
+import { Quaternion } from 'three';
 import { useThrelte } from '@threlte/core';
-const quaternion = new THREE.Quaternion();
+const quaternion = new Quaternion();
 const offset = { x: 0, y: 0, z: 0 };
 /**
  * Returns a callback to teleport the player from the world origin to a position and optional orientation.

package/dist/index.d.ts

@@ -4,10 +4,17 @@ export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
 export { default as Headset } from './components/Headset.svelte';
-export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
 export { getXRSupportState } from './lib/getXRSupportState';
 export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
-export * from './hooks';
-export type * from './types';
+export { pointerControls } from './plugins/pointerControls';
+export { teleportControls } from './plugins/teleportControls';
+export { useController } from './hooks/useController';
+export { useHand } from './hooks/useHand';
+export { useHandJoint } from './hooks/useHandJoint';
+export { useHeadset } from './hooks/useHeadset';
+export { useHitTest } from './hooks/useHitTest';
+export { useTeleport } from './hooks/useTeleport';
+export { useXR } from './hooks/useXR';
+export type { XRSessionEventType, XRControllerEventType, XRHandEventType, XRSessionEvent, XRControllerEvent, XRController, XRHand, XRHandEvent, } from './types';

package/dist/index.js

@@ -1,12 +1,23 @@
+// Components
 export { default as ARButton } from './components/ARButton.svelte';
 export { default as VRButton } from './components/VRButton.svelte';
 export { default as XRButton } from './components/XRButton.svelte';
 export { default as Controller } from './components/Controller.svelte';
 export { default as Hand } from './components/Hand.svelte';
 export { default as Headset } from './components/Headset.svelte';
-export { default as TeleportControls } from './components/TeleportControls.svelte';
 export { default as XR } from './components/XR.svelte';
+// Utilities
 export { getXRSupportState } from './lib/getXRSupportState';
 export { toggleXRSession } from './lib/toggleXRSession';
 export { handJoints } from './lib/handJoints';
-export * from './hooks';
+// Plugins
+export { pointerControls } from './plugins/pointerControls';
+export { teleportControls } from './plugins/teleportControls';
+// Hooks
+export { useController } from './hooks/useController';
+export { useHand } from './hooks/useHand';
+export { useHandJoint } from './hooks/useHandJoint';
+export { useHeadset } from './hooks/useHeadset';
+export { useHitTest } from './hooks/useHitTest';
+export { useTeleport } from './hooks/useTeleport';
+export { useXR } from './hooks/useXR';

package/dist/internal/setupControllers.d.ts

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

package/dist/internal/setupControllers.js

@@ -0,0 +1,69 @@
+import { XRControllerModelFactory } from 'three/examples/jsm/webxr/XRControllerModelFactory';
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { useHandTrackingState } from './useHandTrackingState';
+import { gaze, left, right } from '../hooks/useController';
+import { controllerDispatchers } from './stores';
+export const setupControllers = () => {
+    const factory = new XRControllerModelFactory();
+    const stores = { left, right, none: gaze };
+    const { xr } = useThrelte().renderer;
+    const hasHands = useHandTrackingState();
+    const controllers = [xr.getController(0), xr.getController(1)];
+    const indexMap = new Map();
+    controllers.forEach((targetRay, index) => {
+        indexMap.set(targetRay, {
+            targetRay,
+            grip: xr.getControllerGrip(index),
+            model: factory.createControllerModel(targetRay)
+        });
+    });
+    onMount(() => {
+        const dispatch = (event) => {
+            if (hasHands())
+                return;
+            const { data } = event;
+            controllerDispatchers[data.handedness]?.current?.(event.type, event);
+        };
+        function handleConnected(event) {
+            const { model, targetRay, grip } = indexMap.get(this);
+            const { data: inputSource } = event;
+            stores[event.data.handedness].set({
+                inputSource,
+                targetRay,
+                grip,
+                model
+            });
+            dispatch(event);
+        }
+        const handleDisconnected = (event) => {
+            dispatch(event);
+            stores[event.data.handedness].set(undefined);
+        };
+        for (const targetRay of controllers) {
+            targetRay.addEventListener('connected', handleConnected);
+            targetRay.addEventListener('disconnected', handleDisconnected);
+            targetRay.addEventListener('select', dispatch);
+            targetRay.addEventListener('selectstart', dispatch);
+            targetRay.addEventListener('selectend', dispatch);
+            targetRay.addEventListener('squeeze', dispatch);
+            targetRay.addEventListener('squeezestart', dispatch);
+            targetRay.addEventListener('squeezeend', dispatch);
+        }
+        return () => {
+            for (const targetRay of controllers) {
+                targetRay.removeEventListener('connected', handleConnected);
+                targetRay.removeEventListener('disconnected', handleDisconnected);
+                targetRay.removeEventListener('select', dispatch);
+                targetRay.removeEventListener('selectstart', dispatch);
+                targetRay.removeEventListener('selectend', dispatch);
+                targetRay.removeEventListener('squeeze', dispatch);
+                targetRay.removeEventListener('squeezestart', dispatch);
+                targetRay.removeEventListener('squeezeend', dispatch);
+            }
+            stores.left.set(undefined);
+            stores.right.set(undefined);
+            stores.none.set(undefined);
+        };
+    });
+};

package/dist/internal/setupHands.d.ts

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

package/dist/internal/setupHands.js

@@ -0,0 +1,63 @@
+import { XRHandModelFactory } from 'three/examples/jsm/webxr/XRHandModelFactory';
+import { useThrelte } from '@threlte/core';
+import { onMount } from 'svelte';
+import { left, right } from '../hooks/useHand';
+import { useHandTrackingState } from './useHandTrackingState';
+import { handDispatchers } from './stores';
+export const setupHands = () => {
+    const factory = new XRHandModelFactory();
+    const stores = { left, right };
+    const { xr } = useThrelte().renderer;
+    const hasHands = useHandTrackingState();
+    const handSpaces = [xr.getHand(0), xr.getHand(1)];
+    const map = new Map();
+    handSpaces.forEach((handSpace, index) => {
+        map.set(handSpace, {
+            hand: handSpace,
+            targetRay: xr.getController(index),
+            model: factory.createHandModel(handSpace, 'mesh')
+        });
+    });
+    onMount(() => {
+        const dispatch = (event) => {
+            if (!hasHands())
+                return;
+            const handEvent = event;
+            const handedness = ('handedness' in handEvent) ? handEvent.handedness : handEvent.data.handedness;
+            handDispatchers[handedness]?.current?.(event.type, event);
+        };
+        function handleConnected(event) {
+            const hand = this;
+            const { model, targetRay } = map.get(this);
+            const { data } = event;
+            const { handedness, hand: inputSource } = data;
+            stores[handedness].set({
+                hand,
+                model,
+                inputSource,
+                targetRay
+            });
+            dispatch(event);
+        }
+        const handleDisconnected = (event) => {
+            dispatch(event);
+            stores[event.data.handedness].set(undefined);
+        };
+        for (const handSpace of handSpaces) {
+            handSpace.addEventListener('connected', handleConnected);
+            handSpace.addEventListener('disconnected', handleDisconnected);
+            handSpace.addEventListener('pinchstart', dispatch);
+            handSpace.addEventListener('pinchend', dispatch);
+        }
+        return () => {
+            for (const handSpace of handSpaces) {
+                handSpace.removeEventListener('connected', handleConnected);
+                handSpace.removeEventListener('disconnected', handleDisconnected);
+                handSpace.removeEventListener('pinchstart', dispatch);
+                handSpace.removeEventListener('pinchend', dispatch);
+            }
+            stores.left.set(undefined);
+            stores.right.set(undefined);
+        };
+    });
+};

package/dist/internal/setupHeadset.d.ts

@@ -0,0 +1,3 @@
+import { Group } from 'three';
+export declare const headset: Group<import("three").Object3DEventMap>;
+export declare const setupHeadset: () => void;

package/dist/internal/{headset.js → setupHeadset.js}

@@ -1,10 +1,9 @@
 import { Group } from 'three';
 import { useThrelte, useFrame, watch } from '@threlte/core';
-import { useXR } from '../hooks';
+import { useXR } from '../hooks/useXR';
 export const headset = new Group();
-export const useUpdateHeadset = () => {
+export const setupHeadset = () => {
     const { renderer, camera } = useThrelte();
-    const xrState = useXR();
     const { xr } = renderer;
     const immersiveFrame = useFrame(() => {
         const space = xr.getReferenceSpace();
@@ -23,7 +22,7 @@ export const useUpdateHeadset = () => {
         headset.position.copy(camera.current.position);
         headset.quaternion.copy(camera.current.quaternion);
     }, { autostart: false, invalidate: false });
-    watch(xrState.isPresenting, (isPresenting) => {
+    watch(useXR().isPresenting, (isPresenting) => {
         if (isPresenting) {
             immersiveFrame.start();
             nonImmersiveFrame.stop();

package/dist/internal/setupRaf.d.ts

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

package/dist/internal/{updateRaf.js → setupRaf.js}

@@ -3,7 +3,7 @@ import { set_raf } from 'svelte/internal';
 import { onDestroy } from 'svelte';
 import { watch } from '@threlte/core';
 import { session } from './stores';
-export const updateRaf = () => {
+export const setupRaf = () => {
     if (typeof window === 'undefined')
         return;
     const browserRaf = (fn) => requestAnimationFrame(fn);
@@ -11,7 +11,7 @@ export const updateRaf = () => {
     set_raf((fn) => currentRaf.fn(fn));
     watch(session, (session) => {
         if (session) {
-            currentRaf.fn = (fn) => (session.requestAnimationFrame(fn));
+            currentRaf.fn = (fn) => session.requestAnimationFrame(fn);
         }
         else {
             currentRaf.fn = browserRaf;