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

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

@@ -1,5 +1,5 @@
 import * as THREE from 'three';
-import type { UseStore } from 'zustand';
+import type { UseBoundStore } from 'zustand';
 import type { RootState } from './store';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
@@ -58,7 +58,7 @@ export interface PointerCaptureTarget {
     target: Element;
 }
 export declare function getEventPriority(): any;
-export declare function removeInteractivity(store: UseStore<RootState>, object: THREE.Object3D): void;
-export declare function createEvents(store: UseStore<RootState>): {
+export declare function removeInteractivity(store: UseBoundStore<RootState>, object: THREE.Object3D): void;
+export declare function createEvents(store: UseBoundStore<RootState>): {
     handlePointer: (name: string) => (event: DomEvent) => void;
 };

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

@@ -1,5 +1,6 @@
 import * as THREE from 'three';
-import { StateSelector, EqualityChecker } from 'zustand';
+import * as React from 'react';
+import { StateSelector, EqualityChecker, UseBoundStore } from 'zustand';
 import { GLTF } from 'three/examples/jsm/loaders/GLTFLoader';
 import { RootState, RenderCallback } from './store';
 import { ObjectMap } from './utils';
@@ -10,8 +11,11 @@ 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, import("zustand").StoreApi<RootState>>;
+export declare function useStore(): UseBoundStore<RootState, import("zustand").StoreApi<RootState>>;
 export declare function useThree<T = RootState>(selector?: StateSelector<RootState, T>, equalityFn?: EqualityChecker<T>): T;
+export declare function useInject(state: Partial<RootState>): [React.FC<{
+    children: React.ReactNode;
+}>, UseBoundStore<RootState, import("zustand").StoreApi<RootState>>];
 export declare function useFrame(callback: RenderCallback, renderPriority?: number): null;
 export declare function useGraph(object: THREE.Object3D): ObjectMap;
 export declare function useLoader<T, U extends string | string[]>(Proto: new () => LoaderResult<T>, input: U, extensions?: Extensions, onProgress?: (event: ProgressEvent<EventTarget>) => void): U extends any[] ? BranchingReturn<T, GLTF, GLTF & ObjectMap>[] : BranchingReturn<T, GLTF, GLTF & ObjectMap>;

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

@@ -1,7 +1,7 @@
 /// <reference types="react-reconciler" />
 import * as THREE from 'three';
 import * as React from 'react';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { Renderer, StoreProps, context, RootState, Size } from './store';
 import { extend, Root } from './renderer';
 import { addEffect, addAfterEffect, addTail } from './loop';
@@ -16,19 +16,19 @@ declare type Properties<T> = Pick<T, {
 declare type GLProps = Renderer | ((canvas: HTMLCanvasElement) => Renderer) | Partial<Properties<THREE.WebGLRenderer> | THREE.WebGLRendererParameters> | undefined;
 export declare type RenderProps<TCanvas extends Element> = Omit<StoreProps, 'gl' | 'events' | 'size'> & {
     gl?: GLProps;
-    events?: (store: UseStore<RootState>) => EventManager<TCanvas>;
+    events?: (store: UseBoundStore<RootState>) => EventManager<TCanvas>;
     size?: Size;
     onCreated?: (state: RootState) => void;
 };
 export declare type ReconcilerRoot<TCanvas extends Element> = {
     configure: (config?: RenderProps<TCanvas>) => ReconcilerRoot<TCanvas>;
-    render: (element: React.ReactNode) => UseStore<RootState>;
+    render: (element: React.ReactNode) => UseBoundStore<RootState>;
     unmount: () => void;
 };
 declare function createRoot<TCanvas extends Element>(canvas: TCanvas): ReconcilerRoot<TCanvas>;
-declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, config?: RenderProps<TCanvas>): UseStore<RootState>;
+declare function render<TCanvas extends Element>(element: React.ReactNode, canvas: TCanvas, config?: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
+declare function createPortal(children: React.ReactNode, container: THREE.Object3D, state?: Partial<RootState>): React.ReactNode;
 declare const act: any;
-declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
 export * from './hooks';
 export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };

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

@@ -1,38 +1,29 @@
 import * as THREE from 'three';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import Reconciler from 'react-reconciler';
 import { prepare, applyProps } from './utils';
 import { RootState } from './store';
 import { EventHandlers } from './events';
 export declare type Root = {
     fiber: Reconciler.FiberRoot;
-    store: UseStore<RootState>;
+    store: UseBoundStore<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;
-    };
+    root: UseBoundStore<RootState>;
     objects: Instance[];
     parent: Instance | null;
     primitive?: boolean;
     eventCount: number;
     handlers: Partial<EventHandlers>;
     attach?: AttachType;
-    previousAttach?: any;
+    previousAttach: any;
     memoizedProps: {
         [key: string]: any;
     };
 };
-export declare type AttachFnType = (parent: Instance, self: Instance) => void;
-export declare type AttachType = string | [attach: string | AttachFnType, detach: string | AttachFnType];
+export declare type AttachFnType = (parent: Instance, self: Instance) => () => void;
+export declare type AttachType = string | AttachFnType;
 export declare type BaseInstance = Omit<THREE.Object3D, 'children' | 'attach' | 'add' | 'remove' | 'raycast'> & {
     __r3f: LocalState;
     children: Instance[];

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

@@ -1,7 +1,7 @@
 import * as THREE from 'three';
 import * as React from 'react';
 import * as ReactThreeFiber from '../three-types';
-import { GetState, SetState, UseStore } from 'zustand';
+import { GetState, SetState, UseBoundStore } from 'zustand';
 import { DomEvent, EventManager, PointerCaptureTarget, ThreeEvent } from './events';
 export interface Intersection extends THREE.Intersection {
     eventObject: THREE.Object3D;
@@ -110,6 +110,6 @@ export declare type StoreProps = {
     };
     onPointerMissed?: (event: MouseEvent) => void;
 };
-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>;
+declare const context: React.Context<UseBoundStore<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) => UseBoundStore<RootState>;
 export { createStore, context };

package/dist/declarations/src/native/Canvas.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { View, ViewProps, ViewStyle } from 'react-native';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RenderProps } from '../core';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
@@ -8,6 +8,6 @@ export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'ev
     children: React.ReactNode;
     fallback?: React.ReactNode;
     style?: ViewStyle;
-    events?: (store: UseStore<RootState>) => EventManager<any>;
+    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<View>>;

package/dist/declarations/src/native/events.d.ts

@@ -1,5 +1,5 @@
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
 import { View } from 'react-native';
-export declare function createTouchEvents(store: UseStore<RootState>): EventManager<View>;
+export declare function createTouchEvents(store: UseBoundStore<RootState>): EventManager<View>;

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

@@ -320,11 +320,6 @@ declare global {
             fog: FogProps;
             fogExp2: FogExp2Props;
             shape: ShapeProps;
-            inject: {
-                children: React.ReactNode;
-            } & {
-                [key: string]: any;
-            };
         }
     }
 }

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { Options as ResizeOptions } from 'react-use-measure';
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RenderProps } from '../core';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
@@ -8,6 +8,6 @@ export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size' | 'ev
     children: React.ReactNode;
     fallback?: React.ReactNode;
     resize?: ResizeOptions;
-    events?: (store: UseStore<RootState>) => EventManager<any>;
+    events?: (store: UseBoundStore<RootState>) => EventManager<any>;
 }
 export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

package/dist/declarations/src/web/events.d.ts

@@ -1,4 +1,4 @@
-import { UseStore } from 'zustand';
+import { UseBoundStore } from 'zustand';
 import { RootState } from '../core/store';
 import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseStore<RootState>): EventManager<HTMLElement>;
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-3d7af2b7.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
@@ -110,30 +116,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: {},
@@ -161,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, {
@@ -306,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;
@@ -770,54 +754,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.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';
@@ -829,7 +779,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(object, {
         type,
         root,
-        context,
         attach,
         primitive: true
       });
@@ -847,7 +796,6 @@ function createRenderer(roots, getEventPriority) {
       instance = prepare(new target(...args), {
         type,
         root,
-        context,
         attach,
         // TODO: Figure out what this is for
         memoizedProps: {
@@ -865,15 +813,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) {
@@ -969,7 +908,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;
@@ -992,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
@@ -1039,46 +977,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 {
@@ -1112,11 +1032,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);
@@ -1126,7 +1046,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,
@@ -1134,26 +1054,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);
@@ -1518,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
 
@@ -1681,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
 
@@ -1723,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;
@@ -1838,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({
@@ -1849,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 };