feat: cleanup FrameStepper, don't export useRaf

packages/react-three-jolt/src/components/FrameStepper.tsx

@@ -2,11 +2,36 @@ import { useFrame } from '@react-three/fiber';
 import React, { memo, useEffect, useRef } from 'react';
 import { PhysicsProps } from './Physics';
 
-interface FrameStepperProps {
+const useRaf = (callback: (dt: number) => void) => {
+ const callbackRef = useRef(callback);
+ const animationFrameRequest = useRef(0);
+ const lastFrameTime = useRef(0);
+
+ useEffect(() => {
+ callbackRef.current = callback;
+ }, [callback]);
+
+ useEffect(() => {
+ const loop = () => {
+ const now = performance.now();
+ const delta = now - lastFrameTime.current;
+
+ animationFrameRequest.current = requestAnimationFrame(loop);
+ callbackRef.current(delta / 1000);
+ lastFrameTime.current = now;
+ };
+
+ animationFrameRequest.current = requestAnimationFrame(loop);
+
+ return () => cancelAnimationFrame(animationFrameRequest.current);
+ }, []);
+};
+
+type FrameStepperProps = {
  type?: PhysicsProps['updateLoop'];
  onStep: (dt: number) => void;
  updatePriority?: number;
-}
+};
 
 const UseFrameStepper = ({ onStep, updatePriority }: FrameStepperProps) => {
  useFrame((_, dt) => {
@@ -23,39 +48,11 @@ const RafStepper = ({ onStep }: FrameStepperProps) => {
 
  return null;
 };
-//@ts-ignore fix missing type value on props
-const FrameStepper = ({ onStep, type, updatePriority }: FrameStepperProps) => {
+
+export const FrameStepper = memo(({ onStep, type, updatePriority }: FrameStepperProps) => {
  return type === 'independent' ? (
  <RafStepper onStep={onStep} />
  ) : (
  <UseFrameStepper onStep={onStep} updatePriority={updatePriority} />
  );
-};
-
-export default memo(FrameStepper);
-
-// Moved this hook here because it's only used in this file
-export const useRaf = (callback: (dt: number) => void) => {
- const cb = useRef(callback);
- const raf = useRef(0);
- const lastFrame = useRef(0);
-
- useEffect(() => {
- cb.current = callback;
- }, [callback]);
-
- useEffect(() => {
- const loop = () => {
- const now = performance.now();
- const delta = now - lastFrame.current;
-
- raf.current = requestAnimationFrame(loop);
- cb.current(delta / 1000);
- lastFrame.current = now;
- };
-
- raf.current = requestAnimationFrame(loop);
-
- return () => cancelAnimationFrame(raf.current);
- }, []);
-};
+});

packages/react-three-jolt/src/components/Physics.tsx

@@ -21,7 +21,7 @@ import React from 'react';
 
 import { useMount, useUnmount } from '../hooks';
 // library imports
-import FrameStepper from './FrameStepper';
+import { FrameStepper } from './FrameStepper';
 
 // physics system import
 import { PhysicsSystem } from '../systems/physics-system';
@@ -47,17 +47,18 @@ export interface SteppingState {
 }
 
 // Core component
-export interface PhysicsProps {
+export type PhysicsProps = {
  defaultBodySettings?: any;
  children: ReactNode;
  gravity?: number | THREE.Vector3;
  paused?: boolean;
  interpolate?: boolean;
  updatePriority?: any;
- updateLoop?: string;
+ updateLoop?: 'follow' | 'independent';
  debug?: boolean;
  module?: any;
-}
+};
+
 export const Physics: FC<PhysicsProps> = (props) => {
  const {
  defaultBodySettings,