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

package/dist/{index-e78dd2f0.esm.js → index-32069e53.esm.js}

@@ -1,10 +1,10 @@
-import * as React from 'react';
-import { suspend, preload, clear } from 'suspend-react';
 import * as THREE from 'three';
+import * as React from 'react';
 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';
+import { suspend, preload, clear } from 'suspend-react';
 
 var threeTypes = /*#__PURE__*/Object.freeze({
   __proto__: null
@@ -66,7 +66,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;
 
@@ -74,7 +74,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
@@ -109,7 +115,9 @@ function prepare(object, state) {
 
   if (state != null && state.primitive || !instance.__r3f) {
     instance.__r3f = {
+      type: '',
       root: null,
+      previousAttach: null,
       memoizedProps: {},
       eventCount: 0,
       handlers: {},
@@ -137,32 +145,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, {
@@ -250,11 +268,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
@@ -282,20 +300,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.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 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.Texture) {
-          currentInstance[key].encoding = THREE.sRGBEncoding;
-        }
-      }
+      } else currentInstance[key] = value;
 
     invalidateInstance(instance);
     return instance;
@@ -746,23 +754,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,
@@ -774,22 +765,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';
@@ -799,6 +777,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
@@ -815,19 +794,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;
   }
 
@@ -949,11 +930,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
@@ -986,19 +967,38 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler({
-    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 {
@@ -1031,40 +1031,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() : DefaultEventPriority,
     // @ts-ignore
     now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
@@ -1073,47 +1091,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,
@@ -1460,6 +1438,43 @@ function useStore() {
 function useThree(selector = state => state, equalityFn) {
   return useStore()(selector, equalityFn);
 }
+function useInject(state) {
+  const useOriginalStore = useStore();
+  const useInjectStore = React.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.useMemo(() => [({
+    children
+  }) => /*#__PURE__*/React.createElement(context.Provider, {
+    value: useInjectStore
+  }, children), useInjectStore], [useInjectStore]);
+}
 function useFrame(callback, renderPriority = 0) {
   const subscribe = useStore().getState().internal.subscribe; // Update ref
 
@@ -1623,7 +1638,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
 
@@ -1665,6 +1680,7 @@ function createRoot(canvas) {
       } // Set color management
 
 
+      if (THREE.ColorManagement) THREE.ColorManagement.legacyMode = false;
       const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
       const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
       if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
@@ -1780,10 +1796,29 @@ function unmountComponentAtNode(canvas, callback) {
   }
 }
 
-const act = React.unstable_act;
+function createPortal(children, container, state) {
+  return /*#__PURE__*/React.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.useMemo(() => ({ ...state,
+    scene: container
+  }), [state, container]);
+  const [PortalProvider, portalRoot] = useInject(portalState);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, reconciler.createPortal( /*#__PURE__*/React.createElement(PortalProvider, null, children), portalRoot, null));
 }
 
 reconciler.injectIntoDevTools({
@@ -1791,5 +1826,6 @@ reconciler.injectIntoDevTools({
   rendererPackageName: '@react-three/fiber',
   version: '18.0.0'
 });
+const act = React.unstable_act;
 
-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 };
+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, useInject as w, useFrame as x, useGraph as y, useLoader as z };