@react-three/fiber 8.0.9 → 8.0.12

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-4e14a95b.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from './index-4e14a95b.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-38c121a8.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from './index-38c121a8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -89,19 +89,29 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * 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({
   children,
   fallback,
   resize,
   style,
-  onPointerMissed,
+  gl,
   events = createPointerEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  dpr,
+  performance,
+  raycaster,
+  camera,
+  onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -119,12 +129,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     },
     ...resize
   });
-  const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
+  const meshRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const divProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -135,18 +143,29 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
 
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
-        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-      },
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      dpr,
+      performance,
+      raycaster,
+      camera,
       size: {
         width,
         height
       },
-      events
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
@@ -161,8 +180,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     setCanvas(canvasRef.current);
   }, []);
   React.useEffect(() => {
-    return () => unmountComponentAtNode(canvas);
-  }, []);
+    if (canvas) return () => unmountComponentAtNode(canvas);
+  }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
     ref: mergeRefs([meshRef, containerRef]),
     style: {
@@ -172,7 +191,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
       overflow: 'hidden',
       ...style
     }
-  }, divProps), /*#__PURE__*/React.createElement("canvas", {
+  }, props), /*#__PURE__*/React.createElement("canvas", {
     ref: mergeRefs([canvasRef, forwardedRef]),
     style: {
       display: 'block'

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-49237346.cjs.dev.js');
+var index = require('../../dist/index-f67eaa0c.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -28,14 +28,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -100,7 +98,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -127,17 +125,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * 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(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -154,8 +161,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -188,27 +193,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -216,8 +213,24 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -229,10 +242,12 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
-    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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-4dae9cc6.cjs.prod.js');
+var index = require('../../dist/index-e322e5c8.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var mergeRefs = require('react-merge-refs');
@@ -28,14 +28,12 @@ function _interopNamespace(e) {
         var d = Object.getOwnPropertyDescriptor(e, k);
         Object.defineProperty(n, k, d.get ? d : {
           enumerable: true,
-          get: function () {
-            return e[k];
-          }
+          get: function () { return e[k]; }
         });
       }
     });
   }
-  n['default'] = e;
+  n["default"] = e;
   return Object.freeze(n);
 }
 
@@ -100,7 +98,7 @@ function createTouchEvents(store) {
         events
       } = store.getState();
       events.disconnect == null ? void 0 : events.disconnect();
-      const connected = new Pressability__default['default'](events == null ? void 0 : events.handlers);
+      const connected = new Pressability__default["default"](events == null ? void 0 : events.handlers);
       set(state => ({
         events: { ...state.events,
           connected
@@ -127,17 +125,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * 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(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -154,8 +161,6 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   const [canvas, setCanvas] = React__namespace.useState(null);
   const [bind, setBind] = React__namespace.useState();
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
-  const canvasProps = index.pick(props, CANVAS_PROPS);
-  const viewProps = index.omit(props, CANVAS_PROPS);
   const [block, setBlock] = React__namespace.useState(false);
   const [error, setError] = React__namespace.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -188,27 +193,19 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -216,8 +213,24 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
       set: setError
@@ -229,10 +242,12 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }
 
   React__namespace.useEffect(() => {
-    return () => index.unmountComponentAtNode(canvas);
-  }, []);
-  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
-    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
+    if (canvas) {
+      return () => index.unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
+  return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, props, {
+    ref: mergeRefs__default["default"]([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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, u as useMutableCallback, p as pick, o as omit, a as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-4e14a95b.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, n as addAfterEffect, m as addEffect, q as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, s as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, z as useFrame, A as useGraph, C as useLoader, x as useStore, y as useThree } from '../../dist/index-4e14a95b.esm.js';
+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-38c121a8.esm.js';
+export { t as ReactThreeFiber, s as _roots, q as act, n as addAfterEffect, m as addEffect, o as addTail, l as advance, i as applyProps, f as context, g as createPortal, a as createRoot, j as dispose, e as extend, p as getRootState, k as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, x as useFrame, y as useGraph, z as useLoader, v as useStore, w as useThree } from '../../dist/index-38c121a8.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import mergeRefs from 'react-merge-refs';
@@ -97,17 +97,26 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'legacy', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 /**
  * A native canvas which accepts threejs elements as children.
  * @see https://docs.pmnd.rs/react-three-fiber/api/canvas
  */
-
 const Canvas = /*#__PURE__*/React.forwardRef(({
   children,
   style,
-  events,
+  gl,
+  events = createTouchEvents,
+  shadows,
+  linear,
+  flat,
+  legacy,
+  orthographic,
+  frameloop,
+  performance,
+  raycaster,
+  camera,
   onPointerMissed,
+  onCreated,
   ...props
 }, forwardedRef) => {
   // Create a known catalogue of Threejs-native elements
@@ -124,8 +133,6 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   const [canvas, setCanvas] = React.useState(null);
   const [bind, setBind] = React.useState();
   const handlePointerMissed = useMutableCallback(onPointerMissed);
-  const canvasProps = pick(props, CANVAS_PROPS);
-  const viewProps = omit(props, CANVAS_PROPS);
   const [block, setBlock] = React.useState(false);
   const [error, setError] = React.useState(false); // Suspend this component if block is a promise (2nd run)
 
@@ -158,27 +165,19 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    if (!root.current) root.current = createRoot(canvas); // Overwrite onCreated to apply RN bindings
-
-    const onCreated = state => {
-      // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
-      setBind(handlers); // Bind render to RN bridge
-
-      const context = state.gl.getContext();
-      const renderFrame = state.gl.render.bind(state.gl);
-
-      state.gl.render = (scene, camera) => {
-        renderFrame(scene, camera);
-        context.endFrameEXP();
-      };
-
-      return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
-    };
-
-    root.current.configure({ ...canvasProps,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+    if (!root.current) root.current = createRoot(canvas);
+    root.current.configure({
+      gl,
+      events,
+      shadows,
+      linear,
+      flat,
+      legacy,
+      orthographic,
+      frameloop,
+      performance,
+      raycaster,
+      camera,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: PixelRatio.get(),
@@ -186,8 +185,24 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
         width,
         height
       },
-      events: events || createTouchEvents,
-      onCreated
+      // Pass mutable reference to onPointerMissed so it's free to update
+      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+      // Overwrite onCreated to apply RN bindings
+      onCreated: state => {
+        // Bind events after creation
+        const handlers = state.events.connect == null ? void 0 : state.events.connect(viewRef.current);
+        setBind(handlers); // Bind render to RN bridge
+
+        const context = state.gl.getContext();
+        const renderFrame = state.gl.render.bind(state.gl);
+
+        state.gl.render = (scene, camera) => {
+          renderFrame(scene, camera);
+          context.endFrameEXP();
+        };
+
+        return onCreated == null ? void 0 : onCreated(state);
+      }
     });
     root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
@@ -199,9 +214,11 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }
 
   React.useEffect(() => {
-    return () => unmountComponentAtNode(canvas);
-  }, []);
-  return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
+    if (canvas) {
+      return () => unmountComponentAtNode(canvas);
+    }
+  }, [canvas]);
+  return /*#__PURE__*/React.createElement(View, _extends({}, props, {
     ref: mergeRefs([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.9",
+  "version": "8.0.12",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -43,7 +43,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.8",
-    "@types/react-reconciler": "^0.26.4",
+    "@types/react-reconciler": "^0.26.6",
     "react-merge-refs": "^1.1.0",
     "react-reconciler": "^0.27.0",
     "react-use-measure": "^2.1.1",