@react-three/fiber 8.0.0-beta-01 → 8.0.0-beta-05

package/dist/{hooks-e01f12ec.cjs.prod.js → index-95c17855.cjs.dev.js}

@@ -1,11 +1,12 @@
 'use strict';
 
-var THREE = require('three');
-var Reconciler = require('react-reconciler');
-var constants = require('react-reconciler/constants');
 var React = require('react');
 var suspendReact = require('suspend-react');
+var THREE = require('three');
+var constants = require('react-reconciler/constants');
 var create = require('zustand');
+var Reconciler = require('react-reconciler');
+var scheduler = require('scheduler');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -18,19 +19,21 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () { return e[k]; }
+          get: function () {
+            return e[k];
+          }
         });
       }
     });
   }
-  n["default"] = e;
+  n['default'] = e;
   return Object.freeze(n);
 }
 
-var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
-var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var create__default = /*#__PURE__*/_interopDefault(create);
+var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -40,7 +43,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',
@@ -89,8 +119,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
@@ -111,6 +140,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) {
@@ -140,7 +212,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]) => {
@@ -167,7 +241,7 @@ function diffProps(instance, {
   };
 } // This function applies a set of changes to the instance
 
-function applyProps(instance, data) {
+function applyProps$1(instance, data) {
   var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
@@ -211,7 +285,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 ...
 
 
@@ -220,35 +296,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__namespace.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__namespace.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__namespace.Layers && value instanceof THREE__namespace.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__namespace.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__namespace.Layers && value instanceof THREE__namespace.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__namespace.Texture) currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-    }
+        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
+          currentInstance[key].encoding = THREE__namespace.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
@@ -271,12 +351,41 @@ function updateInstance(instance) {
 
 function makeId(event) {
   return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
+} // https://github.com/facebook/react/tree/main/packages/react-reconciler#getcurrenteventpriority
+// Gives React a clue as to how import the current interaction is
+
+
+function getEventPriority() {
+  var _window, _window$event;
+
+  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+
+  switch (name) {
+    case 'click':
+    case 'contextmenu':
+    case 'dblclick':
+    case 'pointercancel':
+    case 'pointerdown':
+    case 'pointerup':
+      return constants.DiscreteEventPriority;
+
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'pointerenter':
+    case 'pointerleave':
+    case 'wheel':
+      return constants.ContinuousEventPriority;
+
+    default:
+      return constants.DefaultEventPriority;
+  }
 }
-/** Release pointer captures.
+/**
+ * Release pointer captures.
  * This is called by releasePointerCapture in the API, and when an object is removed.
  */
 
-
 function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
   const captureData = captures.get(obj);
 
@@ -311,7 +420,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -322,14 +431,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -559,13 +665,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 ...
 
@@ -575,7 +684,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';
@@ -633,12 +743,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)));
+            }
           }
         }
       });
@@ -684,6 +799,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)}`;
@@ -700,87 +816,65 @@ 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__namespace[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
 
 
-    applyProps(instance, props);
+    applyProps$1(instance, props);
     return instance;
   }
 
   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);
@@ -791,13 +885,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({
@@ -809,14 +898,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);
@@ -831,29 +914,13 @@ function createRenderer(roots, getEventPriority) {
     if (child) {
       var _parentInstance$__r3f, _child$__r3f2;
 
-      if (child.__r3f) {
-        child.__r3f.parent = null;
-      }
+      // 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 ((_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;
 
@@ -895,7 +962,7 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        reconciler.runWithPriority(constants.IdleEventPriority, () => {
+        scheduler.unstable_scheduleCallback(scheduler.unstable_IdlePriority, () => {
           try {
             child.dispose();
           } catch (e) {
@@ -927,10 +994,13 @@ function createRenderer(roots, getEventPriority) {
 
     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;
@@ -942,7 +1012,7 @@ function createRenderer(roots, getEventPriority) {
     });
   }
 
-  const reconciler = Reconciler__default["default"]({
+  const reconciler = Reconciler__default['default']({
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -956,7 +1026,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 = [],
@@ -967,7 +1039,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
 
@@ -981,21 +1055,33 @@ function createRenderer(roots, getEventPriority) {
     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(instance, diff);
+      else applyProps$1(instance, diff);
     },
 
     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,
@@ -1008,7 +1094,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1024,8 +1110,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),
@@ -1036,7 +1144,7 @@ function createRenderer(roots, getEventPriority) {
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1075,7 +1183,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
     clock.elapsedTime = 0;
   }
 
-  const rootState = create__default["default"]((set, get) => {
+  const rootState = create__default['default']((set, get) => {
     // Create custom raycaster
     const raycaster = new THREE__namespace.Raycaster();
     const {
@@ -1147,18 +1255,19 @@ const createStore = (applyProps, invalidate, advance, props) => {
     })); // Handle frame behavior in WebXR
 
 
-    const handleXRFrame = timestamp => {
+    const handleXRFrame = (timestamp, frame) => {
       const state = get();
       if (state.frameloop === 'never') return;
-      advance(timestamp, true);
+      advance(timestamp, true, state, frame);
     }; // Toggle render switching on session
 
 
     const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
+      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+      // WebXRManager's signature is incorrect.
+      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-      if (!gl.xr.isPresenting) invalidate(get());
+      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
     }; // WebXR session manager
 
 
@@ -1239,6 +1348,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1247,6 +1359,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React__namespace.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1303,7 +1416,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__namespace.Camera)) {
+      if (!camera.manual && !(internal.lastProps.camera instanceof THREE__namespace.Camera)) {
         if (isOrthographicCamera(camera)) {
           camera.left = size.width / -2;
           camera.right = size.width / 2;
@@ -1352,7 +1465,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render(timestamp, state) {
+function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1363,7 +1476,7 @@ function render(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // Render content
+  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1387,7 +1500,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$1(timestamp, state);
+      }
     }); // Run after-effects
 
     run(globalAfterEffects, timestamp); // Keep on looping if anything invalidates the frameloop
@@ -1412,9 +1527,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render(timestamp, root.store.getState()));else render(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1479,21 +1594,209 @@ useLoader.clear = function (Proto, input) {
   return suspendReact.clear([Proto, ...keys]);
 };
 
+const roots = new Map();
+const {
+  invalidate,
+  advance
+} = createLoop(roots);
+const {
+  reconciler,
+  applyProps
+} = createRenderer(roots, getEventPriority);
+
+const createRendererInstance = (gl, canvas) => {
+  const customRenderer = typeof gl === 'function' ? gl(canvas) : gl;
+  if (isRenderer(customRenderer)) return customRenderer;
+  const renderer = new THREE__namespace.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE__namespace.sRGBEncoding;
+  renderer.toneMapping = THREE__namespace.ACESFilmicToneMapping; // Set gl props
+
+  if (gl) applyProps(renderer, gl);
+  return renderer;
+};
+
+function createRoot(canvas, config) {
+  return {
+    render: element => {
+      var _store;
+
+      let {
+        gl,
+        size,
+        events,
+        onCreated,
+        ...props
+      } = config || {}; // Allow size to take on container bounds initially
+
+      if (!size) {
+        var _canvas$parentElement, _canvas$parentElement2, _canvas$parentElement3, _canvas$parentElement4;
+
+        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
+        };
+      }
+
+      let root = roots.get(canvas);
+      let fiber = root == null ? void 0 : root.fiber;
+      let store = root == null ? void 0 : root.store;
+      let state = (_store = store) == null ? void 0 : _store.getState();
+
+      if (fiber && state) {
+        // When a root was found, see if any fundamental props must be changed or exchanged
+        // Check pixelratio
+        if (props.dpr !== undefined && 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); // 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;
+
+        if (linearChanged) {
+          unmountComponentAtNode(canvas);
+          fiber = undefined;
+        }
+      }
+
+      if (!fiber) {
+        // If no root has been found, make one
+        // Create gl
+        const glRenderer = createRendererInstance(gl, canvas); // Create store
+
+        store = createStore(applyProps, invalidate, advance, {
+          gl: glRenderer,
+          size,
+          ...props
+        });
+        const state = store.getState(); // Create renderer
+
+        fiber = reconciler.createContainer(store, constants.ConcurrentRoot, false, null); // Map it
+
+        roots.set(canvas, {
+          fiber,
+          store
+        }); // Store events internally
+
+        if (events) state.set({
+          events: events(store)
+        });
+      }
+
+      if (store && fiber) {
+        reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
+          store: store,
+          element: element,
+          onCreated: onCreated,
+          target: canvas
+        }), fiber, null, () => undefined);
+        return store;
+      } else {
+        throw 'Error creating root!';
+      }
+    },
+    unmount: () => unmountComponentAtNode(canvas)
+  };
+}
+
+function render(element, canvas, config = {}) {
+  console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
+  return createRoot(canvas, config).render(element);
+}
+
+function Provider({
+  store,
+  element,
+  onCreated,
+  target
+}) {
+  React__namespace.useEffect(() => {
+    const state = store.getState(); // Flag the canvas active, rendering will now begin
+
+    state.set(state => ({
+      internal: { ...state.internal,
+        active: true
+      }
+    })); // Connect events
+
+    state.events.connect == null ? void 0 : state.events.connect(target); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+
+    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+  return /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: store
+  }, element);
+}
+
+function unmountComponentAtNode(canvas, callback) {
+  const root = roots.get(canvas);
+  const fiber = root == null ? void 0 : root.fiber;
+
+  if (fiber) {
+    const state = root == null ? void 0 : root.store.getState();
+    if (state) state.internal.active = false;
+    reconciler.updateContainer(null, fiber, null, () => {
+      if (state) {
+        setTimeout(() => {
+          try {
+            var _state$gl, _state$gl$renderLists, _state$gl2, _state$gl3;
+
+            state.events.disconnect == null ? void 0 : state.events.disconnect();
+            (_state$gl = state.gl) == null ? void 0 : (_state$gl$renderLists = _state$gl.renderLists) == null ? void 0 : _state$gl$renderLists.dispose == null ? void 0 : _state$gl$renderLists.dispose();
+            (_state$gl2 = state.gl) == null ? void 0 : _state$gl2.forceContextLoss == null ? void 0 : _state$gl2.forceContextLoss();
+            if ((_state$gl3 = state.gl) != null && _state$gl3.xr) state.internal.xr.disconnect();
+            dispose(state);
+            roots.delete(canvas);
+            if (callback) callback(canvas);
+          } catch (e) {
+            /* ... */
+          }
+        }, 500);
+      }
+    });
+  }
+}
+
+const act = React__namespace.unstable_act;
+
+function createPortal(children, container) {
+  return reconciler.createPortal(children, container, null, null);
+}
+
+reconciler.injectIntoDevTools({
+  bundleType: process.env.NODE_ENV === 'production' ? 0 : 1,
+  rendererPackageName: '@react-three/fiber',
+  version: '18.0.0'
+});
+
+exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
 exports.addTail = addTail;
-exports.buildGraph = buildGraph;
-exports.calculateDpr = calculateDpr;
+exports.advance = advance;
+exports.applyProps = applyProps;
 exports.context = context;
 exports.createEvents = createEvents;
-exports.createLoop = createLoop;
-exports.createRenderer = createRenderer;
-exports.createStore = createStore;
+exports.createPortal = createPortal;
+exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
-exports.is = is;
-exports.isRenderer = isRenderer;
+exports.invalidate = invalidate;
+exports.omit = omit;
+exports.pick = pick;
+exports.reconciler = reconciler;
+exports.render = render;
+exports.roots = roots;
 exports.threeTypes = threeTypes;
+exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;