@khanacademy/wonder-blocks-timing 2.1.0 → 2.1.1

package/CHANGELOG.md

@@ -1,11 +1,18 @@
 # @khanacademy/wonder-blocks-timing
 
+## 2.1.1
+
+### Patch Changes
+
+-   91cb727c: Remove file extensions from imports
+
 ## 2.1.0
+
 ### Minor Changes
 
-- 029b4810: Adds `useInterval()` hook that mimics the behavior of `ActionScheduler`'s
-  `interval()` method.
-- c57cd770: Rename `useInterval` and `useTimeout` to `useScheduledInterval`
-  and `useScheduledTimeout` respectively.
-- 29766c8e: Add `useInterval` and `useTimeout` hooks to provide a simple API for
-  using intervals and timeouts.
+-   029b4810: Adds `useInterval()` hook that mimics the behavior of `ActionScheduler`'s
+    `interval()` method.
+-   c57cd770: Rename `useInterval` and `useTimeout` to `useScheduledInterval`
+    and `useScheduledTimeout` respectively.
+-   29766c8e: Add `useInterval` and `useTimeout` hooks to provide an API for
+    using intervals and timeouts.

package/dist/es/index.js

@@ -11,29 +11,7 @@ const ClearPolicy = {
   Cancel: "cancel-on-clear"
 };
 
-/**
- * Encapsulates everything associated with calling setTimeout/clearTimeout, and
- * managing the lifecycle of that timer, including the ability to resolve or
- * cancel a pending timeout action.
- *
- * @export
- * @class Timeout
- * @implements {ITimeout}
- */
 class Timeout {
-  /**
-   * Creates a timeout that will invoke the given action after
-   * the given period. The timeout does not start until set is called.
-   *
-   * @param {() => mixed} action The action to be invoked when the timeout
-   * period has passed.
-   * @param {number} timeoutMs The timeout period.
-   * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-   * the timer is set immediately on instantiation; otherwise, `set` must be
-   * called to set the timeout.
-   * Defaults to `SchedulePolicy.Immediately`.
-   * @memberof Timeout
-   */
   constructor(action, timeoutMs, schedulePolicy = SchedulePolicy.Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
@@ -50,28 +28,10 @@ class Timeout {
       this.set();
     }
   }
-  /**
-   * Determine if the timeout is set or not.
-   *
-   * @returns {boolean} true if the timeout is set (aka pending), otherwise
-   * false.
-   * @memberof Timeout
-   */
-
 
   get isSet() {
     return this._timeoutId != null;
   }
-  /**
-   * Set the timeout.
-   *
-   * If the timeout is pending, this cancels that pending timeout and
-   * sets the timeout afresh. If the timeout is not pending, this
-   * sets a new timeout.
-   *
-   * @memberof Timeout
-   */
-
 
   set() {
     if (this.isSet) {
@@ -80,21 +40,6 @@ class Timeout {
 
     this._timeoutId = setTimeout(() => this.clear(ClearPolicy.Resolve), this._timeoutMs);
   }
-  /**
-   * Clear the set timeout.
-   *
-   * If the timeout is pending, this cancels that pending timeout without
-   * invoking the action. If no timeout is pending, this does nothing.
-   *
-   * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-   * was set when called, the request action is invoked after cancelling
-   * the request; otherwise, the pending action is cancelled.
-   * Defaults to `ClearPolicy.Cancel`.
-   *
-   * @returns {void}
-   * @memberof Timeout
-   */
-
 
   clear(policy = ClearPolicy.Cancel) {
     const timeoutId = this._timeoutId;
@@ -113,29 +58,7 @@ class Timeout {
 
 }
 
-/**
- * Encapsulates everything associated with calling setInterval/clearInterval,
- * and managing the lifecycle of that interval. This includes the ability to
- * cancel the interval, and knowing if the interval is active.
- *
- * @export
- * @class Interval
- * @implements {IInterval}
- */
 class Interval {
-  /**
-   * Creates an interval that will invoke the given action after
-   * the given period. The interval does not start until set is called.
-   *
-   * @param {() => mixed} action The action to be invoked each time the
-   * interval period has passed.
-   * @param {number} intervalMs The interval period.
-   * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-   * the interval is set immediately on instantiation; otherwise, `set` must be
-   * called to set the interval.
-   * Defaults to `SchedulePolicy.Immediately`.
-   * @memberof Interval
-   */
   constructor(action, intervalMs, schedulePolicy = SchedulePolicy.Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
@@ -152,26 +75,10 @@ class Interval {
       this.set();
     }
   }
-  /**
-   * Determine if the interval is active or not.
-   *
-   * @returns {boolean} true if the interval is active, otherwise false.
-   * @memberof Interval
-   */
-
 
   get isSet() {
     return this._intervalId != null;
   }
-  /**
-   * Activate the interval.
-   *
-   * If the interval is active, this cancels that interval and starts the
-   * interval afresh. If the interval is not active, this starts it.
-   *
-   * @memberof Interval
-   */
-
 
   set() {
     if (this.isSet) {
@@ -180,21 +87,6 @@ class Interval {
 
     this._intervalId = setInterval(() => this._action(), this._intervalMs);
   }
-  /**
-   * Clear the active interval.
-   *
-   * If the interval is active, this cancels that interval. If no interval is
-   * pending, this does nothing.
-   *
-   * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-   * was set when called, the request action is invoked after cancelling
-   * the request; otherwise, the pending action is cancelled.
-   * Defaults to `ClearPolicy.Cancel`.
-   *
-   * @returns {void}
-   * @memberof Interval
-   */
-
 
   clear(policy = ClearPolicy.Cancel) {
     const intervalId = this._intervalId;
@@ -213,27 +105,7 @@ class Interval {
 
 }
 
-/**
- * Encapsulates everything associated with calling requestAnimationFrame/
- * cancelAnimationFrame, and managing the lifecycle of that request, including
- * the ability to resolve or cancel a pending request action.
- *
- * @export
- * @class AnimationFrame
- * @implements {IAnimationFrame}
- */
 class AnimationFrame {
-  /**
-   * Creates an animation frame request that will invoke the given action.
-   * The request is not made until set is called.
-   *
-   * @param {DOMHighResTimeStamp => mixed} action The action to be invoked.
-   * @param {SchedulePolicy} [schedulePolicy] When SchedulePolicy.Immediately,
-   * the interval is set immediately on instantiation; otherwise, `set` must be
-   * called to set the interval.
-   * Defaults to `SchedulePolicy.Immediately`.
-   * @memberof AnimationFrame
-   */
   constructor(action, schedulePolicy = SchedulePolicy.Immediately) {
     if (typeof action !== "function") {
       throw new Error("Action must be a function");
@@ -245,28 +117,10 @@ class AnimationFrame {
       this.set();
     }
   }
-  /**
-   * Determine if the request is pending or not.
-   *
-   * @returns {boolean} true if the request is pending, otherwise
-   * false.
-   * @memberof AnimationFrame
-   */
-
 
   get isSet() {
     return this._animationFrameId != null;
   }
-  /**
-   * Make the animation frame request.
-   *
-   * If the request is pending, this cancels that pending request and
-   * makes the request afresh. If the request is not pending, this
-   * makes a new request.
-   *
-   * @memberof AnimationFrame
-   */
-
 
   set() {
     if (this.isSet) {
@@ -275,24 +129,6 @@ class AnimationFrame {
 
     this._animationFrameId = requestAnimationFrame(time => this.clear(ClearPolicy.Resolve, time));
   }
-  /**
-   * Clear the pending request.
-   *
-   * If the request is pending, this cancels that pending request without
-   * invoking the action. If no request is pending, this does nothing.
-   *
-   * @param {ClearPolicy} [policy] When ClearPolicy.Resolve, if the request
-   * was set when called, the request action is invoked after cancelling
-   * the request; otherwise, the pending action is cancelled.
-   * Defaults to `ClearPolicy.Cancel`.
-   * @param {DOMHighResTimeStamp} [time] Timestamp to pass to the action when
-   * ClearPolicy.Resolve is specified. Ignored when ClearPolicy.Cancel is
-   * specified.
-   *
-   * @returns {void}
-   * @memberof AnimationFrame
-   */
-
 
   clear(policy = ClearPolicy.Cancel, time) {
     const animationFrameId = this._animationFrameId;
@@ -311,12 +147,6 @@ class AnimationFrame {
 
 }
 
-/**
- * Implements the `IScheduleActions` API to provide timeout, interval, and
- * animation frame support. This is not intended for direct use, but instead
- * is to be used solely by the `ActionSchedulerProvider` to provide an
- * `IScheduleActions` instance.
- */
 class ActionScheduler {
   constructor() {
     this._disabled = false;
@@ -364,11 +194,6 @@ class ActionScheduler {
     this._registeredActions = [];
     registered.forEach(clearFn => clearFn());
   }
-  /**
-   * Prevents this scheduler from creating any additional actions.
-   * This also clears any pending actions.
-   */
-
 
   disable() {
     this._disabled = true;
@@ -386,16 +211,6 @@ ActionScheduler.NoopAction = {
   clear: () => {}
 };
 
-/**
- * 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>
- * ```
- */
 class ActionSchedulerProvider extends React.Component {
   constructor(...args) {
     super(...args);
@@ -415,33 +230,13 @@ class ActionSchedulerProvider extends React.Component {
 
 }
 
-/**
- * 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.
- */
 function withActionScheduler(WrappedComponent) {
-  return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ActionSchedulerProvider, null, schedule => /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, props, {
+  return React.forwardRef((props, ref) => React.createElement(ActionSchedulerProvider, null, schedule => React.createElement(WrappedComponent, _extends({}, props, {
     ref: ref,
     schedule: schedule
   }))));
 }
 
-/**
- * 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}}
- */
-
 const useUpdatingRef = value => {
   const ref = useRef(value);
   useEffect(() => {
@@ -450,17 +245,7 @@ const useUpdatingRef = value => {
   return ref;
 };
 
-/**
- * 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
- */
-
 function useInterval(action, intervalMs, active) {
-  // We using a ref instead of a callback for `action` to avoid resetting
-  // the interval whenever the `action` changes.
   const actionRef = useUpdatingRef(action);
   useEffect(() => {
     if (active) {
@@ -470,25 +255,11 @@ function useInterval(action, intervalMs, active) {
       return () => {
         clearInterval(intervalId);
       };
-    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
-    // doesn't recognize it as a ref and thus complains if it isn't in the
-    // deps list.  It isn't a big deal though since the value ofactionRef
-    // never changes (only its contents do).
-
+    }
   }, [intervalMs, active, actionRef]);
 }
 
-/**
- * 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
- */
-
 function useTimeout(action, timeoutMs, active) {
-  // We using a ref instead of a callback for `action` to avoid resetting
-  // the interval whenever the `action` changes.
   const actionRef = useUpdatingRef(action);
   useEffect(() => {
     if (active) {
@@ -498,11 +269,7 @@ function useTimeout(action, timeoutMs, active) {
       return () => {
         clearTimeout(timeoutId);
       };
-    } // actionRef isn't actually required, but react-hooks/exhaustive-deps
-    // doesn't recognize it as a ref and thus complains if it isn't in the
-    // deps list.  It isn't a big deal though since the value ofactionRef
-    // never changes (only its contents do).
-
+    }
   }, [timeoutMs, active, actionRef]);
 }
 
@@ -531,23 +298,14 @@ function useScheduledInterval(action, intervalMs, options) {
     }
 
     setIsSet(false);
-  }, // react-hooks/exhaustive-deps doesn't require refs to be
-  // listed in the deps array.  Unfortunately, in this situation
-  // it doesn't recognized actionRef as a ref.
-  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  }, [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
   const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);
   useEffect(() => {
     return () => {
-      // This code will only run with the component using this
-      // hook is unmounted.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       if (runOnUnmountRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         actionRef.current();
       }
-    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
-    // a both refs and thus do not have to be listed as deps.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, []);
   useInterval(action, intervalMs, isSet);
   return {
@@ -570,9 +328,7 @@ function useScheduledTimeout(action, timeoutMs, options) {
 
   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), []); // This wrapper isn't present in useScheduledInterval because we
-  // don't need to update `isSet` in that situations.
-
+  const set = useCallback(() => setIsSet(true), []);
   const wrappedAction = useCallback(() => {
     setIsSet(false);
     action();
@@ -588,23 +344,14 @@ function useScheduledTimeout(action, timeoutMs, options) {
     }
 
     setIsSet(false);
-  }, // react-hooks/exhaustive-deps doesn't require refs to be
-  // listed in the deps array.  Unfortunately, in this situation
-  // it doesn't recognized actionRef as a ref.
-  [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
+  }, [actionRef, isSet, options == null ? void 0 : options.clearPolicy]);
   const runOnUnmountRef = useUpdatingRef(isSet && (options == null ? void 0 : options.clearPolicy) === ClearPolicy.Resolve);
   useEffect(() => {
     return () => {
-      // This code will only run with the component using this
-      // hook is unmounted.
-      // eslint-disable-next-line react-hooks/exhaustive-deps
       if (runOnUnmountRef.current) {
-        // eslint-disable-next-line react-hooks/exhaustive-deps
         actionRef.current();
       }
-    }; // This eslint rule doesn't realize actionRef and runOnUnmountRef
-    // a both refs and thus do not have to be listed as deps.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
+    };
   }, []);
   useTimeout(wrappedAction, timeoutMs, isSet);
   return {