From 747501e6800d75c0ca3bc5b7d0d1cae12230b4c9 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Fri, 2 Dec 2022 02:04:17 +0100
Subject: [PATCH 1/2] feat: add `delta` and `timestamp` to `useRafFn`

---
 packages/core/useRafFn/index.ts | 26 +++++++++++++++++++++-----
 1 file changed, 21 insertions(+), 5 deletions(-)

diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
index 748684e347a..e9f16c2ca78 100644
--- a/packages/core/useRafFn/index.ts
+++ b/packages/core/useRafFn/index.ts
@@ -1,9 +1,21 @@
 import { ref } from 'vue-demi'
-import type { Fn, Pausable } from '@vueuse/shared'
+import type { Pausable } from '@vueuse/shared'
 import { tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
+interface RafFnCallbackArguments {
+  /**
+   * Time elapsed between this and the last frame.
+   */
+  delta: number
+
+  /**
+   * Time elapsed since the creation of the web page. See {@link https://developer.mozilla.org/en-US/docs/Web/API/DOMHighResTimeStamp#the_time_origin Time origin}.
+   */
+  timestamp: DOMHighResTimeStamp
+}
+
 export interface UseRafFnOptions extends ConfigurableWindow {
   /**
    * Start the requestAnimationFrame loop immediately on creation
@@ -20,27 +32,31 @@ export interface UseRafFnOptions extends ConfigurableWindow {
  * @param fn
  * @param options
  */
-export function useRafFn(fn: Fn, options: UseRafFnOptions = {}): Pausable {
+export function useRafFn(fn: (args: RafFnCallbackArguments) => void, options: UseRafFnOptions = {}): Pausable {
   const {
     immediate = true,
     window = defaultWindow,
   } = options
 
   const isActive = ref(false)
+  let previousFrameTimestamp = 0
   let rafId: null | number = null
 
-  function loop() {
+  function loop(timestamp: DOMHighResTimeStamp) {
     if (!isActive.value || !window)
       return
 
-    fn()
+    const delta = timestamp - previousFrameTimestamp
+    fn({ delta, timestamp })
+
+    previousFrameTimestamp = timestamp
     rafId = window.requestAnimationFrame(loop)
   }
 
   function resume() {
     if (!isActive.value && window) {
       isActive.value = true
-      loop()
+      rafId = window.requestAnimationFrame(loop)
     }
   }
 

From 3b6517c30b042d00369111b63ef7057cd07a1c53 Mon Sep 17 00:00:00 2001
From: Enzo Innocenzi <enzo@innocenzi.dev>
Date: Fri, 2 Dec 2022 12:19:26 +0100
Subject: [PATCH 2/2] refactor: rename raf function callback arguments
 interface

---
 packages/core/useRafFn/index.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/core/useRafFn/index.ts b/packages/core/useRafFn/index.ts
index e9f16c2ca78..d5526e1c357 100644
--- a/packages/core/useRafFn/index.ts
+++ b/packages/core/useRafFn/index.ts
@@ -4,7 +4,7 @@ import { tryOnScopeDispose } from '@vueuse/shared'
 import type { ConfigurableWindow } from '../_configurable'
 import { defaultWindow } from '../_configurable'
 
-interface RafFnCallbackArguments {
+export interface UseRafFnCallbackArguments {
   /**
    * Time elapsed between this and the last frame.
    */
@@ -32,7 +32,7 @@ export interface UseRafFnOptions extends ConfigurableWindow {
  * @param fn
  * @param options
  */
-export function useRafFn(fn: (args: RafFnCallbackArguments) => void, options: UseRafFnOptions = {}): Pausable {
+export function useRafFn(fn: (args: UseRafFnCallbackArguments) => void, options: UseRafFnOptions = {}): Pausable {
   const {
     immediate = true,
     window = defaultWindow,