Refactor

Author: inokawa

src/core/waapi.ts

@@ -106,32 +106,28 @@ export const _play = (animation: Animation, opts: PlayOptions = {}) => {
 /**
  * @internal
  */
-export const _reverse = (animation: Animation | undefined) => {
- if (!animation) return;
+export const _reverse = (animation: Animation) => {
  animation.reverse();
 };
 
 /**
  * @internal
  */
-export const _cancel = (animation: Animation | undefined) => {
- if (!animation) return;
+export const _cancel = (animation: Animation) => {
  animation.cancel();
 };
 
 /**
  * @internal
  */
-export const _finish = (animation: Animation | undefined) => {
- if (!animation) return;
+export const _finish = (animation: Animation) => {
  animation.finish();
 };
 
 /**
  * @internal
  */
-export const _pause = (animation: Animation | undefined) => {
- if (!animation) return;
+export const _pause = (animation: Animation) => {
  animation.pause();
 };
 // /**
@@ -159,10 +155,9 @@ export const _pause = (animation: Animation | undefined) => {
  * @internal
  */
 export const _setTime = (
- animation: Animation | undefined,
+ animation: Animation,
  arg: number | ((endTime: number) => number)
 ) => {
- if (!animation) return;
  animation.currentTime =
  typeof arg === "function"
  ? arg(animation.effect!.getComputedTiming().endTime! as number)
@@ -173,10 +168,9 @@ export const _setTime = (
  * @internal
  */
 export const _setRate = (
- animation: Animation | undefined,
+ animation: Animation,
  arg: number | ((prevRate: number) => number)
 ) => {
- if (!animation) return;
  animation.updatePlaybackRate(
  typeof arg === "function" ? arg(animation.playbackRate) : arg
  );

src/react/hooks/useAnimation.ts

@@ -111,6 +111,7 @@ export const useAnimation = <Args = void>(
  let element: Element | null = null;
  let active: AnimationObject | undefined;
 
+ const currentAnimation = () => active && getAnimation(active);
  const init = (args: Args) => {
  if (!element) return;
  const [keyframe, _options = {}] = argsRef.current;
@@ -149,31 +150,35 @@ export const useAnimation = <Args = void>(
  return externalHandle;
  },
  reverse: () => {
- if (active) {
- _reverse(getAnimation(active));
+ const animation = currentAnimation();
+ if (animation) {
+ _reverse(animation);
  }
  return externalHandle;
  },
  cancel: () => {
- if (active) {
- _cancel(getAnimation(active));
+ const animation = currentAnimation();
+ if (animation) {
+ _cancel(animation);
  }
  return externalHandle;
  },
  finish: () => {
- if (active) {
- _finish(getAnimation(active));
+ const animation = currentAnimation();
+ if (animation) {
+ _finish(animation);
  }
  return externalHandle;
  },
  pause: () => {
- if (active) {
- _pause(getAnimation(active));
+ const animation = currentAnimation();
+ if (animation) {
+ _pause(animation);
  }
  return externalHandle;
  },
  setTime: (time) => {
- let animation = active && getAnimation(active);
+ let animation = currentAnimation();
  if (!animation) {
  const [keyframe] = argsRef.current;
  if (typeof keyframe === "function") {
@@ -182,20 +187,22 @@ export const useAnimation = <Args = void>(
  // Init animation in setTime to start animation without calling play
  animation = init(undefined!);
  }
- _setTime(animation, time);
+ if (animation) {
+ _setTime(animation, time);
+ }
 
  return externalHandle;
  },
  setPlaybackRate: (rate) => {
- if (active) {
- _setRate(getAnimation(active), rate);
+ const animation = currentAnimation();
+ if (animation) {
+ _setRate(animation, rate);
  }
  return externalHandle;
  },
  waitFor: (event) => {
- return _waitFor(active && getAnimation(active), event).then(
- () => externalHandle
- );
+ const animation = currentAnimation();
+ return _waitFor(animation, event).then(() => externalHandle);
  },
  } satisfies BaseAnimationHandle<Args>
  );

src/react/hooks/useAnimationFunction.ts

@@ -108,23 +108,38 @@ export const useAnimationFunction = <Args = void>(
  return externalHandle;
  },
  cancel: () => {
- _cancel(getAnimation());
+ const animation = getAnimation();
+ if (animation) {
+ _cancel(animation);
+ }
  return externalHandle;
  },
  finish: () => {
- _finish(getAnimation());
+ const animation = getAnimation();
+ if (animation) {
+ _finish(animation);
+ }
  return externalHandle;
  },
  pause: () => {
- _pause(getAnimation());
+ const animation = getAnimation();
+ if (animation) {
+ _pause(animation);
+ }
  return externalHandle;
  },
  setTime: (time) => {
- _setTime(getAnimation(), time);
+ const animation = getAnimation();
+ if (animation) {
+ _setTime(animation, time);
+ }
  return externalHandle;
  },
  setPlaybackRate: (rate) => {
- _setRate(getAnimation(), rate);
+ const animation = getAnimation();
+ if (animation) {
+ _setRate(animation, rate);
+ }
  return externalHandle;
  },
  waitFor: (event: WaitingAnimationEventName) =>