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

package/dist/{hooks-c89a6f88.esm.js → index-3f4e5f46.esm.js}

@@ -1,9 +1,10 @@
-import * as THREE from 'three';
-import Reconciler from 'react-reconciler';
-import { DefaultEventPriority, IdleEventPriority } from 'react-reconciler/constants';
 import * as React from 'react';
 import { suspend, preload, clear } from 'suspend-react';
+import * as THREE from 'three';
+import { DefaultEventPriority, ContinuousEventPriority, DiscreteEventPriority, ConcurrentRoot } from 'react-reconciler/constants';
 import create from 'zustand';
+import Reconciler from 'react-reconciler';
+import { unstable_scheduleCallback, unstable_IdlePriority } from 'scheduler';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -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]) => {
@@ -140,7 +212,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
@@ -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
@@ -244,12 +322,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 DiscreteEventPriority;
+
+    case 'pointermove':
+    case 'pointerout':
+    case 'pointerover':
+    case 'pointerenter':
+    case 'pointerleave':
+    case 'wheel':
+      return ContinuousEventPriority;
+
+    default:
+      return 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);
 
@@ -284,7 +391,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 {
@@ -295,14 +402,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);
   }
@@ -532,13 +636,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 +655,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 +714,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 +770,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,87 +787,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[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);
@@ -764,13 +856,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 +869,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 +885,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 +933,7 @@ function createRenderer(roots, getEventPriority) {
 
 
       if (shouldDispose && child.dispose && child.type !== 'Scene') {
-        reconciler.runWithPriority(IdleEventPriority, () => {
+        unstable_scheduleCallback(unstable_IdlePriority, () => {
           try {
             child.dispose();
           } catch (e) {
@@ -900,10 +965,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;
@@ -929,7 +997,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 +1010,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
 
@@ -954,21 +1026,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,
@@ -981,7 +1065,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : 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
@@ -997,8 +1081,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),
@@ -1009,7 +1115,7 @@ function createRenderer(roots, getEventPriority) {
   });
   return {
     reconciler,
-    applyProps
+    applyProps: applyProps$1
   };
 }
 
@@ -1120,18 +1226,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
 
 
@@ -1212,6 +1319,9 @@ const createStore = (applyProps, invalidate, advance, props) => {
           dpr: calculateDpr(dpr)
         }
       })),
+      setFrameloop: (frameloop = 'always') => set(() => ({
+        frameloop
+      })),
       events: {
         connected: false
       },
@@ -1220,6 +1330,7 @@ const createStore = (applyProps, invalidate, advance, props) => {
         priority: 0,
         frames: 0,
         lastProps: props,
+        lastEvent: /*#__PURE__*/React.createRef(),
         interaction: [],
         hovered: new Map(),
         subscribers: [],
@@ -1276,7 +1387,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;
@@ -1325,7 +1436,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
 
@@ -1336,7 +1447,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
@@ -1360,7 +1471,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
@@ -1385,9 +1498,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);
   }
 
@@ -1452,4 +1565,187 @@ 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 };
+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.WebGLRenderer({
+    powerPreference: 'high-performance',
+    canvas: canvas,
+    antialias: true,
+    alpha: true,
+    ...gl
+  }); // Set color management
+
+  renderer.outputEncoding = THREE.sRGBEncoding;
+  renderer.toneMapping = THREE.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, 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.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.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.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.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'
+});
+
+export { createRoot as a, context as b, createEvents as c, createPortal as d, extend as e, reconciler as f, applyProps as g, dispose as h, invalidate as i, advance as j, addEffect as k, addAfterEffect as l, addTail as m, act as n, omit as o, pick as p, roots as q, render as r, useStore as s, threeTypes as t, unmountComponentAtNode as u, useThree as v, useFrame as w, useGraph as x, useLoader as y };