@react-three/fiber 8.0.0-beta-02 → 8.0.0-beta-03

package/dist/{hooks-c89a6f88.esm.js → hooks-15c12e3e.esm.js}

@@ -1,6 +1,7 @@
-import * as THREE from 'three';
 import Reconciler from 'react-reconciler';
-import { DefaultEventPriority, IdleEventPriority } from 'react-reconciler/constants';
+import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
+import { DefaultEventPriority } from 'react-reconciler/constants';
+import * as THREE from 'three';
 import * as React from 'react';
 import { suspend, preload, clear } from 'suspend-react';
 import create from 'zustand';
@@ -13,7 +14,34 @@ const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
   return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
-} // A collection of compare functions
+}
+/**
+ * Picks or omits keys from an object
+ * `omit` will filter out keys, and otherwise cherry-pick them.
+ */
+
+function filterKeys(obj, omit, ...keys) {
+  const keysToSelect = new Set(keys);
+  return Object.entries(obj).reduce((acc, [key, value]) => {
+    const shouldInclude = !omit;
+
+    if (keysToSelect.has(key) === shouldInclude) {
+      acc[key] = value;
+    }
+
+    return acc;
+  }, {});
+}
+/**
+ * Clones an object and cherry-picks keys.
+ */
+
+const pick = (obj, keys) => filterKeys(obj, false, ...keys);
+/**
+ * Clones an object and prunes or omits keys.
+ */
+
+const omit = (obj, keys) => filterKeys(obj, true, ...keys); // A collection of compare functions
 
 const is = {
   obj: a => a === Object(a) && !is.arr(a) && typeof a !== 'function',
@@ -62,8 +90,7 @@ function dispose(obj) {
   if (obj.dispose && obj.type !== 'Scene') obj.dispose();
 
   for (const p in obj) {
-    var _dispose, _ref;
-    (_dispose = (_ref = p).dispose) == null ? void 0 : _dispose.call(_ref);
+    p.dispose == null ? void 0 : p.dispose();
     delete obj[p];
   }
 } // Each object in the scene carries a small LocalState descriptor
@@ -84,6 +111,49 @@ function prepare(object, state) {
   }
 
   return object;
+}
+
+function resolve(instance, key) {
+  let target = instance;
+
+  if (key.includes('-')) {
+    const entries = key.split('-');
+    const last = entries.pop();
+    target = entries.reduce((acc, key) => acc[key], instance);
+    return {
+      target,
+      key: last
+    };
+  } else return {
+    target,
+    key
+  };
+}
+
+function attach(parent, child, type) {
+  if (is.str(type)) {
+    const {
+      target,
+      key
+    } = resolve(parent, type);
+    parent.__r3f.previousAttach = target[key];
+    target[key] = child;
+  } else if (is.arr(type)) {
+    const [attach] = type;
+    if (is.str(attach)) parent[attach](child);else if (is.fun(attach)) attach(parent, child);
+  }
+}
+function detach(parent, child, type) {
+  if (is.str(type)) {
+    const {
+      target,
+      key
+    } = resolve(parent, type);
+    target[key] = parent.__r3f.previousAttach;
+  } else if (is.arr(type)) {
+    const [, detach] = type;
+    if (is.str(detach)) parent[detach](child);else if (is.fun(detach)) detach(parent, child);
+  }
 } // Shallow check arrays, but check objects atomically
 
 function checkShallow(a, b) {
@@ -113,7 +183,9 @@ function diffProps(instance, {
   if (remove) {
     const previousKeys = Object.keys(previous);
 
-    for (let i = 0; i < previousKeys.length; i++) if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
+    for (let i = 0; i < previousKeys.length; i++) {
+      if (!props.hasOwnProperty(previousKeys[i])) entries.unshift([previousKeys[i], DEFAULT + 'remove']);
+    }
   }
 
   entries.forEach(([key, value]) => {
@@ -184,7 +256,9 @@ function applyProps(instance, data) {
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
-      } else value = 0;
+      } else {
+        value = 0;
+      }
     } // Deal with pointer events ...
 
 
@@ -193,35 +267,39 @@ function applyProps(instance, data) {
       localState.eventCount = Object.keys(localState.handlers).length;
     } // Special treatment for objects with support for set/copy, and layers
     else if (targetProp && targetProp.set && (targetProp.copy || targetProp instanceof THREE.Layers)) {
-      // If value is an array
-      if (Array.isArray(value)) {
-        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
-      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
-
-        if (!rootState.linear && isColor) targetProp.convertSRGBToLinear();
-      } // Else, just overwrite the value
+        // If value is an array
+        if (Array.isArray(value)) {
+          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/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/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
+      } 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 (!rootState.linear && currentInstance[key] instanceof THREE.Texture) {
+          currentInstance[key].encoding = THREE.sRGBEncoding;
+        }
+      }
 
     invalidateInstance(instance);
     return 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
@@ -245,7 +323,8 @@ function updateInstance(instance) {
 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.
  */
 
@@ -532,13 +611,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 ...
 
@@ -548,7 +630,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';
@@ -606,12 +689,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)));
+            }
           }
         }
       });
@@ -657,6 +745,7 @@ let extend = objects => void (catalogue = { ...catalogue,
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
+    attach,
     ...props
   }, root, hostContext, internalInstanceHandle) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`;
@@ -673,41 +762,39 @@ function createRenderer(roots, getEventPriority) {
     } // Assert that by now we have a valid root
 
 
-    if (!root || !isStore(root)) throw `No valid root for ${name}!`;
+    if (!root || !isStore(root)) throw `No valid root for ${name}!`; // Auto-attach geometries and materials
+
+    if (attach === undefined) {
+      if (name.endsWith('Geometry')) attach = 'geometry';else if (name.endsWith('Material')) attach = 'material';
+    }
 
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
         root,
+        attach,
         primitive: true
       });
     } 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
+      const target = catalogue[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`;
+      } // 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), {
         root,
+        attach,
+        // TODO: Figure out what this is for
         memoizedProps: {
           args: args.length === 0 ? null : args
         }
       });
-    } // Auto-attach geometries and materials
-
-
-    if (!('attachFns' in props)) {
-      if (name.endsWith('Geometry')) {
-        props = {
-          attach: 'geometry',
-          ...props
-        };
-      } else if (name.endsWith('Material')) {
-        props = {
-          attach: 'material',
-          ...props
-        };
-      }
     } // It should NOT call onUpdate on object instanciation, because it hasn't been added to the
     // view yet. If the callback relies on references for instance, they won't be ready yet, this is
     // why it passes "true" here
@@ -718,42 +805,22 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function appendChild(parentInstance, child) {
-    let addedAsChild = false;
+    let added = false;
 
     if (child) {
       // The attach attribute implies that the object attaches itself on the parent
-      if (child.attachArray) {
-        if (!is.arr(parentInstance[child.attachArray])) parentInstance[child.attachArray] = [];
-        parentInstance[child.attachArray].push(child);
-      } else if (child.attachObject) {
-        if (!is.obj(parentInstance[child.attachObject[0]])) parentInstance[child.attachObject[0]] = {};
-        parentInstance[child.attachObject[0]][child.attachObject[1]] = child;
-      } else if (child.attach && !is.fun(child.attach)) {
-        parentInstance[child.attach] = child;
-      } else if (is.arr(child.attachFns)) {
-        const [attachFn] = child.attachFns;
-
-        if (is.str(attachFn) && is.fun(parentInstance[attachFn])) {
-          parentInstance[attachFn](child);
-        } else if (is.fun(attachFn)) {
-          attachFn(child, parentInstance);
-        }
+      if (child.__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         // add in the usual parent-child way
         parentInstance.add(child);
-        addedAsChild = true;
-      }
-
-      if (!addedAsChild) {
-        // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
-        // that is, anything that's a child in React but not a child in the scenegraph.
-        parentInstance.__r3f.objects.push(child);
-      }
+        added = true;
+      } // This is for anything that used attach, and for non-Object3Ds that don't get attached to props;
+      // that is, anything that's a child in React but not a child in the scenegraph.
 
-      if (!child.__r3f) {
-        prepare(child, {});
-      }
 
+      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
@@ -764,13 +831,8 @@ function createRenderer(roots, getEventPriority) {
     let added = false;
 
     if (child) {
-      if (child.attachArray) {
-        const array = parentInstance[child.attachArray];
-        if (!is.arr(array)) parentInstance[child.attachArray] = [];
-        array.splice(array.indexOf(beforeChild), 0, child);
-      } else if (child.attachObject || child.attach && !is.fun(child.attach)) {
-        // attach and attachObject don't have an order anyway, so just append
-        return appendChild(parentInstance, child);
+      if (child.__r3f.attach) {
+        attach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         child.parent = parentInstance;
         child.dispatchEvent({
@@ -782,14 +844,8 @@ function createRenderer(roots, getEventPriority) {
         added = true;
       }
 
-      if (!added) {
-        parentInstance.__r3f.objects.push(child);
-      }
-
-      if (!child.__r3f) {
-        prepare(child, {});
-      }
-
+      if (!added) parentInstance.__r3f.objects.push(child);
+      if (!child.__r3f) prepare(child, {});
       child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
@@ -804,29 +860,13 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _parentInstance$__r3f, _child$__r3f2;
 
-      if (child.__r3f) {
-        child.__r3f.parent = null;
-      }
-
-      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) {
-        parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child);
-      } // Remove attachment
+      // Clear the parent reference
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
+      if ((_parentInstance$__r3f = parentInstance.__r3f) != null && _parentInstance$__r3f.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
-      if (child.attachArray) {
-        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)) {
-        parentInstance[child.attach] = null;
-      } else if (is.arr(child.attachFns)) {
-        const [, detachFn] = child.attachFns;
-
-        if (is.str(detachFn) && is.fun(parentInstance[detachFn])) {
-          parentInstance[detachFn](child);
-        } else if (is.fun(detachFn)) {
-          detachFn(child, parentInstance);
-        }
+      if (child.__r3f.attach) {
+        detach(parentInstance, child, child.__r3f.attach);
       } else if (child.isObject3D && parentInstance.isObject3D) {
         var _child$__r3f;
 
@@ -868,7 +908,7 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        reconciler.runWithPriority(IdleEventPriority, () => {
+        unstable_scheduleCallback(unstable_IdlePriority, () => {
           try {
             child.dispose();
           } catch (e) {
@@ -929,7 +969,9 @@ function createRenderer(roots, getEventPriority) {
     insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
 
     prepareUpdate(instance, type, oldProps, newProps) {
-      if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) return [true];else {
+      if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
+        return [true];
+      } else {
         // This is a data object, let's extract critical information about it
         const {
           args: argsNew = [],
@@ -940,7 +982,9 @@ function createRenderer(roots, getEventPriority) {
           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
 
@@ -958,17 +1002,29 @@ function createRenderer(roots, getEventPriority) {
     },
 
     hideInstance(instance) {
-      if (instance.isObject3D) {
-        instance.visible = false;
-        invalidateInstance(instance);
-      }
+      var _instance$__r3f2;
+
+      // Deatch while the instance is hidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      if (type && parent) detach(parent, instance, type);
+      if (instance.isObject3D) instance.visible = false;
+      invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      if (instance.isObject3D && props.visible == null || props.visible) {
-        instance.visible = true;
-        invalidateInstance(instance);
-      }
+      var _instance$__r3f3;
+
+      // Re-attach when the instance is unhidden
+      const {
+        attach: type,
+        parent
+      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      if (type && parent) attach(parent, instance, type);
+      if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
+      invalidateInstance(instance);
     },
 
     createInstance,
@@ -997,8 +1053,30 @@ function createRenderer(roots, getEventPriority) {
     getRootHostContext: () => null,
     getChildHostContext: parentHostContext => parentHostContext,
     createTextInstance: () => {},
-    finalizeInitialChildren: () => false,
-    commitMount: () => {},
+
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f4;
+
+      // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      return !!localState.handlers;
+    },
+
+    commitMount(instance)
+    /*, type, props*/
+    {
+      var _instance$__r3f5;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
     shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
     preparePortalMount: containerInfo => prepare(containerInfo),
@@ -1212,6 +1290,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1220,6 +1301,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1276,7 +1358,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;
@@ -1360,7 +1442,9 @@ function createLoop(roots) {
 
       const state = root.store.getState(); // If the frameloop is invalidated, do not run another frame
 
-      if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) repeat += render(timestamp, state);
+      if (state.internal.active && (state.frameloop === 'always' || state.internal.frames > 0) && !((_state$gl$xr = state.gl.xr) != null && _state$gl$xr.isPresenting)) {
+        repeat += render(timestamp, state);
+      }
     }); // Run after-effects
 
     run(globalAfterEffects, timestamp); // Keep on looping if anything invalidates the frameloop
@@ -1452,4 +1536,4 @@ useLoader.clear = function (Proto, input) {
   return clear([Proto, ...keys]);
 };
 
-export { createLoop as a, createRenderer as b, createEvents as c, calculateDpr as d, createStore as e, context as f, dispose as g, extend as h, isRenderer as i, addEffect as j, addAfterEffect as k, addTail as l, useThree as m, useFrame as n, useGraph as o, useLoader as p, buildGraph as q, is as r, threeTypes as t, useStore as u };
+export { createLoop as a, createRenderer as b, createEvents as c, calculateDpr as d, createStore as e, context as f, dispose as g, extend as h, isRenderer as i, addEffect as j, addAfterEffect as k, addTail as l, useThree as m, useFrame as n, omit as o, pick as p, useGraph as q, useLoader as r, buildGraph as s, threeTypes as t, useStore as u, is as v };