@react-three/fiber 7.0.21 → 7.0.25

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

@@ -41,7 +41,8 @@ const is = {
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
 }
-/** Release pointer captures.
+/**
+ * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
@@ -328,13 +329,16 @@ function createEvents(store) {
 
       case 'onLostPointerCapture':
         return event => {
-          if ('pointerId' in event) {
+          const {
+            internal
+          } = store.getState();
+
+          if ('pointerId' in event && !internal.capturedMap.has(event.pointerId)) {
             // If the object event interface had onLostPointerCapture, we'd call it here on every
             // object that's getting removed.
-            store.getState().internal.capturedMap.delete(event.pointerId);
+            internal.capturedMap.delete(event.pointerId);
+            cancelPointer([]);
           }
-
-          cancelPointer([]);
         };
     } // Any other pointer goes here ...
 
@@ -403,12 +407,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)));
+            }
           }
         }
       });
@@ -546,6 +555,8 @@ function createRenderer(roots) {
 
     if (instance.__r3f) instance.__r3f.memoizedProps = memoized;
     changes.forEach(([key, value, isEvent, keys]) => {
+      var _rootState$gl;
+
       let currentInstance = instance;
       let targetProp = currentInstance[key]; // Revolve dashed props
 
@@ -576,8 +587,9 @@ function createRenderer(roots) {
 
           if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
         } else value = 0;
-      } // Deal with pointer events ...
+      }
 
+      const isLinear = (rootState == null ? void 0 : (_rootState$gl = rootState.gl) == null ? void 0 : _rootState$gl.outputEncoding) === THREE.LinearEncoding; // Deal with pointer events ...
 
       if (isEvent) {
         if (value) localState.handlers[key] = value;else delete localState.handlers[key];
@@ -598,20 +610,20 @@ function createRenderer(roots) {
                   else targetProp.set(value); // Auto-convert sRGB colors, for now ...
                 // https://github.com/pmndrs/react-three-fiber/issues/344
 
-                if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
+                if (!isLinear && isColor) targetProp.convertSRGBToLinear();
               } // Else, just overwrite the value
 
         } else {
           currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
           // https://github.com/pmndrs/react-three-fiber/issues/344
 
-          if (!rootState.linear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
+          if (!isLinear && currentInstance[key] instanceof THREE.Texture) currentInstance[key].encoding = THREE.sRGBEncoding;
         }
 
       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 +676,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), {
@@ -797,7 +811,7 @@ function createRenderer(roots) {
         parentInstance[child.attachArray] = parentInstance[child.attachArray].filter(x => x !== child);
       } else if (child.attachObject) {
         delete parentInstance[child.attachObject[0]][child.attachObject[1]];
-      } else if (child.attach && !is.fun(child.attach)) {
+      } else if (child.attach && !is.fun(child.attach) && parentInstance[child.attach] === child) {
         parentInstance[child.attach] = null;
       } else if (is.arr(child.attachFns)) {
         const [, detachFn] = child.attachFns;
@@ -880,10 +894,13 @@ function createRenderer(roots) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -938,12 +955,24 @@ 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
 
         const diff = diffProps(instance, restNew, restOld, true);
-        if (diff.changes.length) return [false, diff]; // Otherwise do not touch the instance
+        if (diff.changes.length) return [false, diff]; // If instance was never attached, attach it
+
+        if (instance.attach && typeof instance.attach !== 'function') {
+          const localState = instance.__r3f;
+          const parent = localState.parent;
+
+          if (parent && parent[instance.attach] !== instance) {
+            appendChild(parent, instance);
+          }
+        } // Otherwise do not touch the instance
+
 
         return null;
       }
@@ -988,11 +1017,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 +1241,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1207,7 +1252,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
-        lastEvent: /*#__PURE__*/React.createRef(null),
+        lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1263,7 +1308,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     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 (!(internal.lastProps.camera instanceof THREE.Camera)) {
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE.Camera)) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1688,7 +1733,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

@@ -1 +1,11 @@
-export * from "../../dist/declarations/src/native";
+// are you seeing an error that a default export doesn't exist but your source file has a default export?
+// you should run `yarn` or `yarn preconstruct dev` if preconstruct dev isn't in your postinstall hook
+
+// curious why you need to?
+// this file exists so that you can import from the entrypoint normally
+// except that it points to your source file and you don't need to run build constantly
+// which means we need to re-export all of the modules from your source file
+// and since export * doesn't include default exports, we need to read your source file
+// to check for a default export and re-export it if it exists
+// it's not ideal, but it works pretty well ¯\_(ツ)_/¯
+export * from "../../src/native";

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

@@ -1,7 +1,16 @@
-'use strict';
+"use strict";
+// this file might look strange and you might be wondering what it's for
+// it's lets you import your source files by importing this entrypoint
+// as you would import it if it was built with preconstruct build
+// this file is slightly different to some others though
+// it has a require hook which compiles your code with Babel
+// this means that you don't have to set up @babel/register or anything like that
+// but you can still require this module and it'll be compiled
 
-if (process.env.NODE_ENV === "production") {
-  module.exports = require("./react-three-fiber-native.cjs.prod.js");
-} else {
-  module.exports = require("./react-three-fiber-native.cjs.dev.js");
-}
+// this bit of code imports the require hook and registers it
+let unregister = require("../../../../node_modules/@preconstruct/hook").___internalHook(typeof __dirname === 'undefined' ? undefined : __dirname, "../../../..", "../..");
+
+// this re-exports the source file
+module.exports = require("../../src/native.tsx");
+
+unregister();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "7.0.21",
+  "version": "7.0.25",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -12,7 +12,8 @@
   "author": "Paul Henschel (https://github.com/drcmda)",
   "license": "MIT",
   "maintainers": [
-    "Josh Ellis (https://github.com/joshuaellis)"
+    "Josh Ellis (https://github.com/joshuaellis)",
+    "Cody Bennett (https://github.com/codyjasonbennett)"
   ],
   "bugs": {
     "url": "https://github.com/pmndrs/react-three-fiber/issues"
@@ -54,7 +55,7 @@
   "peerDependencies": {
     "react": ">=17.0",
     "react-dom": ">=17.0",
-    "three": ">=0.126"
+    "three": ">=0.133"
   },
   "peerDependenciesMeta": {
     "react-dom": {