@khanacademy/wonder-blocks-timing 2.1.1 → 2.1.2

package/src/hooks/{use-scheduled-timeout.js → use-scheduled-timeout.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {useEffect, useState, useCallback} from "react";
 
 import {
@@ -11,7 +10,7 @@ import {useUpdatingRef} from "./internal/use-updating-ref";
 import {useTimeout} from "./use-timeout";
 
 export function useScheduledTimeout(
-    action: () => mixed,
+    action: () => unknown,
     timeoutMs: number,
     options?: Options,
 ): ITimeout {
@@ -76,5 +75,6 @@ export function useScheduledTimeout(
 
     useTimeout(wrappedAction, timeoutMs, isSet);
 
+    // @ts-expect-error [FEI-5019] - TS2322 - Type 'boolean' is not assignable to type '() => boolean'.
     return {isSet, set, clear};
 }

package/src/hooks/{use-timeout.js → use-timeout.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {useEffect} from "react";
 
 import {useUpdatingRef} from "./internal/use-updating-ref";
@@ -11,7 +10,7 @@ import {useUpdatingRef} from "./internal/use-updating-ref";
  * @param active whether or not the interval is active
  */
 export function useTimeout(
-    action: () => mixed,
+    action: () => unknown,
     timeoutMs: number,
     active: boolean,
 ) {

package/src/{index.js → index.ts}

@@ -1,4 +1,3 @@
-// @flow
 import type {
     IAnimationFrame,
     IInterval,

package/src/util/__tests__/{action-scheduler.test.js → action-scheduler.test.ts}

@@ -1,4 +1,3 @@
-// @flow
 import ActionScheduler from "../action-scheduler";
 import Timeout from "../timeout";
 import Interval from "../interval";
@@ -45,7 +44,7 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 schedulePolicy: SchedulePolicy.Immediately,
-            };
+            } as const;
 
             // Act
             actionScheduler.timeout(action, 42, options);
@@ -64,14 +63,13 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 clearPolicy: ClearPolicy.Resolve,
-            };
+            } as const;
             const testTimeout = actionScheduler.timeout(action, 42, options);
 
             // Act
             actionScheduler.clearAll();
 
             // Assert
-            // $FlowIgnore[method-unbinding]
             expect(testTimeout.clear).toHaveBeenCalledWith(ClearPolicy.Resolve);
         });
 
@@ -110,7 +108,7 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 schedulePolicy: SchedulePolicy.Immediately,
-            };
+            } as const;
 
             // Act
             actionScheduler.interval(action, 42, options);
@@ -129,14 +127,13 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 clearPolicy: ClearPolicy.Resolve,
-            };
+            } as const;
             const testInterval = actionScheduler.interval(action, 42, options);
 
             // Act
             actionScheduler.clearAll();
 
             // Assert
-            // $FlowIgnore[method-unbinding]
             expect(testInterval.clear).toHaveBeenCalledWith(
                 ClearPolicy.Resolve,
             );
@@ -177,7 +174,7 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 schedulePolicy: SchedulePolicy.Immediately,
-            };
+            } as const;
 
             // Act
             actionScheduler.animationFrame(action, options);
@@ -195,14 +192,13 @@ describe("ActionScheduler", () => {
             const action = jest.fn();
             const options = {
                 clearPolicy: ClearPolicy.Resolve,
-            };
+            } as const;
             const testFrame = actionScheduler.animationFrame(action, options);
 
             // Act
             actionScheduler.clearAll();
 
             // Assert
-            // $FlowIgnore[method-unbinding]
             expect(testFrame.clear).toHaveBeenCalledWith(ClearPolicy.Resolve);
         });
 
@@ -235,11 +231,8 @@ describe("ActionScheduler", () => {
             actionScheduler.clearAll();
 
             // Assert
-            // $FlowIgnore[method-unbinding]
             expect(timeout.clear).toHaveBeenCalledTimes(1);
-            // $FlowIgnore[method-unbinding]
             expect(interval.clear).toHaveBeenCalledTimes(1);
-            // $FlowIgnore[method-unbinding]
             expect(animationFrame.clear).toHaveBeenCalledTimes(1);
         });
 
@@ -256,11 +249,8 @@ describe("ActionScheduler", () => {
             actionScheduler.clearAll();
 
             // Assert
-            // $FlowIgnore[method-unbinding]
             expect(timeout.clear).toHaveBeenCalledTimes(1);
-            // $FlowIgnore[method-unbinding]
             expect(interval.clear).toHaveBeenCalledTimes(1);
-            // $FlowIgnore[method-unbinding]
             expect(animationFrame.clear).toHaveBeenCalledTimes(1);
         });
     });

package/src/util/__tests__/{animation-frame.test.js → animation-frame.test.ts}

@@ -1,4 +1,3 @@
-// @flow
 import AnimationFrame from "../animation-frame";
 import {SchedulePolicy, ClearPolicy} from "../policies";
 
@@ -10,10 +9,11 @@ describe("AnimationFrame", () => {
         // it here and map it to timeouts, that way we can use the fake timer
         // API to test our animation frame things.
         jest.spyOn(global, "requestAnimationFrame").mockImplementation(
-            (fn, ...args) => setTimeout(fn, 0),
+            // @ts-expect-error [FEI-5019] - TS2345 - Argument of type '(fn: any, ...args: any) => NodeJS.Timeout' is not assignable to parameter of type '(callback: FrameRequestCallback) => number'.
+            (fn: any, ...args: any) => setTimeout(fn, 0),
         );
         jest.spyOn(global, "cancelAnimationFrame").mockImplementation(
-            (id, ...args) => clearTimeout(id),
+            (id: any, ...args: any) => clearTimeout(id),
         );
     });
 
@@ -36,7 +36,7 @@ describe("AnimationFrame", () => {
             // Arrange
 
             // Act
-            const underTest = () => new AnimationFrame((null: any));
+            const underTest = () => new AnimationFrame(null as any);
 
             // Assert
             expect(underTest).toThrowErrorMatchingInlineSnapshot(
@@ -113,10 +113,11 @@ describe("AnimationFrame", () => {
         it("should invoke requestAnimationFrame to call the given action", () => {
             // Arrange
             const action = jest.fn();
-            const animationFrame = new AnimationFrame((time) => action(time));
+            const animationFrame = new AnimationFrame((time: any) =>
+                action(time),
+            );
             animationFrame.set();
-            // Flow doesn't know we added jest mocks to this
-            // $FlowFixMe[prop-missing]
+            // @ts-expect-error [FEI-5019] - TS2339 - Property 'mock' does not exist on type '(callback: FrameRequestCallback) => number'.
             const scheduledAction = requestAnimationFrame.mock.calls[0][0];
 
             // Act

package/src/util/__tests__/{interval.test.js → interval.test.ts}

@@ -1,4 +1,3 @@
-// @flow
 import Interval from "../interval";
 import {SchedulePolicy, ClearPolicy} from "../policies";
 
@@ -26,7 +25,7 @@ describe("Interval", () => {
             // Arrange
 
             // Act
-            const underTest = () => new Interval((null: any), 1);
+            const underTest = () => new Interval(null as any, 1);
 
             // Assert
             expect(underTest).toThrowErrorMatchingInlineSnapshot(

package/src/util/__tests__/{timeout.test.js → timeout.test.ts}

@@ -1,4 +1,3 @@
-// @flow
 import Timeout from "../timeout";
 import {SchedulePolicy, ClearPolicy} from "../policies";
 
@@ -26,7 +25,7 @@ describe("Timeout", () => {
             // Arrange
 
             // Act
-            const underTest = () => new Timeout((null: any), 0);
+            const underTest = () => new Timeout(null as any, 0);
 
             // Assert
             expect(underTest).toThrowErrorMatchingInlineSnapshot(

package/src/util/{action-scheduler.js → action-scheduler.ts}

@@ -1,4 +1,3 @@
-// @flow
 import Timeout from "./timeout";
 import Interval from "./interval";
 import AnimationFrame from "./animation-frame";
@@ -18,27 +17,33 @@ import type {
  * `IScheduleActions` instance.
  */
 export default class ActionScheduler implements IScheduleActions {
-    _disabled: boolean = false;
+    _disabled = false;
     _registeredActions: Array<() => void> = [];
-    static +NoopAction: ITimeout & IAnimationFrame & IInterval = {
+    static readonly NoopAction: ITimeout & IAnimationFrame & IInterval = {
         set: () => {},
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'boolean' is not assignable to type '(() => boolean) & (() => boolean) & (() => boolean)'.
         get isSet() {
             return false;
         },
         clear: () => {},
     };
 
-    timeout(action: () => mixed, period: number, options?: Options): ITimeout {
+    timeout(
+        action: () => unknown,
+        period: number,
+        options?: Options,
+    ): ITimeout {
         if (this._disabled) {
             return ActionScheduler.NoopAction;
         }
         const timeout = new Timeout(action, period, options?.schedulePolicy);
         this._registeredActions.push(() => timeout.clear(options?.clearPolicy));
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'Timeout' is not assignable to type 'ITimeout'.
         return timeout;
     }
 
     interval(
-        action: () => mixed,
+        action: () => unknown,
         period: number,
         options?: Options,
     ): IInterval {
@@ -49,11 +54,12 @@ export default class ActionScheduler implements IScheduleActions {
         this._registeredActions.push(() =>
             interval.clear(options?.clearPolicy),
         );
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'Interval' is not assignable to type 'IInterval'.
         return interval;
     }
 
     animationFrame(
-        action: (DOMHighResTimeStamp) => void,
+        action: (arg1: DOMHighResTimeStamp) => void,
         options?: Options,
     ): IAnimationFrame {
         if (this._disabled) {
@@ -66,6 +72,7 @@ export default class ActionScheduler implements IScheduleActions {
         this._registeredActions.push(() =>
             animationFrame.clear(options?.clearPolicy),
         );
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'AnimationFrame' is not assignable to type 'IAnimationFrame'.
         return animationFrame;
     }
 

package/src/util/{animation-frame.js → animation-frame.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {
     SchedulePolicy as SchedulePolicies,
     ClearPolicy as ClearPolicies,
@@ -16,8 +15,8 @@ import type {IAnimationFrame, SchedulePolicy, ClearPolicy} from "./types";
  * @implements {IAnimationFrame}
  */
 export default class AnimationFrame implements IAnimationFrame {
-    _animationFrameId: ?AnimationFrameID;
-    _action: (DOMHighResTimeStamp) => mixed;
+    _animationFrameId: number | null | undefined;
+    _action: (arg1: DOMHighResTimeStamp) => unknown;
 
     /**
      * Creates an animation frame request that will invoke the given action.
@@ -31,7 +30,7 @@ export default class AnimationFrame implements IAnimationFrame {
      * @memberof AnimationFrame
      */
     constructor(
-        action: (DOMHighResTimeStamp) => mixed,
+        action: (arg1: DOMHighResTimeStamp) => unknown,
         schedulePolicy: SchedulePolicy = SchedulePolicies.Immediately,
     ) {
         if (typeof action !== "function") {
@@ -52,6 +51,7 @@ export default class AnimationFrame implements IAnimationFrame {
      * false.
      * @memberof AnimationFrame
      */
+    // @ts-expect-error [FEI-5019] - TS2416 - Property 'isSet' in type 'AnimationFrame' is not assignable to the same property in base type 'IAnimationFrame'.
     get isSet(): boolean {
         return this._animationFrameId != null;
     }

package/src/util/{interval.js → interval.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {
     SchedulePolicy as SchedulePolicies,
     ClearPolicy as ClearPolicies,
@@ -16,8 +15,8 @@ import type {IInterval, SchedulePolicy, ClearPolicy} from "./types";
  * @implements {IInterval}
  */
 export default class Interval implements IInterval {
-    _intervalId: ?IntervalID;
-    _action: () => mixed;
+    _intervalId: number | null | undefined;
+    _action: () => unknown;
     _intervalMs: number;
 
     /**
@@ -34,7 +33,7 @@ export default class Interval implements IInterval {
      * @memberof Interval
      */
     constructor(
-        action: () => mixed,
+        action: () => unknown,
         intervalMs: number,
         schedulePolicy: SchedulePolicy = SchedulePolicies.Immediately,
     ) {
@@ -60,6 +59,7 @@ export default class Interval implements IInterval {
      * @returns {boolean} true if the interval is active, otherwise false.
      * @memberof Interval
      */
+    // @ts-expect-error [FEI-5019] - TS2416 - Property 'isSet' in type 'Interval' is not assignable to the same property in base type 'IInterval'.
     get isSet(): boolean {
         return this._intervalId != null;
     }
@@ -76,6 +76,7 @@ export default class Interval implements IInterval {
         if (this.isSet) {
             this.clear(ClearPolicies.Cancel);
         }
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'Timer' is not assignable to type 'number'.
         this._intervalId = setInterval(() => this._action(), this._intervalMs);
     }
 

package/src/util/{policies.js → policies.ts}

@@ -1,10 +1,9 @@
-// @flow
 export const SchedulePolicy = {
     Immediately: "schedule-immediately",
     OnDemand: "schedule-on-demand",
-};
+} as const;
 
 export const ClearPolicy = {
     Resolve: "resolve-on-clear",
     Cancel: "cancel-on-clear",
-};
+} as const;

package/src/util/{timeout.js → timeout.ts}

@@ -1,4 +1,3 @@
-// @flow
 import {
     SchedulePolicy as SchedulePolicies,
     ClearPolicy as ClearPolicies,
@@ -16,8 +15,8 @@ import type {ITimeout, SchedulePolicy, ClearPolicy} from "./types";
  * @implements {ITimeout}
  */
 export default class Timeout implements ITimeout {
-    _timeoutId: ?TimeoutID;
-    _action: () => mixed;
+    _timeoutId: number | null | undefined;
+    _action: () => unknown;
     _timeoutMs: number;
 
     /**
@@ -34,7 +33,7 @@ export default class Timeout implements ITimeout {
      * @memberof Timeout
      */
     constructor(
-        action: () => mixed,
+        action: () => unknown,
         timeoutMs: number,
         schedulePolicy: SchedulePolicy = SchedulePolicies.Immediately,
     ) {
@@ -61,6 +60,7 @@ export default class Timeout implements ITimeout {
      * false.
      * @memberof Timeout
      */
+    // @ts-expect-error [FEI-5019] - TS2416 - Property 'isSet' in type 'Timeout' is not assignable to the same property in base type 'ITimeout'.
     get isSet(): boolean {
         return this._timeoutId != null;
     }
@@ -78,6 +78,7 @@ export default class Timeout implements ITimeout {
         if (this.isSet) {
             this.clear(ClearPolicies.Cancel);
         }
+        // @ts-expect-error [FEI-5019] - TS2322 - Type 'Timeout' is not assignable to type 'number'.
         this._timeoutId = setTimeout(
             () => this.clear(ClearPolicies.Resolve),
             this._timeoutMs,

package/src/util/{types.js → types.ts}

@@ -1,4 +1,3 @@
-// @flow
 export type SchedulePolicy = "schedule-immediately" | "schedule-on-demand";
 
 export type ClearPolicy = "resolve-on-clear" | "cancel-on-clear";
@@ -19,8 +18,7 @@ export interface ITimeout {
      * false.
      * @memberof ITimeout
      */
-    get isSet(): boolean;
-
+    isSet(): boolean;
     /**
      * Set the timeout.
      *
@@ -31,7 +29,6 @@ export interface ITimeout {
      * @memberof ITimeout
      */
     set(): void;
-
     /**
      * Clear the set timeout.
      *
@@ -63,8 +60,7 @@ export interface IInterval {
      * @returns {boolean} true if the interval is active, otherwise false.
      * @memberof IInterval
      */
-    get isSet(): boolean;
-
+    isSet(): boolean;
     /**
      * Set the interval.
      *
@@ -74,7 +70,6 @@ export interface IInterval {
      * @memberof IInterval
      */
     set(): void;
-
     /**
      * Clear the active interval.
      *
@@ -107,8 +102,7 @@ export interface IAnimationFrame {
      * false.
      * @memberof IAnimationFrame
      */
-    get isSet(): boolean;
-
+    isSet(): boolean;
     /**
      * Set the request.
      *
@@ -119,7 +113,6 @@ export interface IAnimationFrame {
      * @memberof IAnimationFrame
      */
     set(): void;
-
     /**
      * Clear the set request.
      *
@@ -136,10 +129,10 @@ export interface IAnimationFrame {
     clear(policy?: ClearPolicy): void;
 }
 
-export type Options = {|
-    schedulePolicy?: SchedulePolicy,
-    clearPolicy?: ClearPolicy,
-|};
+export type Options = {
+    schedulePolicy?: SchedulePolicy;
+    clearPolicy?: ClearPolicy;
+};
 
 /**
  * Provides means to request timeouts, intervals, and animation frames, with
@@ -172,8 +165,7 @@ export interface IScheduleActions {
      * @returns {ITimeout} A interface for manipulating the created timeout.
      * @memberof IScheduleActions
      */
-    timeout(action: () => mixed, period: number, options?: Options): ITimeout;
-
+    timeout(action: () => unknown, period: number, options?: Options): ITimeout;
     /**
      * Request an interval.
      *
@@ -195,8 +187,11 @@ export interface IScheduleActions {
      * @returns {IInterval} An interface for manipulating the created interval.
      * @memberof IScheduleActions
      */
-    interval(action: () => mixed, period: number, options?: Options): IInterval;
-
+    interval(
+        action: () => unknown,
+        period: number,
+        options?: Options,
+    ): IInterval;
     /**
      * Request an animation frame.
      *
@@ -219,7 +214,6 @@ export interface IScheduleActions {
         action: (time: DOMHighResTimeStamp) => void,
         options?: Options,
     ): IAnimationFrame;
-
     /**
      * Clears all timeouts, intervals, and animation frame requests that were
      * made with this scheduler.
@@ -233,23 +227,22 @@ export interface IScheduleActions {
  * A props object type that can be spread into the a componenet wrapped with
  * the `withActionScheduler` higher order component.
  */
-export type WithActionSchedulerProps = {|
+export type WithActionSchedulerProps = {
     /**
      * An instance of the `IScheduleActions` API to use for scheduling
      * intervals, timeouts, and animation frame requests.
      */
-    schedule: IScheduleActions,
-|};
+    schedule: IScheduleActions;
+};
 
-export type WithoutActionScheduler<TProps: {...}> = $Exact<
-    $Rest<TProps, WithActionSchedulerProps>,
+export type WithoutActionScheduler<TProps extends object> = Omit<
+    TProps,
+    "schedule"
 >;
 
 /**
  * Extends the given props with props that the `withActionScheduler` higher
  * order component will inject.
  */
-export type WithActionScheduler<TOwnProps: {...}> = {|
-    ...$Exact<TOwnProps>,
-    ...WithActionSchedulerProps,
-|};
+export type WithActionScheduler<TOwnProps extends object> = TOwnProps &
+    WithActionSchedulerProps;

package/src/util/{types.flowtest.js → types.typestest.tsx}

@@ -1,7 +1,6 @@
-/* eslint-disable no-unused-vars */
-// @flow
+/* eslint-disable @typescript-eslint/no-unused-vars */
 /**
- * This file ensures that our flow types are working right.
+ * This file ensures that our TypeScript types are working right.
  */
 import * as React from "react";
 import withActionScheduler from "../components/with-action-scheduler";
@@ -16,12 +15,13 @@ import type {WithActionSchedulerProps} from "./types";
  * Given a react component with action scheduler props, we receive an
  * abstract component of `OwnProps1`.
  */
-type Props1 = {|
-    test: string,
-    ...WithActionSchedulerProps,
-|};
+type Props1 = {
+    test: string;
+} & WithActionSchedulerProps;
 
-const InnerComponent1 = (props: Props1): React.Node => props.test;
+const InnerComponent1: React.FC<Props1> = (props): React.ReactElement => (
+    <>{props.test}</>
+);
 
 const HOCComponent1 = withActionScheduler(InnerComponent1);
 
@@ -30,12 +30,13 @@ const HOCComponent1 = withActionScheduler(InnerComponent1);
  * The withActionScheduler call is returning a component of type OwnProps2; the
  * variable assigned however is incorrectly specified as Props2.
  */
-type Props2 = {|
-    test: string,
-    ...WithActionSchedulerProps,
-|};
+type Props2 = {
+    test: string;
+} & WithActionSchedulerProps;
 
-const InnerComponent2 = (props: Props2): React.Node => props.test;
+const InnerComponent2: React.FC<Props2> = (props): React.ReactElement => (
+    <>{props.test}</>
+);
 
 /**
  * Cannot assign `withActionScheduler(...)` to `HOCComponent2` because property
@@ -51,12 +52,13 @@ const HOCComponent2 = withActionScheduler(InnerComponent2);
  * The withActionScheduler call is being passed a component that isn't set up
  * to be used with it as it doesn't have all the props necessary.
  */
-type Props3 = {|
-    test: string,
-    ...WithActionSchedulerProps,
-|};
+type Props3 = {
+    test: string;
+} & WithActionSchedulerProps;
 
-const InnerComponent3 = (props: Props3): React.Node => props.test;
+const InnerComponent3: React.FC<Props3> = (props): React.ReactElement => (
+    <>{props.test}</>
+);
 
 const HOCComponent3 = withActionScheduler(
     /**

package/tsconfig.json

@@ -0,0 +1,11 @@
+{
+    "exclude": ["dist"],
+    "extends": "../tsconfig-shared.json",
+    "compilerOptions": {
+        "outDir": "./dist",
+        "rootDir": "src",
+    },
+    "references": [
+        {"path": "../wonder-blocks-button"},
+    ]
+}