@react-three/fiber 8.17.9 → 8.17.11

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.17.11
+
+### Patch Changes
+
+- 7461bf0c: fix: loosen instanceof checks for CSB issue
+
+## 8.17.10
+
+### Patch Changes
+
+- d1a072ac: fix: ThreeEvent should not include initMouseEvent
+
 ## 8.17.9
 
 ### Patch Changes

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

@@ -1,9 +1,9 @@
 import * as THREE from 'three';
 import { EventHandlers } from './core/events';
 import { AttachType } from './core/renderer';
-export declare type Properties<T> = Pick<T, {
-    [K in keyof T]: T[K] extends (_: any) => any ? never : K;
-}[keyof T]>;
+export declare type Properties<T> = {
+    [K in keyof T as T[K] extends (...args: Array<any>) => any ? never : K]: T[K];
+};
 export declare type NonFunctionKeys<T> = {
     [K in keyof T]-?: T[K] extends Function ? never : K;
 }[keyof T];

package/dist/{events-09858d86.cjs.prod.js → events-0e73ba93.cjs.prod.js}

@@ -81,7 +81,7 @@ function createRenderer(_roots, _getEventPriority) {
 
     // Auto-attach geometries and materials
     if (instance.__r3f.attach === undefined) {
-      if (instance instanceof THREE__namespace.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE__namespace.Material) instance.__r3f.attach = 'material';
+      if (instance.isBufferGeometry) instance.__r3f.attach = 'geometry';else if (instance.isMaterial) instance.__r3f.attach = 'material';
     }
 
     // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
@@ -757,7 +757,8 @@ function applyProps$1(instance, data) {
       // If nothing else fits, just set the single value, ignore undefined
       // https://github.com/pmndrs/react-three-fiber/issues/274
       else if (value !== undefined) {
-        const isColor = targetProp instanceof THREE__namespace.Color;
+        var _targetProp;
+        const isColor = (_targetProp = targetProp) == null ? void 0 : _targetProp.isColor;
         // Allow setting array scalars
         if (!isColor && targetProp.setScalar) targetProp.setScalar(value);
         // Layers have no copy function, we must therefore copy the mask property
@@ -771,11 +772,12 @@ function applyProps$1(instance, data) {
       }
       // Else, just overwrite the value
     } else {
+      var _currentInstance$key;
       currentInstance[key] = value;
 
       // Auto-convert sRGB textures, for now ...
       // https://github.com/pmndrs/react-three-fiber/issues/344
-      if (currentInstance[key] instanceof THREE__namespace.Texture &&
+      if ((_currentInstance$key = currentInstance[key]) != null && _currentInstance$key.isTexture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
       currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
@@ -1275,7 +1277,7 @@ const createStore = (invalidate, advance) => {
         left
       } = size;
       const aspect = width / height;
-      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      if (target.isVector3) tempTarget.copy(target);else tempTarget.set(...target);
       const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
       if (isOrthographicCamera(camera)) {
         return {
@@ -1924,7 +1926,7 @@ function createRoot(canvas) {
       // Set up scene (one time only!)
       if (!state.scene) {
         let scene;
-        if (sceneOptions instanceof THREE__namespace.Scene) {
+        if (sceneOptions != null && sceneOptions.isScene) {
           scene = sceneOptions;
         } else {
           scene = new THREE__namespace.Scene();

package/dist/{events-321b05fb.esm.js → events-776716bd.esm.js}

@@ -54,7 +54,7 @@ function createRenderer(_roots, _getEventPriority) {
 
     // Auto-attach geometries and materials
     if (instance.__r3f.attach === undefined) {
-      if (instance instanceof THREE.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE.Material) instance.__r3f.attach = 'material';
+      if (instance.isBufferGeometry) instance.__r3f.attach = 'geometry';else if (instance.isMaterial) instance.__r3f.attach = 'material';
     }
 
     // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
@@ -730,7 +730,8 @@ function applyProps$1(instance, data) {
       // If nothing else fits, just set the single value, ignore undefined
       // https://github.com/pmndrs/react-three-fiber/issues/274
       else if (value !== undefined) {
-        const isColor = targetProp instanceof THREE.Color;
+        var _targetProp;
+        const isColor = (_targetProp = targetProp) == null ? void 0 : _targetProp.isColor;
         // Allow setting array scalars
         if (!isColor && targetProp.setScalar) targetProp.setScalar(value);
         // Layers have no copy function, we must therefore copy the mask property
@@ -744,11 +745,12 @@ function applyProps$1(instance, data) {
       }
       // Else, just overwrite the value
     } else {
+      var _currentInstance$key;
       currentInstance[key] = value;
 
       // Auto-convert sRGB textures, for now ...
       // https://github.com/pmndrs/react-three-fiber/issues/344
-      if (currentInstance[key] instanceof THREE.Texture &&
+      if ((_currentInstance$key = currentInstance[key]) != null && _currentInstance$key.isTexture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
       currentInstance[key].format === THREE.RGBAFormat && currentInstance[key].type === THREE.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
@@ -1248,7 +1250,7 @@ const createStore = (invalidate, advance) => {
         left
       } = size;
       const aspect = width / height;
-      if (target instanceof THREE.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      if (target.isVector3) tempTarget.copy(target);else tempTarget.set(...target);
       const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
       if (isOrthographicCamera(camera)) {
         return {
@@ -1897,7 +1899,7 @@ function createRoot(canvas) {
       // Set up scene (one time only!)
       if (!state.scene) {
         let scene;
-        if (sceneOptions instanceof THREE.Scene) {
+        if (sceneOptions != null && sceneOptions.isScene) {
           scene = sceneOptions;
         } else {
           scene = new THREE.Scene();

package/dist/{events-31675df9.cjs.dev.js → events-d0566a2e.cjs.dev.js}

@@ -81,7 +81,7 @@ function createRenderer(_roots, _getEventPriority) {
 
     // Auto-attach geometries and materials
     if (instance.__r3f.attach === undefined) {
-      if (instance instanceof THREE__namespace.BufferGeometry) instance.__r3f.attach = 'geometry';else if (instance instanceof THREE__namespace.Material) instance.__r3f.attach = 'material';
+      if (instance.isBufferGeometry) instance.__r3f.attach = 'geometry';else if (instance.isMaterial) instance.__r3f.attach = 'material';
     }
 
     // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
@@ -757,7 +757,8 @@ function applyProps$1(instance, data) {
       // If nothing else fits, just set the single value, ignore undefined
       // https://github.com/pmndrs/react-three-fiber/issues/274
       else if (value !== undefined) {
-        const isColor = targetProp instanceof THREE__namespace.Color;
+        var _targetProp;
+        const isColor = (_targetProp = targetProp) == null ? void 0 : _targetProp.isColor;
         // Allow setting array scalars
         if (!isColor && targetProp.setScalar) targetProp.setScalar(value);
         // Layers have no copy function, we must therefore copy the mask property
@@ -771,11 +772,12 @@ function applyProps$1(instance, data) {
       }
       // Else, just overwrite the value
     } else {
+      var _currentInstance$key;
       currentInstance[key] = value;
 
       // Auto-convert sRGB textures, for now ...
       // https://github.com/pmndrs/react-three-fiber/issues/344
-      if (currentInstance[key] instanceof THREE__namespace.Texture &&
+      if ((_currentInstance$key = currentInstance[key]) != null && _currentInstance$key.isTexture &&
       // sRGB textures must be RGBA8 since r137 https://github.com/mrdoob/three.js/pull/23129
       currentInstance[key].format === THREE__namespace.RGBAFormat && currentInstance[key].type === THREE__namespace.UnsignedByteType && rootState) {
         const texture = currentInstance[key];
@@ -1275,7 +1277,7 @@ const createStore = (invalidate, advance) => {
         left
       } = size;
       const aspect = width / height;
-      if (target instanceof THREE__namespace.Vector3) tempTarget.copy(target);else tempTarget.set(...target);
+      if (target.isVector3) tempTarget.copy(target);else tempTarget.set(...target);
       const distance = camera.getWorldPosition(position).distanceTo(tempTarget);
       if (isOrthographicCamera(camera)) {
         return {
@@ -1924,7 +1926,7 @@ function createRoot(canvas) {
       // Set up scene (one time only!)
       if (!state.scene) {
         let scene;
-        if (sceneOptions instanceof THREE__namespace.Scene) {
+        if (sceneOptions != null && sceneOptions.isScene) {
           scene = sceneOptions;
         } else {
           scene = new THREE__namespace.Scene();

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-31675df9.cjs.dev.js');
+var events = require('./events-d0566a2e.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -135,24 +135,39 @@ function useMeasure({
       state.current.resizeObserver = null;
     }
     if (state.current.orientationHandler) {
-      screen.orientation.removeEventListener('orientationchange', state.current.orientationHandler);
+      if ('orientation' in screen && 'removeEventListener' in screen.orientation) {
+        screen.orientation.removeEventListener('change', state.current.orientationHandler);
+      } else if ('onorientationchange' in window) {
+        window.removeEventListener('orientationchange', state.current.orientationHandler);
+      }
     }
   }
 
   // add scroll-listeners / observers
   function addListeners() {
+    var _state$current$resize;
     if (!state.current.element) return;
-    state.current.resizeObserver = new ResizeObserver(scrollChange);
-    state.current.resizeObserver.observe(state.current.element);
+    state.current.resizeObserver = new ResizeObserver(resizeChange);
+    (_state$current$resize = state.current.resizeObserver) == null ? void 0 : _state$current$resize.observe(state.current.element);
     if (scroll && state.current.scrollContainers) {
       state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
         capture: true,
         passive: true
       }));
     }
+
+    // Handle orientation changes
     state.current.orientationHandler = () => {
       scrollChange();
     };
+
+    // Use screen.orientation if available
+    if ('orientation' in screen && 'addEventListener' in screen.orientation) {
+      screen.orientation.addEventListener('change', state.current.orientationHandler);
+    } else if ('onorientationchange' in window) {
+      // Fallback to orientationchange event
+      window.addEventListener('orientationchange', state.current.orientationHandler);
+    }
   }
 
   // the ref we expose to the user

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('./events-09858d86.cjs.prod.js');
+var events = require('./events-0e73ba93.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var createDebounce = require('debounce');
@@ -135,24 +135,39 @@ function useMeasure({
       state.current.resizeObserver = null;
     }
     if (state.current.orientationHandler) {
-      screen.orientation.removeEventListener('orientationchange', state.current.orientationHandler);
+      if ('orientation' in screen && 'removeEventListener' in screen.orientation) {
+        screen.orientation.removeEventListener('change', state.current.orientationHandler);
+      } else if ('onorientationchange' in window) {
+        window.removeEventListener('orientationchange', state.current.orientationHandler);
+      }
     }
   }
 
   // add scroll-listeners / observers
   function addListeners() {
+    var _state$current$resize;
     if (!state.current.element) return;
-    state.current.resizeObserver = new ResizeObserver(scrollChange);
-    state.current.resizeObserver.observe(state.current.element);
+    state.current.resizeObserver = new ResizeObserver(resizeChange);
+    (_state$current$resize = state.current.resizeObserver) == null ? void 0 : _state$current$resize.observe(state.current.element);
     if (scroll && state.current.scrollContainers) {
       state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
         capture: true,
         passive: true
       }));
     }
+
+    // Handle orientation changes
     state.current.orientationHandler = () => {
       scrollChange();
     };
+
+    // Use screen.orientation if available
+    if ('orientation' in screen && 'addEventListener' in screen.orientation) {
+      screen.orientation.addEventListener('change', state.current.orientationHandler);
+    } else if ('onorientationchange' in window) {
+      // Fallback to orientationchange event
+      window.addEventListener('orientationchange', state.current.orientationHandler);
+    }
   }
 
   // the ref we expose to the user

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createPointerEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './events-321b05fb.esm.js';
-export { t as ReactThreeFiber, z as _roots, x as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, y as buildGraph, g as context, f as createEvents, c as createPointerEvents, h as createPortal, b as createRoot, l as dispose, c as events, e as extend, s as flushGlobalEffects, v as flushSync, w as getRootState, m as invalidate, j as reconciler, r as render, d as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from './events-321b05fb.esm.js';
+import { c as createPointerEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './events-776716bd.esm.js';
+export { t as ReactThreeFiber, z as _roots, x as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, y as buildGraph, g as context, f as createEvents, c as createPointerEvents, h as createPortal, b as createRoot, l as dispose, c as events, e as extend, s as flushGlobalEffects, v as flushSync, w as getRootState, m as invalidate, j as reconciler, r as render, d as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from './events-776716bd.esm.js';
 import * as React from 'react';
 import { useState, useRef, useEffect, useMemo } from 'react';
 import * as THREE from 'three';
@@ -109,24 +109,39 @@ function useMeasure({
       state.current.resizeObserver = null;
     }
     if (state.current.orientationHandler) {
-      screen.orientation.removeEventListener('orientationchange', state.current.orientationHandler);
+      if ('orientation' in screen && 'removeEventListener' in screen.orientation) {
+        screen.orientation.removeEventListener('change', state.current.orientationHandler);
+      } else if ('onorientationchange' in window) {
+        window.removeEventListener('orientationchange', state.current.orientationHandler);
+      }
     }
   }
 
   // add scroll-listeners / observers
   function addListeners() {
+    var _state$current$resize;
     if (!state.current.element) return;
-    state.current.resizeObserver = new ResizeObserver(scrollChange);
-    state.current.resizeObserver.observe(state.current.element);
+    state.current.resizeObserver = new ResizeObserver(resizeChange);
+    (_state$current$resize = state.current.resizeObserver) == null ? void 0 : _state$current$resize.observe(state.current.element);
     if (scroll && state.current.scrollContainers) {
       state.current.scrollContainers.forEach(scrollContainer => scrollContainer.addEventListener('scroll', scrollChange, {
         capture: true,
         passive: true
       }));
     }
+
+    // Handle orientation changes
     state.current.orientationHandler = () => {
       scrollChange();
     };
+
+    // Use screen.orientation if available
+    if ('orientation' in screen && 'addEventListener' in screen.orientation) {
+      screen.orientation.addEventListener('change', state.current.orientationHandler);
+    } else if ('onorientationchange' in window) {
+      // Fallback to orientationchange event
+      window.addEventListener('orientationchange', state.current.orientationHandler);
+    }
   }
 
   // the ref we expose to the user

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-31675df9.cjs.dev.js');
+var events = require('../../dist/events-d0566a2e.cjs.dev.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var events = require('../../dist/events-09858d86.cjs.prod.js');
+var events = require('../../dist/events-0e73ba93.cjs.prod.js');
 var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,5 +1,5 @@
-import { c as createPointerEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createEvents } from '../../dist/events-321b05fb.esm.js';
-export { t as ReactThreeFiber, z as _roots, x as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, y as buildGraph, g as context, f as createEvents, c as createPointerEvents, h as createPortal, b as createRoot, l as dispose, e as extend, s as flushGlobalEffects, v as flushSync, w as getRootState, m as invalidate, j as reconciler, r as render, d as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-321b05fb.esm.js';
+import { c as createPointerEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode, f as createEvents } from '../../dist/events-776716bd.esm.js';
+export { t as ReactThreeFiber, z as _roots, x as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, y as buildGraph, g as context, f as createEvents, c as createPointerEvents, h as createPortal, b as createRoot, l as dispose, e as extend, s as flushGlobalEffects, v as flushSync, w as getRootState, m as invalidate, j as reconciler, r as render, d as unmountComponentAtNode, F as useFrame, G as useGraph, A as useInstanceHandle, H as useLoader, C as useStore, D as useThree } from '../../dist/events-776716bd.esm.js';
 import * as React from 'react';
 import * as THREE from 'three';
 import { PanResponder, PixelRatio, View, StyleSheet, Platform, Image, NativeModules } from 'react-native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.17.9",
+  "version": "8.17.11",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",