@react-three/fiber 8.0.0-beta.6 → 8.0.0-beta.7

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

@@ -26,7 +26,7 @@ export declare type ReconcilerRoot<TCanvas extends Element> = {
     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>): UseBoundStore<RootState>;
+declare function render<TCanvas extends Element>(children: React.ReactNode, canvas: TCanvas, config: RenderProps<TCanvas>): UseBoundStore<RootState>;
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
 export declare type InjectState = Partial<Omit<RootState, 'set' | 'get' | 'setSize' | 'setFrameloop' | 'setDpr' | 'events' | 'invalidate' | 'advance' | 'performance' | 'internal'> & {
     events: {

package/dist/{index-45f5b2a2.cjs.prod.js → index-2d224292.cjs.prod.js}

@@ -1712,14 +1712,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1731,36 +1731,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React__namespace.useEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events to the targets parent, this is done to ensure events are registered on
-    // a shared target, and not on the canvas itself
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target.parentNode); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__namespace.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1823,7 +1823,9 @@ function Portal({
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
       Object.keys(state).forEach(key => {
-        if (state[key] !== injectState[key]) delete intersect[key];
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
       });
     }
 

package/dist/{index-74b1fd6b.esm.js → index-6a8cc5a4.esm.js}

@@ -1683,14 +1683,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1702,36 +1702,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React.useEffect(() => {
+  React.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events to the targets parent, this is done to ensure events are registered on
-    // a shared target, and not on the canvas itself
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target.parentNode); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1794,7 +1794,9 @@ function Portal({
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
       Object.keys(state).forEach(key => {
-        if (state[key] !== injectState[key]) delete intersect[key];
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
       });
     }
 

package/dist/{index-4782ba04.cjs.dev.js → index-8ce56249.cjs.dev.js}

@@ -1712,14 +1712,14 @@ function createRoot(canvas) {
       return this;
     },
 
-    render(element) {
+    render(children) {
       // The root has to be configured before it can be rendered
       if (!configured) this.configure();
       reconciler.updateContainer( /*#__PURE__*/React__namespace.createElement(Provider, {
         store: store,
-        element: element,
+        children: children,
         onCreated: onCreated,
-        target: canvas
+        rootElement: canvas
       }), fiber, null, () => undefined);
       return store;
     },
@@ -1731,36 +1731,36 @@ function createRoot(canvas) {
   };
 }
 
-function render(element, canvas, config = {}) {
+function render(children, canvas, config) {
   console.warn('R3F.render is no longer supported in React 18. Use createRoot instead!');
   const root = createRoot(canvas);
   root.configure(config);
-  return root.render(element);
+  return root.render(children);
 }
 
 function Provider({
   store,
-  element,
+  children,
   onCreated,
-  target
+  rootElement
 }) {
-  React__namespace.useEffect(() => {
+  React__namespace.useLayoutEffect(() => {
     const state = store.getState(); // Flag the canvas active, rendering will now begin
 
     state.set(state => ({
       internal: { ...state.internal,
         active: true
       }
-    })); // Connect events to the targets parent, this is done to ensure events are registered on
-    // a shared target, and not on the canvas itself
+    })); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
 
-    state.events.connect == null ? void 0 : state.events.connect(target.parentNode); // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
+    if (onCreated) onCreated(state); // Connect events to the targets parent, this is done to ensure events are registered on
+    // a shared target, and not on the canvas itself
 
-    if (onCreated) onCreated(state); // eslint-disable-next-line react-hooks/exhaustive-deps
+    if (!store.getState().events.connected) state.events.connect == null ? void 0 : state.events.connect(rootElement); // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   return /*#__PURE__*/React__namespace.createElement(context.Provider, {
     value: store
-  }, element);
+  }, children);
 }
 
 function unmountComponentAtNode(canvas, callback) {
@@ -1823,7 +1823,9 @@ function Portal({
     if (injectState) {
       // Only the fields of "state" that do not differ from injectState
       Object.keys(state).forEach(key => {
-        if (state[key] !== injectState[key]) delete intersect[key];
+        if ( // Some props should be off-limits
+        !['size', 'viewport', 'internal', 'performance'].includes(key) && // Otherwise filter out the props that are different and let the inject layer take precedence
+        state[key] !== injectState[key]) delete intersect[key];
       });
     }
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-4782ba04.cjs.dev.js');
+var index = require('./index-8ce56249.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -175,6 +175,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
+  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const canvasProps = index.pick({ ...props,
@@ -194,6 +195,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+      },
       size: {
         width,
         height
@@ -216,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: containerRef,
+    ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-45f5b2a2.cjs.prod.js');
+var index = require('./index-2d224292.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -175,6 +175,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     },
     ...resize
   });
+  const meshRef = React__namespace.useRef(null);
   const canvasRef = React__namespace.useRef(null);
   const [canvas, setCanvas] = React__namespace.useState(null);
   const canvasProps = index.pick({ ...props,
@@ -194,6 +195,10 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = index.createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+      },
       size: {
         width,
         height
@@ -216,7 +221,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
     return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement("div", _extends({
-    ref: containerRef,
+    ref: mergeRefs__default['default']([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-74b1fd6b.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-74b1fd6b.esm.js';
+import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from './index-6a8cc5a4.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from './index-6a8cc5a4.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -145,6 +145,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     },
     ...resize
   });
+  const meshRef = React.useRef(null);
   const canvasRef = React.useRef(null);
   const [canvas, setCanvas] = React.useState(null);
   const canvasProps = pick({ ...props,
@@ -164,6 +165,10 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (width > 0 && height > 0 && canvas) {
     if (!root.current) root.current = createRoot(canvas);
     root.current.configure({ ...canvasProps,
+      onCreated: state => {
+        state.events.connect == null ? void 0 : state.events.connect(meshRef.current);
+        canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
+      },
       size: {
         width,
         height
@@ -186,7 +191,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
     return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement("div", _extends({
-    ref: containerRef,
+    ref: mergeRefs([meshRef, containerRef]),
     style: {
       position: 'relative',
       width: '100%',

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-4782ba04.cjs.dev.js');
+var index = require('../../dist/index-8ce56249.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -40,6 +41,7 @@ function _interopNamespace(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -190,6 +192,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const viewRef = React__namespace.useRef(null);
   const root = React__namespace.useRef(null);
   const onLayout = React__namespace.useCallback(e => {
     const {
@@ -219,7 +222,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
     const onCreated = state => {
       // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      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();
@@ -257,7 +260,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
-    ref: forwardedRef,
+    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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

@@ -4,9 +4,10 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var THREE = require('three');
 var expoAsset = require('expo-asset');
-var index = require('../../dist/index-45f5b2a2.cjs.prod.js');
+var index = require('../../dist/index-2d224292.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
+var mergeRefs = require('react-merge-refs');
 var reactNative = require('react-native');
 var expoGl = require('expo-gl');
 var Pressability = require('react-native/Libraries/Pressability/Pressability');
@@ -40,6 +41,7 @@ function _interopNamespace(e) {
 
 var THREE__namespace = /*#__PURE__*/_interopNamespace(THREE);
 var React__namespace = /*#__PURE__*/_interopNamespace(React);
+var mergeRefs__default = /*#__PURE__*/_interopDefault(mergeRefs);
 var Pressability__default = /*#__PURE__*/_interopDefault(Pressability);
 
 const EVENTS = {
@@ -190,6 +192,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const viewRef = React__namespace.useRef(null);
   const root = React__namespace.useRef(null);
   const onLayout = React__namespace.useCallback(e => {
     const {
@@ -219,7 +222,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
 
     const onCreated = state => {
       // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      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();
@@ -257,7 +260,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
     return () => index.unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React__namespace.createElement(reactNative.View, _extends({}, viewProps, {
-    ref: forwardedRef,
+    ref: mergeRefs__default['default']([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

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

@@ -1,9 +1,10 @@
 import * as THREE from 'three';
 import { Asset } from 'expo-asset';
-import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from '../../dist/index-74b1fd6b.esm.js';
-export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from '../../dist/index-74b1fd6b.esm.js';
+import { c as createEvents, e as extend, u as useMemoizedFn, p as pick, o as omit, a as createRoot, b as unmountComponentAtNode } from '../../dist/index-6a8cc5a4.esm.js';
+export { t as ReactThreeFiber, v as _roots, s as act, m as addAfterEffect, l as addEffect, n as addTail, k as advance, h as applyProps, d as context, f as createPortal, a as createRoot, i as dispose, e as extend, q as getRootState, j as invalidate, g as reconciler, r as render, b as unmountComponentAtNode, y as useFrame, z as useGraph, A as useLoader, u as useMemoizedFn, w as useStore, x as useThree } from '../../dist/index-6a8cc5a4.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
+import mergeRefs from 'react-merge-refs';
 import { PixelRatio, View, StyleSheet } from 'react-native';
 import { GLView } from 'expo-gl';
 import Pressability from 'react-native/Libraries/Pressability/Pressability';
@@ -161,6 +162,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const viewRef = React.useRef(null);
   const root = React.useRef(null);
   const onLayout = React.useCallback(e => {
     const {
@@ -190,7 +192,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
 
     const onCreated = state => {
       // Bind events after creation
-      const handlers = state.events.connect == null ? void 0 : state.events.connect(canvas);
+      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();
@@ -228,7 +230,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
     return () => unmountComponentAtNode(canvas);
   }, [canvas]);
   return /*#__PURE__*/React.createElement(View, _extends({}, viewProps, {
-    ref: forwardedRef,
+    ref: mergeRefs([viewRef, forwardedRef]),
     onLayout: onLayout,
     style: {
       flex: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-beta.6",
+  "version": "8.0.0-beta.7",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",