@react-three/fiber 8.7.3 → 8.8.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.8.0
+
+### Minor Changes
+
+- 46d8b440: bridge cross-container context
+
+## 8.7.4
+
+### Patch Changes
+
+- 259c8895: fix: use self to get global context before window
+
 ## 8.7.3
 
 ### Patch Changes

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

@@ -62,7 +62,7 @@ export interface PointerCaptureTarget {
     intersection: Intersection;
     target: Element;
 }
-export declare function getEventPriority(): 1 | 4 | 16;
+export declare function getEventPriority(): 1 | 16 | 4;
 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/utils.d.ts

@@ -2,11 +2,24 @@ import * as THREE from 'three';
 import * as React from 'react';
 import { AttachType, Instance, InstanceProps, LocalState } from './renderer';
 import { Dpr, RootState, Size } from './store';
+import type { Fiber } from 'react-reconciler';
 export declare type Camera = THREE.OrthographicCamera | THREE.PerspectiveCamera;
 export declare const isOrthographicCamera: (def: Camera) => def is THREE.OrthographicCamera;
 export declare const isRef: (obj: any) => obj is React.MutableRefObject<unknown>;
 export declare const useIsomorphicLayoutEffect: typeof React.useLayoutEffect;
 export declare function useMutableCallback<T>(fn: T): React.MutableRefObject<T>;
+export declare type ContextBridge = React.FC<{
+    children?: React.ReactNode;
+}>;
+export declare function useContextBridge(fiber?: Fiber): ContextBridge;
+export declare class FiberProvider extends React.Component<{
+    setFiber: React.Dispatch<Fiber>;
+    children?: React.ReactNode;
+}> {
+    private _reactInternals;
+    componentDidMount(): void;
+    render(): React.ReactNode;
+}
 export declare type SetBlock = false | Promise<null> | null;
 export declare type UnblockProps = {
     set: React.Dispatch<React.SetStateAction<SetBlock>>;

package/dist/{index-407f3d70.cjs.dev.js → index-a38b08b7.cjs.dev.js}

@@ -56,6 +56,87 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
+/**
+ * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
+ */
+
+function traverseFiber(fiber, ascending, selector) {
+  if (selector(fiber) === true) return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+
+  while (child) {
+    const match = traverseFiber(child, ascending, selector);
+    if (match) return match;
+    child = child.sibling;
+  }
+} // Active contexts
+
+
+const contexts = [];
+/**
+ * Represents a react-context bridge provider component.
+ */
+
+/**
+ * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
+ *
+ * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
+ */
+function useContextBridge(fiber) {
+  if (fiber) {
+    traverseFiber(fiber, true, node => {
+      var _node$type;
+
+      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
+      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
+      // of the above issue. We'll hide the warning because this hook works as expected
+      // https://github.com/facebook/react/pull/12779
+
+      Object.defineProperties(context, {
+        _currentRenderer: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        },
+        _currentRenderer2: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        }
+      });
+      contexts.push(context);
+    });
+  }
+
+  return contexts.reduce((Prev, context) => {
+    var _SECRET_INTERNALS_DO;
+
+    const value = (_SECRET_INTERNALS_DO = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
+    return props => /*#__PURE__*/React__namespace.createElement(Prev, null, /*#__PURE__*/React__namespace.createElement(context.Provider, { ...props,
+      value
+    }));
+  }, props => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, props));
+}
+/**
+ * Exposes the current react-internal {@link Fiber}.
+ */
+
+class FiberProvider extends React__namespace.Component {
+  componentDidMount() {
+    this.props.setFiber(this._reactInternals);
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
 function Block({
   set
 }) {
@@ -90,7 +171,8 @@ ErrorBoundary.getDerivedStateFromError = () => ({
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 /**
  * Returns instance root state
@@ -443,9 +525,13 @@ function makeId(event) {
 
 
 function getEventPriority() {
-  var _window, _window$event;
+  var _globalScope$event;
 
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+  // Get a handle to the current global scope in window and worker contexts if able
+  // https://github.com/pmndrs/react-three-fiber/pull/2493
+  const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
+  if (!globalScope) return constants.DefaultEventPriority;
+  const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
 
   switch (name) {
     case 'click':
@@ -2162,6 +2248,7 @@ const act = React__namespace.unstable_act;
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
+exports.FiberProvider = FiberProvider;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -2182,6 +2269,7 @@ exports.render = render;
 exports.roots = roots;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.useContextBridge = useContextBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;

package/dist/{index-05f8627d.esm.js → index-f01196c6.esm.js}

@@ -29,6 +29,87 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
+/**
+ * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
+ */
+
+function traverseFiber(fiber, ascending, selector) {
+  if (selector(fiber) === true) return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+
+  while (child) {
+    const match = traverseFiber(child, ascending, selector);
+    if (match) return match;
+    child = child.sibling;
+  }
+} // Active contexts
+
+
+const contexts = [];
+/**
+ * Represents a react-context bridge provider component.
+ */
+
+/**
+ * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
+ *
+ * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
+ */
+function useContextBridge(fiber) {
+  if (fiber) {
+    traverseFiber(fiber, true, node => {
+      var _node$type;
+
+      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
+      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
+      // of the above issue. We'll hide the warning because this hook works as expected
+      // https://github.com/facebook/react/pull/12779
+
+      Object.defineProperties(context, {
+        _currentRenderer: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        },
+        _currentRenderer2: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        }
+      });
+      contexts.push(context);
+    });
+  }
+
+  return contexts.reduce((Prev, context) => {
+    var _SECRET_INTERNALS_DO;
+
+    const value = (_SECRET_INTERNALS_DO = React.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
+    return props => /*#__PURE__*/React.createElement(Prev, null, /*#__PURE__*/React.createElement(context.Provider, { ...props,
+      value
+    }));
+  }, props => /*#__PURE__*/React.createElement(React.Fragment, props));
+}
+/**
+ * Exposes the current react-internal {@link Fiber}.
+ */
+
+class FiberProvider extends React.Component {
+  componentDidMount() {
+    this.props.setFiber(this._reactInternals);
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
 function Block({
   set
 }) {
@@ -63,7 +144,8 @@ ErrorBoundary.getDerivedStateFromError = () => ({
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 /**
  * Returns instance root state
@@ -416,9 +498,13 @@ function makeId(event) {
 
 
 function getEventPriority() {
-  var _window, _window$event;
+  var _globalScope$event;
 
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+  // Get a handle to the current global scope in window and worker contexts if able
+  // https://github.com/pmndrs/react-three-fiber/pull/2493
+  const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
+  if (!globalScope) return DefaultEventPriority;
+  const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
 
   switch (name) {
     case 'click':
@@ -2133,4 +2219,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useGraph as A, Block as B, useLoader as C, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, getRootState as q, render as r, act as s, threeTypes as t, useMutableCallback as u, roots as v, useInstanceHandle as w, useStore as x, useThree as y, useFrame as z };
+export { useFrame as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, FiberProvider as F, useMutableCallback as a, createRoot as b, createEvents as c, useIsomorphicLayoutEffect as d, extend as e, unmountComponentAtNode as f, context as g, createPortal as h, isRef as i, reconciler as j, applyProps as k, dispose as l, invalidate as m, advance as n, addEffect as o, addAfterEffect as p, addTail as q, render as r, getRootState as s, threeTypes as t, useContextBridge as u, act as v, roots as w, useInstanceHandle as x, useStore as y, useThree as z };

package/dist/{index-5350eaac.cjs.prod.js → index-fb8e3829.cjs.prod.js}

@@ -56,6 +56,87 @@ function useMutableCallback(fn) {
   useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
   return ref;
 }
+/**
+ * Traverses up or down a {@link Fiber}, return `true` to stop and select a node.
+ */
+
+function traverseFiber(fiber, ascending, selector) {
+  if (selector(fiber) === true) return fiber;
+  let child = ascending ? fiber.return : fiber.child;
+
+  while (child) {
+    const match = traverseFiber(child, ascending, selector);
+    if (match) return match;
+    child = child.sibling;
+  }
+} // Active contexts
+
+
+const contexts = [];
+/**
+ * Represents a react-context bridge provider component.
+ */
+
+/**
+ * React Context currently cannot be shared across [React renderers](https://reactjs.org/docs/codebase-overview.html#renderers) but explicitly forwarded between providers (see [react#17275](https://github.com/facebook/react/issues/17275)). This hook returns a {@link ContextBridge} of live context providers to pierce Context across renderers.
+ *
+ * Pass {@link ContextBridge} as a component to a secondary renderer to enable context-sharing within its children.
+ */
+function useContextBridge(fiber) {
+  if (fiber) {
+    traverseFiber(fiber, true, node => {
+      var _node$type;
+
+      const context = (_node$type = node.type) == null ? void 0 : _node$type._context;
+      if (!context || contexts.includes(context)) return; // In development, React will warn about using contexts between renderers because
+      // of the above issue. We'll hide the warning because this hook works as expected
+      // https://github.com/facebook/react/pull/12779
+
+      Object.defineProperties(context, {
+        _currentRenderer: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        },
+        _currentRenderer2: {
+          get() {
+            return null;
+          },
+
+          set() {}
+
+        }
+      });
+      contexts.push(context);
+    });
+  }
+
+  return contexts.reduce((Prev, context) => {
+    var _SECRET_INTERNALS_DO;
+
+    const value = (_SECRET_INTERNALS_DO = React__namespace.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED.ReactCurrentDispatcher.current) == null ? void 0 : _SECRET_INTERNALS_DO.readContext(context);
+    return props => /*#__PURE__*/React__namespace.createElement(Prev, null, /*#__PURE__*/React__namespace.createElement(context.Provider, { ...props,
+      value
+    }));
+  }, props => /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, props));
+}
+/**
+ * Exposes the current react-internal {@link Fiber}.
+ */
+
+class FiberProvider extends React__namespace.Component {
+  componentDidMount() {
+    this.props.setFiber(this._reactInternals);
+  }
+
+  render() {
+    return this.props.children;
+  }
+
+}
 function Block({
   set
 }) {
@@ -90,7 +171,8 @@ ErrorBoundary.getDerivedStateFromError = () => ({
 const DEFAULT = '__default';
 const isDiffSet = def => def && !!def.memoized && !!def.changes;
 function calculateDpr(dpr) {
-  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], window.devicePixelRatio), dpr[1]) : dpr;
+  const target = typeof window !== 'undefined' ? window.devicePixelRatio : 1;
+  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
 }
 /**
  * Returns instance root state
@@ -443,9 +525,13 @@ function makeId(event) {
 
 
 function getEventPriority() {
-  var _window, _window$event;
+  var _globalScope$event;
 
-  let name = (_window = window) == null ? void 0 : (_window$event = _window.event) == null ? void 0 : _window$event.type;
+  // Get a handle to the current global scope in window and worker contexts if able
+  // https://github.com/pmndrs/react-three-fiber/pull/2493
+  const globalScope = typeof self !== 'undefined' && self || typeof window !== 'undefined' && window;
+  if (!globalScope) return constants.DefaultEventPriority;
+  const name = (_globalScope$event = globalScope.event) == null ? void 0 : _globalScope$event.type;
 
   switch (name) {
     case 'click':
@@ -2162,6 +2248,7 @@ const act = React__namespace.unstable_act;
 
 exports.Block = Block;
 exports.ErrorBoundary = ErrorBoundary;
+exports.FiberProvider = FiberProvider;
 exports.act = act;
 exports.addAfterEffect = addAfterEffect;
 exports.addEffect = addEffect;
@@ -2182,6 +2269,7 @@ exports.render = render;
 exports.roots = roots;
 exports.threeTypes = threeTypes;
 exports.unmountComponentAtNode = unmountComponentAtNode;
+exports.useContextBridge = useContextBridge;
 exports.useFrame = useFrame;
 exports.useGraph = useGraph;
 exports.useInstanceHandle = useInstanceHandle;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-407f3d70.cjs.dev.js');
+var index = require('./index-a38b08b7.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -146,6 +146,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
+  const [fiber, setFiber] = React__namespace.useState(null);
+  const Bridge = index.useContextBridge(fiber);
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -204,13 +206,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
         onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   index.useIsomorphicLayoutEffect(() => {
@@ -222,7 +224,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -243,7 +247,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback)));
+  }, fallback))));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-5350eaac.cjs.prod.js');
+var index = require('./index-fb8e3829.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -146,6 +146,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
+  const [fiber, setFiber] = React__namespace.useState(null);
+  const Bridge = index.useContextBridge(fiber);
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -204,13 +206,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
         onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   index.useIsomorphicLayoutEffect(() => {
@@ -222,7 +224,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -243,7 +247,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback)));
+  }, fallback))));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-05f8627d.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from './index-05f8627d.esm.js';
+import { c as createEvents, e as extend, u as useContextBridge, a as useMutableCallback, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as useIsomorphicLayoutEffect, f as unmountComponentAtNode, F as FiberProvider } from './index-f01196c6.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, g as context, c as createEvents, h as createPortal, b as createRoot, l as dispose, e as extend, s as getRootState, m as invalidate, j as reconciler, r as render, f as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-f01196c6.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -119,6 +119,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
+  const [fiber, setFiber] = React.useState(null);
+  const Bridge = useContextBridge(fiber);
   const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
@@ -177,13 +179,13 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
         onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: /*#__PURE__*/React.createElement(Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   useIsomorphicLayoutEffect(() => {
@@ -195,7 +197,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   // Or else the canvas will block events from reaching the event source
 
   const pointerEvents = eventSource ? 'none' : 'auto';
-  return /*#__PURE__*/React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement(FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React.createElement("div", _extends({
     ref: divRef,
     style: {
       position: 'relative',
@@ -216,7 +220,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     style: {
       display: 'block'
     }
-  }, fallback)));
+  }, fallback))));
 });
 
 export { Canvas, createPointerEvents as events };

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-407f3d70.cjs.dev.js');
+var index = require('../../dist/index-a38b08b7.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,6 +258,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
+  const [fiber, setFiber] = React__namespace.useState(null);
+  const Bridge = index.useContextBridge(fiber);
   const [{
     width,
     height,
@@ -354,13 +356,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   React__namespace.useEffect(() => {
@@ -368,7 +370,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -378,7 +382,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
-  }));
+  })));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('../../dist/index-5350eaac.cjs.prod.js');
+var index = require('../../dist/index-fb8e3829.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -258,6 +258,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React__namespace.useMemo(() => index.extend(THREE__namespace), []);
+  const [fiber, setFiber] = React__namespace.useState(null);
+  const Bridge = index.useContextBridge(fiber);
   const [{
     width,
     height,
@@ -354,13 +356,13 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   React__namespace.useEffect(() => {
@@ -368,7 +370,9 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return () => index.unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+  return /*#__PURE__*/React__namespace.createElement(index.FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -378,7 +382,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React__namespace.createElement(expoGl.GLView, {
     onContextCreate: onContextCreate,
     style: reactNative.StyleSheet.absoluteFill
-  }));
+  })));
 });
 
 exports.ReactThreeFiber = index.threeTypes;

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-05f8627d.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, g as createPortal, a as createRoot, k as dispose, e as extend, q as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, w as useInstanceHandle, C as useLoader, x as useStore, y as useThree } from '../../dist/index-05f8627d.esm.js';
+import { c as createEvents, e as extend, u as useContextBridge, a as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, f as unmountComponentAtNode, F as FiberProvider } from '../../dist/index-f01196c6.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, p as addAfterEffect, o as addEffect, q as addTail, n as advance, k as applyProps, g as context, h as createPortal, b as createRoot, l as dispose, e as extend, s as getRootState, m as invalidate, j as reconciler, r as render, f as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-f01196c6.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -231,6 +231,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   // This will include the entire THREE namespace by default, users can extend
   // their own elements by using the createRoot API instead
   React.useMemo(() => extend(THREE), []);
+  const [fiber, setFiber] = React.useState(null);
+  const Bridge = useContextBridge(fiber);
   const [{
     width,
     height,
@@ -327,13 +329,13 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
         return onCreated == null ? void 0 : onCreated(state);
       }
     });
-    root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+    root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: /*#__PURE__*/React.createElement(Block, {
         set: setBlock
       })
-    }, children)));
+    }, children))));
   }
 
   React.useEffect(() => {
@@ -341,7 +343,9 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       return () => unmountComponentAtNode(canvas);
     }
   }, [canvas]);
-  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
+  return /*#__PURE__*/React.createElement(FiberProvider, {
+    setFiber: setFiber
+  }, /*#__PURE__*/React.createElement(View, _extends({}, props, {
     ref: viewRef,
     onLayout: onLayout,
     style: {
@@ -351,7 +355,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }, bind), width > 0 && /*#__PURE__*/React.createElement(GLView, {
     onContextCreate: onContextCreate,
     style: StyleSheet.absoluteFill
-  }));
+  })));
 });
 
 export { Canvas, createTouchEvents as events };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.7.3",
+  "version": "8.8.0",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",