@react-three/fiber 8.0.22 → 8.0.23

package/dist/declarations/src/web/Canvas.d.ts

@@ -1,9 +1,9 @@
-import * as React from 'react';
-import type { Options as ResizeOptions } from 'react-use-measure';
-import { RenderProps } from '../core';
-export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
-    children: React.ReactNode;
-    fallback?: React.ReactNode;
-    resize?: ResizeOptions;
-}
-export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;
+import * as React from 'react';
+import type { Options as ResizeOptions } from 'react-use-measure';
+import { RenderProps } from '../core';
+export interface Props extends Omit<RenderProps<HTMLCanvasElement>, 'size'>, React.HTMLAttributes<HTMLDivElement> {
+    children: React.ReactNode;
+    fallback?: React.ReactNode;
+    resize?: ResizeOptions;
+}
+export declare const Canvas: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLCanvasElement>>;

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

@@ -1,4 +1,4 @@
-import { UseBoundStore } from 'zustand';
-import { RootState } from '../core/store';
-import { EventManager } from '../core/events';
-export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;
+import { UseBoundStore } from 'zustand';
+import { RootState } from '../core/store';
+import { EventManager } from '../core/events';
+export declare function createPointerEvents(store: UseBoundStore<RootState>): EventManager<HTMLElement>;

package/dist/{index-8ec72a6b.cjs.dev.js → index-1c8e10cf.cjs.dev.js}

@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -287,7 +287,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -871,7 +871,7 @@ function createRenderer(roots, getEventPriority) {
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
-      instance = prepare(object, { ...object.__r3f,
+      instance = prepare(object, {
         type,
         root,
         attach,
@@ -925,9 +925,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -952,9 +950,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -969,7 +965,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1032,8 +1028,8 @@ function createRenderer(roots, getEventPriority) {
   function switchInstance(instance, type, newProps, fiber) {
     var _instance$__r3f, _newInstance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1052,12 +1048,8 @@ function createRenderer(roots, getEventPriority) {
     }
 
     instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
-
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
@@ -1067,9 +1059,7 @@ function createRenderer(roots, getEventPriority) {
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1159,10 +1149,8 @@ function createRenderer(roots, getEventPriority) {
       } // The attach attribute implies that the object attaches itself on the parent
 
 
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
+      if (localState.parent && localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 

package/dist/{index-f1b43982.esm.js → index-ac97daed.esm.js}

@@ -146,7 +146,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -260,7 +260,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -351,7 +351,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -844,7 +844,7 @@ function createRenderer(roots, getEventPriority) {
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
-      instance = prepare(object, { ...object.__r3f,
+      instance = prepare(object, {
         type,
         root,
         attach,
@@ -898,9 +898,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -925,9 +923,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -942,7 +938,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1005,8 +1001,8 @@ function createRenderer(roots, getEventPriority) {
   function switchInstance(instance, type, newProps, fiber) {
     var _instance$__r3f, _newInstance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1025,12 +1021,8 @@ function createRenderer(roots, getEventPriority) {
     }
 
     instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
-
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
@@ -1040,9 +1032,7 @@ function createRenderer(roots, getEventPriority) {
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1132,10 +1122,8 @@ function createRenderer(roots, getEventPriority) {
       } // The attach attribute implies that the object attaches itself on the parent
 
 
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
+      if (localState.parent && localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 

package/dist/{index-b47473f2.cjs.prod.js → index-e8067a9e.cjs.prod.js}

@@ -173,7 +173,7 @@ function prepare(object, state) {
       eventCount: 0,
       handlers: {},
       objects: [],
-      parents: [],
+      parent: null,
       ...state
     };
   }
@@ -287,7 +287,7 @@ function diffProps(instance, {
 } // This function applies a set of changes to the instance
 
 function applyProps$1(instance, data) {
-  var _instance$__r3f3, _root$getState, _localState$parents;
+  var _instance$__r3f3, _root$getState;
 
   // Filter equals, events and reserved props
   const localState = (_instance$__r3f3 = instance.__r3f) != null ? _instance$__r3f3 : {};
@@ -378,7 +378,7 @@ function applyProps$1(instance, data) {
     invalidateInstance(instance);
   });
 
-  if ((_localState$parents = localState.parents) != null && _localState$parents.length && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
+  if (localState.parent && rootState.internal && instance.raycast && prevHandlers !== localState.eventCount) {
     // Pre-emptively remove the instance from the interaction manager
     const index = rootState.internal.interaction.indexOf(instance);
     if (index > -1) rootState.internal.interaction.splice(index, 1); // Add the instance to the interaction manager only when it has handlers
@@ -871,7 +871,7 @@ function createRenderer(roots, getEventPriority) {
     if (type === 'primitive') {
       if (props.object === undefined) throw `Primitives without 'object' are invalid!`;
       const object = props.object;
-      instance = prepare(object, { ...object.__r3f,
+      instance = prepare(object, {
         type,
         root,
         attach,
@@ -925,9 +925,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -952,9 +950,7 @@ function createRenderer(roots, getEventPriority) {
 
       if (!added) (_parentInstance$__r3f2 = parentInstance.__r3f) == null ? void 0 : _parentInstance$__r3f2.objects.push(child);
       if (!child.__r3f) prepare(child, {});
-
-      child.__r3f.parents.push(parentInstance);
-
+      child.__r3f.parent = parentInstance;
       updateInstance(child);
       invalidateInstance(child);
     }
@@ -969,7 +965,7 @@ function createRenderer(roots, getEventPriority) {
       var _parentInstance$__r3f3, _child$__r3f3, _child$__r3f5;
 
       // Clear the parent reference
-      if (child.__r3f) child.__r3f.parents = child.__r3f.parents.filter(parent => parent !== parentInstance); // Remove child from the parents objects
+      if (child.__r3f) child.__r3f.parent = null; // Remove child from the parents objects
 
       if ((_parentInstance$__r3f3 = parentInstance.__r3f) != null && _parentInstance$__r3f3.objects) parentInstance.__r3f.objects = parentInstance.__r3f.objects.filter(x => x !== child); // Remove attachment
 
@@ -1032,8 +1028,8 @@ function createRenderer(roots, getEventPriority) {
   function switchInstance(instance, type, newProps, fiber) {
     var _instance$__r3f, _newInstance$__r3f;
 
-    const parents = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parents;
-    if (!(parents != null && parents.length)) return;
+    const parent = (_instance$__r3f = instance.__r3f) == null ? void 0 : _instance$__r3f.parent;
+    if (!parent) return;
     const newInstance = createInstance(type, newProps, instance.__r3f.root); // https://github.com/pmndrs/react-three-fiber/issues/1348
     // When args change the instance has to be re-constructed, which then
     // forces r3f to re-parent the children and non-scene objects
@@ -1052,12 +1048,8 @@ function createRenderer(roots, getEventPriority) {
     }
 
     instance.__r3f.objects = [];
-
-    for (const parent of parents) {
-      removeChild(parent, instance);
-      appendChild(parent, newInstance);
-    } // Re-bind event handlers
-
+    removeChild(parent, instance);
+    appendChild(parent, newInstance); // Re-bind event handlers
 
     if (newInstance.raycast && newInstance.__r3f.eventCount) {
       const rootState = newInstance.__r3f.root.getState();
@@ -1067,9 +1059,7 @@ function createRenderer(roots, getEventPriority) {
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
-      for (const parent of parents) {
-        attach(parent, newInstance, newInstance.__r3f.attach);
-      }
+      attach(parent, newInstance, newInstance.__r3f.attach);
     } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
@@ -1159,10 +1149,8 @@ function createRenderer(roots, getEventPriority) {
       } // The attach attribute implies that the object attaches itself on the parent
 
 
-      if (localState.attach) {
-        for (const parent of localState.parents) {
-          attach(parent, instance, localState.attach);
-        }
+      if (localState.parent && localState.attach) {
+        attach(localState.parent, instance, localState.attach);
       }
     },
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-8ec72a6b.cjs.dev.js');
+var index = require('./index-1c8e10cf.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-b47473f2.cjs.prod.js');
+var index = require('./index-e8067a9e.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

package/dist/react-three-fiber.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, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-f1b43982.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-f1b43982.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-ac97daed.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-ac97daed.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

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-8ec72a6b.cjs.dev.js');
+var index = require('../../dist/index-1c8e10cf.cjs.dev.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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-b47473f2.cjs.prod.js');
+var index = require('../../dist/index-e8067a9e.cjs.prod.js');
 var _extends = require('@babel/runtime/helpers/extends');
 var React = require('react');
 var THREE = require('three');

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-f1b43982.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-f1b43982.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-ac97daed.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-ac97daed.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';

package/package.json

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