@react-three/fiber 8.0.0-beta.4 → 8.0.0-beta.5

package/dist/{index-2b21ab4b.cjs.dev.js → index-5dc2de40.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);
 
@@ -95,7 +95,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 +103,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
@@ -139,30 +145,8 @@ function prepare(object, state) {
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
       type: '',
-      context: {
-        current: null
-      },
-      getContext: () => {
-        const injects = [];
-        let inject = instance.__r3f.context.current;
-
-        while (inject) {
-          var _inject$memoizedProps, _inject, _inject$context;
-
-          const {
-            children,
-            args,
-            ...props
-          } = (_inject$memoizedProps = (_inject = inject) == null ? void 0 : _inject.memoizedProps) != null ? _inject$memoizedProps : {};
-          injects.push(props);
-          inject = (_inject$context = inject.context) == null ? void 0 : _inject$context.current;
-        }
-
-        return injects.reverse().reduce((prev, cur) => ({ ...prev,
-          ...cur
-        }), {});
-      },
       root: null,
+      previousAttach: null,
       memoizedProps: {},
       eventCount: 0,
       handlers: {},
@@ -190,32 +174,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, {
@@ -335,20 +329,10 @@ 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;
@@ -799,54 +783,20 @@ 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,
   ...objects
 });
 
-extend({
-  Inject: THREE__namespace.Group
-});
-
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
     ...props
-  }, root, context, 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';
@@ -858,7 +808,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(object, {
         type,
         root,
-        context,
         attach,
         primitive: true
       });
@@ -876,7 +825,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(new target(...args), {
         type,
         root,
-        context,
         attach,
         // TODO: Figure out what this is for
         memoizedProps: {
@@ -894,15 +842,6 @@ function createRenderer(roots, getEventPriority) {
   }
 
   function appendChild(parentInstance, child) {
-    // https://github.com/facebook/react/issues/24138
-    // Injects are special purpose "onion layers" that inject contextual information into the scene graph.
-    // Since react-reconciler does not allow us to access the current host context we trick it by leading
-    // back to it from the first child that is added to it. We just connect the inject to it's own host context.
-    if ((parentInstance == null ? void 0 : parentInstance.__r3f.type) === 'inject') {
-      const context = child == null ? void 0 : child.__r3f.context;
-      if (context) context.current = parentInstance.__r3f;
-    }
-
     let added = false;
 
     if (child) {
@@ -998,7 +937,6 @@ function createRenderer(roots, getEventPriority) {
 
       if (child.__r3f) {
         delete child.__r3f.root;
-        delete child.__r3f.context;
         delete child.__r3f.objects;
         delete child.__r3f.handlers;
         delete child.__r3f.memoizedProps;
@@ -1021,11 +959,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
@@ -1068,46 +1006,28 @@ function createRenderer(roots, getEventPriority) {
     supportsMutation: true,
     isPrimaryRenderer: false,
     noTimeout: -1,
-    appendChildToContainer: (parentInstance, child) => {
-      const {
-        container,
-        root
-      } = getContainer(parentInstance, child); // Link current root to the default scene
+    appendChildToContainer: (container, child) => {
+      const scene = container.getState().scene; // Link current root to the default scene
 
-      container.__r3f.root = root;
-      appendChild(container, child);
-    },
-    removeChildFromContainer: (parentInstance, child) => removeChild(getContainer(parentInstance, child).container, child),
-    insertInContainerBefore: (parentInstance, child, beforeChild) => insertBefore(getContainer(parentInstance, child).container, child, beforeChild),
-    getRootHostContext: () => ({
-      current: null
-    }),
-    getChildHostContext: (parentHostContext, type) => {
-      // This is a little misleading, this function does not determine the host context for the element at hand,
-      // but rather for all the children of it. The context for an inject is and will be the scene, everything
-      // within an inject is contextual to it.
-      if (type === 'inject') return {
-        current: null
-      };
-      return parentHostContext;
+      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$__r3f2;
+      var _instance$__r3f3;
 
-      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // https://github.com/facebook/react/issues/20271
+      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;
     },
 
     prepareUpdate(instance, type, oldProps, newProps) {
-      // Injects are special purpose "onion layers" that inject contextual information into the scene graph
-      // Because the context of an inject is still the scene we have to rely on children to give us the inject-context
-      // so that we can set up props.
-      if (type === 'inject' && instance.children.length) ; // Create diff-sets
-
-
+      // Create diff-sets
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1141,11 +1061,11 @@ function createRenderer(roots, getEventPriority) {
     },
 
     commitMount(instance, type, props, int) {
-      var _instance$__r3f3;
+      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$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      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);
@@ -1155,7 +1075,7 @@ function createRenderer(roots, getEventPriority) {
     getPublicInstance: instance => instance,
     shouldDeprioritizeSubtree: () => false,
     prepareForCommit: () => null,
-    preparePortalMount: containerInfo => prepare(containerInfo),
+    preparePortalMount: container => prepare(container.getState().scene),
     resetAfterCommit: () => {},
     shouldSetTextContent: () => false,
     clearContainer: () => false,
@@ -1163,26 +1083,26 @@ function createRenderer(roots, getEventPriority) {
     createTextInstance: () => {},
 
     hideInstance(instance) {
-      var _instance$__r3f4;
+      var _instance$__r3f5;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
+      } = (_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$__r3f5;
+      var _instance$__r3f6;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
+      } = (_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);
@@ -1547,6 +1467,43 @@ function useStore() {
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
+function useInject(state) {
+  const useOriginalStore = useStore();
+  const useInjectStore = React__namespace.useMemo(() => {
+    const useInjected = (sel = state => state) => {
+      // Execute the useStore hook with the selector once, to maintain reactivity, result doesn't matter
+      useOriginalStore(sel); // Inject data and return the result, either selected or raw
+
+      return sel({ ...useOriginalStore.getState(),
+        ...state
+      });
+    };
+
+    useInjected.setState = useOriginalStore.setState;
+    useInjected.destroy = useOriginalStore.destroy; // Patch getState
+
+    useInjected.getState = () => {
+      return { ...useOriginalStore.getState(),
+        ...state
+      };
+    }; // Patch subscribe
+
+
+    useInjected.subscribe = listener => {
+      return useOriginalStore.subscribe((current, previous) => listener({ ...current,
+        ...state
+      }, previous));
+    };
+
+    return useInjected;
+  }, [useOriginalStore, state]); // Return the patched store and a provider component
+
+  return React__namespace.useMemo(() => [({
+    children
+  }) => /*#__PURE__*/React__namespace.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore], [useInjectStore]);
+}
 function useFrame(callback, renderPriority = 0) {
   const subscribe = useStore().getState().internal.subscribe; // Update ref
 
@@ -1710,7 +1667,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
 
@@ -1752,6 +1709,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;
@@ -1867,10 +1825,29 @@ 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 createPortal(children, container) {
-  return reconciler.createPortal(children, container, null, null);
+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 in 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 portalState = React__namespace.useMemo(() => ({ ...state,
+    scene: container
+  }), [state, container]);
+  const [PortalProvider, portalRoot] = useInject(portalState);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, reconciler.createPortal( /*#__PURE__*/React__namespace.createElement(PortalProvider, null, children), portalRoot, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1878,6 +1855,7 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: '18.0.0'
 });
+const act = React__namespace.unstable_act;
 
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
@@ -1901,6 +1879,7 @@ exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
+exports.useInject = useInject;
 exports.useLoader = useLoader;
 exports.useStore = useStore;
 exports.useThree = useThree;