@react-three/fiber 8.0.20 → 8.0.21

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.0.21
+
+### Patch Changes
+
+- 3098b9b: fix: resizing in worker contexts, copy over attachments on reconstruct
+
 ## 8.0.20
 
 ### Patch Changes

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

@@ -17,6 +17,7 @@ export declare type Dpr = number | [min: number, max: number];
 export declare type Size = {
     width: number;
     height: number;
+    updateStyle?: boolean;
 };
 export declare type Viewport = Size & {
     initialDpr: number;
@@ -80,7 +81,7 @@ export declare type RootState = {
     invalidate: (frames?: number) => void;
     advance: (timestamp: number, runGlobalEffects?: boolean) => void;
     setEvents: (events: Partial<EventManager<any>>) => void;
-    setSize: (width: number, height: number) => void;
+    setSize: (width: number, height: number, updateStyle?: boolean) => void;
     setDpr: (dpr: Dpr) => void;
     setFrameloop: (frameloop?: 'always' | 'demand' | 'never') => void;
     onPointerMissed?: (event: MouseEvent) => void;

package/dist/{index-2de7e188.esm.js → index-30926efc.esm.js}

@@ -1015,9 +1015,14 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    for (const child of instance.__r3f.objects) {
+      appendChild(newInstance, child);
+      detach(instance, child, child.__r3f.attach);
+      attach(newInstance, child, child.__r3f.attach);
+    }
 
     instance.__r3f.objects = [];
 
@@ -1031,7 +1036,7 @@ function createRenderer(roots, getEventPriority) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // The attach attribute implies that the object attaches itself on the parent
+    } // Attach instance to parent
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
@@ -1268,7 +1273,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1285,11 +1291,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1379,7 +1386,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1801,7 +1808,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

package/dist/{index-d2826534.cjs.prod.js → index-786a40b6.cjs.prod.js}

@@ -1042,9 +1042,14 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    for (const child of instance.__r3f.objects) {
+      appendChild(newInstance, child);
+      detach(instance, child, child.__r3f.attach);
+      attach(newInstance, child, child.__r3f.attach);
+    }
 
     instance.__r3f.objects = [];
 
@@ -1058,7 +1063,7 @@ function createRenderer(roots, getEventPriority) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // The attach attribute implies that the object attaches itself on the parent
+    } // Attach instance to parent
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
@@ -1295,7 +1300,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1312,11 +1318,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1406,7 +1413,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1828,7 +1835,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

package/dist/{index-f796b922.cjs.dev.js → index-8e20caed.cjs.dev.js}

@@ -1042,9 +1042,14 @@ function createRenderer(roots, getEventPriority) {
     if (type !== 'primitive' && instance.children) {
       instance.children.forEach(child => appendChild(newInstance, child));
       instance.children = [];
-    }
+    } // Copy over child attachments
+
 
-    instance.__r3f.objects.forEach(child => appendChild(newInstance, child));
+    for (const child of instance.__r3f.objects) {
+      appendChild(newInstance, child);
+      detach(instance, child, child.__r3f.attach);
+      attach(newInstance, child, child.__r3f.attach);
+    }
 
     instance.__r3f.objects = [];
 
@@ -1058,7 +1063,7 @@ function createRenderer(roots, getEventPriority) {
       const rootState = newInstance.__r3f.root.getState();
 
       rootState.internal.interaction.push(newInstance);
-    } // The attach attribute implies that the object attaches itself on the parent
+    } // Attach instance to parent
 
 
     if ((_newInstance$__r3f = newInstance.__r3f) != null && _newInstance$__r3f.attach) {
@@ -1295,7 +1300,8 @@ const createStore = (invalidate, advance) => {
       },
       size: {
         width: 0,
-        height: 0
+        height: 0,
+        updateStyle: false
       },
       viewport: {
         initialDpr: 0,
@@ -1312,11 +1318,12 @@ const createStore = (invalidate, advance) => {
           ...events
         }
       })),
-      setSize: (width, height) => {
+      setSize: (width, height, updateStyle) => {
         const camera = get().camera;
         const size = {
           width,
-          height
+          height,
+          updateStyle
         };
         set(state => ({
           size,
@@ -1406,7 +1413,7 @@ const createStore = (invalidate, advance) => {
       updateCamera(camera, size); // Update renderer
 
       gl.setPixelRatio(viewport.dpr);
-      gl.setSize(size.width, size.height);
+      gl.setSize(size.width, size.height, size.updateStyle);
       oldSize = size;
       oldDpr = viewport.dpr;
     }
@@ -1828,7 +1835,7 @@ function createRoot(canvas) {
         width: (_canvas$parentElement = (_canvas$parentElement2 = canvas.parentElement) == null ? void 0 : _canvas$parentElement2.clientWidth) != null ? _canvas$parentElement : 0,
         height: (_canvas$parentElement3 = (_canvas$parentElement4 = canvas.parentElement) == null ? void 0 : _canvas$parentElement4.clientHeight) != null ? _canvas$parentElement3 : 0
       };
-      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height); // Check frameloop
+      if (!is.equ(size, state.size, shallowLoose)) state.setSize(size.width, size.height, size.updateStyle); // Check frameloop
 
       if (state.frameloop !== frameloop) state.setFrameloop(frameloop); // Check pointer missed
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var index = require('./index-f796b922.cjs.dev.js');
+var index = require('./index-8e20caed.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-d2826534.cjs.prod.js');
+var index = require('./index-786a40b6.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-2de7e188.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-2de7e188.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-30926efc.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-30926efc.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-f796b922.cjs.dev.js');
+var index = require('../../dist/index-8e20caed.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-d2826534.cjs.prod.js');
+var index = require('../../dist/index-786a40b6.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-2de7e188.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-2de7e188.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-30926efc.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-30926efc.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.20",
+  "version": "8.0.21",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",