types: reorganize animation types (#15)

Author: ivodolenc

packages/effekt/src/animation/animation.ts

@@ -10,7 +10,10 @@ import type {
   AnimationDriver,
   AnimationPropertyNames,
   AnimationEventNames,
+  AnimationEffect,
+  AnimationPlayState,
   GeneratedKeyframe,
+  WebAnimation,
 } from './types'
 
 export function createAnimation(
@@ -23,11 +26,11 @@ export function createAnimation(
     driver,
   } = options
 
-  const animations: globalThis.Animation[] = []
+  const animations: WebAnimation[] = []
   let isCompleted: boolean = false
   let isDriver: boolean = driver ? true : false
 
-  let resolve: (value: globalThis.Animation[]) => void
+  let resolve: (value: WebAnimation[]) => void
   let reject: (value: any) => void
 
   const els = getElements(targets)
@@ -73,36 +76,31 @@ export function createAnimation(
 
   let isReady: boolean = els.length > 0
 
-  const each = (callback: (a: globalThis.Animation) => void): void => {
+  const each = (callback: (a: WebAnimation) => void): void => {
     for (let i = 0, l = animations.length; i < l; i++) callback(animations[i])
   }
 
-  const set = <
-    T extends globalThis.Animation,
-    K extends AnimationPropertyNames,
-  >(
+  const set = <T extends WebAnimation, K extends AnimationPropertyNames>(
     name: AnimationPropertyNames,
     value: T[K],
   ): void => each((k) => (k[name] = value as any))
 
   const run = (name: AnimationEventNames): void => each((a) => a[name]())
 
-  const call = (
-    callback?: (animations: globalThis.Animation[]) => void,
-  ): void => {
+  const call = (callback?: (animations: WebAnimation[]) => void): void => {
     if (isReady) callback?.(animations)
   }
 
-  const numberish = (v: globalThis.CSSNumberish): number =>
+  const numberish = (v: globalThis.CSSNumberish | number): number =>
     isNumber(v) ? v : (v as globalThis.CSSUnitValue).value
 
-  const getAnimation = (): globalThis.Animation | null => {
+  const getAnimation = (): WebAnimation | null => {
     if (isReady) {
       if (isDriver) return animations[0]
       return animations.reduce((prev, curr) => {
-        const pT = prev.effect?.getComputedTiming().endTime as number
-        const cT = curr.effect?.getComputedTiming().endTime as number
-        return numberish(pT) > numberish(cT) ? prev : curr
+        const pT = prev.effect?.getComputedTiming().endTime
+        const cT = curr.effect?.getComputedTiming().endTime
+        return numberish(pT!) > numberish(cT!) ? prev : curr
       })
     }
     return null
@@ -172,7 +170,7 @@ export function createAnimation(
     set playRate(r) {
       set('playbackRate', r)
     },
-    get effect(): globalThis.AnimationEffect | null {
+    get effect(): AnimationEffect | null {
       return instance.value?.effect || null
     },
     set effect(e) {
@@ -185,7 +183,7 @@ export function createAnimation(
       isDriver ||= true
       set('timeline', d)
     },
-    get playState(): Readonly<globalThis.AnimationPlayState> {
+    get playState(): Readonly<AnimationPlayState> {
       return instance.value?.playState || 'idle'
     },
     get progress(): number {

packages/effekt/src/animation/generate-keyframes.ts

@@ -9,7 +9,7 @@ import {
 } from '@/shared'
 import type {
   AnimationOptions,
-  AnimationKeyframes,
+  AnimationOptionsKeyframes,
   GeneratedKeyframe,
 } from './types'
 
@@ -25,7 +25,7 @@ const rgxIsTransform = composeRegex(
 )
 
 const parseObjectValue = (
-  value: AnimationKeyframes[keyof AnimationKeyframes],
+  value: AnimationOptionsKeyframes[keyof AnimationOptionsKeyframes],
 ) => (isObject(value) && !isArray(value) && value) || { value }
 
 const setUnit = (key: string, value: number | string, prop: string): string => {
@@ -77,7 +77,7 @@ export function generateKeyframes(
     ...props
   } = options
 
-  const keys = Object.keys(props) as (keyof AnimationKeyframes)[]
+  const keys = Object.keys(props) as (keyof AnimationOptionsKeyframes)[]
   const keyframes: GeneratedKeyframe[] = []
   const transforms: GeneratedKeyframe[] = []
   const effect = {
@@ -131,7 +131,7 @@ export function generateKeyframes(
     }
   }
 
-  transforms.sort((a, b) => (a.duration as number) - (b.duration as number))
+  transforms.sort((a, b) => a.duration! - b.duration!)
 
   return [...transforms, ...keyframes]
 }

packages/effekt/src/animation/types/animation.ts renamed to packages/effekt/src/animation/types/animation/animation.ts

@@ -1,5 +1,9 @@
-import type { AnimationPromise } from './options'
-import type { AnimationDriver } from './effect'
+import type {
+  AnimationPromise,
+  AnimationEffect,
+  AnimationDriver,
+  AnimationPlayState,
+} from './shared'
 
 export interface Animation {
   play(): void
@@ -15,11 +19,11 @@ export interface Animation {
   set time(t: number)
   get playRate(): number
   set playRate(r: number)
-  get effect(): globalThis.AnimationEffect | null
-  set effect(e: globalThis.AnimationEffect | null)
+  get effect(): AnimationEffect
+  set effect(e: AnimationEffect)
   get driver(): AnimationDriver
   set driver(d: AnimationDriver)
-  get playState(): Readonly<globalThis.AnimationPlayState>
+  get playState(): Readonly<AnimationPlayState>
   get progress(): number
   set progress(t: number)
   get isCompleted(): Readonly<boolean>

packages/effekt/src/animation/types/animation/index.ts

@@ -0,0 +1,2 @@
+export * from './shared'
+export * from './animation'

packages/effekt/src/animation/types/animation/shared.ts

@@ -0,0 +1,30 @@
+export type AnimationTargets =
+  | string
+  | Element
+  | null
+  | (Element | null)[]
+  | NodeListOf<Element>
+
+export type AnimationPromise = Promise<WebAnimation[]>
+
+export type AnimationDriver = globalThis.AnimationTimeline | null
+
+export type AnimationEffect = globalThis.AnimationEffect | null
+
+export type AnimationPlayState = globalThis.AnimationPlayState
+
+export type AnimationPropertyNames =
+  | 'startTime'
+  | 'currentTime'
+  | 'playbackRate'
+  | 'effect'
+  | 'timeline'
+
+export type AnimationEventNames =
+  | 'play'
+  | 'pause'
+  | 'reverse'
+  | 'cancel'
+  | 'finish'
+
+export type WebAnimation = globalThis.Animation

packages/effekt/src/animation/types/index.ts

@@ -1,6 +1,2 @@
-export * from './targets'
-export * from './effect'
-export * from './keyframes'
-export * from './events'
 export * from './options'
 export * from './animation'

packages/effekt/src/animation/types/keyframes/index.ts

@@ -1,11 +1,4 @@
-import type { AnimationEffect } from './effect'
-import type { AnimationKeyframes } from './keyframes'
-import type { AnimationEvents } from './events'
-
-export interface AnimationOptions
-  extends AnimationKeyframes,
-    AnimationEvents,
-    AnimationEffect {
+export interface AnimationOptionsCustom {
   /**
    * Specifies whether the animation will play automatically when `animate()` is called.
    *
@@ -34,19 +27,3 @@ export interface AnimationOptions
    */
   offset?: number | (number | null)[]
 }
-
-export type AnimationPropertyNames =
-  | 'startTime'
-  | 'currentTime'
-  | 'playbackRate'
-  | 'effect'
-  | 'timeline'
-
-export type AnimationEventNames =
-  | 'play'
-  | 'pause'
-  | 'reverse'
-  | 'cancel'
-  | 'finish'
-
-export type AnimationPromise = Promise<globalThis.Animation[]>

packages/effekt/src/animation/types/keyframes/options.ts

@@ -1,6 +1,14 @@
 import type { DelayFunction, EasingFunction } from '@/shared/types'
+import type {
+  PlaybackDirection,
+  FillMode,
+  CompositeOperation,
+  CompositeOperationOrAuto,
+  RepeatCompositeOperation,
+} from './shared'
+import type { AnimationDriver } from '../animation'
 
-export interface AnimationEffect {
+export interface AnimationOptionsEffect {
   /**
    * Specifies a unique property that references the animation.
    *
@@ -17,7 +25,7 @@ export interface AnimationEffect {
    *
    * @default undefined
    */
-  direction?: globalThis.PlaybackDirection
+  direction?: PlaybackDirection
   /**
    * Specifies the playback rate of the animation.
    *
@@ -71,7 +79,7 @@ export interface AnimationEffect {
    *
    * @default 'both'
    */
-  fillMode?: globalThis.FillMode
+  fillMode?: FillMode
   /**
    * Specifies the mathematical function used in the interpolation between the `start` and `end` keyframes.
    *
@@ -83,15 +91,13 @@ export interface AnimationEffect {
    *
    * @default undefined
    */
-  composite?:
-    | globalThis.CompositeOperation
-    | globalThis.CompositeOperationOrAuto[]
+  composite?: CompositeOperation | CompositeOperationOrAuto[]
   /**
    * Determines how values build from iteration to iteration in this animation
    *
    * @default undefined
    */
-  repeatComposite?: globalThis.IterationCompositeOperation
+  repeatComposite?: RepeatCompositeOperation
   /**
    * Specifies a pseudo-element selector, such as `::before`.
    *
@@ -119,5 +125,3 @@ export interface AnimationEffect {
    */
   end?: string
 }
-
-export type AnimationDriver = globalThis.AnimationTimeline | null