@react-three/fiber 9.1.1 → 9.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (28) hide show
  1. package/CHANGELOG.md +1148 -1136
  2. package/dist/declarations/src/core/events.d.ts +92 -92
  3. package/dist/declarations/src/core/hooks.d.ts +53 -53
  4. package/dist/declarations/src/core/index.d.ts +13 -13
  5. package/dist/declarations/src/core/loop.d.ts +31 -31
  6. package/dist/declarations/src/core/reconciler.d.ts +50 -50
  7. package/dist/declarations/src/core/renderer.d.ts +89 -89
  8. package/dist/declarations/src/core/store.d.ts +130 -130
  9. package/dist/declarations/src/core/utils.d.ts +191 -190
  10. package/dist/declarations/src/index.d.ts +6 -6
  11. package/dist/declarations/src/native/Canvas.d.ts +13 -13
  12. package/dist/declarations/src/native/events.d.ts +4 -4
  13. package/dist/declarations/src/native.d.ts +6 -6
  14. package/dist/declarations/src/three-types.d.ts +67 -67
  15. package/dist/declarations/src/web/Canvas.d.ts +23 -23
  16. package/dist/declarations/src/web/events.d.ts +4 -4
  17. package/dist/{events-b2f77bcf.cjs.dev.js → events-66111f5e.cjs.dev.js} +83 -85
  18. package/dist/{events-fed10990.cjs.prod.js → events-a96a0963.cjs.prod.js} +83 -85
  19. package/dist/{events-9ea6854d.esm.js → events-f681e724.esm.js} +83 -85
  20. package/dist/react-three-fiber.cjs.dev.js +4 -4
  21. package/dist/react-three-fiber.cjs.prod.js +4 -4
  22. package/dist/react-three-fiber.esm.js +5 -5
  23. package/native/dist/react-three-fiber-native.cjs.dev.js +12 -8
  24. package/native/dist/react-three-fiber-native.cjs.prod.js +12 -8
  25. package/native/dist/react-three-fiber-native.esm.js +14 -10
  26. package/native/package.json +5 -5
  27. package/package.json +2 -2
  28. package/readme.md +253 -253
@@ -1,4 +1,4 @@
1
- import { RootStore } from "../core/store.js";
2
- import { EventManager } from "../core/events.js";
3
- /** Default R3F event manager for web */
4
- export declare function createPointerEvents(store: RootStore): EventManager<HTMLElement>;
1
+ import { RootStore } from "../core/store.js";
2
+ import { EventManager } from "../core/events.js";
3
+ /** Default R3F event manager for web */
4
+ export declare function createPointerEvents(store: RootStore): EventManager<HTMLElement>;
@@ -38,35 +38,33 @@ var threeTypes = /*#__PURE__*/Object.freeze({
38
38
  __proto__: null
39
39
  });
40
40
 
41
- /**
42
- * Returns the instance's initial (outmost) root.
41
+ /**
42
+ * Returns the instance's initial (outmost) root.
43
43
  */
44
44
  function findInitialRoot(instance) {
45
45
  let root = instance.root;
46
46
  while (root.getState().previousRoot) root = root.getState().previousRoot;
47
47
  return root;
48
48
  }
49
- /**
50
- * Safely flush async effects when testing, simulating a legacy root.
49
+ /**
50
+ * Safely flush async effects when testing, simulating a legacy root.
51
+ * @deprecated Import from React instead. import { act } from 'react'
51
52
  */
52
- const act = cb => {
53
- if ('act' in React__namespace) {
54
- return React__namespace.act(cb);
55
- }
56
- throw new Error('act(...) is not supported in production builds of React');
57
- };
53
+ // Reference with computed key to break Webpack static analysis
54
+ // https://github.com/webpack/webpack/issues/14814
55
+ const act = React__namespace['act' + ''];
58
56
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
59
57
  const isRef = obj => obj && obj.hasOwnProperty('current');
60
58
  const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
61
59
 
62
- /**
63
- * An SSR-friendly useLayoutEffect.
64
- *
65
- * React currently throws a warning when using useLayoutEffect on the server.
66
- * To get around it, we can conditionally useEffect on the server (no-op) and
67
- * useLayoutEffect elsewhere.
68
- *
69
- * @see https://github.com/facebook/react/issues/14927
60
+ /**
61
+ * An SSR-friendly useLayoutEffect.
62
+ *
63
+ * React currently throws a warning when using useLayoutEffect on the server.
64
+ * To get around it, we can conditionally useEffect on the server (no-op) and
65
+ * useLayoutEffect elsewhere.
66
+ *
67
+ * @see https://github.com/facebook/react/issues/14927
70
68
  */
71
69
  const useIsomorphicLayoutEffect = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _window$document.createElement) || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative'))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
72
70
  function useMutableCallback(fn) {
@@ -74,8 +72,8 @@ function useMutableCallback(fn) {
74
72
  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
75
73
  return ref;
76
74
  }
77
- /**
78
- * Bridges renderer Context and StrictMode from a primary renderer.
75
+ /**
76
+ * Bridges renderer Context and StrictMode from a primary renderer.
79
77
  */
80
78
  function useBridge() {
81
79
  const fiber = itsFine.useFiber();
@@ -127,8 +125,8 @@ function calculateDpr(dpr) {
127
125
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
128
126
  }
129
127
 
130
- /**
131
- * Returns instance root state
128
+ /**
129
+ * Returns instance root state
132
130
  */
133
131
  function getRootState(obj) {
134
132
  var _r3f;
@@ -491,9 +489,9 @@ function makeId(event) {
491
489
  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
492
490
  }
493
491
 
494
- /**
495
- * Release pointer captures.
496
- * This is called by releasePointerCapture in the API, and when an object is removed.
492
+ /**
493
+ * Release pointer captures.
494
+ * This is called by releasePointerCapture in the API, and when an object is removed.
497
495
  */
498
496
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
499
497
  const captureData = captures.get(obj);
@@ -840,19 +838,19 @@ function createEvents(store) {
840
838
  if (!(instance != null && instance.eventCount)) return;
841
839
  const handlers = instance.handlers;
842
840
 
843
- /*
844
- MAYBE TODO, DELETE IF NOT:
845
- Check if the object is captured, captured events should not have intersects running in parallel
846
- But wouldn't it be better to just replace capturedMap with a single entry?
847
- Also, are we OK with straight up making picking up multiple objects impossible?
848
-
849
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
850
- if (pointerId !== undefined) {
851
- const capturedMeshSet = internal.capturedMap.get(pointerId)
852
- if (capturedMeshSet) {
853
- const captured = capturedMeshSet.get(eventObject)
854
- if (captured && captured.localState.stopped) return
855
- }
841
+ /*
842
+ MAYBE TODO, DELETE IF NOT:
843
+ Check if the object is captured, captured events should not have intersects running in parallel
844
+ But wouldn't it be better to just replace capturedMap with a single entry?
845
+ Also, are we OK with straight up making picking up multiple objects impossible?
846
+
847
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
848
+ if (pointerId !== undefined) {
849
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
850
+ if (capturedMeshSet) {
851
+ const captured = capturedMeshSet.get(eventObject)
852
+ if (captured && captured.localState.stopped) return
853
+ }
856
854
  }*/
857
855
 
858
856
  if (isPointerMove) {
@@ -1143,11 +1141,11 @@ const createStore = (invalidate, advance) => {
1143
1141
  return rootStore;
1144
1142
  };
1145
1143
 
1146
- /**
1147
- * Exposes an object's {@link Instance}.
1148
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1149
- *
1150
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1144
+ /**
1145
+ * Exposes an object's {@link Instance}.
1146
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1147
+ *
1148
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1151
1149
  */
1152
1150
  function useInstanceHandle(ref) {
1153
1151
  const instance = React__namespace.useRef(null);
@@ -1155,9 +1153,9 @@ function useInstanceHandle(ref) {
1155
1153
  return instance;
1156
1154
  }
1157
1155
 
1158
- /**
1159
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1160
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1156
+ /**
1157
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1158
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1161
1159
  */
1162
1160
  function useStore() {
1163
1161
  const store = React__namespace.useContext(context);
@@ -1165,18 +1163,18 @@ function useStore() {
1165
1163
  return store;
1166
1164
  }
1167
1165
 
1168
- /**
1169
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1170
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1166
+ /**
1167
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1168
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1171
1169
  */
1172
1170
  function useThree(selector = state => state, equalityFn) {
1173
1171
  return useStore()(selector, equalityFn);
1174
1172
  }
1175
1173
 
1176
- /**
1177
- * Executes a callback before render in a shared frame loop.
1178
- * Can order effects with render priority or manually render with a positive priority.
1179
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1174
+ /**
1175
+ * Executes a callback before render in a shared frame loop.
1176
+ * Can order effects with render priority or manually render with a positive priority.
1177
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1180
1178
  */
1181
1179
  function useFrame(callback, renderPriority = 0) {
1182
1180
  const store = useStore();
@@ -1188,9 +1186,9 @@ function useFrame(callback, renderPriority = 0) {
1188
1186
  return null;
1189
1187
  }
1190
1188
 
1191
- /**
1192
- * Returns a node graph of an object with named nodes & materials.
1193
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1189
+ /**
1190
+ * Returns a node graph of an object with named nodes & materials.
1191
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1194
1192
  */
1195
1193
  function useGraph(object) {
1196
1194
  return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1226,11 +1224,11 @@ function loadingFn(extensions, onProgress) {
1226
1224
  };
1227
1225
  }
1228
1226
 
1229
- /**
1230
- * Synchronously loads and caches assets with a three loader.
1231
- *
1232
- * Note: this hook's caller must be wrapped with `React.Suspense`
1233
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1227
+ /**
1228
+ * Synchronously loads and caches assets with a three loader.
1229
+ *
1230
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1231
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1234
1232
  */
1235
1233
  function useLoader(loader, input, extensions, onProgress) {
1236
1234
  // Use suspense to load async assets
@@ -1242,16 +1240,16 @@ function useLoader(loader, input, extensions, onProgress) {
1242
1240
  return Array.isArray(input) ? results : results[0];
1243
1241
  }
1244
1242
 
1245
- /**
1246
- * Preloads an asset into cache as a side-effect.
1243
+ /**
1244
+ * Preloads an asset into cache as a side-effect.
1247
1245
  */
1248
1246
  useLoader.preload = function (loader, input, extensions) {
1249
1247
  const keys = Array.isArray(input) ? input : [input];
1250
1248
  return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
1251
1249
  };
1252
1250
 
1253
- /**
1254
- * Removes a loaded asset from cache.
1251
+ /**
1252
+ * Removes a loaded asset from cache.
1255
1253
  */
1256
1254
  useLoader.clear = function (loader, input) {
1257
1255
  const keys = Array.isArray(input) ? input : [input];
@@ -2035,7 +2033,7 @@ function Provider({
2035
2033
  active: true
2036
2034
  }
2037
2035
  }));
2038
- // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
2036
+ // Notify that init is completed, the scene graph exists, but nothing has yet rendered
2039
2037
  if (onCreated) onCreated(state);
2040
2038
  // Connect events to the targets parent, this is done to ensure events are registered on
2041
2039
  // a shared target, and not on the canvas itself
@@ -2085,10 +2083,10 @@ function Portal({
2085
2083
  children,
2086
2084
  container
2087
2085
  }) {
2088
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2089
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2090
- * the "R3F hooks can only be used within the Canvas component!" warning:
2091
- * <Canvas>
2086
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2087
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2088
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2089
+ * <Canvas>
2092
2090
  * {createPortal(...)} */
2093
2091
  const {
2094
2092
  events,
@@ -2180,21 +2178,21 @@ const globalEffects = new Set();
2180
2178
  const globalAfterEffects = new Set();
2181
2179
  const globalTailEffects = new Set();
2182
2180
 
2183
- /**
2184
- * Adds a global render callback which is called each frame.
2185
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2181
+ /**
2182
+ * Adds a global render callback which is called each frame.
2183
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2186
2184
  */
2187
2185
  const addEffect = callback => createSubs(callback, globalEffects);
2188
2186
 
2189
- /**
2190
- * Adds a global after-render callback which is called each frame.
2191
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2187
+ /**
2188
+ * Adds a global after-render callback which is called each frame.
2189
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2192
2190
  */
2193
2191
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
2194
2192
 
2195
- /**
2196
- * Adds a global callback which is called when rendering stops.
2197
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2193
+ /**
2194
+ * Adds a global callback which is called when rendering stops.
2195
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2198
2196
  */
2199
2197
  const addTail = callback => createSubs(callback, globalTailEffects);
2200
2198
  function run(effects, timestamp) {
@@ -2282,9 +2280,9 @@ function loop(timestamp) {
2282
2280
  }
2283
2281
  }
2284
2282
 
2285
- /**
2286
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2287
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2283
+ /**
2284
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2285
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2288
2286
  */
2289
2287
  function invalidate(state, frames = 1) {
2290
2288
  var _state$gl$xr2;
@@ -2311,9 +2309,9 @@ function invalidate(state, frames = 1) {
2311
2309
  }
2312
2310
  }
2313
2311
 
2314
- /**
2315
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2316
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2312
+ /**
2313
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2314
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2317
2315
  */
2318
2316
  function advance(timestamp, runGlobalEffects = true, state, frame) {
2319
2317
  if (runGlobalEffects) flushGlobalEffects('before', timestamp);
@@ -38,35 +38,33 @@ var threeTypes = /*#__PURE__*/Object.freeze({
38
38
  __proto__: null
39
39
  });
40
40
 
41
- /**
42
- * Returns the instance's initial (outmost) root.
41
+ /**
42
+ * Returns the instance's initial (outmost) root.
43
43
  */
44
44
  function findInitialRoot(instance) {
45
45
  let root = instance.root;
46
46
  while (root.getState().previousRoot) root = root.getState().previousRoot;
47
47
  return root;
48
48
  }
49
- /**
50
- * Safely flush async effects when testing, simulating a legacy root.
49
+ /**
50
+ * Safely flush async effects when testing, simulating a legacy root.
51
+ * @deprecated Import from React instead. import { act } from 'react'
51
52
  */
52
- const act = cb => {
53
- if ('act' in React__namespace) {
54
- return React__namespace.act(cb);
55
- }
56
- throw new Error('act(...) is not supported in production builds of React');
57
- };
53
+ // Reference with computed key to break Webpack static analysis
54
+ // https://github.com/webpack/webpack/issues/14814
55
+ const act = React__namespace['act' + ''];
58
56
  const isOrthographicCamera = def => def && def.isOrthographicCamera;
59
57
  const isRef = obj => obj && obj.hasOwnProperty('current');
60
58
  const isColorRepresentation = value => value != null && (typeof value === 'string' || typeof value === 'number' || value.isColor);
61
59
 
62
- /**
63
- * An SSR-friendly useLayoutEffect.
64
- *
65
- * React currently throws a warning when using useLayoutEffect on the server.
66
- * To get around it, we can conditionally useEffect on the server (no-op) and
67
- * useLayoutEffect elsewhere.
68
- *
69
- * @see https://github.com/facebook/react/issues/14927
60
+ /**
61
+ * An SSR-friendly useLayoutEffect.
62
+ *
63
+ * React currently throws a warning when using useLayoutEffect on the server.
64
+ * To get around it, we can conditionally useEffect on the server (no-op) and
65
+ * useLayoutEffect elsewhere.
66
+ *
67
+ * @see https://github.com/facebook/react/issues/14927
70
68
  */
71
69
  const useIsomorphicLayoutEffect = /* @__PURE__ */((_window$document, _window$navigator) => typeof window !== 'undefined' && (((_window$document = window.document) == null ? void 0 : _window$document.createElement) || ((_window$navigator = window.navigator) == null ? void 0 : _window$navigator.product) === 'ReactNative'))() ? React__namespace.useLayoutEffect : React__namespace.useEffect;
72
70
  function useMutableCallback(fn) {
@@ -74,8 +72,8 @@ function useMutableCallback(fn) {
74
72
  useIsomorphicLayoutEffect(() => void (ref.current = fn), [fn]);
75
73
  return ref;
76
74
  }
77
- /**
78
- * Bridges renderer Context and StrictMode from a primary renderer.
75
+ /**
76
+ * Bridges renderer Context and StrictMode from a primary renderer.
79
77
  */
80
78
  function useBridge() {
81
79
  const fiber = itsFine.useFiber();
@@ -127,8 +125,8 @@ function calculateDpr(dpr) {
127
125
  return Array.isArray(dpr) ? Math.min(Math.max(dpr[0], target), dpr[1]) : dpr;
128
126
  }
129
127
 
130
- /**
131
- * Returns instance root state
128
+ /**
129
+ * Returns instance root state
132
130
  */
133
131
  function getRootState(obj) {
134
132
  var _r3f;
@@ -491,9 +489,9 @@ function makeId(event) {
491
489
  return (event.eventObject || event.object).uuid + '/' + event.index + event.instanceId;
492
490
  }
493
491
 
494
- /**
495
- * Release pointer captures.
496
- * This is called by releasePointerCapture in the API, and when an object is removed.
492
+ /**
493
+ * Release pointer captures.
494
+ * This is called by releasePointerCapture in the API, and when an object is removed.
497
495
  */
498
496
  function releaseInternalPointerCapture(capturedMap, obj, captures, pointerId) {
499
497
  const captureData = captures.get(obj);
@@ -840,19 +838,19 @@ function createEvents(store) {
840
838
  if (!(instance != null && instance.eventCount)) return;
841
839
  const handlers = instance.handlers;
842
840
 
843
- /*
844
- MAYBE TODO, DELETE IF NOT:
845
- Check if the object is captured, captured events should not have intersects running in parallel
846
- But wouldn't it be better to just replace capturedMap with a single entry?
847
- Also, are we OK with straight up making picking up multiple objects impossible?
848
-
849
- const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
850
- if (pointerId !== undefined) {
851
- const capturedMeshSet = internal.capturedMap.get(pointerId)
852
- if (capturedMeshSet) {
853
- const captured = capturedMeshSet.get(eventObject)
854
- if (captured && captured.localState.stopped) return
855
- }
841
+ /*
842
+ MAYBE TODO, DELETE IF NOT:
843
+ Check if the object is captured, captured events should not have intersects running in parallel
844
+ But wouldn't it be better to just replace capturedMap with a single entry?
845
+ Also, are we OK with straight up making picking up multiple objects impossible?
846
+
847
+ const pointerId = (data as ThreeEvent<PointerEvent>).pointerId
848
+ if (pointerId !== undefined) {
849
+ const capturedMeshSet = internal.capturedMap.get(pointerId)
850
+ if (capturedMeshSet) {
851
+ const captured = capturedMeshSet.get(eventObject)
852
+ if (captured && captured.localState.stopped) return
853
+ }
856
854
  }*/
857
855
 
858
856
  if (isPointerMove) {
@@ -1143,11 +1141,11 @@ const createStore = (invalidate, advance) => {
1143
1141
  return rootStore;
1144
1142
  };
1145
1143
 
1146
- /**
1147
- * Exposes an object's {@link Instance}.
1148
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1149
- *
1150
- * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1144
+ /**
1145
+ * Exposes an object's {@link Instance}.
1146
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#useInstanceHandle
1147
+ *
1148
+ * **Note**: this is an escape hatch to react-internal fields. Expect this to change significantly between versions.
1151
1149
  */
1152
1150
  function useInstanceHandle(ref) {
1153
1151
  const instance = React__namespace.useRef(null);
@@ -1155,9 +1153,9 @@ function useInstanceHandle(ref) {
1155
1153
  return instance;
1156
1154
  }
1157
1155
 
1158
- /**
1159
- * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1160
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1156
+ /**
1157
+ * Returns the R3F Canvas' Zustand store. Useful for [transient updates](https://github.com/pmndrs/zustand#transient-updates-for-often-occurring-state-changes).
1158
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usestore
1161
1159
  */
1162
1160
  function useStore() {
1163
1161
  const store = React__namespace.useContext(context);
@@ -1165,18 +1163,18 @@ function useStore() {
1165
1163
  return store;
1166
1164
  }
1167
1165
 
1168
- /**
1169
- * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1170
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1166
+ /**
1167
+ * Accesses R3F's internal state, containing renderer, canvas, scene, etc.
1168
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usethree
1171
1169
  */
1172
1170
  function useThree(selector = state => state, equalityFn) {
1173
1171
  return useStore()(selector, equalityFn);
1174
1172
  }
1175
1173
 
1176
- /**
1177
- * Executes a callback before render in a shared frame loop.
1178
- * Can order effects with render priority or manually render with a positive priority.
1179
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1174
+ /**
1175
+ * Executes a callback before render in a shared frame loop.
1176
+ * Can order effects with render priority or manually render with a positive priority.
1177
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe
1180
1178
  */
1181
1179
  function useFrame(callback, renderPriority = 0) {
1182
1180
  const store = useStore();
@@ -1188,9 +1186,9 @@ function useFrame(callback, renderPriority = 0) {
1188
1186
  return null;
1189
1187
  }
1190
1188
 
1191
- /**
1192
- * Returns a node graph of an object with named nodes & materials.
1193
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1189
+ /**
1190
+ * Returns a node graph of an object with named nodes & materials.
1191
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#usegraph
1194
1192
  */
1195
1193
  function useGraph(object) {
1196
1194
  return React__namespace.useMemo(() => buildGraph(object), [object]);
@@ -1226,11 +1224,11 @@ function loadingFn(extensions, onProgress) {
1226
1224
  };
1227
1225
  }
1228
1226
 
1229
- /**
1230
- * Synchronously loads and caches assets with a three loader.
1231
- *
1232
- * Note: this hook's caller must be wrapped with `React.Suspense`
1233
- * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1227
+ /**
1228
+ * Synchronously loads and caches assets with a three loader.
1229
+ *
1230
+ * Note: this hook's caller must be wrapped with `React.Suspense`
1231
+ * @see https://docs.pmnd.rs/react-three-fiber/api/hooks#useloader
1234
1232
  */
1235
1233
  function useLoader(loader, input, extensions, onProgress) {
1236
1234
  // Use suspense to load async assets
@@ -1242,16 +1240,16 @@ function useLoader(loader, input, extensions, onProgress) {
1242
1240
  return Array.isArray(input) ? results : results[0];
1243
1241
  }
1244
1242
 
1245
- /**
1246
- * Preloads an asset into cache as a side-effect.
1243
+ /**
1244
+ * Preloads an asset into cache as a side-effect.
1247
1245
  */
1248
1246
  useLoader.preload = function (loader, input, extensions) {
1249
1247
  const keys = Array.isArray(input) ? input : [input];
1250
1248
  return suspendReact.preload(loadingFn(extensions), [loader, ...keys]);
1251
1249
  };
1252
1250
 
1253
- /**
1254
- * Removes a loaded asset from cache.
1251
+ /**
1252
+ * Removes a loaded asset from cache.
1255
1253
  */
1256
1254
  useLoader.clear = function (loader, input) {
1257
1255
  const keys = Array.isArray(input) ? input : [input];
@@ -2035,7 +2033,7 @@ function Provider({
2035
2033
  active: true
2036
2034
  }
2037
2035
  }));
2038
- // Notifiy that init is completed, the scene graph exists, but nothing has yet rendered
2036
+ // Notify that init is completed, the scene graph exists, but nothing has yet rendered
2039
2037
  if (onCreated) onCreated(state);
2040
2038
  // Connect events to the targets parent, this is done to ensure events are registered on
2041
2039
  // a shared target, and not on the canvas itself
@@ -2085,10 +2083,10 @@ function Portal({
2085
2083
  children,
2086
2084
  container
2087
2085
  }) {
2088
- /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2089
- * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2090
- * the "R3F hooks can only be used within the Canvas component!" warning:
2091
- * <Canvas>
2086
+ /** This has to be a component because it would not be able to call useThree/useStore otherwise since
2087
+ * if this is our environment, then we are not in r3f's renderer but in react-dom, it would trigger
2088
+ * the "R3F hooks can only be used within the Canvas component!" warning:
2089
+ * <Canvas>
2092
2090
  * {createPortal(...)} */
2093
2091
  const {
2094
2092
  events,
@@ -2180,21 +2178,21 @@ const globalEffects = new Set();
2180
2178
  const globalAfterEffects = new Set();
2181
2179
  const globalTailEffects = new Set();
2182
2180
 
2183
- /**
2184
- * Adds a global render callback which is called each frame.
2185
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2181
+ /**
2182
+ * Adds a global render callback which is called each frame.
2183
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addEffect
2186
2184
  */
2187
2185
  const addEffect = callback => createSubs(callback, globalEffects);
2188
2186
 
2189
- /**
2190
- * Adds a global after-render callback which is called each frame.
2191
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2187
+ /**
2188
+ * Adds a global after-render callback which is called each frame.
2189
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addAfterEffect
2192
2190
  */
2193
2191
  const addAfterEffect = callback => createSubs(callback, globalAfterEffects);
2194
2192
 
2195
- /**
2196
- * Adds a global callback which is called when rendering stops.
2197
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2193
+ /**
2194
+ * Adds a global callback which is called when rendering stops.
2195
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#addTail
2198
2196
  */
2199
2197
  const addTail = callback => createSubs(callback, globalTailEffects);
2200
2198
  function run(effects, timestamp) {
@@ -2282,9 +2280,9 @@ function loop(timestamp) {
2282
2280
  }
2283
2281
  }
2284
2282
 
2285
- /**
2286
- * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2287
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2283
+ /**
2284
+ * Invalidates the view, requesting a frame to be rendered. Will globally invalidate unless passed a root's state.
2285
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#invalidate
2288
2286
  */
2289
2287
  function invalidate(state, frames = 1) {
2290
2288
  var _state$gl$xr2;
@@ -2311,9 +2309,9 @@ function invalidate(state, frames = 1) {
2311
2309
  }
2312
2310
  }
2313
2311
 
2314
- /**
2315
- * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2316
- * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2312
+ /**
2313
+ * Advances the frameloop and runs render effects, useful for when manually rendering via `frameloop="never"`.
2314
+ * @see https://docs.pmnd.rs/react-three-fiber/api/additional-exports#advance
2317
2315
  */
2318
2316
  function advance(timestamp, runGlobalEffects = true, state, frame) {
2319
2317
  if (runGlobalEffects) flushGlobalEffects('before', timestamp);