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

package/dist/declarations/src/core/hooks.d.ts

@@ -10,7 +10,7 @@ export declare type Extensions = (loader: THREE.Loader) => void;
 export declare type LoaderResult<T> = T extends any[] ? Loader<T[number]> : Loader<T>;
 export declare type ConditionalType<Child, Parent, Truthy, Falsy> = Child extends Parent ? Truthy : Falsy;
 export declare type BranchingReturn<T, Parent, Coerced> = ConditionalType<T, Parent, Coerced, T>;
-export declare function useStore(): import("zustand").UseStore<RootState>;
+export declare function useStore(): import("zustand").UseStore<RootState, import("zustand").StoreApi<RootState>>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;

package/dist/declarations/src/core/renderer.d.ts

@@ -8,8 +8,18 @@ export declare type Root = {
     fiber: Reconciler.FiberRoot;
     store: UseStore<RootState>;
 };
+export declare type HostContext = React.MutableRefObject<{
+    [key: string]: any;
+} | null>;
 export declare type LocalState = {
+    type: string;
     root: UseStore<RootState>;
+    context: React.MutableRefObject<{
+        [key: string]: any;
+    } | null>;
+    getContext: () => {
+        [key: string]: any;
+    };
     objects: Instance[];
     parent: Instance | null;
     primitive?: boolean;

package/dist/declarations/src/core/store.d.ts

@@ -110,6 +110,6 @@ export declare type StoreProps = {
     };
     onPointerMissed?: (event: MouseEvent) => void;
 };
-declare const context: React.Context<UseStore<RootState>>;
+declare const context: React.Context<UseStore<RootState, import("zustand").StoreApi<RootState>>>;
 declare const createStore: (invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void) => UseStore<RootState>;
 export { createStore, context };

package/dist/declarations/src/three-types.d.ts

@@ -41,6 +41,7 @@ export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
 export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Node<T, P>;
 export declare type MaterialNode<T extends THREE.Material, P> = Node<T, P>;
 export declare type LightNode<T extends THREE.Light, P> = Object3DNode<T, P>;
+export declare type Object3DProps = Object3DNode<THREE.Object3D, typeof THREE.Object3D>;
 export declare type AudioListenerProps = Object3DNode<THREE.AudioListener, typeof THREE.AudioListener>;
 export declare type PositionalAudioProps = Object3DNode<THREE.PositionalAudio, typeof THREE.PositionalAudio>;
 export declare type MeshProps = Object3DNode<THREE.Mesh, typeof THREE.Mesh>;
@@ -166,7 +167,15 @@ export declare type Matrix3Props = Node<THREE.Matrix3, typeof THREE.Matrix3>;
 export declare type Matrix4Props = Node<THREE.Matrix4, typeof THREE.Matrix4>;
 export declare type QuaternionProps = Node<THREE.Quaternion, typeof THREE.Quaternion>;
 export declare type BufferAttributeProps = Node<THREE.BufferAttribute, typeof THREE.BufferAttribute>;
+export declare type Float16BufferAttributeProps = Node<THREE.Float16BufferAttribute, typeof THREE.Float16BufferAttribute>;
 export declare type Float32BufferAttributeProps = Node<THREE.Float32BufferAttribute, typeof THREE.Float32BufferAttribute>;
+export declare type Float64BufferAttributeProps = Node<THREE.Float64BufferAttribute, typeof THREE.Float64BufferAttribute>;
+export declare type Int8BufferAttributeProps = Node<THREE.Int8BufferAttribute, typeof THREE.Int8BufferAttribute>;
+export declare type Int16BufferAttributeProps = Node<THREE.Int16BufferAttribute, typeof THREE.Int16BufferAttribute>;
+export declare type Int32BufferAttributeProps = Node<THREE.Int32BufferAttribute, typeof THREE.Int32BufferAttribute>;
+export declare type Uint8BufferAttributeProps = Node<THREE.Uint8BufferAttribute, typeof THREE.Uint8BufferAttribute>;
+export declare type Uint16BufferAttributeProps = Node<THREE.Uint16BufferAttribute, typeof THREE.Uint16BufferAttribute>;
+export declare type Uint32BufferAttributeProps = Node<THREE.Uint32BufferAttribute, typeof THREE.Uint32BufferAttribute>;
 export declare type InstancedBufferAttributeProps = Node<THREE.InstancedBufferAttribute, typeof THREE.InstancedBufferAttribute>;
 export declare type ColorProps = Node<THREE.Color, ColorArray>;
 export declare type FogProps = Node<THREE.Fog, typeof THREE.Fog>;
@@ -175,6 +184,7 @@ export declare type ShapeProps = Node<THREE.Shape, typeof THREE.Shape>;
 declare global {
     namespace JSX {
         interface IntrinsicElements {
+            object3D: Object3DProps;
             audioListener: AudioListenerProps;
             positionalAudio: PositionalAudioProps;
             mesh: MeshProps;
@@ -296,12 +306,25 @@ declare global {
             matrix4: Matrix4Props;
             quaternion: QuaternionProps;
             bufferAttribute: BufferAttributeProps;
+            float16BufferAttribute: Float16BufferAttributeProps;
             float32BufferAttribute: Float32BufferAttributeProps;
+            float64BufferAttribute: Float64BufferAttributeProps;
+            int8BufferAttribute: Int8BufferAttributeProps;
+            int16BufferAttribute: Int16BufferAttributeProps;
+            int32BufferAttribute: Int32BufferAttributeProps;
+            uint8BufferAttribute: Uint8BufferAttributeProps;
+            uint16BufferAttribute: Uint16BufferAttributeProps;
+            uint32BufferAttribute: Uint32BufferAttributeProps;
             instancedBufferAttribute: InstancedBufferAttributeProps;
             color: ColorProps;
             fog: FogProps;
             fogExp2: FogExp2Props;
             shape: ShapeProps;
+            inject: {
+                children: React.ReactNode;
+            } & {
+                [key: string]: any;
+            };
         }
     }
 }

package/dist/{index-05ebefd3.cjs.dev.js → index-2b21ab4b.cjs.dev.js}

@@ -138,6 +138,30 @@ 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,
       memoizedProps: {},
       eventCount: 0,
@@ -279,11 +303,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
@@ -798,12 +822,16 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
+extend({
+  Inject: THREE__namespace.Group
+});
+
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
     ...props
-  }, root, hostContext, internalInstanceHandle) {
+  }, root, context, internalInstanceHandle) {
     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
@@ -828,7 +856,9 @@ function createRenderer(roots, getEventPriority) {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
+        type,
         root,
+        context,
         attach,
         primitive: true
       });
@@ -844,23 +874,35 @@ function createRenderer(roots, getEventPriority) {
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
+        type,
         root,
+        context,
         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;
   }
 
   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) {
@@ -956,6 +998,7 @@ 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;
@@ -1015,6 +1058,16 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler__default['default']({
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMicrotask: true,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    noTimeout: -1,
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -1026,8 +1079,35 @@ function createRenderer(roots, getEventPriority) {
     },
     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;
+    },
+
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f2;
+
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // 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
+
+
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1060,40 +1140,58 @@ function createRenderer(roots, getEventPriority) {
       else applyProps$1(instance, diff);
     },
 
+    commitMount(instance, type, props, int) {
+      var _instance$__r3f3;
+
+      // 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 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
+    getPublicInstance: instance => instance,
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: containerInfo => prepare(containerInfo),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {},
+    createTextInstance: () => {},
+
     hideInstance(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f4;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
       if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f3;
+      var _instance$__r3f5;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
       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 +1200,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,

package/dist/{index-e78dd2f0.esm.js → index-3d7af2b7.esm.js}

@@ -109,6 +109,30 @@ 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,
       memoizedProps: {},
       eventCount: 0,
@@ -250,11 +274,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
@@ -769,12 +793,16 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
+extend({
+  Inject: THREE.Group
+});
+
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
     ...props
-  }, root, hostContext, internalInstanceHandle) {
+  }, root, context, internalInstanceHandle) {
     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
@@ -799,7 +827,9 @@ function createRenderer(roots, getEventPriority) {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
+        type,
         root,
+        context,
         attach,
         primitive: true
       });
@@ -815,23 +845,35 @@ function createRenderer(roots, getEventPriority) {
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
+        type,
         root,
+        context,
         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;
   }
 
   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) {
@@ -927,6 +969,7 @@ 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;
@@ -986,6 +1029,16 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler({
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMicrotask: true,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    noTimeout: -1,
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -997,8 +1050,35 @@ function createRenderer(roots, getEventPriority) {
     },
     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;
+    },
+
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f2;
+
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // 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
+
+
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1031,40 +1111,58 @@ function createRenderer(roots, getEventPriority) {
       else applyProps$1(instance, diff);
     },
 
+    commitMount(instance, type, props, int) {
+      var _instance$__r3f3;
+
+      // 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 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
+    getPublicInstance: instance => instance,
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: containerInfo => prepare(containerInfo),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {},
+    createTextInstance: () => {},
+
     hideInstance(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f4;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
       if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f3;
+      var _instance$__r3f5;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
       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 +1171,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,

package/dist/{index-85b2df17.cjs.prod.js → index-a9d2810c.cjs.prod.js}

@@ -138,6 +138,30 @@ 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,
       memoizedProps: {},
       eventCount: 0,
@@ -279,11 +303,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
@@ -798,12 +822,16 @@ let extend = objects => void (catalogue = { ...catalogue,
   ...objects
 });
 
+extend({
+  Inject: THREE__namespace.Group
+});
+
 function createRenderer(roots, getEventPriority) {
   function createInstance(type, {
     args = [],
     attach,
     ...props
-  }, root, hostContext, internalInstanceHandle) {
+  }, root, context, internalInstanceHandle) {
     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
@@ -828,7 +856,9 @@ function createRenderer(roots, getEventPriority) {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
       instance = prepare(object, {
+        type,
         root,
+        context,
         attach,
         primitive: true
       });
@@ -844,23 +874,35 @@ function createRenderer(roots, getEventPriority) {
       // Append memoized props with args so it's not forgotten
 
       instance = prepare(new target(...args), {
+        type,
         root,
+        context,
         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;
   }
 
   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) {
@@ -956,6 +998,7 @@ 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;
@@ -1015,6 +1058,16 @@ function createRenderer(roots, getEventPriority) {
   }
 
   const reconciler = Reconciler__default['default']({
+    createInstance,
+    removeChild,
+    appendChild,
+    appendInitialChild: appendChild,
+    insertBefore,
+    supportsMicrotask: true,
+    warnsIfNotActing: true,
+    supportsMutation: true,
+    isPrimaryRenderer: false,
+    noTimeout: -1,
     appendChildToContainer: (parentInstance, child) => {
       const {
         container,
@@ -1026,8 +1079,35 @@ function createRenderer(roots, getEventPriority) {
     },
     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;
+    },
+
+    finalizeInitialChildren(instance) {
+      var _instance$__r3f2;
+
+      const localState = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {}; // 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
+
+
       if (instance.__r3f.primitive && newProps.object && newProps.object !== instance) {
         return [true];
       } else {
@@ -1060,40 +1140,58 @@ function createRenderer(roots, getEventPriority) {
       else applyProps$1(instance, diff);
     },
 
+    commitMount(instance, type, props, int) {
+      var _instance$__r3f3;
+
+      // 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 : {};
+
+      if (instance.raycast && localState.handlers && localState.eventCount) {
+        instance.__r3f.root.getState().internal.interaction.push(instance);
+      }
+    },
+
+    getPublicInstance: instance => instance,
+    shouldDeprioritizeSubtree: () => false,
+    prepareForCommit: () => null,
+    preparePortalMount: containerInfo => prepare(containerInfo),
+    resetAfterCommit: () => {},
+    shouldSetTextContent: () => false,
+    clearContainer: () => false,
+    detachDeletedInstance: () => {},
+    createTextInstance: () => {},
+
     hideInstance(instance) {
-      var _instance$__r3f2;
+      var _instance$__r3f4;
 
       // Deatch while the instance is hidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f2 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f2 : {};
+      } = (_instance$__r3f4 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f4 : {};
       if (type && parent) detach(parent, instance, type);
       if (instance.isObject3D) instance.visible = false;
       invalidateInstance(instance);
     },
 
     unhideInstance(instance, props) {
-      var _instance$__r3f3;
+      var _instance$__r3f5;
 
       // Re-attach when the instance is unhidden
       const {
         attach: type,
         parent
-      } = (_instance$__r3f3 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f3 : {};
+      } = (_instance$__r3f5 = instance == null ? void 0 : instance.__r3f) != null ? _instance$__r3f5 : {};
       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 +1200,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,

package/dist/react-three-fiber.cjs.dev.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-05ebefd3.cjs.dev.js');
+var index = require('./index-2b21ab4b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.cjs.prod.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-85b2df17.cjs.prod.js');
+var index = require('./index-a9d2810c.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.esm.js

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-e78dd2f0.esm.js';
-export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from './index-e78dd2f0.esm.js';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-3d7af2b7.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from './index-3d7af2b7.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/native/dist/react-three-fiber-native.cjs.dev.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-05ebefd3.cjs.dev.js');
+var index = require('../../dist/index-2b21ab4b.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var reactNative = require('react-native');

package/native/dist/react-three-fiber-native.cjs.prod.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-85b2df17.cjs.prod.js');
+var index = require('../../dist/index-a9d2810c.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var reactNative = require('react-native');

package/native/dist/react-three-fiber-native.esm.js

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import { Asset } from 'expo-asset';
-import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-e78dd2f0.esm.js';
-export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-e78dd2f0.esm.js';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-3d7af2b7.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-3d7af2b7.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { PixelRatio, View, StyleSheet } from 'react-native';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-beta.1",
+  "version": "8.0.0-beta.4",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -42,21 +42,22 @@
     "prebuild": "cp ../../readme.md readme.md"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
+    "@babel/runtime": "^7.17.2",
+    "@types/react-reconciler": "^0.26.4",
     "react-merge-refs": "^1.1.0",
-    "react-reconciler": "^0.27.0-rc.0",
+    "react-reconciler": "^0.27.0-rc.2",
     "react-use-measure": "^2.1.1",
-    "scheduler": "0.21.0-rc.0",
+    "scheduler": "^0.21.0-rc.2",
     "suspend-react": "^0.0.8",
-    "zustand": "^3.5.10"
+    "zustand": "^3.7.1"
   },
   "peerDependencies": {
-    "react": ">=18.0",
-    "react-dom": ">=18.0",
-    "react-native": ">=0.64",
     "expo": ">=43.0",
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
+    "react": ">=18.0",
+    "react-dom": ">=18.0",
+    "react-native": ">=0.64",
     "three": ">=0.133"
   },
   "peerDependenciesMeta": {