refactor/test: convert setRafTimeout to ts, add tests

.eslintrc

@@ -1,12 +1,25 @@
 {
-  "extends": ["eslint-config-airbnb", "plugin:prettier/recommended", "prettier"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "eslint-config-airbnb",
+    "plugin:prettier/recommended",
+    "prettier"
+  ],
   "env": {
     "browser": true,
     "node": true,
     "jest": true
   },
   "parser": "@typescript-eslint/parser",
   "plugins": ["react", "@typescript-eslint"],
+  "settings": {
+    "import/resolver": {
+      "node": {
+        "extensions": [".js", ".jsx", ".ts", ".tsx"]
+      }
+    }
+  },
   "rules": {
     "no-restricted-globals": [1, "isFinite"],
     "valid-jsdoc": [
@@ -16,6 +29,16 @@
         "requireParamType": false
       }
     ],
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "js": "never",
+        "jsx": "never",
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/react-in-jsx-scope": 2,
@@ -25,6 +48,7 @@
     "no-mixed-operators": "off",
     "no-plusplus": "off",
     "no-continue": "off",
+    "no-unused-vars": "off",
     "react/require-default-props": "off",
     "react/jsx-filename-extension": "off",
     "react/forbid-prop-types": "off",

src/setRafTimeout.ts

@@ -0,0 +1,27 @@
+type CallbackType = (now: number) => void;
+
+/**
+ * Calls requestAnimationFrame with a timeout delay
+ * @param {Function} callback cb function
+ * @param {number} timeout timeout in ms
+ * @returns {void} void
+ */
+export default function setRafTimeout(callback: CallbackType, timeout: number = 0): void {
+  let currTime = -1;
+
+  const shouldUpdate = (now: number) => {
+    if (currTime < 0) {
+      currTime = now;
+    }
+
+    if (now - currTime > timeout) {
+      callback(now);
+      currTime = -1;
+    } else {
+      // requestAnimationFrame is availble across most browsers
+      requestAnimationFrame(shouldUpdate);
+    }
+  };
+
+  requestAnimationFrame(shouldUpdate);
+}

test/setRafTimeout.spec.ts

@@ -0,0 +1,22 @@
+import setRafTimeout from '../src/setRafTimeout';
+
+describe('setRafTimeout', () => {
+  it('should call setRafTimeout', () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(window, 'requestAnimationFrame');
+    const cb = vi.fn();
+    setRafTimeout(cb);
+    vi.runAllTimers();
+    expect(cb).toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
+  });
+
+  it('should not call requestAnimationFrame with a 1 second delay', () => {
+    vi.useFakeTimers();
+    const spy = vi.spyOn(window, 'requestAnimationFrame');
+    const cb = vi.fn();
+    setRafTimeout(cb, 1000);
+    expect(cb).not.toHaveBeenCalled();
+    expect(spy).toHaveBeenCalled();
+  });
+});

tsconfig.json

@@ -15,6 +15,7 @@
     "sourceMap": true,
     "target": "es6",
     "types": ["vitest/globals"],
+    "lib": ["Dom"],
     "allowJs": true
   },
   "include": ["./src/**/*"]