@react-three/fiber 8.11.7 → 8.11.8

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @react-three/fiber
 
+## 8.11.8
+
+### Patch Changes
+
+- 350cd3f3: fix(Canvas): inline render-effect
+
 ## 8.11.7
 
 ### Patch Changes

package/dist/{index-947d20f1.esm.js → index-648b7c70.esm.js}

@@ -2106,4 +2106,4 @@ reconciler.injectIntoDevTools({
 });
 const act = React.unstable_act;
 
-export { useFrame as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, createRoot as a, useIsomorphicLayoutEffect as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, flushGlobalEffects as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useInstanceHandle as x, useStore as y, useThree as z };
+export { useFrame as A, Block as B, useGraph as C, useLoader as D, ErrorBoundary as E, useIsomorphicLayoutEffect as a, createRoot as b, createEvents as c, unmountComponentAtNode as d, extend as e, context as f, createPortal as g, reconciler as h, isRef as i, applyProps as j, dispose as k, invalidate as l, advance as m, addEffect as n, addAfterEffect as o, addTail as p, flushGlobalEffects as q, render as r, getRootState as s, threeTypes as t, useMutableCallback as u, act as v, roots as w, useInstanceHandle as x, useStore as y, useThree as z };

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

@@ -160,7 +160,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
-  const [canvas, setCanvas] = React__namespace.useState(null);
   React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
@@ -171,56 +170,57 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-        // Set up compute function
-        if (eventPrefix) {
-          state.setEvents({
-            compute: (event, state) => {
-              const x = event[eventPrefix + 'X'];
-              const y = event[eventPrefix + 'Y'];
-              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-              state.raycaster.setFromCamera(state.pointer, state.camera);
-            }
-          });
-        }
-        // Call onCreated callback
-        onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
-      })
-    }, children))));
-  }
   index.useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current);
-  }, []);
+    const canvas = canvasRef.current;
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = index.createRoot(canvas);
+      root.current.configure({
+        gl,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          // Connect to event source
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
+          }
+          // Call onCreated callback
+          onCreated == null ? void 0 : onCreated(state);
+        }
+      });
+      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+        set: setError
+      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
+          set: setBlock
+        })
+      }, children))));
+    }
+  });
   React__namespace.useEffect(() => {
+    const canvas = canvasRef.current;
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
 
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source

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

@@ -160,7 +160,6 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   });
   const canvasRef = React__namespace.useRef(null);
   const divRef = React__namespace.useRef(null);
-  const [canvas, setCanvas] = React__namespace.useState(null);
   React__namespace.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = index.useMutableCallback(onPointerMissed);
   const [block, setBlock] = React__namespace.useState(false);
@@ -171,56 +170,57 @@ const CanvasImpl = /*#__PURE__*/React__namespace.forwardRef(function Canvas({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React__namespace.useRef(null);
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = index.createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-        // Set up compute function
-        if (eventPrefix) {
-          state.setEvents({
-            compute: (event, state) => {
-              const x = event[eventPrefix + 'X'];
-              const y = event[eventPrefix + 'Y'];
-              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-              state.raycaster.setFromCamera(state.pointer, state.camera);
-            }
-          });
-        }
-        // Call onCreated callback
-        onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
-      fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
-        set: setBlock
-      })
-    }, children))));
-  }
   index.useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current);
-  }, []);
+    const canvas = canvasRef.current;
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = index.createRoot(canvas);
+      root.current.configure({
+        gl,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          // Connect to event source
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? index.isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
+          }
+          // Call onCreated callback
+          onCreated == null ? void 0 : onCreated(state);
+        }
+      });
+      root.current.render( /*#__PURE__*/React__namespace.createElement(Bridge, null, /*#__PURE__*/React__namespace.createElement(index.ErrorBoundary, {
+        set: setError
+      }, /*#__PURE__*/React__namespace.createElement(React__namespace.Suspense, {
+        fallback: /*#__PURE__*/React__namespace.createElement(index.Block, {
+          set: setBlock
+        })
+      }, children))));
+    }
+  });
   React__namespace.useEffect(() => {
+    const canvas = canvasRef.current;
     if (canvas) return () => index.unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
 
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source

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

@@ -1,5 +1,5 @@
-import { c as createEvents, e as extend, u as useMutableCallback, a as createRoot, i as isRef, E as ErrorBoundary, B as Block, b as useIsomorphicLayoutEffect, d as unmountComponentAtNode } from './index-947d20f1.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-947d20f1.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, a as useIsomorphicLayoutEffect, b as createRoot, i as isRef, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from './index-648b7c70.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from './index-648b7c70.esm.js';
 import _extends from '@babel/runtime/helpers/esm/extends';
 import * as React from 'react';
 import * as THREE from 'three';
@@ -133,7 +133,6 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   });
   const canvasRef = React.useRef(null);
   const divRef = React.useRef(null);
-  const [canvas, setCanvas] = React.useState(null);
   React.useImperativeHandle(forwardedRef, () => canvasRef.current);
   const handlePointerMissed = useMutableCallback(onPointerMissed);
   const [block, setBlock] = React.useState(false);
@@ -144,56 +143,57 @@ const CanvasImpl = /*#__PURE__*/React.forwardRef(function Canvas({
   // Throw exception outwards if anything within canvas throws
   if (error) throw error;
   const root = React.useRef(null);
-  if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
-    if (!root.current) root.current = createRoot(canvas);
-    root.current.configure({
-      gl,
-      events,
-      shadows,
-      linear,
-      flat,
-      legacy,
-      orthographic,
-      frameloop,
-      dpr,
-      performance,
-      raycaster,
-      camera,
-      size: containerRect,
-      // Pass mutable reference to onPointerMissed so it's free to update
-      onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
-      onCreated: state => {
-        // Connect to event source
-        state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
-        // Set up compute function
-        if (eventPrefix) {
-          state.setEvents({
-            compute: (event, state) => {
-              const x = event[eventPrefix + 'X'];
-              const y = event[eventPrefix + 'Y'];
-              state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
-              state.raycaster.setFromCamera(state.pointer, state.camera);
-            }
-          });
-        }
-        // Call onCreated callback
-        onCreated == null ? void 0 : onCreated(state);
-      }
-    });
-    root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
-      set: setError
-    }, /*#__PURE__*/React.createElement(React.Suspense, {
-      fallback: /*#__PURE__*/React.createElement(Block, {
-        set: setBlock
-      })
-    }, children))));
-  }
   useIsomorphicLayoutEffect(() => {
-    setCanvas(canvasRef.current);
-  }, []);
+    const canvas = canvasRef.current;
+    if (containerRect.width > 0 && containerRect.height > 0 && canvas) {
+      if (!root.current) root.current = createRoot(canvas);
+      root.current.configure({
+        gl,
+        events,
+        shadows,
+        linear,
+        flat,
+        legacy,
+        orthographic,
+        frameloop,
+        dpr,
+        performance,
+        raycaster,
+        camera,
+        size: containerRect,
+        // Pass mutable reference to onPointerMissed so it's free to update
+        onPointerMissed: (...args) => handlePointerMissed.current == null ? void 0 : handlePointerMissed.current(...args),
+        onCreated: state => {
+          // Connect to event source
+          state.events.connect == null ? void 0 : state.events.connect(eventSource ? isRef(eventSource) ? eventSource.current : eventSource : divRef.current);
+          // Set up compute function
+          if (eventPrefix) {
+            state.setEvents({
+              compute: (event, state) => {
+                const x = event[eventPrefix + 'X'];
+                const y = event[eventPrefix + 'Y'];
+                state.pointer.set(x / state.size.width * 2 - 1, -(y / state.size.height) * 2 + 1);
+                state.raycaster.setFromCamera(state.pointer, state.camera);
+              }
+            });
+          }
+          // Call onCreated callback
+          onCreated == null ? void 0 : onCreated(state);
+        }
+      });
+      root.current.render( /*#__PURE__*/React.createElement(Bridge, null, /*#__PURE__*/React.createElement(ErrorBoundary, {
+        set: setError
+      }, /*#__PURE__*/React.createElement(React.Suspense, {
+        fallback: /*#__PURE__*/React.createElement(Block, {
+          set: setBlock
+        })
+      }, children))));
+    }
+  });
   React.useEffect(() => {
+    const canvas = canvasRef.current;
     if (canvas) return () => unmountComponentAtNode(canvas);
-  }, [canvas]);
+  }, []);
 
   // When the event source is not this div, we need to set pointer-events to none
   // Or else the canvas will block events from reaching the event source

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-947d20f1.esm.js';
-export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, a as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-947d20f1.esm.js';
+import { c as createEvents, e as extend, u as useMutableCallback, b as createRoot, E as ErrorBoundary, B as Block, d as unmountComponentAtNode } from '../../dist/index-648b7c70.esm.js';
+export { t as ReactThreeFiber, w as _roots, v as act, o as addAfterEffect, n as addEffect, p as addTail, m as advance, j as applyProps, f as context, c as createEvents, g as createPortal, b as createRoot, k as dispose, e as extend, q as flushGlobalEffects, s as getRootState, l as invalidate, h as reconciler, r as render, d as unmountComponentAtNode, A as useFrame, C as useGraph, x as useInstanceHandle, D as useLoader, y as useStore, z as useThree } from '../../dist/index-648b7c70.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.11.7",
+  "version": "8.11.8",
   "description": "A React renderer for Threejs",
   "keywords": [
     "react",