@react-three/fiber 8.0.0-beta.1 → 8.0.0-beta.10

package/dist/{index-05ebefd3.cjs.dev.js → index-012f96fe.cjs.dev.js}

@@ -1,12 +1,12 @@
 'use strict';
 
-var React = require('react');
-var suspendReact = require('suspend-react');
 var THREE = require('three');
+var React = require('react');
 var constants = require('react-reconciler/constants');
 var create = require('zustand');
 var Reconciler = require('react-reconciler');
 var scheduler = require('scheduler');
+var suspendReact = require('suspend-react');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { 'default': e }; }
 
@@ -30,8 +30,8 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
+var React__namespace = /*#__PURE__*/_interopNamespace(React);
 var create__default = /*#__PURE__*/_interopDefault(create);
 var Reconciler__default = /*#__PURE__*/_interopDefault(Reconciler);
 
@@ -44,6 +44,15 @@ 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;
 }
+/**
+ * Returns instance root state
+ */
+
+const getRootState = obj => {
+  var _r3f;
+
+  return (_r3f = obj.__r3f) == null ? void 0 : _r3f.root.getState();
+};
 /**
  * Picks or omits keys from an object
  * `omit` will filter out keys, and otherwise cherry-pick them.
@@ -53,11 +62,7 @@ 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;
-    }
-
+    if (keysToSelect.has(key) === shouldInclude) acc[key] = value;
     return acc;
   }, {});
 }
@@ -95,7 +100,7 @@ const is = {
     const isArr = is.arr(a);
     if (isArr && arrays === 'reference') return a === b; // Array or Object, shallow compare first to see if it's a match
 
-    if ((isArr || isObj) && a == b) return true; // Last resort, go through keys
+    if ((isArr || isObj) && a === b) return true; // Last resort, go through keys
 
     let i;
 
@@ -103,7 +108,13 @@ const is = {
 
     for (i in strict ? b : a) if (a[i] !== b[i]) return false;
 
-    return is.und(i) ? a === b : true;
+    if (is.und(i)) {
+      if (isArr && a.length === 0 && b.length === 0) return true;
+      if (isObj && Object.keys(a).length === 0 && Object.keys(b).length === 0) return true;
+      if (a !== b) return false;
+    }
+
+    return true;
   }
 
 }; // Collects nodes and materials from a THREE.Object3D
@@ -138,7 +149,9 @@ function prepare(object, state) {
 
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
+      type: '',
       root: null,
+      previousAttach: null,
       memoizedProps: {},
       eventCount: 0,
       handlers: {},
@@ -166,32 +179,42 @@ function resolve(instance, key) {
     target,
     key
   };
-}
+} // Checks if a dash-cased string ends with an integer
+
 
+const INDEX_REGEX = /-\d+$/;
 function attach(parent, child, type) {
   if (is.str(type)) {
+    // If attaching into an array (foo-0), create one
+    if (INDEX_REGEX.test(type)) {
+      const root = type.replace(INDEX_REGEX, '');
+      const {
+        target,
+        key
+      } = resolve(parent, root);
+      if (!Array.isArray(target[key])) target[key] = [];
+    }
+
     const {
       target,
       key
     } = resolve(parent, type);
-    parent.__r3f.previousAttach = target[key];
+    child.__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);
-  }
+  } else child.__r3f.previousAttach = type(parent, child);
 }
 function detach(parent, child, type) {
+  var _child$__r3f, _child$__r3f2;
+
   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);
-  }
+    target[key] = child.__r3f.previousAttach;
+  } else (_child$__r3f = child.__r3f) == null ? void 0 : _child$__r3f.previousAttach == null ? void 0 : _child$__r3f.previousAttach(parent, child);
+
+  (_child$__r3f2 = child.__r3f) == null ? true : delete _child$__r3f2.previousAttach;
 } // This function prepares a set of changes to be applied to the instance
 
 function diffProps(instance, {
@@ -279,11 +302,11 @@ function applyProps$1(instance, data) {
     if (value === DEFAULT + 'remove') {
       if (targetProp && targetProp.constructor) {
         // use the prop constructor to find the default it should be
-        value = new targetProp.constructor(memoized.args);
+        value = new targetProp.constructor(...memoized.args);
       } else if (currentInstance.constructor) {
         // create a blank slate of the instance and copy the particular parameter.
         // @ts-ignore
-        const defaultClassCall = new currentInstance.constructor(currentInstance.__r3f.memoizedProps.args);
+        const defaultClassCall = new currentInstance.constructor(...currentInstance.__r3f.memoizedProps.args);
         value = defaultClassCall[targetProp]; // destory the instance
 
         if (defaultClassCall.dispose) defaultClassCall.dispose(); // instance does not have constructor, just set it to 0
@@ -311,23 +334,12 @@ function applyProps$1(instance, data) {
 
               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 targetProp.set(value);
             } // Else, just overwrite the value
 
-      } else {
-        currentInstance[key] = value; // Auto-convert sRGB textures, for now ...
-        // https://github.com/pmndrs/react-three-fiber/issues/344
-
-        if (!rootState.linear && currentInstance[key] instanceof THREE__namespace.Texture) {
-          currentInstance[key].encoding = THREE__namespace.sRGBEncoding;
-        }
-      }
+      } else currentInstance[key] = value;
 
     invalidateInstance(instance);
-    return instance;
   });
 
   if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
@@ -340,6 +352,7 @@ function applyProps$1(instance, data) {
 
 
   if (changes.length && instance.parent) updateInstance(instance);
+  return instance;
 }
 function invalidateInstance(instance) {
   var _instance$__r3f4, _instance$__r3f4$root;
@@ -403,6 +416,7 @@ function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
 
 function removeInteractivity(store, object) {
   const {
+    events,
     internal
   } = store.getState(); // Removes every trace of an object from the data store
 
@@ -410,6 +424,7 @@ function removeInteractivity(store, object) {
   internal.initialHits = internal.initialHits.filter(o => o !== object);
   internal.hovered.forEach((value, key) => {
     if (value.eventObject === object || value.object === object) {
+      // Clear out intersects, they are outdated by now
       internal.hovered.delete(key);
     }
   });
@@ -419,31 +434,8 @@ function removeInteractivity(store, object) {
 }
 function createEvents(store) {
   const temp = new THREE__namespace.Vector3();
-  /** Sets up defaultRaycaster */
-
-  function prepareRay(event) {
-    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
-
-    const state = store.getState();
-    const {
-      raycaster,
-      mouse,
-      camera,
-      size
-    } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
-    // Events trigger outside of canvas when moved
-
-    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);
-  }
   /** Calculates delta */
 
-
   function calculateDistance(event) {
     const {
       internal
@@ -463,55 +455,70 @@ function createEvents(store) {
     }));
   }
 
-  function intersect(filter) {
+  function intersect(event, filter) {
     const state = store.getState();
-    const {
-      raycaster,
-      internal
-    } = state; // Skip event handling when noEvents is set
-
-    if (!raycaster.enabled) return [];
-    const seen = new Set();
+    const duplicates = new Set();
     const intersections = []; // Allow callers to eliminate event objects
 
-    const eventsObjects = filter ? filter(internal.interaction) : internal.interaction; // Intersect known handler objects and filter against duplicates
+    const eventsObjects = filter ? filter(state.internal.interaction) : state.internal.interaction; // Reset all raycaster cameras to undefined
+
+    eventsObjects.forEach(obj => {
+      const state = getRootState(obj);
+
+      if (state) {
+        state.raycaster.camera = undefined;
+      }
+    }); // Collect events
+
+    let hits = eventsObjects // Intersect objects
+    .flatMap(obj => {
+      const state = getRootState(obj); // Skip event handling when noEvents is set, or when the raycasters camera is null
+
+      if (!state || !state.events.enabled || state.raycaster.camera === null) return []; // When the camera is undefined we have to call the event layers update function
+
+      if (state.raycaster.camera === undefined) {
+        var _state$previousRoot;
+
+        state.events.compute == null ? void 0 : state.events.compute(event, state, (_state$previousRoot = state.previousRoot) == null ? void 0 : _state$previousRoot.getState()); // If the camera is still undefined we have to skip this layer entirely
+
+        if (state.raycaster.camera === undefined) state.raycaster.camera = null;
+      } // Intersect object by object
+
 
-    let intersects = raycaster.intersectObjects(eventsObjects, true).filter(item => {
+      return state.raycaster.camera ? state.raycaster.intersectObject(obj, true) : [];
+    }) // Sort by event priority and distance
+    .sort((a, b) => {
+      const aState = getRootState(a.object);
+      const bState = getRootState(b.object);
+      if (!aState || !bState) return 0;
+      return bState.events.priority - aState.events.priority || a.distance - b.distance;
+    }) // Filter out duplicates
+    .filter(item => {
       const id = makeId(item);
-      if (seen.has(id)) return false;
-      seen.add(id);
+      if (duplicates.has(id)) return false;
+      duplicates.add(id);
       return true;
     }); // https://github.com/mrdoob/three.js/issues/16031
-    // Allow custom userland intersect sort order
+    // Allow custom userland intersect sort order, this likely only makes sense on the root filter
 
-    if (raycaster.filter) intersects = raycaster.filter(intersects, state);
+    if (state.events.filter) hits = state.events.filter(hits, state); // Bubble up the events, find the event source (eventObject)
 
-    for (const intersect of intersects) {
-      let eventObject = intersect.object; // Bubble event up
+    for (const hit of hits) {
+      let eventObject = hit.object; // Bubble event up
 
       while (eventObject) {
         var _r3f2;
 
-        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...intersect,
+        if ((_r3f2 = eventObject.__r3f) != null && _r3f2.eventCount) intersections.push({ ...hit,
           eventObject
         });
         eventObject = eventObject.parent;
       }
-    }
-
-    return intersections;
-  }
-  /**  Creates filtered intersects and returns an array of positive hits */
-
+    } // If the interaction is captured, make all capturing targets part of the intersect.
 
-  function patchIntersects(intersections, event) {
-    const {
-      internal
-    } = store.getState(); // If the interaction is captured, make all capturing targets  part of the
-    // intersect.
 
-    if ('pointerId' in event && internal.capturedMap.has(event.pointerId)) {
-      for (let captureData of internal.capturedMap.get(event.pointerId).values()) {
+    if ('pointerId' in event && state.internal.capturedMap.has(event.pointerId)) {
+      for (let captureData of state.internal.capturedMap.get(event.pointerId).values()) {
         intersections.push(captureData.intersection);
       }
     }
@@ -524,13 +531,13 @@ function createEvents(store) {
   function handleIntersects(intersections, event, delta, callback) {
     const {
       raycaster,
-      mouse,
+      pointer,
       camera,
       internal
     } = store.getState(); // If anything has been found, forward it to the event listeners
 
     if (intersections.length) {
-      const unprojectedPoint = temp.set(mouse.x, mouse.y, 0).unproject(camera);
+      const unprojectedPoint = temp.set(pointer.x, pointer.y, 0).unproject(camera);
       const localState = {
         stopped: false
       };
@@ -581,8 +588,7 @@ function createEvents(store) {
 
         let raycastEvent = { ...hit,
           ...extractEventProps,
-          spaceX: mouse.x,
-          spaceY: mouse.y,
+          pointer,
           intersections,
           stopped: localState.stopped,
           delta,
@@ -619,8 +625,6 @@ function createEvents(store) {
             setPointerCapture,
             releasePointerCapture
           },
-          sourceEvent: event,
-          // deprecated
           nativeEvent: event
         }; // Call subscribers
 
@@ -685,14 +689,15 @@ function createEvents(store) {
       const {
         onPointerMissed,
         internal
-      } = store.getState();
-      prepareRay(event);
+      } = store.getState(); //prepareRay(event)
+
       internal.lastEvent.current = event; // Get fresh intersects
 
       const isPointerMove = name === 'onPointerMove';
       const isClickEvent = name === 'onClick' || name === 'onContextMenu' || name === 'onDoubleClick';
-      const filter = isPointerMove ? filterPointerEvents : undefined;
-      const hits = patchIntersects(intersect(filter), event);
+      const filter = isPointerMove ? filterPointerEvents : undefined; //const hits = patchIntersects(intersect(filter), event)
+
+      const hits = intersect(event, filter);
       const delta = isClickEvent ? calculateDistance(event) : 0; // Save initial coordinates on pointer-down
 
       if (name === 'onPointerDown') {
@@ -775,23 +780,6 @@ function createEvents(store) {
   };
 }
 
-// Type guard to tell a store from a portal
-const isStore = def => def && !!def.getState;
-
-const getContainer = (container, child) => {
-  var _container$__r3f$root, _container$__r3f;
-
-  return {
-    // If the container is not a root-store then it must be a THREE.Object3D into which part of the
-    // scene is portalled into. Now there can be two variants of this, either that object is part of
-    // the regular jsx tree, in which case it already has __r3f with a valid root attached, or it lies
-    // outside react, in which case we must take the root of the child that is about to be attached to it.
-    root: isStore(container) ? container : (_container$__r3f$root = (_container$__r3f = container.__r3f) == null ? void 0 : _container$__r3f.root) != null ? _container$__r3f$root : child.__r3f.root,
-    // The container is the eventual target into which objects are mounted, it has to be a THREE.Object3D
-    container: isStore(container) ? container.getState().scene : container
-  };
-};
-
 let catalogue = {};
 
 let extend = objects => void (catalogue = { ...catalogue,
@@ -803,22 +791,9 @@ function createRenderer(roots, getEventPriority) {
     args = [],
     attach,
     ...props
-  }, root, hostContext, internalInstanceHandle) {
+  }, root) {
     let name = `${type[0].toUpperCase()}${type.slice(1)}`;
-    let instance; // https://github.com/facebook/react/issues/17147
-    // Portals do not give us a root, they are themselves treated as a root by the reconciler
-    // In order to figure out the actual root we have to climb through fiber internals :(
-
-    if (!isStore(root) && internalInstanceHandle) {
-      const fn = node => {
-        if (!node.return) return node.stateNode && node.stateNode.containerInfo;else return fn(node.return);
-      };
-
-      root = fn(internalInstanceHandle);
-    } // Assert that by now we have a valid root
-
-
-    if (!root || !isStore(root)) throw `No valid root for ${name}!`; // Auto-attach geometries and materials
+    let instance; // Auto-attach geometries and materials
 
     if (attach === undefined) {
       if (name.endsWith('Geometry')) attach = 'geometry';else if (name.endsWith('Material')) attach = 'material';
@@ -828,6 +803,7 @@ function createRenderer(roots, getEventPriority) {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
+        type,
         root,
         attach,
         primitive: true
@@ -844,19 +820,21 @@ function createRenderer(roots, getEventPriority) {
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
+        type,
         root,
         attach,
         // TODO: Figure out what this is for
         memoizedProps: {
-          args: args.length === 0 ? null : args
+          args
         }
       });
     } // 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
+    // There is no reason to apply props to injects
 
 
-    applyProps$1(instance, props);
+    if (name !== 'inject') applyProps$1(instance, props);
     return instance;
   }
 
@@ -978,11 +956,11 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function switchInstance(instance, type, newProps, fiber) {
-    var _instance$__r3f;
+    var _instance$__r3f, _instance$__r3f2;
 
     const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
     if (!parent) return;
-    const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
+    const newInstance = createInstance(type, newProps, (_instance$__r3f2 = instance.__r3f) == null ? void 0 : _instance$__r3f2.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
     // This can not include primitives, which should not have declarative children
@@ -1015,19 +993,38 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler__default['default']({
-    appendChildToContainer: (parentInstance, child) => {
-      const {
-        container,
-        root
-      } = getContainer(parentInstance, child); // Link current root to the default scene
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMicrotask: true,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    noTimeout: -1,
+    appendChildToContainer: (container, child) => {
+      const scene = container.getState().scene; // Link current root to the default scene
 
-      container.__r3f.root = root;
-      appendChild(container, child);
+      scene.__r3f.root = container;
+      appendChild(scene, child);
+    },
+    removeChildFromContainer: (container, child) => removeChild(container.getState().scene, child),
+    insertInContainerBefore: (container, child, beforeChild) => insertBefore(container.getState().scene, child, beforeChild),
+    getRootHostContext: () => null,
+    getChildHostContext: parentHostContext => parentHostContext,
+
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f3;
+
+      const localState = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {}; // https://github.com/facebook/react/issues/20271
+      // Returning true will trigger commitMount
+
+      return !!localState.handlers;
     },
-    removeChildFromContainer: (parentInstance, child) => removeChild(getContainer(parentInstance, child).container, child),
-    insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
 
     prepareUpdate(instance, type, oldProps, newProps) {
+      // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1060,40 +1057,58 @@ function createRenderer(roots, getEventPriority) {
       else applyProps$1(instance, diff);
     },
 
+    commitMount(instance, type, props, int) {
+      var _instance$__r3f4;
+
+      // https://github.com/facebook/react/issues/20271
+      // This will make sure events are only added once to the central container
+      const localState = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
+    getPublicInstance: instance => instance,
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: container => prepare(container.getState().scene),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {},
+    createTextInstance: () => {},
+
     hideInstance(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f5;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
       if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f3;
+      var _instance$__r3f6;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      } = (_instance$__r3f6 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f6 : {};
       if (type && parent) attach(parent, instance, type);
       if (instance.isObject3D && props.visible == null || props.visible) instance.visible = true;
       invalidateInstance(instance);
     },
 
-    createInstance,
-    removeChild,
-    appendChild,
-    appendInitialChild: appendChild,
-    insertBefore,
-    warnsIfNotActing: true,
-    supportsMutation: true,
-    isPrimaryRenderer: false,
+    hideTextInstance: () => {
+      throw new Error('Text is not allowed in the R3F tree.');
+    },
+    // prettier-ignore
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1102,47 +1117,7 @@ function createRenderer(roots, getEventPriority) {
     // @ts-ignore
     cancelTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
     setTimeout: is.fun(setTimeout) ? setTimeout : undefined,
-    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined,
-    noTimeout: -1,
-    hideTextInstance: () => {
-      throw new Error('Text is not allowed in the R3F tree.');
-    },
-    // prettier-ignore
-    getPublicInstance: instance => instance,
-    getRootHostContext: () => null,
-    getChildHostContext: parentHostContext => parentHostContext,
-    createTextInstance: () => {},
-
-    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),
-    resetAfterCommit: () => {},
-    shouldSetTextContent: () => false,
-    clearContainer: () => false,
-    detachDeletedInstance: () => {}
+    clearTimeout: is.fun(clearTimeout) ? clearTimeout : undefined
   });
   return {
     reconciler,
@@ -1201,17 +1176,20 @@ const createStore = (invalidate, advance) => {
       }
     }));
 
+    const pointer = new THREE__namespace.Vector2();
     return {
+      set,
+      get,
       // Mock objects that have to be configured
       gl: null,
       camera: null,
       raycaster: null,
       events: {
+        priority: 1,
+        enabled: true,
         connected: false
       },
       xr: null,
-      set,
-      get,
       invalidate: () => invalidate(get()),
       advance: (timestamp, runGlobalEffects) => advance(timestamp, runGlobalEffects, get()),
       linear: false,
@@ -1219,7 +1197,8 @@ const createStore = (invalidate, advance) => {
       scene: prepare(new THREE__namespace.Scene()),
       controls: null,
       clock: new THREE__namespace.Clock(),
-      mouse: new THREE__namespace.Vector2(),
+      pointer,
+      mouse: pointer,
       frameloop: 'always',
       onPointerMissed: undefined,
       performance: {
@@ -1251,6 +1230,11 @@ const createStore = (invalidate, advance) => {
         factor: 0,
         getCurrentViewport
       },
+      setEvents: events => set(state => ({ ...state,
+        events: { ...state.events,
+          events
+        }
+      })),
       setSize: (width, height) => {
         const camera = get().camera;
         const size = {
@@ -1288,6 +1272,7 @@ const createStore = (invalidate, advance) => {
           frameloop
         }));
       },
+      previousRoot: undefined,
       internal: {
         active: false,
         priority: 0,
@@ -1342,7 +1327,6 @@ const createStore = (invalidate, advance) => {
       camera,
       size,
       viewport,
-      internal,
       gl
     } = rootState.getState();
 
@@ -1515,6 +1499,11 @@ function loadingFn(extensions, onProgress) {
   };
 }
 
+function useMemoizedFn(fn) {
+  const fnRef = React__namespace.useRef(fn);
+  React__namespace.useLayoutEffect(() => void (fnRef.current = fn), [fn]);
+  return (...args) => fnRef.current == null ? void 0 : fnRef.current(...args);
+}
 function useLoader(Proto, input, extensions, onProgress) {
   // Use suspense to load async assets
   const keys = Array.isArray(input) ? input : [input];
@@ -1614,9 +1603,7 @@ function createRoot(canvas) {
         params,
         ...options
       } = raycastOptions || {};
-      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, {
-        enabled: true,
-        ...options
+      if (!is.equ(options, raycaster, shallowLoose)) applyProps(raycaster, { ...options
       });
       if (!is.equ(params, raycaster.params, shallowLoose)) applyProps(raycaster, {
         params: { ...raycaster.params,
@@ -1652,7 +1639,7 @@ function createRoot(canvas) {
 
         const handleSessionChange = () => {
           const gl = store.getState().gl;
-          gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+          gl.xr.enabled = gl.xr.isPresenting; // @ts-ignore
           // WebXRManager's signature is incorrect.
           // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
@@ -1694,6 +1681,7 @@ function createRoot(canvas) {
       } // Set color management
 
 
+      if (THREE__namespace.ColorManagement) THREE__namespace.ColorManagement.legacyMode = false;
       const outputEncoding = linear ? THREE__namespace.LinearEncoding : THREE__namespace.sRGBEncoding;
       const toneMapping = flat ? THREE__namespace.NoToneMapping : THREE__namespace.ACESFilmicToneMapping;
       if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
@@ -1730,14 +1718,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1749,35 +1737,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React__namespace.useEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    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); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__namespace.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1809,10 +1798,67 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = React__namespace.unstable_act;
+function createPortal(children, container, state) {
+  return /*#__PURE__*/React__namespace.createElement(Portal, {
+    children: children,
+    container: container,
+    state: state
+  });
+}
+
+function Portal({
+  state = {},
+  children,
+  container
+}) {
+  /** This has to be a component because it would not be able to call useThree/useStore otherwise since
+   *  if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
+   *  the "R3F hooks can only be used within the Canvas component!" warning:
+   *  <Canvas>
+   *    {createPortal(...)} */
+  const {
+    events,
+    ...rest
+  } = state;
+  const previousRoot = useStore();
+  const [raycaster] = React__namespace.useState(() => new THREE__namespace.Raycaster());
+  const inject = React__namespace.useCallback((state, injectState) => {
+    const intersect = { ...state
+    };
 
-function createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
+    if (injectState) {
+      // Only the fields of "state" that do not differ from injectState
+      Object.keys(state).forEach(key => {
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
+      });
+    }
+
+    return { ...intersect,
+      scene: container,
+      previousRoot,
+      raycaster,
+      events: { ...state.events,
+        ...events
+      },
+      ...rest
+    };
+  }, [state]);
+  const [useInjectStore] = React__namespace.useState(() => {
+    const store = create__default['default']((set, get) => ({ ...inject(previousRoot.getState()),
+      set,
+      get
+    }));
+    previousRoot.subscribe(state => useInjectStore.setState(injectState => inject(state, injectState)));
+    return store;
+  });
+  React__namespace.useEffect(() => {
+    useInjectStore.setState(injectState => inject(previousRoot.getState(), injectState));
+  }, [inject]);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1820,6 +1866,7 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: '18.0.0'
 });
+const act = React__namespace.unstable_act;
 
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
@@ -1833,6 +1880,7 @@ exports.createPortal = createPortal;
 exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
+exports.getRootState = getRootState;
 exports.invalidate = invalidate;
 exports.omit = omit;
 exports.pick = pick;
@@ -1844,5 +1892,6 @@ exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useLoader = useLoader;
+exports.useMemoizedFn = useMemoizedFn;
 exports.useStore = useStore;
 exports.useThree = useThree;