@react-three/fiber 8.0.27 → 8.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @react-three/fiber
 
+## 8.2.1
+
+### Patch Changes
+
+- 25e35a1: fix: prefer useLayoutEffect in react-native
+
+## 8.2.0
+
+### Minor Changes
+
+- 9770d7d: feat: expose ThreeElements interface for JSX elements
+
+## 8.1.0
+
+### Minor Changes
+
+- 8d0f708c: Expose position information in state.size
+
 ## 8.0.27
 
 ### Patch Changes

package/dist/declarations/src/core/index.d.ts

@@ -10,7 +10,7 @@ import { EventManager, ComputeFunction } from './events';
 import { dispose, getRootState, Camera } from './utils';
 declare const roots: Map<Element, Root>;
 declare const invalidate: (state?: RootState | undefined, frames?: number) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
-declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("./utils").applyProps;
+declare const reconciler: import("react-reconciler").Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, import("./renderer").Instance, never, import("./renderer").Instance, import("./renderer").Instance>, applyProps: typeof import("./utils").applyProps;
 declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
 }[keyof T]>;
@@ -49,10 +49,7 @@ export declare type InjectState = Partial<Omit<RootState, PrivateKeys> & {
         compute?: ComputeFunction;
         connected?: any;
     };
-    size?: {
-        width: number;
-        height: number;
-    };
+    size?: Size;
 }>;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: InjectState): React.ReactNode;
 declare const act: any;

package/dist/declarations/src/core/renderer.d.ts

@@ -44,8 +44,8 @@ export declare type InstanceProps = {
     attach?: AttachType;
 };
 declare let extend: (objects: object) => void;
-declare function createRenderer<TCanvas>(roots: Map<TCanvas, Root>, getEventPriority?: () => any): {
-    reconciler: Reconciler.Reconciler<unknown, unknown, unknown, unknown, unknown>;
+declare function createRenderer<TCanvas>(_roots: Map<TCanvas, Root>, _getEventPriority?: () => any): {
+    reconciler: Reconciler.Reconciler<UseBoundStore<RootState, import("zustand").StoreApi<RootState>>, Instance, never, Instance, Instance>;
     applyProps: typeof applyProps;
 };
 export { prepare, createRenderer, extend };

package/dist/declarations/src/core/store.d.ts

@@ -17,6 +17,8 @@ export declare type Dpr = number | [min: number, max: number];
 export declare type Size = {
     width: number;
     height: number;
+    top: number;
+    left: number;
     updateStyle?: boolean;
 };
 export declare type Viewport = Size & {
@@ -81,7 +83,7 @@ export declare type RootState = {
     invalidate: (frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number, updateStyle?: boolean) => void;
+    setSize: (width: number, height: number, updateStyle?: boolean, top?: number, left?: number) => void;
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     onPointerMissed?: (event: MouseEvent) => void;

package/dist/declarations/src/core/utils.d.ts

@@ -4,7 +4,7 @@ import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
 import { Dpr, RootState, Size } from './store';
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
-export declare const useIsomorphicLayoutEffect: typeof React.useEffect;
+export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
 export declare type SetBlock = false | Promise<null> | null;
 export declare type UnblockProps = {

package/dist/declarations/src/three-types.d.ts

@@ -183,146 +183,148 @@ export declare type ColorProps = Node<THREE.Color, ColorArray>;
 export declare type FogProps = Node<THREE.Fog, typeof THREE.Fog>;
 export declare type FogExp2Props = Node<THREE.FogExp2, typeof THREE.FogExp2>;
 export declare type ShapeProps = Node<THREE.Shape, typeof THREE.Shape>;
+export interface ThreeElements {
+    object3D: Object3DProps;
+    audioListener: AudioListenerProps;
+    positionalAudio: PositionalAudioProps;
+    mesh: MeshProps;
+    instancedMesh: InstancedMeshProps;
+    scene: SceneProps;
+    sprite: SpriteProps;
+    lOD: LODProps;
+    skinnedMesh: SkinnedMeshProps;
+    skeleton: SkeletonProps;
+    bone: BoneProps;
+    lineSegments: LineSegmentsProps;
+    lineLoop: LineLoopProps;
+    points: PointsProps;
+    group: GroupProps;
+    camera: CameraProps;
+    perspectiveCamera: PerspectiveCameraProps;
+    orthographicCamera: OrthographicCameraProps;
+    cubeCamera: CubeCameraProps;
+    arrayCamera: ArrayCameraProps;
+    instancedBufferGeometry: InstancedBufferGeometryProps;
+    bufferGeometry: BufferGeometryProps;
+    boxBufferGeometry: BoxBufferGeometryProps;
+    circleBufferGeometry: CircleBufferGeometryProps;
+    coneBufferGeometry: ConeBufferGeometryProps;
+    cylinderBufferGeometry: CylinderBufferGeometryProps;
+    dodecahedronBufferGeometry: DodecahedronBufferGeometryProps;
+    extrudeBufferGeometry: ExtrudeBufferGeometryProps;
+    icosahedronBufferGeometry: IcosahedronBufferGeometryProps;
+    latheBufferGeometry: LatheBufferGeometryProps;
+    octahedronBufferGeometry: OctahedronBufferGeometryProps;
+    planeBufferGeometry: PlaneBufferGeometryProps;
+    polyhedronBufferGeometry: PolyhedronBufferGeometryProps;
+    ringBufferGeometry: RingBufferGeometryProps;
+    shapeBufferGeometry: ShapeBufferGeometryProps;
+    sphereBufferGeometry: SphereBufferGeometryProps;
+    tetrahedronBufferGeometry: TetrahedronBufferGeometryProps;
+    torusBufferGeometry: TorusBufferGeometryProps;
+    torusKnotBufferGeometry: TorusKnotBufferGeometryProps;
+    tubeBufferGeometry: TubeBufferGeometryProps;
+    wireframeGeometry: WireframeGeometryProps;
+    tetrahedronGeometry: TetrahedronGeometryProps;
+    octahedronGeometry: OctahedronGeometryProps;
+    icosahedronGeometry: IcosahedronGeometryProps;
+    dodecahedronGeometry: DodecahedronGeometryProps;
+    polyhedronGeometry: PolyhedronGeometryProps;
+    tubeGeometry: TubeGeometryProps;
+    torusKnotGeometry: TorusKnotGeometryProps;
+    torusGeometry: TorusGeometryProps;
+    sphereGeometry: SphereGeometryProps;
+    ringGeometry: RingGeometryProps;
+    planeGeometry: PlaneGeometryProps;
+    latheGeometry: LatheGeometryProps;
+    shapeGeometry: ShapeGeometryProps;
+    extrudeGeometry: ExtrudeGeometryProps;
+    edgesGeometry: EdgesGeometryProps;
+    coneGeometry: ConeGeometryProps;
+    cylinderGeometry: CylinderGeometryProps;
+    circleGeometry: CircleGeometryProps;
+    boxGeometry: BoxGeometryProps;
+    capsuleGeometry: CapsuleGeometryProps;
+    material: MaterialProps;
+    shadowMaterial: ShadowMaterialProps;
+    spriteMaterial: SpriteMaterialProps;
+    rawShaderMaterial: RawShaderMaterialProps;
+    shaderMaterial: ShaderMaterialProps;
+    pointsMaterial: PointsMaterialProps;
+    meshPhysicalMaterial: MeshPhysicalMaterialProps;
+    meshStandardMaterial: MeshStandardMaterialProps;
+    meshPhongMaterial: MeshPhongMaterialProps;
+    meshToonMaterial: MeshToonMaterialProps;
+    meshNormalMaterial: MeshNormalMaterialProps;
+    meshLambertMaterial: MeshLambertMaterialProps;
+    meshDepthMaterial: MeshDepthMaterialProps;
+    meshDistanceMaterial: MeshDistanceMaterialProps;
+    meshBasicMaterial: MeshBasicMaterialProps;
+    meshMatcapMaterial: MeshMatcapMaterialProps;
+    lineDashedMaterial: LineDashedMaterialProps;
+    lineBasicMaterial: LineBasicMaterialProps;
+    primitive: PrimitiveProps;
+    light: LightProps;
+    spotLightShadow: SpotLightShadowProps;
+    spotLight: SpotLightProps;
+    pointLight: PointLightProps;
+    rectAreaLight: RectAreaLightProps;
+    hemisphereLight: HemisphereLightProps;
+    directionalLightShadow: DirectionalLightShadowProps;
+    directionalLight: DirectionalLightProps;
+    ambientLight: AmbientLightProps;
+    lightShadow: LightShadowProps;
+    ambientLightProbe: AmbientLightProbeProps;
+    hemisphereLightProbe: HemisphereLightProbeProps;
+    lightProbe: LightProbeProps;
+    spotLightHelper: SpotLightHelperProps;
+    skeletonHelper: SkeletonHelperProps;
+    pointLightHelper: PointLightHelperProps;
+    hemisphereLightHelper: HemisphereLightHelperProps;
+    gridHelper: GridHelperProps;
+    polarGridHelper: PolarGridHelperProps;
+    directionalLightHelper: DirectionalLightHelperProps;
+    cameraHelper: CameraHelperProps;
+    boxHelper: BoxHelperProps;
+    box3Helper: Box3HelperProps;
+    planeHelper: PlaneHelperProps;
+    arrowHelper: ArrowHelperProps;
+    axesHelper: AxesHelperProps;
+    texture: TextureProps;
+    videoTexture: VideoTextureProps;
+    dataTexture: DataTextureProps;
+    dataTexture3D: DataTexture3DProps;
+    compressedTexture: CompressedTextureProps;
+    cubeTexture: CubeTextureProps;
+    canvasTexture: CanvasTextureProps;
+    depthTexture: DepthTextureProps;
+    raycaster: RaycasterProps;
+    vector2: Vector2Props;
+    vector3: Vector3Props;
+    vector4: Vector4Props;
+    euler: EulerProps;
+    matrix3: Matrix3Props;
+    matrix4: Matrix4Props;
+    quaternion: QuaternionProps;
+    bufferAttribute: BufferAttributeProps;
+    float16BufferAttribute: Float16BufferAttributeProps;
+    float32BufferAttribute: Float32BufferAttributeProps;
+    float64BufferAttribute: Float64BufferAttributeProps;
+    int8BufferAttribute: Int8BufferAttributeProps;
+    int16BufferAttribute: Int16BufferAttributeProps;
+    int32BufferAttribute: Int32BufferAttributeProps;
+    uint8BufferAttribute: Uint8BufferAttributeProps;
+    uint16BufferAttribute: Uint16BufferAttributeProps;
+    uint32BufferAttribute: Uint32BufferAttributeProps;
+    instancedBufferAttribute: InstancedBufferAttributeProps;
+    color: ColorProps;
+    fog: FogProps;
+    fogExp2: FogExp2Props;
+    shape: ShapeProps;
+}
 declare global {
     namespace JSX {
-        interface IntrinsicElements {
-            object3D: Object3DProps;
-            audioListener: AudioListenerProps;
-            positionalAudio: PositionalAudioProps;
-            mesh: MeshProps;
-            instancedMesh: InstancedMeshProps;
-            scene: SceneProps;
-            sprite: SpriteProps;
-            lOD: LODProps;
-            skinnedMesh: SkinnedMeshProps;
-            skeleton: SkeletonProps;
-            bone: BoneProps;
-            lineSegments: LineSegmentsProps;
-            lineLoop: LineLoopProps;
-            points: PointsProps;
-            group: GroupProps;
-            camera: CameraProps;
-            perspectiveCamera: PerspectiveCameraProps;
-            orthographicCamera: OrthographicCameraProps;
-            cubeCamera: CubeCameraProps;
-            arrayCamera: ArrayCameraProps;
-            instancedBufferGeometry: InstancedBufferGeometryProps;
-            bufferGeometry: BufferGeometryProps;
-            boxBufferGeometry: BoxBufferGeometryProps;
-            circleBufferGeometry: CircleBufferGeometryProps;
-            coneBufferGeometry: ConeBufferGeometryProps;
-            cylinderBufferGeometry: CylinderBufferGeometryProps;
-            dodecahedronBufferGeometry: DodecahedronBufferGeometryProps;
-            extrudeBufferGeometry: ExtrudeBufferGeometryProps;
-            icosahedronBufferGeometry: IcosahedronBufferGeometryProps;
-            latheBufferGeometry: LatheBufferGeometryProps;
-            octahedronBufferGeometry: OctahedronBufferGeometryProps;
-            planeBufferGeometry: PlaneBufferGeometryProps;
-            polyhedronBufferGeometry: PolyhedronBufferGeometryProps;
-            ringBufferGeometry: RingBufferGeometryProps;
-            shapeBufferGeometry: ShapeBufferGeometryProps;
-            sphereBufferGeometry: SphereBufferGeometryProps;
-            tetrahedronBufferGeometry: TetrahedronBufferGeometryProps;
-            torusBufferGeometry: TorusBufferGeometryProps;
-            torusKnotBufferGeometry: TorusKnotBufferGeometryProps;
-            tubeBufferGeometry: TubeBufferGeometryProps;
-            wireframeGeometry: WireframeGeometryProps;
-            tetrahedronGeometry: TetrahedronGeometryProps;
-            octahedronGeometry: OctahedronGeometryProps;
-            icosahedronGeometry: IcosahedronGeometryProps;
-            dodecahedronGeometry: DodecahedronGeometryProps;
-            polyhedronGeometry: PolyhedronGeometryProps;
-            tubeGeometry: TubeGeometryProps;
-            torusKnotGeometry: TorusKnotGeometryProps;
-            torusGeometry: TorusGeometryProps;
-            sphereGeometry: SphereGeometryProps;
-            ringGeometry: RingGeometryProps;
-            planeGeometry: PlaneGeometryProps;
-            latheGeometry: LatheGeometryProps;
-            shapeGeometry: ShapeGeometryProps;
-            extrudeGeometry: ExtrudeGeometryProps;
-            edgesGeometry: EdgesGeometryProps;
-            coneGeometry: ConeGeometryProps;
-            cylinderGeometry: CylinderGeometryProps;
-            circleGeometry: CircleGeometryProps;
-            boxGeometry: BoxGeometryProps;
-            capsuleGeometry: CapsuleGeometryProps;
-            material: MaterialProps;
-            shadowMaterial: ShadowMaterialProps;
-            spriteMaterial: SpriteMaterialProps;
-            rawShaderMaterial: RawShaderMaterialProps;
-            shaderMaterial: ShaderMaterialProps;
-            pointsMaterial: PointsMaterialProps;
-            meshPhysicalMaterial: MeshPhysicalMaterialProps;
-            meshStandardMaterial: MeshStandardMaterialProps;
-            meshPhongMaterial: MeshPhongMaterialProps;
-            meshToonMaterial: MeshToonMaterialProps;
-            meshNormalMaterial: MeshNormalMaterialProps;
-            meshLambertMaterial: MeshLambertMaterialProps;
-            meshDepthMaterial: MeshDepthMaterialProps;
-            meshDistanceMaterial: MeshDistanceMaterialProps;
-            meshBasicMaterial: MeshBasicMaterialProps;
-            meshMatcapMaterial: MeshMatcapMaterialProps;
-            lineDashedMaterial: LineDashedMaterialProps;
-            lineBasicMaterial: LineBasicMaterialProps;
-            primitive: PrimitiveProps;
-            light: LightProps;
-            spotLightShadow: SpotLightShadowProps;
-            spotLight: SpotLightProps;
-            pointLight: PointLightProps;
-            rectAreaLight: RectAreaLightProps;
-            hemisphereLight: HemisphereLightProps;
-            directionalLightShadow: DirectionalLightShadowProps;
-            directionalLight: DirectionalLightProps;
-            ambientLight: AmbientLightProps;
-            lightShadow: LightShadowProps;
-            ambientLightProbe: AmbientLightProbeProps;
-            hemisphereLightProbe: HemisphereLightProbeProps;
-            lightProbe: LightProbeProps;
-            spotLightHelper: SpotLightHelperProps;
-            skeletonHelper: SkeletonHelperProps;
-            pointLightHelper: PointLightHelperProps;
-            hemisphereLightHelper: HemisphereLightHelperProps;
-            gridHelper: GridHelperProps;
-            polarGridHelper: PolarGridHelperProps;
-            directionalLightHelper: DirectionalLightHelperProps;
-            cameraHelper: CameraHelperProps;
-            boxHelper: BoxHelperProps;
-            box3Helper: Box3HelperProps;
-            planeHelper: PlaneHelperProps;
-            arrowHelper: ArrowHelperProps;
-            axesHelper: AxesHelperProps;
-            texture: TextureProps;
-            videoTexture: VideoTextureProps;
-            dataTexture: DataTextureProps;
-            dataTexture3D: DataTexture3DProps;
-            compressedTexture: CompressedTextureProps;
-            cubeTexture: CubeTextureProps;
-            canvasTexture: CanvasTextureProps;
-            depthTexture: DepthTextureProps;
-            raycaster: RaycasterProps;
-            vector2: Vector2Props;
-            vector3: Vector3Props;
-            vector4: Vector4Props;
-            euler: EulerProps;
-            matrix3: Matrix3Props;
-            matrix4: Matrix4Props;
-            quaternion: QuaternionProps;
-            bufferAttribute: BufferAttributeProps;
-            float16BufferAttribute: Float16BufferAttributeProps;
-            float32BufferAttribute: Float32BufferAttributeProps;
-            float64BufferAttribute: Float64BufferAttributeProps;
-            int8BufferAttribute: Int8BufferAttributeProps;
-            int16BufferAttribute: Int16BufferAttributeProps;
-            int32BufferAttribute: Int32BufferAttributeProps;
-            uint8BufferAttribute: Uint8BufferAttributeProps;
-            uint16BufferAttribute: Uint16BufferAttributeProps;
-            uint32BufferAttribute: Uint32BufferAttributeProps;
-            instancedBufferAttribute: InstancedBufferAttributeProps;
-            color: ColorProps;
-            fog: FogProps;
-            fogExp2: FogExp2Props;
-            shape: ShapeProps;
+        interface IntrinsicElements extends ThreeElements {
         }
     }
 }

package/dist/{index-4f1a8e2f.esm.js → index-2e68c2a1.esm.js}

@@ -10,12 +10,19 @@ var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
 });
 
-const isOrthographicCamera = def => def && def.isOrthographicCamera; // React currently throws a warning when using useLayoutEffect on the server.
-// To get around it, we can conditionally useEffect on the server (no-op) and
-// useLayoutEffect on the client.
+var _window$document, _window$navigator;
+const isOrthographicCamera = def => def && def.isOrthographicCamera;
+/**
+ * An SSR-friendly useLayoutEffect.
+ *
+ * React currently throws a warning when using useLayoutEffect on the server.
+ * To get around it, we can conditionally useEffect on the server (no-op) and
+ * useLayoutEffect elsewhere.
+ *
+ * @see https://github.com/facebook/react/issues/14927
+ */
 
-const isSSR = typeof window === 'undefined' || !window.navigator || /ServerSideRendering|^Deno\//.test(window.navigator.userAgent);
-const useIsomorphicLayoutEffect = isSSR ? React.useEffect : React.useLayoutEffect;
+const useIsomorphicLayoutEffect = typeof window !== 'undefined' && ((_window$document = window.document) != null && _window$document.createElement || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative') ? React.useLayoutEffect : React.useEffect;
 function useMutableCallback(fn) {
   const ref = React.useRef(fn);
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
@@ -828,7 +835,7 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
-function createRenderer(roots, getEventPriority) {
+function createRenderer(_roots, _getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
@@ -1044,10 +1051,10 @@ function createRenderer(roots, getEventPriority) {
     appendChild,
     appendInitialChild: appendChild,
     insertBefore,
-    supportsMicrotask: true,
-    warnsIfNotActing: true,
     supportsMutation: true,
     isPrimaryRenderer: false,
+    supportsPersistence: false,
+    supportsHydration: false,
     noTimeout: -1,
     appendChildToContainer: (container, child) => {
       const scene = container.getState().scene; // Link current root to the default scene
@@ -1066,10 +1073,10 @@ function createRenderer(roots, getEventPriority) {
       const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
       // Returning true will trigger commitMount
 
-      return !!localState.handlers;
+      return Boolean(localState.handlers);
     },
 
-    prepareUpdate(instance, type, oldProps, newProps) {
+    prepareUpdate(instance, _type, oldProps, newProps) {
       // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
@@ -1086,7 +1093,7 @@ function createRenderer(roots, getEventPriority) {
           ...restOld
         } = oldProps; // Throw if an object or literal was passed for args
 
-        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instanciated
+        if (!Array.isArray(argsNew)) throw 'The args prop must be an array!'; // If it has new props or arguments, then it needs to be re-instantiated
 
         if (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -1097,13 +1104,13 @@ function createRenderer(roots, getEventPriority) {
       }
     },
 
-    commitUpdate(instance, [reconstruct, diff], type, oldProps, newProps, fiber) {
+    commitUpdate(instance, [reconstruct, diff], type, _oldProps, newProps, fiber) {
       // Reconstruct when args or <primitive object={...} have changes
       if (reconstruct) switchInstance(instance, type, newProps, fiber); // Otherwise just overwrite props
       else applyProps$1(instance, diff);
     },
 
-    commitMount(instance, type, props, int) {
+    commitMount(instance, _type, _props, _int) {
       var _instance$__r3f3;
 
       // https://github.com/facebook/react/issues/20271
@@ -1116,13 +1123,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     getPublicInstance: instance => instance,
-    shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
-    detachDeletedInstance: () => {},
 
     hideInstance(instance) {
       var _instance$__r3f4;
@@ -1150,20 +1155,23 @@ function createRenderer(roots, getEventPriority) {
       invalidateInstance(instance);
     },
 
-    createTextInstance: () => {},
+    createTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
+    },
     hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
+      throw new Error('Text is not allowed in the R3F tree! This could be stray whitespace or characters.');
     },
     unhideTextInstance: () => {},
-    getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
-    // @ts-ignore
-    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r916356874
     // @ts-ignore
+    getCurrentEventPriority: () => _getEventPriority ? _getEventPriority() : DefaultEventPriority,
+    beforeActiveInstanceBlur: () => {},
+    afterActiveInstanceBlur: () => {},
+    detachDeletedInstance: () => {},
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : () => 0,
+    // https://github.com/pmndrs/react-three-fiber/pull/2360#discussion_r920883503
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    // @ts-ignore
-    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
+    cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1184,7 +1192,9 @@ const createStore = (invalidate, advance) => {
     function getCurrentViewport(camera = get().camera, target = defaultTarget, size = get().size) {
       const {
         width,
-        height
+        height,
+        top,
+        left
       } = size;
       const aspect = width / height;
       if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
@@ -1194,6 +1204,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: width / camera.zoom,
           height: height / camera.zoom,
+          top,
+          left,
           factor: 1,
           distance,
           aspect
@@ -1207,6 +1219,8 @@ const createStore = (invalidate, advance) => {
         return {
           width: w,
           height: h,
+          top,
+          left,
           factor: width / w,
           distance,
           aspect
@@ -1223,7 +1237,7 @@ const createStore = (invalidate, advance) => {
     }));
 
     const pointer = new THREE.Vector2();
-    return {
+    const rootState = {
       set,
       get,
       // Mock objects that have to be configured
@@ -1266,6 +1280,8 @@ const createStore = (invalidate, advance) => {
       size: {
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         updateStyle: false
       },
       viewport: {
@@ -1273,6 +1289,8 @@ const createStore = (invalidate, advance) => {
         dpr: 0,
         width: 0,
         height: 0,
+        top: 0,
+        left: 0,
         aspect: 0,
         distance: 0,
         factor: 0,
@@ -1283,11 +1301,13 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height, updateStyle) => {
+      setSize: (width, height, updateStyle, top, left) => {
         const camera = get().camera;
         const size = {
           width,
           height,
+          top: top || 0,
+          left: left || 0,
           updateStyle
         };
         set(state => ({
@@ -1361,6 +1381,7 @@ const createStore = (invalidate, advance) => {
         }
       }
     };
+    return rootState;
   });
   const state = rootState.getState();
   let oldSize = state.size;
@@ -1402,15 +1423,17 @@ const createStore = (invalidate, advance) => {
 };
 
 function createSubs(callback, subs) {
-  const index = subs.length;
-  subs.push(callback);
-  return () => void subs.splice(index, 1);
+  const sub = {
+    callback
+  };
+  subs.add(sub);
+  return () => void subs.delete(sub);
 }
 
 let i;
-let globalEffects = [];
-let globalAfterEffects = [];
-let globalTailEffects = [];
+let globalEffects = new Set();
+let globalAfterEffects = new Set();
+let globalTailEffects = new Set();
 /**
  * Adds a global render callback which is called each frame.
  * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
@@ -1431,7 +1454,9 @@ const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
 const addTail = callback => createSubs(callback, globalTailEffects);
 
 function run(effects, timestamp) {
-  for (i = 0; i < effects.length; i++) effects[i](timestamp);
+  effects.forEach(({
+    callback
+  }) => callback(timestamp));
 }
 
 let subscribers;
@@ -1473,7 +1498,7 @@ function createLoop(roots) {
     running = true;
     repeat = 0; // Run effects
 
-    if (globalEffects.length) run(globalEffects, timestamp); // Render all roots
+    if (globalEffects.size) run(globalEffects, timestamp); // Render all roots
 
     roots.forEach(root => {
       var _state$gl$xr;
@@ -1485,11 +1510,11 @@ function createLoop(roots) {
       }
     }); // Run after-effects
 
-    if (globalAfterEffects.length) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
+    if (globalAfterEffects.size) run(globalAfterEffects, timestamp); // Stop the loop if nothing invalidates it
 
     if (repeat === 0) {
       // Tail call effects, they are called when rendering stops
-      if (globalTailEffects.length) run(globalTailEffects, timestamp); // Flag end of operation
+      if (globalTailEffects.size) run(globalTailEffects, timestamp); // Flag end of operation
 
       running = false;
       return cancelAnimationFrame(frame);
@@ -1668,8 +1693,6 @@ function createRoot(canvas) {
   let configured = false;
   return {
     configure(props = {}) {
-      var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
-
       let {
         gl: glConfig,
         size,
@@ -1807,11 +1830,22 @@ function createRoot(canvas) {
 
       if (dpr && state.viewport.dpr !== calculateDpr(dpr)) state.setDpr(dpr); // Check size, allow it to take on container bounds initially
 
-      size = size || {
-        width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
-        height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
-      };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
+      size = size || (canvas.parentElement ? {
+        width: canvas.parentElement.clientWidth,
+        height: canvas.parentElement.clientHeight,
+        top: canvas.parentElement.clientTop,
+        left: canvas.parentElement.clientLeft
+      } : {
+        width: 0,
+        height: 0,
+        top: 0,
+        left: 0
+      });
+
+      if (!is.equ(size, state.size, shallowLoose)) {
+        state.setSize(size.width, size.height, size.updateStyle, size.top, size.left);
+      } // Check frameloop
+
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed