@react-three/fiber 8.0.0-beta.0 → 8.0.0-beta.3

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-95c17855.cjs.dev.js');
+var index = require('./index-05ebefd3.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -107,7 +107,7 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -146,7 +146,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   fallback,
   resize,
   style,
-  events,
+  events = createPointerEvents,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -174,15 +174,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React__namespace.useRef(null);
 
   if (width > 0 && height > 0 && canvas) {
-    index.createRoot(canvas, { ...canvasProps,
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({ ...canvasProps,
       size: {
         width,
         height
       },
-      events: events || createPointerEvents
-    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+      events
+    });
+    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(Block, {

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-ff8b5912.cjs.prod.js');
+var index = require('./index-85b2df17.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');
@@ -107,7 +107,7 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -146,7 +146,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   fallback,
   resize,
   style,
-  events,
+  events = createPointerEvents,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -174,15 +174,18 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React__namespace.useRef(null);
 
   if (width > 0 && height > 0 && canvas) {
-    index.createRoot(canvas, { ...canvasProps,
+    if (!root.current) root.current = index.createRoot(canvas);
+    root.current.configure({ ...canvasProps,
       size: {
         width,
         height
       },
-      events: events || createPointerEvents
-    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+      events
+    });
+    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(Block, {

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-3f4e5f46.esm.js';
-export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from './index-3f4e5f46.esm.js';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from './index-e78dd2f0.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from './index-e78dd2f0.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -77,7 +77,7 @@ function createPointerEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'dpr', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -116,7 +116,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   fallback,
   resize,
   style,
-  events,
+  events = createPointerEvents,
   ...props
 }, forwardedRef) {
   // Create a known catalogue of Threejs-native elements
@@ -144,15 +144,18 @@ const Canvas = /*#__PURE__*/React.forwardRef(function Canvas({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React.useRef(null);
 
   if (width > 0 && height > 0 && canvas) {
-    createRoot(canvas, { ...canvasProps,
+    if (!root.current) root.current = createRoot(canvas);
+    root.current.configure({ ...canvasProps,
       size: {
         width,
         height
       },
-      events: events || createPointerEvents
-    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+      events
+    });
+    root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: /*#__PURE__*/React.createElement(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-95c17855.cjs.dev.js');
+var index = require('../../dist/index-05ebefd3.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var reactNative = require('react-native');
@@ -113,7 +113,7 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -175,6 +175,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React__namespace.useRef(null);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -199,7 +200,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    // Overwrite onCreated to apply RN bindings
+    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(canvas);
@@ -216,7 +218,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
     };
 
-    index.createRoot(canvas, { ...canvasProps,
+    root.current.configure({ ...canvasProps,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -226,7 +228,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       },
       events: events || createTouchEvents,
       onCreated
-    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    });
+    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(Block, {
@@ -271,7 +274,9 @@ const getAsset = input => {
 }; // Don't pre-process urls, let expo-asset generate an absolute URL
 
 
-THREE__namespace.LoaderUtils.extractUrlBase = () => './'; // There's no Image in native, so create a data texture instead
+const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
 
 
 THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {

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-ff8b5912.cjs.prod.js');
+var index = require('../../dist/index-85b2df17.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var reactNative = require('react-native');
@@ -113,7 +113,7 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -175,6 +175,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React__namespace.useRef(null);
   const onLayout = React__namespace.useCallback(e => {
     const {
       width,
@@ -199,7 +200,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    // Overwrite onCreated to apply RN bindings
+    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(canvas);
@@ -216,7 +218,7 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
     };
 
-    index.createRoot(canvas, { ...canvasProps,
+    root.current.configure({ ...canvasProps,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: reactNative.PixelRatio.get(),
@@ -226,7 +228,8 @@ const Canvas = /*#__PURE__*/React__namespace.forwardRef(({
       },
       events: events || createTouchEvents,
       onCreated
-    }).render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
+    });
+    root.current.render( /*#__PURE__*/React__namespace.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
       fallback: /*#__PURE__*/React__namespace.createElement(Block, {
@@ -271,7 +274,9 @@ const getAsset = input => {
 }; // Don't pre-process urls, let expo-asset generate an absolute URL
 
 
-THREE__namespace.LoaderUtils.extractUrlBase = () => './'; // There's no Image in native, so create a data texture instead
+const extractUrlBase = THREE__namespace.LoaderUtils.extractUrlBase.bind(THREE__namespace.LoaderUtils);
+
+THREE__namespace.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
 
 
 THREE__namespace.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {

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, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-3f4e5f46.esm.js';
-export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-3f4e5f46.esm.js';
+import { c as createEvents, e as extend, p as pick, o as omit, a as createRoot, u as unmountComponentAtNode } from '../../dist/index-e78dd2f0.esm.js';
+export { t as ReactThreeFiber, q as _roots, n as act, l as addAfterEffect, k as addEffect, m as addTail, j as advance, g as applyProps, b as context, d as createPortal, a as createRoot, h as dispose, e as extend, i as invalidate, f as reconciler, r as render, u as unmountComponentAtNode, w as useFrame, x as useGraph, y as useLoader, s as useStore, v as useThree } from '../../dist/index-e78dd2f0.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import { PixelRatio, View, StyleSheet } from 'react-native';
@@ -84,7 +84,7 @@ function createTouchEvents(store) {
   };
 }
 
-const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'clock', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
+const CANVAS_PROPS = ['gl', 'events', 'shadows', 'linear', 'flat', 'orthographic', 'frameloop', 'performance', 'raycaster', 'camera', 'onPointerMissed', 'onCreated'];
 
 function Block({
   set
@@ -146,6 +146,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   if (block) throw block; // Throw exception outwards if anything within canvas throws
 
   if (error) throw error;
+  const root = React.useRef(null);
   const onLayout = React.useCallback(e => {
     const {
       width,
@@ -170,7 +171,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
   }, []);
 
   if (width > 0 && height > 0 && canvas) {
-    // Overwrite onCreated to apply RN bindings
+    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(canvas);
@@ -187,7 +189,7 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       return canvasProps == null ? void 0 : canvasProps.onCreated == null ? void 0 : canvasProps.onCreated(state);
     };
 
-    createRoot(canvas, { ...canvasProps,
+    root.current.configure({ ...canvasProps,
       // expo-gl can only render at native dpr/resolution
       // https://github.com/expo/expo-three/issues/39
       dpr: PixelRatio.get(),
@@ -197,7 +199,8 @@ const Canvas = /*#__PURE__*/React.forwardRef(({
       },
       events: events || createTouchEvents,
       onCreated
-    }).render( /*#__PURE__*/React.createElement(ErrorBoundary, {
+    });
+    root.current.render( /*#__PURE__*/React.createElement(ErrorBoundary, {
       set: setError
     }, /*#__PURE__*/React.createElement(React.Suspense, {
       fallback: /*#__PURE__*/React.createElement(Block, {
@@ -242,7 +245,9 @@ const getAsset = input => {
 }; // Don't pre-process urls, let expo-asset generate an absolute URL
 
 
-THREE.LoaderUtils.extractUrlBase = () => './'; // There's no Image in native, so create a data texture instead
+const extractUrlBase = THREE.LoaderUtils.extractUrlBase.bind(THREE.LoaderUtils);
+
+THREE.LoaderUtils.extractUrlBase = url => typeof url === 'string' ? extractUrlBase(url) : './'; // There's no Image in native, so create a data texture instead
 
 
 THREE.TextureLoader.prototype.load = function load(url, onLoad, onProgress, onError) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-three/fiber",
-  "version": "8.0.0-beta.0",
+  "version": "8.0.0-beta.3",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",
@@ -42,21 +42,21 @@
     "prebuild": "cp ../../readme.md readme.md"
   },
   "dependencies": {
-    "@babel/runtime": "^7.15.4",
+    "@babel/runtime": "^7.17.2",
     "react-merge-refs": "^1.1.0",
-    "react-reconciler": "^0.27.0-rc.0",
+    "react-reconciler": "^0.27.0-rc.2",
     "react-use-measure": "^2.1.1",
-    "scheduler": "0.21.0-rc.0",
+    "scheduler": "^0.21.0-rc.2",
     "suspend-react": "^0.0.8",
-    "zustand": "^3.5.10"
+    "zustand": "^3.7.1"
   },
   "peerDependencies": {
-    "react": ">=18.0",
-    "react-dom": ">=18.0",
-    "react-native": ">=0.64",
     "expo": ">=43.0",
     "expo-asset": ">=8.4",
     "expo-gl": ">=11.0",
+    "react": ">=18.0",
+    "react-dom": ">=18.0",
+    "react-native": ">=0.64",
     "three": ">=0.133"
   },
   "peerDependenciesMeta": {