@react-three/fiber 8.7.4 → 8.8.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 8.8.1
+
+### Patch Changes
+
+- 370d3ae5: refactor: pull context bridge from its-fine
+
+## 8.8.0
+
+### Minor Changes
+
+- 46d8b440: bridge cross-container context
+
 ## 8.7.4
 
 ### Patch Changes

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

@@ -7,6 +7,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
+var itsFine = require('its-fine');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -115,11 +116,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -146,6 +143,7 @@ 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 Bridge = itsFine.useContextBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -204,13 +202,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(() => {
@@ -245,6 +243,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -7,6 +7,7 @@ var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
 var useMeasure = require('react-use-measure');
+var itsFine = require('its-fine');
 require('react-reconciler/constants');
 require('zustand');
 require('react-reconciler');
@@ -115,11 +116,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -146,6 +143,7 @@ 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 Bridge = itsFine.useContextBridge();
   const [containerRef, containerRect] = useMeasure__default["default"]({
     scroll: true,
     debounce: {
@@ -204,13 +202,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(() => {
@@ -245,6 +243,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -4,6 +4,7 @@ import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
 import useMeasure from 'react-use-measure';
+import { FiberProvider, useContextBridge } from 'its-fine';
 import 'react-reconciler/constants';
 import 'zustand';
 import 'react-reconciler';
@@ -88,11 +89,7 @@ function createPointerEvents(store) {
   };
 }
 
-/**
- * A DOM canvas which accepts threejs elements as children.
- * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
- */
-const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
+const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   children,
   fallback,
   resize,
@@ -119,6 +116,7 @@ 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 Bridge = useContextBridge();
   const [containerRef, containerRect] = useMeasure({
     scroll: true,
     debounce: {
@@ -177,13 +175,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(() => {
@@ -218,5 +216,15 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     }
   }, fallback)));
 });
+/**
+ * A DOM canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 export { Canvas, createPointerEvents as events };

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

@@ -8,6 +8,7 @@ var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
+var itsFine = require('its-fine');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
 require('react-reconciler/constants');
 require('zustand');
@@ -236,7 +237,7 @@ function polyfills() {
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   gl,
@@ -258,6 +259,7 @@ 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 Bridge = itsFine.useContextBridge();
   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(() => {
@@ -380,6 +382,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     style: reactNative.StyleSheet.absoluteFill
   }));
 });
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -8,6 +8,7 @@ var React = require('react');
 var THREE = require('three');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
+var itsFine = require('its-fine');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
 require('react-reconciler/constants');
 require('zustand');
@@ -236,7 +237,7 @@ function polyfills() {
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(({
   children,
   style,
   gl,
@@ -258,6 +259,7 @@ 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 Bridge = itsFine.useContextBridge();
   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(() => {
@@ -380,6 +382,16 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     style: reactNative.StyleSheet.absoluteFill
   }));
 });
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React__namespace.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React__namespace.createElement(itsFine.FiberProvider, null, /*#__PURE__*/React__namespace.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 exports.ReactThreeFiber = index.threeTypes;
 exports._roots = index.roots;

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

@@ -5,6 +5,7 @@ import * as React from 'react';
 import * as THREE from 'three';
 import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
+import { FiberProvider, useContextBridge } from 'its-fine';
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
 import 'react-reconciler/constants';
 import 'zustand';
@@ -209,7 +210,7 @@ function polyfills() {
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-const Canvas = /*#__PURE__*/React.forwardRef(({
+const CanvasImpl = /*#__PURE__*/React.forwardRef(({
   children,
   style,
   gl,
@@ -231,6 +232,7 @@ 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 Bridge = useContextBridge();
   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(() => {
@@ -353,5 +355,15 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     style: StyleSheet.absoluteFill
   }));
 });
+/**
+ * A native canvas which accepts threejs elements as children.
+ * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
+ */
+
+const Canvas = /*#__PURE__*/React.forwardRef(function CanvasWrapper(props, ref) {
+  return /*#__PURE__*/React.createElement(FiberProvider, null, /*#__PURE__*/React.createElement(CanvasImpl, _extends({}, props, {
+    ref: ref
+  })));
+});
 
 export { Canvas, createTouchEvents as events };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.7.4",
+  "version": "8.8.1",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -44,6 +44,7 @@
   "dependencies": {
     "@babel/runtime": "^7.17.8",
     "@types/react-reconciler": "^0.26.7",
+    "its-fine": "^1.0.0",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",
     "scheduler": "^0.21.0",