add RAF/CAF

Author: zendive

jest/tests/wrappers.test.ts

@@ -1,6 +1,10 @@
 import { describe, expect, test, beforeEach, afterEach } from '@jest/globals';
 import { Wrapper } from '../../src/api/wrappers.ts';
 import { TAG_EXCEPTION, TAG_UNDEFINED } from '../../src/api/clone.ts';
+import {
+  DEFAULT_SETTINGS,
+  panelsArrayToVisibilityMap,
+} from '../../src/api/settings.ts';
 
 describe('wrappers', () => {
   let wrapper: Wrapper;
@@ -12,23 +16,19 @@ describe('wrappers', () => {
 
   afterEach(() => {
     wrapper.unwrapApis();
-    wrapper.cleanHistory();
   });
 
-  test('onlineTimers emptied after setTimeout expires', () => {
-    return new Promise<void>((resolve) => {
-      const DELAY = 5;
-      const handler = setTimeout(() => {}, DELAY);
+  test('onlineTimers emptied after setTimeout expires', async () => {
+    const DELAY = 5;
+    const handler = setTimeout(() => {}, DELAY);
+
+    // typecasting handler to number since here its having NodeJS.Timeout type
+    expect(wrapper.onlineTimers.size).toBe(1);
+    expect(wrapper.onlineTimers.has(Number(handler))).toBe(true);
 
-      // typecasting handler to number since here its having NodeJS.Timeout type
-      expect(wrapper.onlineTimers.size).toBe(1);
-      expect(wrapper.onlineTimers.has(Number(handler))).toBe(true);
+    await new Promise((resolve) => setTimeout(resolve, 2 * DELAY));
 
-      setTimeout(() => {
-        expect(wrapper.onlineTimers.size).toBe(0);
-        resolve();
-      }, 2 * DELAY);
-    });
+    expect(wrapper.onlineTimers.size).toBe(0);
   });
 
   test('setTimeoutHistory & clearTimeoutHistory - recorded', () => {
@@ -47,7 +47,7 @@ describe('wrappers', () => {
   test('setTimeoutHistory - valid delay', () => {
     const DELAY = 123;
     const handler = setTimeout(() => {}, DELAY);
-    const rec = [...wrapper.setTimeoutHistory.values()][0];
+    const rec = Array.from(wrapper.setTimeoutHistory.values())[0];
 
     expect(rec.individualInvocations).toBe(1);
     expect(rec.handlerDelay).toBe(DELAY);
@@ -61,7 +61,8 @@ describe('wrappers', () => {
 
   test('setTimeoutHistory - invalid delay', () => {
     setTimeout(() => {}, -1);
-    const rec = [...wrapper.setTimeoutHistory.values()][0];
+
+    const rec = Array.from(wrapper.setTimeoutHistory.values())[0];
 
     expect(rec.individualInvocations).toBe(1);
     expect(rec.handlerDelay).toBe(TAG_EXCEPTION('-1'));
@@ -72,13 +73,16 @@ describe('wrappers', () => {
   test('clearTimeoutHistory - valid handler', () => {
     const handler = setTimeout(() => {}, 1e3);
     clearTimeout(handler);
-    const rec = [...wrapper.clearTimeoutHistory.values()][0];
+
+    const rec = Array.from(wrapper.clearTimeoutHistory.values())[0];
+
     expect(rec.handlerDelay).toBe(1e3);
   });
 
   test('clearTimeoutHistory - non existent handler', () => {
-    clearTimeout(1000);
-    const rec = [...wrapper.clearTimeoutHistory.values()][0];
+    clearTimeout(Number.MAX_SAFE_INTEGER);
+
+    const rec = Array.from(wrapper.clearTimeoutHistory.values())[0];
 
     expect(rec.handlerDelay).toBe('N/A');
     expect(rec.hasError).toBe(false);
@@ -87,9 +91,10 @@ describe('wrappers', () => {
   test('clearTimeoutHistory - invalid handler', () => {
     clearTimeout(0);
 
-    const rec = [...wrapper.clearTimeoutHistory.values()][0];
+    const rec = Array.from(wrapper.clearTimeoutHistory.values())[0];
 
     expect(rec.handlerDelay).toBe('N/A');
+    expect(rec.recentHandler).toBe(TAG_EXCEPTION(0));
     expect(rec.hasError).toBe(true);
   });
 
@@ -109,7 +114,7 @@ describe('wrappers', () => {
   test('setIntervalHistory - valid delay', () => {
     const DELAY = 123;
     const handler = setInterval(() => {}, DELAY);
-    const rec = [...wrapper.setIntervalHistory.values()][0];
+    const rec = Array.from(wrapper.setIntervalHistory.values())[0];
 
     expect(rec.individualInvocations).toBe(1);
     expect(rec.handlerDelay).toBe(DELAY);
@@ -123,7 +128,7 @@ describe('wrappers', () => {
 
   test('setIntervalHistory - invalid delay', () => {
     const handler = setInterval(() => {}, -1);
-    const rec = [...wrapper.setIntervalHistory.values()][0];
+    const rec = Array.from(wrapper.setIntervalHistory.values())[0];
 
     expect(rec.individualInvocations).toBe(1);
     expect(rec.handlerDelay).toBe(TAG_EXCEPTION('-1'));
@@ -136,23 +141,26 @@ describe('wrappers', () => {
   test('clearIntervalHistory - valid handler', () => {
     const handler = setInterval(() => {}, 1e3);
     clearInterval(handler);
-    const rec = [...wrapper.clearIntervalHistory.values()][0];
+
+    const rec = Array.from(wrapper.clearIntervalHistory.values())[0];
 
     expect(rec.handlerDelay).toBe(1e3);
   });
 
   test('clearIntervalHistory - non existent handler', () => {
     clearInterval(1000);
 
-    const rec = [...wrapper.clearIntervalHistory.values()][0];
+    const rec = Array.from(wrapper.clearIntervalHistory.values())[0];
+
     expect(rec.handlerDelay).toBe('N/A');
     expect(rec.hasError).toBe(false);
   });
 
   test('clearIntervalHistory - invalid handler', () => {
     clearInterval(0);
 
-    const rec = [...wrapper.clearIntervalHistory.values()][0];
+    const rec = Array.from(wrapper.clearIntervalHistory.values())[0];
+
     expect(rec.handlerDelay).toBe('N/A');
     expect(rec.hasError).toBe(true);
   });
@@ -167,7 +175,8 @@ describe('wrappers', () => {
     }
     expect(wrapper.evalHistory.size).toBe(1);
 
-    const rec = [...wrapper.evalHistory.values()][0];
+    const rec = Array.from(wrapper.evalHistory.values())[0];
+
     expect(rec.individualInvocations).toBe(NUMBER_OF_INVOCATIONS);
     expect(rec.usesLocalScope).toBe(false);
     expect(rec.code).toBe(CODE);
@@ -180,10 +189,59 @@ describe('wrappers', () => {
     const local_variable = 0;
     window.eval('(local_variable++)');
 
-    const rec = [...wrapper.evalHistory.values()][0];
+    const rec = Array.from(wrapper.evalHistory.values())[0];
+
     expect(rec.individualInvocations).toBe(1);
     expect(local_variable).toBe(0);
     expect(rec.usesLocalScope).toBe(true);
     expect(rec.returnedValue).toBe(TAG_UNDEFINED);
   });
+
+  test('rafHistory - recorded', async () => {
+    let typeOfArgument = '';
+    const handler = await new Promise((resolve) => {
+      const handler = requestAnimationFrame((time) => {
+        typeOfArgument = typeof time;
+        resolve(handler);
+      });
+    });
+    const rec = Array.from(wrapper.rafHistory.values())[0];
+
+    expect(typeOfArgument).toBe('number');
+    expect(wrapper.rafHistory.size).toBe(1);
+    expect(rec.recentHandler).toBe(handler);
+    expect(rec.individualInvocations).toBe(1);
+    expect(rec.trace.length).toBeGreaterThan(1);
+    expect(rec.traceId.length).toBeGreaterThan(1);
+    expect(wrapper.callCounter.requestAnimationFrame).toBe(1);
+  });
+
+  test('cafHistory - recorded', async () => {
+    const unchanged = 0,
+      changed = 1;
+    let changeable = unchanged;
+    const handler = requestAnimationFrame(() => {
+      changeable = changed;
+    });
+    cancelAnimationFrame(handler);
+
+    const rec = Array.from(wrapper.cafHistory.values())[0];
+
+    expect(changeable).toBe(unchanged);
+    expect(wrapper.rafHistory.size).toBe(1);
+    expect(wrapper.cafHistory.size).toBe(1);
+    expect(rec.recentHandler).toBe(handler);
+    expect(rec.individualInvocations).toBe(1);
+    expect(rec.trace.length).toBeGreaterThan(1);
+    expect(rec.traceId.length).toBeGreaterThan(1);
+    expect(wrapper.callCounter.cancelAnimationFrame).toBe(1);
+  });
+
+  test('cafHistory - invalid handler', () => {
+    cancelAnimationFrame(0);
+
+    const rec = Array.from(wrapper.cafHistory?.values())[0];
+
+    expect(rec.recentHandler).toBe(TAG_EXCEPTION(0));
+  });
 });

src/api-monitor-cs-main.ts

@@ -11,7 +11,7 @@ import {
   doMediaCommand,
   type TMediaTelemetry,
 } from '@/api/mediaMonitor.ts';
-import { Wrapper, ETimeType, type TWrapperMetrics } from '@/api/wrappers.ts';
+import { Wrapper, ETimerType, type TWrapperMetrics } from '@/api/wrappers.ts';
 import {
   DEFAULT_SETTINGS,
   panelsArrayToVisibilityMap,
@@ -26,6 +26,8 @@ export interface TMetrics {
     setInterval: number;
     clearInterval: number;
     eval: number;
+    requestAnimationFrame: number;
+    cancelAnimationFrame: number;
   };
   tickTook: string;
 }
@@ -99,7 +101,7 @@ windowListen((o) => {
     wrapper.cleanHistory();
     tick.trigger();
   } else if (o.msg === 'clear-timer-handler') {
-    if (o.type === ETimeType.TIMEOUT) {
+    if (o.type === ETimerType.TIMEOUT) {
       window.clearTimeout(o.handler);
     } else {
       window.clearInterval(o.handler);

src/api/clone.ts

@@ -1,5 +1,5 @@
 const TAG_EXCEPTION_FALLBACK = '⁉️ ⟪exception⟫';
-export const TAG_EXCEPTION = (str: string) => `⁉️ ⟪${str}⟫`;
+export const TAG_EXCEPTION = (x: unknown) => `⁉️ ⟪${x}⟫`;
 const TAG_FUNCTION = (name: string) => `ƒ${name ? ` ${name}` : ''}⟪function⟫`;
 const TAG_NUMERIC = (value: bigint | number) =>
   typeof value === 'bigint' ? `BigInt⟪${value}⟫` : `Number⟪${value}⟫`;

src/api/communication.ts

@@ -13,7 +13,7 @@
 import { APPLICATION_NAME } from '@/api/env.ts';
 import { ERRORS_IGNORED } from '@/api/const.ts';
 import type { TMetrics } from '@/api-monitor-cs-main.ts';
-import type { ETimeType } from '@/api/wrappers.ts';
+import type { ETimerType } from '@/api/wrappers.ts';
 import type { TSettings } from '@/api/settings.ts';
 
 export function portPost(payload: TMsgOptions) {
@@ -104,7 +104,7 @@ export interface TMsgResetHistory {
 }
 export interface TMsgClearHandler {
   msg: 'clear-timer-handler';
-  type: ETimeType;
+  type: ETimerType;
   handler: number;
 }
 export interface TMsgLoaded {

src/api/comparator.ts

@@ -0,0 +1,52 @@
+import type { TOnlineTimerMetrics } from '@/api/wrappers.ts';
+import { ESortOrder } from '@/api/settings.ts';
+
+export function compareByFieldOrder<T, Key extends keyof T>(
+  field: Key,
+  order: ESortOrder
+) {
+  return function (first: T, second: T) {
+    const a = first[field];
+    const b = second[field];
+
+    if (a === undefined) {
+      return ESortOrder.DESCENDING ? -1 : 1;
+    } else if (b === undefined) {
+      return ESortOrder.DESCENDING ? 1 : -1;
+    }
+
+    if (
+      (typeof a === 'number' && typeof b === 'number') ||
+      (typeof a === 'string' && typeof b === 'string')
+    ) {
+      return order === ESortOrder.DESCENDING
+        ? b > a
+          ? 1
+          : b < a
+            ? -1
+            : 0
+        : a > b
+          ? 1
+          : a < b
+            ? -1
+            : 0;
+    } else {
+      return typeof (ESortOrder.DESCENDING ? b : a) === 'number' ? -1 : 1;
+    }
+  };
+}
+
+export function compareByDelayHandlerDescending<T extends TOnlineTimerMetrics>(
+  a: T,
+  b: T
+) {
+  const aDelay = a.delay ?? 0;
+  const bDelay = b.delay ?? 0;
+  return bDelay > aDelay
+    ? 1
+    : bDelay < aDelay
+      ? -1
+      : b.handler > a.handler
+        ? 1
+        : -1;
+}

src/api/const.ts

@@ -11,6 +11,8 @@ export const setInterval = window.setInterval.bind(window);
 export const clearInterval = window.clearInterval.bind(window);
 // https://rollupjs.org/troubleshooting/#avoiding-eval
 export const lessEval = window.eval.bind(window);
+export const requestAnimationFrame = window.requestAnimationFrame.bind(window);
+export const cancelAnimationFrame = window.cancelAnimationFrame.bind(window);
 export const TAG_INVALID_CALLSTACK_LINK = '⟪N/A⟫';
 
 export const MEDIA_ELEMENT_EVENTS = [

src/api/settings.ts

@@ -7,7 +7,9 @@ type TPanelKey =
   | 'setTimeoutHistory'
   | 'clearTimeoutHistory'
   | 'setIntervalHistory'
-  | 'clearIntervalHistory';
+  | 'clearIntervalHistory'
+  | 'requestAnimationFrame'
+  | 'cancelAnimationFrame';
 
 export enum ETimerHistoryField {
   individualInvocations = 'individualInvocations',
@@ -46,6 +48,8 @@ const DEFAULT_PANELS: TSettingsPanel[] = [
     label: 'clearInterval History',
     visible: true,
   },
+  { key: 'requestAnimationFrame', label: 'RAF', visible: true },
+  { key: 'cancelAnimationFrame', label: 'CAF', visible: true },
 ];
 
 export const DEFAULT_SORT = {

src/api/time.ts

@@ -1,4 +1,9 @@
-import { setTimeout, clearTimeout } from '@/api/const.ts';
+import {
+  setTimeout,
+  clearTimeout,
+  requestAnimationFrame,
+  cancelAnimationFrame,
+} from '@/api/const.ts';
 
 /**
  * Measure time between start/stop calls