feat: Added useRafFn function

Author: microcipcip

README.md

@@ -37,6 +37,7 @@ Please check the [documentation](https://microcipcip.github.io/vue-use-kit/) to
   - [`useMouse`](./src/components/useMouse/stories/useMouse.md) — tracks the mouse position. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouse--demo)
   - [`useMouseElement`](./src/components/useMouseElement/stories/useMouseElement.md) — tracks the mouse position relative to given element. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/sensors-usemouseelement--demo)
 - Animations
+  - [`useRafFn`](./src/components/useRafFn/stories/useRafFn.md) — calls function with requestAnimationFrame. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-useraffn--demo)
   - [`useTimeout`](./src/components/useTimeout/stories/useTimeout.md) — returns `isReady` true when timer is completed. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeout--demo)
   - [`useTimeoutFn`](./src/components/useTimeoutFn/stories/useTimeoutFn.md) — calls function when timer is completed. [![Demo](https://img.shields.io/badge/demo-🚀-yellow.svg)](https://microcipcip.github.io/vue-use-kit/?path=/story/animations-usetimeoutfn--demo)
 - UI

src/components/useRafFn/index.ts

@@ -0,0 +1 @@
+export * from './useRafFn'

src/components/useRafFn/stories/UseRafFnDemo.vue

@@ -0,0 +1,63 @@
+<template>
+  <table class="table is-fullwidth">
+    <thead>
+      <tr>
+        <th>Prop</th>
+        <th>Description</th>
+        <th>Value</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>callbackCounter</td>
+        <td>Raf callback counter</td>
+        <td>
+          <span>{{ callbackCounter }}</span>
+        </td>
+      </tr>
+      <tr>
+        <td>animDuration</td>
+        <td>Raf callback counter</td>
+        <td>
+          <span>{{ animDuration }}s</span>
+        </td>
+      </tr>
+      <tr>
+        <td colspan="2">
+          <button class="button is-primary" @click="start" v-if="!isRunning">
+            Resume animation
+          </button>
+          <button class="button is-danger" @click="stop" v-else>
+            Stop animation
+          </button>
+          <br />
+          <br />
+          <br />
+          <input type="number" v-model="fpsRef" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script lang="ts">
+import Vue from 'vue'
+import { ref } from '../../../api'
+import { useRafFn } from '../../../vue-use-kit'
+
+export default Vue.extend({
+  name: 'UseRafFnDemo',
+  setup() {
+    const animDuration = ref(0)
+    const callbackCounter = ref(0)
+    const fpsRef = ref(4)
+    const animHandler = (t: number) => {
+      callbackCounter.value = callbackCounter.value + 1
+      animDuration.value = Math.ceil(t)
+    }
+
+    const { isRunning, start, stop } = useRafFn(animHandler, fpsRef, false)
+    return { isRunning, start, stop, callbackCounter, animDuration, fpsRef }
+  }
+})
+</script>

src/components/useRafFn/stories/useRafFn.md

@@ -0,0 +1,23 @@
+# useRafFn
+
+Vue function that...
+
+## Reference
+
+```typescript
+// useRafFn()
+```
+
+### Parameters
+
+- `value: string` lorem ipsa
+
+### Returns
+
+- `value: string` lorem ipsa
+
+## Usage
+
+```html
+<template></template>
+```

src/components/useRafFn/stories/useRafFn.story.ts

@@ -0,0 +1,22 @@
+import { storiesOf } from '@storybook/vue'
+import StoryTitle from '../../../helpers/StoryTitle.vue'
+import UseRafFnDemo from './UseRafFnDemo.vue'
+
+const storiesPath = __dirname
+const notes = require('./useRafFn.md').default
+
+const basicDemo = () => ({
+  components: { StoryTitle, demo: UseRafFnDemo },
+  template: `
+    <div class="container">
+      <story-title stories-path="${storiesPath}" file-name="UseRafFnDemo.vue">
+        <template v-slot:title></template>
+        <template v-slot:intro></template>
+      </story-title>
+      <demo />
+    </div>`
+})
+
+storiesOf('animations|useRafFn', module)
+  .addParameters({ notes })
+  .add('Demo', basicDemo)

src/components/useRafFn/useRafFn.spec.ts

@@ -0,0 +1,5 @@
+describe('useRafFn', () => {
+  it('should do something', () => {
+    // Add test here
+  })
+})

src/components/useRafFn/useRafFn.ts

@@ -0,0 +1,70 @@
+import { ref, isRef, watch, onMounted, onUnmounted, Ref } from '../../api'
+
+type TFps = number | Ref<number>
+
+const getFps = (fps: TFps) => (isRef(fps) ? fps.value : fps)
+const calcFpsInterval = (fps: number) => 1000 / fps
+
+export function useRafFn(
+  callback: Function,
+  fps: TFps = 60,
+  runOnMount = true
+) {
+  const isRunningRef = ref(false)
+  const fpsIntervalRef = ref(calcFpsInterval(getFps(fps)))
+  let startTime = 0
+  let timeNow = 0
+  let isPaused = false
+  let prevTime = 0
+  let timeLast = 0
+  function loop(timeStamp: number) {
+    if (!startTime) startTime = timeStamp
+    if (!isRunningRef.value) return
+
+    if (!isPaused) {
+      timeNow = timeStamp - startTime - prevTime
+    } else {
+      prevTime = timeStamp - startTime - timeNow
+      timeNow = timeStamp - startTime - prevTime
+      isPaused = false
+    }
+
+    // Run callback only on the given fps
+    if (Math.ceil(timeNow - timeLast) > fpsIntervalRef.value) {
+      callback(timeNow)
+      timeLast = timeNow
+    }
+
+    requestAnimationFrame(loop)
+  }
+
+  const start = () => {
+    isRunningRef.value = true
+    requestAnimationFrame(loop)
+  }
+
+  const stop = () => {
+    isRunningRef.value = false
+    isPaused = true
+  }
+
+  // Watch fps value since it could potentially be a ref and we may want
+  // to change the Raf speed from user's input
+  const updateFpsInterval = () => {
+    // If fps is not a ref there is no point in updating it
+    if (!isRef(fps)) return
+    watch(fps, () => {
+      fpsIntervalRef.value = calcFpsInterval(getFps(fps))
+    })
+  }
+  updateFpsInterval()
+
+  onMounted(() => runOnMount && start())
+  onUnmounted(stop)
+
+  return {
+    isRunning: isRunningRef,
+    start,
+    stop
+  }
+}

src/components/useTimeoutFn/useTimeoutFn.ts

@@ -25,9 +25,7 @@ export function useTimeoutFn(callback: Function, ms = 0, runOnMount = true) {
     }, ms)
   }
 
-  onMounted(() => {
-    if (runOnMount) setTimer()
-  })
+  onMounted(() => runOnMount && setTimer())
   onUnmounted(cancelTimer)
 
   return { isReady, isIdle, cancelTimer, resetTimer: setTimer }

src/vue-use-kit.ts

@@ -4,5 +4,6 @@ export * from './components/useMedia'
 export * from './components/useMouse'
 export * from './components/useMouseElement'
 export * from './components/useHover'
+export * from './components/useRafFn'
 export * from './components/useTimeoutFn'
 export * from './components/useTimeout'