@react-three/fiber 7.0.18 → 7.0.22

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

@@ -1,7 +1,6 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import create from 'zustand';
-import shallow from 'zustand/shallow';
 import Reconciler from 'react-reconciler';
 import { unstable_now, unstable_runWithPriority, unstable_IdlePriority } from 'scheduler';
 import { useAsset } from 'use-asset';
@@ -345,7 +344,8 @@ function createEvents(store) {
         onPointerMissed,
         internal
       } = store.getState();
-      prepareRay(event); // Get fresh intersects
+      prepareRay(event);
+      internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
@@ -403,12 +403,17 @@ function createEvents(store) {
           if (handler) {
             // Forward all events back to their respective handlers with the exception of click events,
             // which must use the initial target
-            if (name !== 'onClick' && name !== 'onContextMenu' && name !== 'onDoubleClick' || internal.initialHits.includes(eventObject)) {
+            if (!isClickEvent || internal.initialHits.includes(eventObject)) {
               // Missed events have to come first
               pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object))); // Now call the handler
 
               handler(data);
             }
+          } else {
+            // Trigger onPointerMissed on all elements that have pointer over/out handlers, but not click and weren't hit
+            if (isClickEvent && internal.initialHits.includes(eventObject)) {
+              pointerMissed(event, internal.interaction.filter(object => !internal.initialHits.includes(object)));
+            }
           }
         }
       });
@@ -589,21 +594,21 @@ function createRenderer(roots) {
             if (targetProp.fromArray) targetProp.fromArray(value);else targetProp.set(...value);
           } // Test again target.copy(class) next ...
           else if (targetProp.copy && value && value.constructor && targetProp.constructor.name === value.constructor.name) targetProp.copy(value); // If nothing else fits, just set the single value, ignore undefined
-            // https://github.com/react-spring/react-three-fiber/issues/274
+            // https://github.com/pmndrs/react-three-fiber/issues/274
             else if (value !== undefined) {
                 const isColor = targetProp instanceof THREE.Color; // Allow setting array scalars
 
                 if (!isColor && targetProp.setScalar) targetProp.setScalar(value); // Layers have no copy function, we must therefore copy the mask property
                 else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers) targetProp.mask = value.mask; // Otherwise just set ...
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
-                // https://github.com/react-spring/react-three-fiber/issues/344
+                // https://github.com/pmndrs/react-three-fiber/issues/344
 
                 if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-          // https://github.com/react-spring/react-three-fiber/issues/344
+          // https://github.com/pmndrs/react-three-fiber/issues/344
 
           if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
         }
@@ -611,7 +616,7 @@ function createRenderer(roots) {
       invalidateInstance(instance);
     });
 
-    if (rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+    if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
       // Pre-emptively remove the instance from the interaction manager
       const index = rootState.internal.interaction.indexOf(instance);
       if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -664,7 +669,9 @@ function createRenderer(roots) {
       });
     } else {
       const target = catalogue[name] || THREE[name];
-      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Instanciate new object, link it to the root
+      if (!target) throw `${name} is not part of the THREE namespace! Did you forget to extend? See: https://github.com/pmndrs/react-three-fiber/blob/master/markdown/api.md#using-3rd-party-objects-declaratively`; // Throw if an object or literal was passed for args
+
+      if (!Array.isArray(args)) throw 'The args prop must be an array!'; // Instanciate new object, link it to the root
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
@@ -938,7 +945,9 @@ function createRenderer(roots) {
           args: argsOld = [],
           children: cO,
           ...restOld
-        } = oldProps; // If it has new props or arguments, then it needs to be re-instanciated
+        } = 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 (argsNew.some((value, index) => value !== argsOld[index])) return [true]; // Create a diff-set, flag if there are any changes
 
@@ -988,11 +997,24 @@ function createRenderer(roots) {
 
     createTextInstance() {},
 
-    finalizeInitialChildren() {
-      return false;
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f7;
+
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      const localState = (_instance$__r3f7 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f7 : {};
+      return !!localState.handlers;
     },
 
-    commitMount() {// noop
+    commitMount(instance)
+    /*, type, props*/
+    {
+      var _instance$__r3f8;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f8 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f8 : {};
+      if (instance.raycast && localState.handlers && localState.eventCount) instance.__r3f.root.getState().internal.interaction.push(instance);
     },
 
     shouldDeprioritizeSubtree() {
@@ -1199,6 +1221,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1207,6 +1232,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1246,38 +1272,47 @@ const createStore = (applyProps, invalidate, advance, props) => {
         }
       }
     };
-  }); // Resize camera and renderer on changes to size and pixelratio
+  });
+  const state = rootState.getState(); // Resize camera and renderer on changes to size and pixelratio
 
+  let oldSize = state.size;
+  let oldDpr = state.viewport.dpr;
   rootState.subscribe(() => {
     const {
       camera,
       size,
       viewport,
       internal
-    } = rootState.getState(); // https://github.com/pmndrs/react-three-fiber/issues/92
-    // Do not mess with the camera if it belongs to the user
-
-    if (!(internal.lastProps.camera instanceof THREE.Camera)) {
-      if (isOrthographicCamera(camera)) {
-        camera.left = size.width / -2;
-        camera.right = size.width / 2;
-        camera.top = size.height / 2;
-        camera.bottom = size.height / -2;
-      } else {
-        camera.aspect = size.width / size.height;
-      }
+    } = rootState.getState();
+
+    if (size !== oldSize || viewport.dpr !== oldDpr) {
+      // https://github.com/pmndrs/react-three-fiber/issues/92
+      // Do not mess with the camera if it belongs to the user
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
+        console.log('update camera');
+
+        if (isOrthographicCamera(camera)) {
+          camera.left = size.width / -2;
+          camera.right = size.width / 2;
+          camera.top = size.height / 2;
+          camera.bottom = size.height / -2;
+        } else {
+          camera.aspect = size.width / size.height;
+        }
 
-      camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
-      // Update matrix world since the renderer is a frame late
+        camera.updateProjectionMatrix(); // https://github.com/pmndrs/react-three-fiber/issues/178
+        // Update matrix world since the renderer is a frame late
 
-      camera.updateMatrixWorld();
-    } // Update renderer
+        camera.updateMatrixWorld();
+      } // Update renderer
 
 
-    gl.setPixelRatio(viewport.dpr);
-    gl.setSize(size.width, size.height);
-  }, state => [state.viewport.dpr, state.size], shallow);
-  const state = rootState.getState(); // Update size
+      gl.setPixelRatio(viewport.dpr);
+      gl.setSize(size.width, size.height);
+      oldSize = size;
+      oldDpr = viewport.dpr;
+    }
+  }); // Update size
 
   if (size) state.setSize(size.width, size.height); // Invalidate on any change
 
@@ -1680,7 +1715,9 @@ function render(element, canvas, {
     // Check pixelratio
     if (props.dpr !== undefined && !is.equ(state.viewport.dpr, calculateDpr(props.dpr))) state.setDpr(props.dpr); // Check size
 
-    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // For some props we want to reset the entire root
+    if (state.size.width !== size.width || state.size.height !== size.height) state.setSize(size.width, size.height); // Check frameloop
+
+    if (state.frameloop !== props.frameloop) state.setFrameloop(props.frameloop); // For some props we want to reset the entire root
     // Changes to the color-space
 
     const linearChanged = props.linear !== state.internal.lastProps.linear;

package/native/dist/react-three-fiber-native.cjs.d.ts

@@ -0,0 +1 @@
+export * from "../../dist/declarations/src/native";