added requestReversibleAnimationFrame

Author: janpaepke

README.md

@@ -12,9 +12,10 @@
 
 This package includes reversible implementations of:
 
--   [addEventListener](#addreversibleeventlistener)
 -   [setTimeout](#setreversibletimeout)
 -   [setInterval](#setreversibleinterval)
+-   [addEventListener](#addreversibleeventlistener)
+-   [requestAnimationFrame](#requestreversibleanimationframe)
 
 <hr />
 
@@ -64,6 +65,7 @@ Let's find out [how](#documentation) or [why](#motivation).
       - [`addReversibleEventListener`](#addreversibleeventlistener)
       - [`setReversibleTimeout`](#setreversibletimeout)
       - [`setReversibleInterval`](#setreversibleinterval)
+      - [`requestReversibleAnimationFrame`](#requestreversibleanimationframe)
 - [Contributing](#contributing)
 - [Support](#support)
 <!-- codegen:end -->
@@ -248,13 +250,22 @@ function setReversibleInterval(
 ): () => void;
 ```
 
+#### `requestReversibleAnimationFrame`
+
+Reversible version of `window.requestReversibleAnimationFrame`. [→ docs for original](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
+
+```ts
+function requestReversibleAnimationFrame(
+	callback: (time: DOMHighResTimeStamp): void;, // function to be executed on next repaint
+): () => void;
+```
+
 ## Contributing
 
 Improvements or additions are most welcome!
 
 Current list of planned support:
 
--   [requestAnimationFrame](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame)
 -   [requestIdleCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback)
 -   [setImmediate](https://developer.mozilla.org/en-US/docs/Web/API/Window/setImmediate)
 

src/addReversibleEventListener.ts

@@ -73,5 +73,5 @@ export default addReversibleEventListener;
 // TODO: inference of generics function properties seems to break
 // below example cannot resolve TouchEvent for `event` param in callback
 // const test = <T extends HTMLElement>(x: T) => {
-// 	registerEvent(x, 'touchcancel', event => {});
+// 	addReversibleEventListener(x, 'touchcancel', event => {});
 // };

src/index.ts

@@ -1,3 +1,4 @@
 export { default as setReversibleTimeout } from './setReversibleTimeout';
 export { default as setReversibleInterval } from './setReversibleInterval';
 export { default as addReversibleEventListener } from './addReversibleEventListener';
+export { default as requestReversibleAnimationFrame } from './requestReversibleAnimationFrame';

src/requestReversibleAnimationFrame.ts

@@ -0,0 +1,11 @@
+/**
+ * Registers an action to be performed on the next repaint and returns a function to cancel it.
+ * @param {*} cb callback
+ * @returns callback to cancel action
+ */
+function requestReversibleAnimationFrame(...args: Parameters<typeof requestAnimationFrame>): () => void {
+	const ref = window.requestAnimationFrame(...args);
+	return window.cancelAnimationFrame.bind(window, ref);
+}
+
+export default requestReversibleAnimationFrame;

test/requestReversibleAnimationFrame.test-d.ts

@@ -0,0 +1,11 @@
+import { expectType } from 'tsd';
+
+/**
+ * type tests
+ */
+import { requestReversibleAnimationFrame } from '..';
+
+expectType<() => void>(requestReversibleAnimationFrame(() => void null));
+
+const inferParam = <T>(fun: (cb: T) => () => void) => void fun as unknown as T;
+expectType<(time: DOMHighResTimeStamp) => void>(inferParam(requestReversibleAnimationFrame));

test/requestReversibleAnimationFrame.test.ts

@@ -0,0 +1,43 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import { requestReversibleAnimationFrame } from '..';
+
+beforeAll(() => {
+	jest.useFakeTimers();
+});
+afterAll(() => {
+	jest.useRealTimers();
+});
+afterEach(() => {
+	jest.resetAllMocks();
+});
+
+describe('requestReversibleAnimationFrame', () => {
+	test('triggers', () => {
+		const callback = jest.fn();
+		jest.spyOn(window, 'requestAnimationFrame');
+		requestReversibleAnimationFrame(callback);
+		expect(requestAnimationFrame).toHaveBeenCalledTimes(1);
+		expect(requestAnimationFrame).toHaveBeenLastCalledWith(callback);
+		expect(callback).not.toHaveBeenCalled();
+		jest.runOnlyPendingTimers();
+		expect(callback).toHaveBeenCalled();
+		jest.runOnlyPendingTimers();
+		jest.runOnlyPendingTimers();
+		jest.runOnlyPendingTimers();
+		expect(callback).toHaveBeenCalledTimes(1); // runs only once
+	});
+	test('cancels', () => {
+		const callback = jest.fn();
+		jest.spyOn(window, 'cancelAnimationFrame');
+		const cancel = requestReversibleAnimationFrame(callback);
+		expect(callback).not.toHaveBeenCalled();
+		expect(cancelAnimationFrame).not.toHaveBeenCalled();
+		cancel();
+		expect(cancelAnimationFrame).toHaveBeenCalledTimes(1);
+		jest.runOnlyPendingTimers();
+		expect(callback).not.toHaveBeenCalled();
+	});
+});