@khanacademy/wonder-blocks-timing 2.1.1 → 2.1.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @khanacademy/wonder-blocks-timing
 
+## 2.1.2
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+
 ## 2.1.1
 
 ### Patch Changes

package/dist/components/action-scheduler-provider.d.ts

@@ -0,0 +1,26 @@
+import * as React from "react";
+import ActionScheduler from "../util/action-scheduler";
+import type { IScheduleActions } from "../util/types";
+type Props = {
+    /**
+     * A function that, when given an instance of `IScheduleActions` will
+     * render a `React.Node`.
+     */
+    children: (arg1: IScheduleActions) => React.ReactElement;
+};
+/**
+ * A provider component that passes our action scheduling API to its children
+ * and ensures that all scheduled actions are cleared on unmount.
+ *
+ * ```jsx
+ * <ActionSchedulerProvider>
+ *     {schedule => this.renderThingThatNeedsTimers(schedule)}
+ * </ActionSchedulerProvider>
+ * ```
+ */
+export default class ActionSchedulerProvider extends React.Component<Props> {
+    componentWillUnmount(): void;
+    _actionScheduler: ActionScheduler;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/action-scheduler-provider.js.flow

@@ -0,0 +1,35 @@
+/**
+ * Flowtype definitions for action-scheduler-provider
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import ActionScheduler from "../util/action-scheduler";
+import type { IScheduleActions } from "../util/types";
+declare type Props = {
+  /**
+   * A function that, when given an instance of `IScheduleActions` will
+   * render a `React.Node`.
+   */
+  children: (arg1: IScheduleActions) => React.Element<>,
+  ...
+};
+/**
+ * A provider component that passes our action scheduling API to its children
+ * and ensures that all scheduled actions are cleared on unmount.
+ *
+ * ```jsx
+ * <ActionSchedulerProvider>
+ *     {schedule => this.renderThingThatNeedsTimers(schedule)}
+ * </ActionSchedulerProvider>
+ * ```
+ */
+declare export default class ActionSchedulerProvider
+  mixins React.Component<Props>
+{
+  componentWillUnmount(): void;
+  _actionScheduler: ActionScheduler;
+  render(): React.Element<>;
+}

package/dist/components/with-action-scheduler.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+import type { WithActionSchedulerProps } from "../util/types";
+type WithoutActionScheduler<T> = Omit<T, "schedule">;
+/**
+ * A higher order component that attaches the given component to an
+ * `IScheduleActions` instance. Any actions scheduled will automatically be
+ * cleared on unmount.
+ *
+ * @template TOwnProps The own props of the component being rendered, without
+ * the additional action scheduler prop. To attach the additional prop to
+ * these props use the `WithActionScheduler` type.
+ */
+export default function withActionScheduler<Props extends WithActionSchedulerProps>(WrappedComponent: React.ComponentType<Props>): React.ForwardRefExoticComponent<React.PropsWithoutRef<WithoutActionScheduler<Props>> & React.RefAttributes<unknown>>;
+export {};

package/dist/components/with-action-scheduler.js.flow

@@ -0,0 +1,26 @@
+/**
+ * Flowtype definitions for with-action-scheduler
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { WithActionSchedulerProps } from "../util/types";
+declare type WithoutActionScheduler<T> = $Diff<T, { schedule: any }>;
+/**
+ * A higher order component that attaches the given component to an
+ * `IScheduleActions` instance. Any actions scheduled will automatically be
+ * cleared on unmount.
+ * @template The own props of the component being rendered, without
+ * the additional action scheduler prop. To attach the additional prop to
+ * these props use the `WithActionScheduler` type.
+ */
+declare export default function withActionScheduler<
+  Props: WithActionSchedulerProps
+>(
+  WrappedComponent: React.ComponentType<Props>
+): React.ForwardRefExoticComponent<{
+  ...React.PropsWithoutRef<WithoutActionScheduler<Props>>,
+  ...React.RefAttributes<mixed>,
+}>;

package/dist/es/index.js

@@ -1,4 +1,3 @@
-import _extends from '@babel/runtime/helpers/extends';
 import * as React from 'react';
 import { useRef, useEffect, useState, useCallback } from 'react';
 
@@ -11,224 +10,275 @@ const ClearPolicy = {
   Cancel: "cancel-on-clear"
 };
 
-class Timeout {
-  constructor(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
+    o.__proto__ = p;
+    return o;
+  };
+  return _setPrototypeOf(o, p);
+}
+
+function _inheritsLoose(subClass, superClass) {
+  subClass.prototype = Object.create(superClass.prototype);
+  subClass.prototype.constructor = subClass;
+  _setPrototypeOf(subClass, superClass);
+}
+
+function _typeof(obj) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) {
+    return typeof obj;
+  } : function (obj) {
+    return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
+  }, _typeof(obj);
+}
+
+function _toPrimitive(input, hint) {
+  if (_typeof(input) !== "object" || input === null) return input;
+  var prim = input[Symbol.toPrimitive];
+  if (prim !== undefined) {
+    var res = prim.call(input, hint || "default");
+    if (_typeof(res) !== "object") return res;
+    throw new TypeError("@@toPrimitive must return a primitive value.");
+  }
+  return (hint === "string" ? String : Number)(input);
+}
+
+function _toPropertyKey(arg) {
+  var key = _toPrimitive(arg, "string");
+  return _typeof(key) === "symbol" ? key : String(key);
+}
+
+function _defineProperties(target, props) {
+  for (var i = 0; i < props.length; i++) {
+    var descriptor = props[i];
+    descriptor.enumerable = descriptor.enumerable || false;
+    descriptor.configurable = true;
+    if ("value" in descriptor) descriptor.writable = true;
+    Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor);
+  }
+}
+function _createClass(Constructor, protoProps, staticProps) {
+  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+  if (staticProps) _defineProperties(Constructor, staticProps);
+  Object.defineProperty(Constructor, "prototype", {
+    writable: false
+  });
+  return Constructor;
+}
+
+let Timeout = function () {
+  function Timeout(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
+    this._timeoutId = void 0;
+    this._action = void 0;
+    this._timeoutMs = void 0;
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
-
     if (timeoutMs < 0) {
       throw new Error("Timeout period must be >= 0");
     }
-
     this._action = action;
     this._timeoutMs = timeoutMs;
-
     if (schedulePolicy === SchedulePolicy.Immediately) {
       this.set();
     }
   }
-
-  get isSet() {
-    return this._timeoutId != null;
-  }
-
-  set() {
+  var _proto = Timeout.prototype;
+  _proto.set = function set() {
     if (this.isSet) {
       this.clear(ClearPolicy.Cancel);
     }
-
     this._timeoutId = setTimeout(() => this.clear(ClearPolicy.Resolve), this._timeoutMs);
-  }
-
-  clear(policy = ClearPolicy.Cancel) {
+  };
+  _proto.clear = function clear(policy = ClearPolicy.Cancel) {
     const timeoutId = this._timeoutId;
     this._timeoutId = null;
-
     if (timeoutId == null) {
       return;
     }
-
     clearTimeout(timeoutId);
-
     if (policy === ClearPolicy.Resolve) {
       this._action();
     }
-  }
-
-}
-
-class Interval {
-  constructor(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
+  };
+  _createClass(Timeout, [{
+    key: "isSet",
+    get: function () {
+      return this._timeoutId != null;
+    }
+  }]);
+  return Timeout;
+}();
+
+let Interval = function () {
+  function Interval(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
+    this._intervalId = void 0;
+    this._action = void 0;
+    this._intervalMs = void 0;
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
-
     if (intervalMs < 1) {
       throw new Error("Interval period must be >= 1");
     }
-
     this._action = action;
     this._intervalMs = intervalMs;
-
     if (schedulePolicy === SchedulePolicy.Immediately) {
       this.set();
     }
   }
-
-  get isSet() {
-    return this._intervalId != null;
-  }
-
-  set() {
+  var _proto = Interval.prototype;
+  _proto.set = function set() {
     if (this.isSet) {
       this.clear(ClearPolicy.Cancel);
     }
-
     this._intervalId = setInterval(() => this._action(), this._intervalMs);
-  }
-
-  clear(policy = ClearPolicy.Cancel) {
+  };
+  _proto.clear = function clear(policy = ClearPolicy.Cancel) {
     const intervalId = this._intervalId;
     this._intervalId = null;
-
     if (intervalId == null) {
       return;
     }
-
     clearInterval(intervalId);
-
     if (policy === ClearPolicy.Resolve) {
       this._action();
     }
-  }
-
-}
-
-class AnimationFrame {
-  constructor(action, schedulePolicy = SchedulePolicy.Immediately) {
+  };
+  _createClass(Interval, [{
+    key: "isSet",
+    get: function () {
+      return this._intervalId != null;
+    }
+  }]);
+  return Interval;
+}();
+
+let AnimationFrame = function () {
+  function AnimationFrame(action, schedulePolicy = SchedulePolicy.Immediately) {
+    this._animationFrameId = void 0;
+    this._action = void 0;
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
     }
-
     this._action = action;
-
     if (schedulePolicy === SchedulePolicy.Immediately) {
       this.set();
     }
   }
-
-  get isSet() {
-    return this._animationFrameId != null;
-  }
-
-  set() {
+  var _proto = AnimationFrame.prototype;
+  _proto.set = function set() {
     if (this.isSet) {
       this.clear(ClearPolicy.Cancel);
     }
-
     this._animationFrameId = requestAnimationFrame(time => this.clear(ClearPolicy.Resolve, time));
-  }
-
-  clear(policy = ClearPolicy.Cancel, time) {
+  };
+  _proto.clear = function clear(policy = ClearPolicy.Cancel, time) {
     const animationFrameId = this._animationFrameId;
     this._animationFrameId = null;
-
     if (animationFrameId == null) {
       return;
     }
-
     cancelAnimationFrame(animationFrameId);
-
     if (policy === ClearPolicy.Resolve) {
       this._action(time || performance.now());
     }
-  }
-
-}
+  };
+  _createClass(AnimationFrame, [{
+    key: "isSet",
+    get: function () {
+      return this._animationFrameId != null;
+    }
+  }]);
+  return AnimationFrame;
+}();
 
-class ActionScheduler {
-  constructor() {
+let ActionScheduler = function () {
+  function ActionScheduler() {
     this._disabled = false;
     this._registeredActions = [];
   }
-
-  timeout(action, period, options) {
+  var _proto = ActionScheduler.prototype;
+  _proto.timeout = function timeout(action, period, options) {
     if (this._disabled) {
       return ActionScheduler.NoopAction;
     }
-
     const timeout = new Timeout(action, period, options == null ? void 0 : options.schedulePolicy);
-
     this._registeredActions.push(() => timeout.clear(options == null ? void 0 : options.clearPolicy));
-
     return timeout;
-  }
-
-  interval(action, period, options) {
+  };
+  _proto.interval = function interval(action, period, options) {
     if (this._disabled) {
       return ActionScheduler.NoopAction;
     }
-
     const interval = new Interval(action, period, options == null ? void 0 : options.schedulePolicy);
-
     this._registeredActions.push(() => interval.clear(options == null ? void 0 : options.clearPolicy));
-
     return interval;
-  }
-
-  animationFrame(action, options) {
+  };
+  _proto.animationFrame = function animationFrame(action, options) {
     if (this._disabled) {
       return ActionScheduler.NoopAction;
     }
-
     const animationFrame = new AnimationFrame(action, options == null ? void 0 : options.schedulePolicy);
-
     this._registeredActions.push(() => animationFrame.clear(options == null ? void 0 : options.clearPolicy));
-
     return animationFrame;
-  }
-
-  clearAll() {
+  };
+  _proto.clearAll = function clearAll() {
     const registered = [].concat(this._registeredActions);
     this._registeredActions = [];
     registered.forEach(clearFn => clearFn());
-  }
-
-  disable() {
+  };
+  _proto.disable = function disable() {
     this._disabled = true;
     this.clearAll();
-  }
-
-}
+  };
+  return ActionScheduler;
+}();
 ActionScheduler.NoopAction = {
   set: () => {},
-
   get isSet() {
     return false;
   },
-
   clear: () => {}
 };
 
-class ActionSchedulerProvider extends React.Component {
-  constructor(...args) {
-    super(...args);
-    this._actionScheduler = new ActionScheduler();
+let ActionSchedulerProvider = function (_React$Component) {
+  _inheritsLoose(ActionSchedulerProvider, _React$Component);
+  function ActionSchedulerProvider(...args) {
+    var _this;
+    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
+    _this._actionScheduler = new ActionScheduler();
+    return _this;
   }
-
-  componentWillUnmount() {
+  var _proto = ActionSchedulerProvider.prototype;
+  _proto.componentWillUnmount = function componentWillUnmount() {
     this._actionScheduler.disable();
-  }
-
-  render() {
+  };
+  _proto.render = function render() {
     const {
       children
     } = this.props;
     return children(this._actionScheduler);
-  }
-
-}
+  };
+  return ActionSchedulerProvider;
+}(React.Component);
 
 function withActionScheduler(WrappedComponent) {
   return React.forwardRef((props, ref) => React.createElement(ActionSchedulerProvider, null, schedule => React.createElement(WrappedComponent, _extends({}, props, {
@@ -275,28 +325,22 @@ function useTimeout(action, timeoutMs, active) {
 
 function useScheduledInterval(action, intervalMs, options) {
   var _options$schedulePoli;
-
   if (typeof action !== "function") {
     throw new Error("Action must be a function");
   }
-
   if (intervalMs < 1) {
     throw new Error("Interval period must be >= 1");
   }
-
   const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : SchedulePolicy.Immediately;
   const [isSet, setIsSet] = useState(schedulePolicy === SchedulePolicy.Immediately);
   const set = useCallback(() => setIsSet(true), []);
   const actionRef = useUpdatingRef(action);
   const clear = useCallback(policy => {
     var _policy;
-
     policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
-
     if (isSet && policy === ClearPolicy.Resolve) {
       actionRef.current();
     }
-
     setIsSet(false);
   }, [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
   const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);
@@ -317,15 +361,12 @@ function useScheduledInterval(action, intervalMs, options) {
 
 function useScheduledTimeout(action, timeoutMs, options) {
   var _options$schedulePoli;
-
   if (typeof action !== "function") {
     throw new Error("Action must be a function");
   }
-
   if (timeoutMs < 0) {
     throw new Error("Timeout period must be >= 0");
   }
-
   const schedulePolicy = (_options$schedulePoli = options == null ? void 0 : options.schedulePolicy) != null ? _options$schedulePoli : SchedulePolicy.Immediately;
   const [isSet, setIsSet] = useState(schedulePolicy === SchedulePolicy.Immediately);
   const set = useCallback(() => setIsSet(true), []);
@@ -336,13 +377,10 @@ function useScheduledTimeout(action, timeoutMs, options) {
   const actionRef = useUpdatingRef(wrappedAction);
   const clear = useCallback(policy => {
     var _policy;
-
     policy = (_policy = policy) != null ? _policy : options == null ? void 0 : options.clearPolicy;
-
     if (isSet && policy === ClearPolicy.Resolve) {
       actionRef.current();
     }
-
     setIsSet(false);
   }, [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
   const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);

package/dist/hooks/internal/use-updating-ref.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Returns a ref whose .current value is updated whenever
+ * the `value` passed to this hook changes.
+ *
+ * this is great for values that you want to reference from
+ * within a useCallback or useEffect event listener, without
+ * re-triggering the effect when the value changes
+ *
+ * @returns {{current: T}}
+ */
+export declare const useUpdatingRef: <T>(value: T) => {
+    current: T;
+};

package/dist/hooks/internal/use-updating-ref.js.flow

@@ -0,0 +1,22 @@
+/**
+ * Flowtype definitions for use-updating-ref
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * Returns a ref whose .current value is updated whenever
+ * the `value` passed to this hook changes.
+ * 
+ * this is great for values that you want to reference from
+ * within a useCallback or useEffect event listener, without
+ * re-triggering the effect when the value changes
+ * @returns {{
+current: T,...
+}}
+ */
+declare export var useUpdatingRef: <T>(value: T) => {
+  current: T,
+  ...
+};

package/dist/hooks/use-interval.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A simple hook for using `setInterval`.
+ *
+ * @param action called every `intervalMs` when `active` is true
+ * @param intervalMs the duration between calls to `action`
+ * @param active whether or not the interval is active
+ */
+export declare function useInterval(action: () => unknown, intervalMs: number, active: boolean): void;

package/dist/hooks/use-interval.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for use-interval
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+/**
+ * A simple hook for using `setInterval`.
+ * @param action called every `intervalMs` when `active` is true
+ * @param intervalMs the duration between calls to `action`
+ * @param active whether or not the interval is active
+ */
+declare export function useInterval(
+  action: () => mixed,
+  intervalMs: number,
+  active: boolean
+): void;

package/dist/hooks/use-scheduled-interval.d.ts

@@ -0,0 +1,2 @@
+import type { IInterval, Options } from "../util/types";
+export declare function useScheduledInterval(action: () => unknown, intervalMs: number, options?: Options): IInterval;

package/dist/hooks/use-scheduled-interval.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for use-scheduled-interval
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { IInterval, Options } from "../util/types";
+declare export function useScheduledInterval(
+  action: () => mixed,
+  intervalMs: number,
+  options?: Options
+): IInterval;

package/dist/hooks/use-scheduled-timeout.d.ts

@@ -0,0 +1,2 @@
+import type { ITimeout, Options } from "../util/types";
+export declare function useScheduledTimeout(action: () => unknown, timeoutMs: number, options?: Options): ITimeout;

package/dist/hooks/use-scheduled-timeout.js.flow

@@ -0,0 +1,13 @@
+/**
+ * Flowtype definitions for use-scheduled-timeout
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import type { ITimeout, Options } from "../util/types";
+declare export function useScheduledTimeout(
+  action: () => mixed,
+  timeoutMs: number,
+  options?: Options
+): ITimeout;

package/dist/hooks/use-timeout.d.ts

@@ -0,0 +1,8 @@
+/**
+ * A simple hook for using `setTimeout`.
+ *
+ * @param action called after `timeoutMs` when `active` is true
+ * @param timeoutMs the duration after which `action` is called
+ * @param active whether or not the interval is active
+ */
+export declare function useTimeout(action: () => unknown, timeoutMs: number, active: boolean): void;