@react-three/fiber 8.0.0-beta-04 → 8.0.0-beta-05

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @react-three/fiber
 
+## 7.0.25
+
+### Patch Changes
+
+- 8698734: Release latest patches
+
+## 7.0.24
+
+### Patch Changes
+
+- 7f46ddf: cleanup captured pointers when released (#1914)
+
 ## 7.0.23
 
 ### Patch Changes

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

@@ -8,7 +8,7 @@ import { extend, Root } from '../core/renderer';
 import { addEffect, addAfterEffect, addTail } from '../core/loop';
 import { EventManager } from './events';
 declare const roots: Map<Element, Root>;
-declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
+declare const invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 declare const reconciler: import("react-reconciler").Reconciler<unknown, unknown, unknown, unknown, unknown>, applyProps: typeof import("../core/utils").applyProps;
 declare type Properties<T> = Pick<T, {
     [K in keyof T]: T[K] extends (_: any) => any ? never : K;
@@ -28,4 +28,5 @@ declare function render<TCanvas extends Element>(element: React.ReactNode, canva
 declare function unmountComponentAtNode<TElement extends Element>(canvas: TElement, callback?: (canvas: TElement) => void): void;
 declare const act: any;
 declare function createPortal(children: React.ReactNode, container: THREE.Object3D): React.ReactNode;
+export * from './hooks';
 export { context, render, createRoot, unmountComponentAtNode, createPortal, reconciler, applyProps, dispose, invalidate, advance, extend, addEffect, addAfterEffect, addTail, act, roots as _roots, };

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

@@ -1,3 +1,4 @@
+import * as THREE from 'three';
 import { Root } from './renderer';
 import { RootState } from './store';
 declare type GlobalRenderCallback = (timeStamp: number) => void;
@@ -7,6 +8,6 @@ export declare const addTail: (callback: GlobalRenderCallback) => () => void;
 export declare function createLoop<TCanvas>(roots: Map<TCanvas, Root>): {
     loop: (timestamp: number) => number | undefined;
     invalidate: (state?: RootState | undefined) => void;
-    advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined) => void;
+    advance: (timestamp: number, runGlobalEffects?: boolean, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void;
 };
 export {};

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

@@ -29,7 +29,7 @@ export declare type Raycaster = THREE.Raycaster & {
     filter?: FilterFunction;
     computeOffsets?: ComputeOffsetsFunction;
 };
-export declare type RenderCallback = (state: RootState, delta: number) => void;
+export declare type RenderCallback = (state: RootState, delta: number, frame?: THREE.XRFrame) => void;
 export declare type Performance = {
     current: number;
     min: number;
@@ -93,6 +93,8 @@ export declare type FilterFunction = (items: THREE.Intersection[], state: RootSt
 export declare type ComputeOffsetsFunction = (event: any, state: RootState) => {
     offsetX: number;
     offsetY: number;
+    width?: number;
+    height?: number;
 };
 export declare type StoreProps = {
     gl: THREE.WebGLRenderer;
@@ -113,5 +115,5 @@ export declare type StoreProps = {
 };
 export declare type ApplyProps = (instance: Instance, newProps: InstanceProps) => void;
 declare const context: React.Context<UseStore<RootState>>;
-declare const createStore: (applyProps: ApplyProps, invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined) => void, props: StoreProps) => UseStore<RootState>;
+declare const createStore: (applyProps: ApplyProps, invalidate: (state?: RootState | undefined) => void, advance: (timestamp: number, runGlobalEffects?: boolean | undefined, state?: RootState | undefined, frame?: THREE.XRFrame | undefined) => void, props: StoreProps) => UseStore<RootState>;
 export { createStore, context };

package/dist/declarations/src/index.d.ts

@@ -4,7 +4,6 @@ export { ReactThreeFiber };
 export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager } from './core/events';
 export type { ObjectMap } from './core/utils';
-export * from './core/hooks';
 export * from './web/Canvas';
 export { createPointerEvents as events } from './web/events';
 export * from './core';

package/dist/declarations/src/native.d.ts

@@ -4,7 +4,6 @@ export { ReactThreeFiber };
 export type { Intersection, Subscription, Dpr, Size, Viewport, Camera, RenderCallback, Performance, RootState, } from './core/store';
 export type { ThreeEvent, Events, EventManager } from './core/events';
 export type { ObjectMap } from './core/utils';
-export * from './native/hooks';
 export * from './native/Canvas';
 export { createTouchEvents as events } from './native/events';
 export * from './core';

package/dist/declarations/src/three-types.d.ts

@@ -24,7 +24,10 @@ export interface NodeProps<T, P> {
     key?: React.Key;
     onUpdate?: (self: T) => void;
 }
-export declare type Node<T, P> = Overwrite<Partial<T>, NodeProps<T, P>>;
+export declare type ExtendedColors<T> = {
+    [K in keyof T]: T[K] extends THREE.Color | undefined ? Color : T[K];
+};
+export declare type Node<T, P> = ExtendedColors<Overwrite<Partial<T>, NodeProps<T, P>>>;
 export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
     position?: Vector3;
     up?: Vector3;
@@ -35,13 +38,9 @@ export declare type Object3DNode<T, P> = Overwrite<Node<T, P>, {
     layers?: Layers;
     dispose?: (() => void) | null;
 }> & EventHandlers;
-export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Overwrite<Node<T, P>, {}>;
-export declare type MaterialNode<T extends THREE.Material, P> = Overwrite<Node<T, P>, {
-    color?: Color;
-}>;
-export declare type LightNode<T extends THREE.Light, P> = Overwrite<Object3DNode<T, P>, {
-    color?: Color;
-}>;
+export declare type BufferGeometryNode<T extends THREE.BufferGeometry, P> = Node<T, P>;
+export declare type MaterialNode<T extends THREE.Material, P> = Node<T, P>;
+export declare type LightNode<T extends THREE.Light, P> = Object3DNode<T, P>;
 export declare type AudioListenerProps = Object3DNode<THREE.AudioListener, typeof THREE.AudioListener>;
 export declare type PositionalAudioProps = Object3DNode<THREE.PositionalAudio, typeof THREE.PositionalAudio>;
 export declare type MeshProps = Object3DNode<THREE.Mesh, typeof THREE.Mesh>;

package/dist/{index-fccd77b0.esm.js → index-3f4e5f46.esm.js}

@@ -391,7 +391,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -402,14 +402,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -968,10 +965,13 @@ function createRenderer(roots, getEventPriority) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1065,7 +1065,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1226,18 +1226,19 @@ const createStore = (applyProps, invalidate, advance, props) => {
     })); // Handle frame behavior in WebXR
 
 
-    const handleXRFrame = timestamp => {
+    const handleXRFrame = (timestamp, frame) => {
       const state = get();
       if (state.frameloop === 'never') return;
-      advance(timestamp, true);
+      advance(timestamp, true, state, frame);
     }; // Toggle render switching on session
 
 
     const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
+      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+      // WebXRManager's signature is incorrect.
+      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-      if (!gl.xr.isPresenting) invalidate(get());
+      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
     }; // WebXR session manager
 
 
@@ -1417,60 +1418,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
   return rootState;
 };
 
-function useStore() {
-  const store = React.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
-
-  const ref = React.useRef(callback);
-  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
-
-  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
-}
-function useGraph(object) {
-  return React.useMemo(() => buildGraph(object), [object]);
-}
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return clear([Proto, ...keys]);
-};
-
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1489,7 +1436,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render$1(timestamp, state) {
+function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1500,7 +1447,7 @@ function render$1(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // Render content
+  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1551,9 +1498,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1564,6 +1511,60 @@ function createLoop(roots) {
   };
 }
 
+function useStore() {
+  const store = React.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React.useRef(callback);
+  React.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
+      if (data.scene) Object.assign(data, buildGraph(data.scene));
+      res(data);
+    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return clear([Proto, ...keys]);
+};
+
 const roots = new Map();
 const {
   invalidate,
@@ -1747,4 +1748,4 @@ reconciler.injectIntoDevTools({
   version: '18.0.0'
 });
 
-export { is as A, createRoot as a, useStore as b, createEvents as c, useThree as d, extend as e, useFrame as f, useGraph as g, useLoader as h, context as i, createPortal as j, reconciler as k, applyProps as l, dispose as m, invalidate as n, omit as o, pick as p, advance as q, render as r, addEffect as s, threeTypes as t, unmountComponentAtNode as u, addAfterEffect as v, addTail as w, act as x, roots as y, buildGraph as z };
+export { createRoot as a, context as b, createEvents as c, createPortal as d, extend as e, reconciler as f, applyProps as g, dispose as h, invalidate as i, advance as j, addEffect as k, addAfterEffect as l, addTail as m, act as n, omit as o, pick as p, roots as q, render as r, useStore as s, threeTypes as t, unmountComponentAtNode as u, useThree as v, useFrame as w, useGraph as x, useLoader as y };

package/dist/{index-ff3eb68b.cjs.dev.js → index-95c17855.cjs.dev.js}

@@ -420,7 +420,7 @@ function createEvents(store) {
   /** Sets up defaultRaycaster */
 
   function prepareRay(event) {
-    var _raycaster$computeOff;
+    var _customOffsets$offset, _customOffsets$offset2, _customOffsets$width, _customOffsets$height;
 
     const state = store.getState();
     const {
@@ -431,14 +431,11 @@ function createEvents(store) {
     } = state; // https://github.com/pmndrs/react-three-fiber/pull/782
     // Events trigger outside of canvas when moved
 
-    const {
-      offsetX,
-      offsetY
-    } = (_raycaster$computeOff = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state)) != null ? _raycaster$computeOff : event;
-    const {
-      width,
-      height
-    } = size;
+    const customOffsets = raycaster.computeOffsets == null ? void 0 : raycaster.computeOffsets(event, state);
+    const offsetX = (_customOffsets$offset = customOffsets == null ? void 0 : customOffsets.offsetX) != null ? _customOffsets$offset : event.offsetX;
+    const offsetY = (_customOffsets$offset2 = customOffsets == null ? void 0 : customOffsets.offsetY) != null ? _customOffsets$offset2 : event.offsetY;
+    const width = (_customOffsets$width = customOffsets == null ? void 0 : customOffsets.width) != null ? _customOffsets$width : size.width;
+    const height = (_customOffsets$height = customOffsets == null ? void 0 : customOffsets.height) != null ? _customOffsets$height : size.height;
     mouse.set(offsetX / width * 2 - 1, -(offsetY / height) * 2 + 1);
     raycaster.setFromCamera(mouse, camera);
   }
@@ -997,10 +994,13 @@ function createRenderer(roots, getEventPriority) {
 
     instance.__r3f.objects = [];
     removeChild(parent, instance);
-    appendChild(parent, newInstance) // This evil hack switches the react-internal fiber node
-    // https://github.com/facebook/react/issues/14983
-    // https://github.com/facebook/react/pull/15021
-    ;
+    appendChild(parent, newInstance); // Re-bind event handlers
+
+    if (newInstance.raycast && newInstance.__r3f.eventCount) {
+      const rootState = newInstance.__r3f.root.getState();
+
+      rootState.internal.interaction.push(newInstance);
+    } // This evil hack switches the react-internal fiber node
     [fiber, fiber.alternate].forEach(fiber => {
       if (fiber !== null) {
         fiber.stateNode = newInstance;
@@ -1094,7 +1094,7 @@ function createRenderer(roots, getEventPriority) {
     isPrimaryRenderer: false,
     getCurrentEventPriority: () => getEventPriority ? getEventPriority() : constants.DefaultEventPriority,
     // @ts-ignore
-    now: is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
+    now: typeof performance !== 'undefined' && is.fun(performance.now) ? performance.now : is.fun(Date.now) ? Date.now : undefined,
     // @ts-ignore
     scheduleTimeout: is.fun(setTimeout) ? setTimeout : undefined,
     // @ts-ignore
@@ -1255,18 +1255,19 @@ const createStore = (applyProps, invalidate, advance, props) => {
     })); // Handle frame behavior in WebXR
 
 
-    const handleXRFrame = timestamp => {
+    const handleXRFrame = (timestamp, frame) => {
       const state = get();
       if (state.frameloop === 'never') return;
-      advance(timestamp, true);
+      advance(timestamp, true, state, frame);
     }; // Toggle render switching on session
 
 
     const handleSessionChange = () => {
-      gl.xr.enabled = gl.xr.isPresenting;
-      gl.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null); // If exiting session, request frame
+      gl.xr.enabled = gl.xr.isPresenting; // @ts-expect-error
+      // WebXRManager's signature is incorrect.
+      // See: https://github.com/pmndrs/react-three-fiber/pull/2017#discussion_r790134505
 
-      if (!gl.xr.isPresenting) invalidate(get());
+      gl.xr.setAnimationLoop(gl.xr.isPresenting ? handleXRFrame : null);
     }; // WebXR session manager
 
 
@@ -1446,60 +1447,6 @@ const createStore = (applyProps, invalidate, advance, props) => {
   return rootState;
 };
 
-function useStore() {
-  const store = React__namespace.useContext(context);
-  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
-  return store;
-}
-function useThree(selector = state => state, equalityFn) {
-  return useStore()(selector, equalityFn);
-}
-function useFrame(callback, renderPriority = 0) {
-  const subscribe = useStore().getState().internal.subscribe; // Update ref
-
-  const ref = React__namespace.useRef(callback);
-  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
-
-  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
-  return null;
-}
-function useGraph(object) {
-  return React__namespace.useMemo(() => buildGraph(object), [object]);
-}
-
-function loadingFn(extensions, onProgress) {
-  return function (Proto, ...input) {
-    // Construct new loader and run extensions
-    const loader = new Proto();
-    if (extensions) extensions(loader); // Go through the urls and load them
-
-    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
-      if (data.scene) Object.assign(data, buildGraph(data.scene));
-      res(data);
-    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
-  };
-}
-
-function useLoader(Proto, input, extensions, onProgress) {
-  // Use suspense to load async assets
-  const keys = Array.isArray(input) ? input : [input];
-  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
-    equal: is.equ
-  }); // Return the object/s
-
-  return Array.isArray(input) ? results : results[0];
-}
-
-useLoader.preload = function (Proto, input, extensions) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
-};
-
-useLoader.clear = function (Proto, input) {
-  const keys = Array.isArray(input) ? input : [input];
-  return suspendReact.clear([Proto, ...keys]);
-};
-
 function createSubs(callback, subs) {
   const index = subs.length;
   subs.push(callback);
@@ -1518,7 +1465,7 @@ function run(effects, timestamp) {
   for (i = 0; i < effects.length; i++) effects[i](timestamp);
 }
 
-function render$1(timestamp, state) {
+function render$1(timestamp, state, frame) {
   // Run local effects
   let delta = state.clock.getDelta(); // In frameloop='never' mode, clock times are updated using the provided timestamp
 
@@ -1529,7 +1476,7 @@ function render$1(timestamp, state) {
   } // Call subscribers (useFrame)
 
 
-  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta); // Render content
+  for (i = 0; i < state.internal.subscribers.length; i++) state.internal.subscribers[i].ref.current(state, delta, frame); // Render content
 
 
   if (!state.internal.priority && state.gl.render) state.gl.render(state.scene, state.camera); // Decrease frame count
@@ -1580,9 +1527,9 @@ function createLoop(roots) {
     }
   }
 
-  function advance(timestamp, runGlobalEffects = true, state) {
+  function advance(timestamp, runGlobalEffects = true, state, frame) {
     if (runGlobalEffects) run(globalEffects, timestamp);
-    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state);
+    if (!state) roots.forEach(root => render$1(timestamp, root.store.getState()));else render$1(timestamp, state, frame);
     if (runGlobalEffects) run(globalAfterEffects, timestamp);
   }
 
@@ -1593,6 +1540,60 @@ function createLoop(roots) {
   };
 }
 
+function useStore() {
+  const store = React__namespace.useContext(context);
+  if (!store) throw `R3F hooks can only be used within the Canvas component!`;
+  return store;
+}
+function useThree(selector = state => state, equalityFn) {
+  return useStore()(selector, equalityFn);
+}
+function useFrame(callback, renderPriority = 0) {
+  const subscribe = useStore().getState().internal.subscribe; // Update ref
+
+  const ref = React__namespace.useRef(callback);
+  React__namespace.useLayoutEffect(() => void (ref.current = callback), [callback]); // Subscribe on mount, unsubscribe on unmount
+
+  React__namespace.useLayoutEffect(() => subscribe(ref, renderPriority), [renderPriority, subscribe]);
+  return null;
+}
+function useGraph(object) {
+  return React__namespace.useMemo(() => buildGraph(object), [object]);
+}
+
+function loadingFn(extensions, onProgress) {
+  return function (Proto, ...input) {
+    // Construct new loader and run extensions
+    const loader = new Proto();
+    if (extensions) extensions(loader); // Go through the urls and load them
+
+    return Promise.all(input.map(input => new Promise((res, reject) => loader.load(input, data => {
+      if (data.scene) Object.assign(data, buildGraph(data.scene));
+      res(data);
+    }, onProgress, error => reject(`Could not load ${input}: ${error.message}`)))));
+  };
+}
+
+function useLoader(Proto, input, extensions, onProgress) {
+  // Use suspense to load async assets
+  const keys = Array.isArray(input) ? input : [input];
+  const results = suspendReact.suspend(loadingFn(extensions, onProgress), [Proto, ...keys], {
+    equal: is.equ
+  }); // Return the object/s
+
+  return Array.isArray(input) ? results : results[0];
+}
+
+useLoader.preload = function (Proto, input, extensions) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.preload(loadingFn(extensions), [Proto, ...keys]);
+};
+
+useLoader.clear = function (Proto, input) {
+  const keys = Array.isArray(input) ? input : [input];
+  return suspendReact.clear([Proto, ...keys]);
+};
+
 const roots = new Map();
 const {
   invalidate,
@@ -1782,7 +1783,6 @@ exports.addEffect = addEffect;
 exports.addTail = addTail;
 exports.advance = advance;
 exports.applyProps = applyProps;
-exports.buildGraph = buildGraph;
 exports.context = context;
 exports.createEvents = createEvents;
 exports.createPortal = createPortal;
@@ -1790,7 +1790,6 @@ exports.createRoot = createRoot;
 exports.dispose = dispose;
 exports.extend = extend;
 exports.invalidate = invalidate;
-exports.is = is;
 exports.omit = omit;
 exports.pick = pick;
 exports.reconciler = reconciler;