From 2bf2826a0698e2a982916053a7e6a65ac15a6b1c Mon Sep 17 00:00:00 2001
From: yyxi <178086254+yyxi@users.noreply.github.com>
Date: Wed, 20 Nov 2024 20:08:26 +0000
Subject: [PATCH] feat!: api change and perf improvements

---
 src/example.vue   |  23 ++-
 src/index.spec.ts |   4 +-
 src/index.ts      | 418 ++++++++++++++++++++++------------------------
 3 files changed, 218 insertions(+), 227 deletions(-)

diff --git a/src/example.vue b/src/example.vue
index 3d79406..994c26e 100644
--- a/src/example.vue
+++ b/src/example.vue
@@ -8,10 +8,10 @@
 
 <script setup lang="ts">
 import { range } from 'lodash-es'
-import { onMounted, ref } from 'vue'
-import { snaproll, SnaprollActionType, type SnaprollSubscription } from './index'
-import { Pane } from 'tweakpane'
 import { mean } from 'simple-statistics'
+import { Pane } from 'tweakpane'
+import { onMounted, ref } from 'vue'
+import { Snaproll, SnaprollActionType, type SnaprollSubscription } from './index'
 
 // class Estimation {
 //   private currentCount = 0
@@ -88,7 +88,7 @@ class Estimation {
   }
 }
 
-const loop = snaproll({ fps: 30 })
+const loop = new Snaproll({ fps: 30 })
 const boxRefs = ref<HTMLElement[]>([])
 
 function lerp(v0: number, v1: number, t: number) {
@@ -110,10 +110,17 @@ const boxes = range(50).map((_, index) => {
     velocity,
   }
 
+  // 4 seconds
+  const updateStepsMax = Math.round(4000 / loop.timestep)
+  let updateSteps = 0
+
   const subscription: SnaprollSubscription = (action) => {
     const element = boxRefs.value[box.index]
 
     switch (action.type) {
+      case SnaprollActionType.Begin:
+        updateSteps = 0
+        break
       case SnaprollActionType.Update:
         box.lastPosition = box.position
         box.position += box.velocity * action.timestep
@@ -125,10 +132,9 @@ const boxes = range(50).map((_, index) => {
           box.lastPosition,
           box.position,
           action.delta / action.timestep,
-          // 1 - Math.exp(-lambda * action.delta),
         )}vw`
 
-        if (action.panic) {
+        if (++updateSteps >= updateStepsMax) {
           loop.resetFrameDelta()
         }
 
@@ -169,7 +175,6 @@ const observer = new PerformanceObserver((list) => {
     if (entry.entryType === 'measure') {
       durations.push(entry.duration)
 
-
       if (durations.length > 60) {
         durations.shift()
       }
@@ -192,7 +197,7 @@ const read = {
   get draw() {
     return estimationDraw.getFrequency()
   },
-  get mean() {
+  get perf() {
     try {
       return mean(durations) * 100
     } catch {
@@ -246,7 +251,7 @@ Object.keys(read).forEach((key) => {
     readonly: true,
     view: 'graph',
     min: 0,
-    max: 200,
+    max: 100,
     bufferSize: 100,
   })
 })
diff --git a/src/index.spec.ts b/src/index.spec.ts
index 1b04a3f..0bbb0ff 100644
--- a/src/index.spec.ts
+++ b/src/index.spec.ts
@@ -2,7 +2,7 @@ import { deferred } from '@escapace/sequentialize'
 import { max, mean, median, min, standardDeviation } from 'simple-statistics'
 import { assert, describe, it, vi } from 'vitest'
 import {
-  snaproll,
+  Snaproll,
   SnaprollActionType,
   type SnaprollActionBegin,
   type SnaprollActionDraw,
@@ -56,7 +56,7 @@ const createScenario = async () => {
 
   const timestep = 1000 / 60
   const fps = 60
-  const loop = snaproll({ fps, timestep })
+  const loop = new Snaproll({ fps, timestep })
   const begin = vi.fn<[SnaprollActionBegin, number]>()
   const update = vi.fn<[SnaprollActionUpdate, number]>()
   const draw = vi.fn<[SnaprollActionDraw, number]>()
diff --git a/src/index.ts b/src/index.ts
index 01d7ceb..2f1ef44 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -16,12 +16,17 @@ export interface SnaprollActionUpdate extends Omit<SnaprollActionBegin, 'type'>
 
 export interface SnaprollActionDraw extends Omit<SnaprollActionUpdate, 'type'> {
   delta: number
-  panic: boolean
   type: SnaprollActionType.Draw
 }
 
 export type SnaprollAction = SnaprollActionBegin | SnaprollActionDraw | SnaprollActionUpdate
 
+type SnaprollAction_ = Partial<
+  { type: SnaprollActionType } & Omit<SnaprollActionBegin, 'type'> &
+    Omit<SnaprollActionDraw, 'type'> &
+    Omit<SnaprollActionUpdate, 'type'>
+>
+
 export interface SnaprollSubscriptionControls {
   pause: () => void
   resume: () => void
@@ -40,12 +45,6 @@ interface SnaprollSubscriptionState {
   value: SnaprollSubscription
 }
 
-type SnaprollActionMultiplexer = Partial<
-  { type: SnaprollActionType } & Omit<SnaprollActionBegin, 'type'> &
-    Omit<SnaprollActionDraw, 'type'> &
-    Omit<SnaprollActionUpdate, 'type'>
->
-
 const DEFAULT_TIMESTEP = 1000 / 60
 const FRAME_DELTA_EMA_ALPHA = 0.1
 const FRAME_DELTA_EMA_ALPHA_REVERSE = 0.9
@@ -102,27 +101,22 @@ const STATES = {
   [TypeState.Paused]: 'paused',
 } as const
 
-const calculateUpdateStepsMax = (timestep: number) => Math.round(4000 / timestep)
-
-interface State {
+interface Store {
   frameDelta: number
   frameDeltaEMA: number
   frameDeltaMin: number
   frameId: number
-  panic: boolean
-  pool: SnaprollActionMultiplexer
+  pool: SnaprollAction_
+  state: TypeState
   subscriptions: SnaprollSubscriptionState[]
   timestampLast: number
   timestep: number
-  type: TypeState
-  updateSteps: number
-  updateStepsMax: number
 }
 
-const createState = (
+const createStore = (
   options: { type?: TypeState } & Partial<SnaprollOptions>,
   subscriptions: SnaprollSubscriptionState[] = [],
-): State => {
+): Store => {
   assertOptions(options)
 
   // An exponential moving average of the frames per second.
@@ -146,33 +140,18 @@ const createState = (
   // average was updated (i.e. since `lastFpsUpdate`).
   // const frameDeltaEMAFramesSinceLastUpdate = 0
 
-  // The number of times update() is called in a given frame. This is only
-  // relevant inside of animate(), but a reference is held externally so that
-  // this variable is not marked for garbage collection every time the main
-  // loop runs.
-  const updateSteps = 0
-  const updateStepsMax = calculateUpdateStepsMax(timestep)
-
   // The minimum amount of time in milliseconds that must pass since the last
   // frame was executed before another frame can be executed.
   const frameDeltaMin = 1000 / (options.fps ?? 60)
 
-  const type = options.type ?? TypeState.Paused
-
-  // Whether the simulation has fallen too far behind real time.
-  // Specifically, `panic` will be set to `true` if too many updates occur in
-  // one frame. This is only relevant inside of animate(), but a reference is
-  // held externally so that this variable is not marked for garbage
-  // collection every time the main loop runs.
-  const panic = false
+  const state = options.type ?? TypeState.Paused
 
   // The ID of the currently executing frame. Used to cancel frames when
   // stopping the loop.
   const frameId = 0
 
-  const pool: SnaprollActionMultiplexer = {
+  const pool: SnaprollAction_ = {
     delta: undefined,
-    panic: undefined,
     timestamp: undefined,
     timestep: undefined,
     type: undefined,
@@ -185,24 +164,80 @@ const createState = (
     // frameDeltaEMALastUpdate,
     frameDeltaMin,
     frameId,
-    panic,
     pool,
+    state,
     subscriptions,
     timestampLast,
     timestep,
-    type,
-    updateSteps,
-    updateStepsMax,
   }
 }
 
-export const snaproll = (options: Partial<SnaprollOptions> = {}) => {
-  let state = createState(options)
-  const pool = state.pool
+const createAnimate = (store: Store, callback: () => void) => {
+  const pool = store.pool
+
+  function animate(timestamp: number) {
+    store.frameId = requestAnimationFrame(animate)
+    const { frameDeltaEMA, frameDeltaMin, timestampLast, timestep } = store
+    const frameDelta = timestamp - timestampLast
+    const frameDeltaDeviation = Math.max(0, frameDeltaMin - frameDelta) / frameDeltaEMA
+
+    if (timestampLast + frameDeltaDeviation * frameDeltaMin > timestamp) {
+      return
+    }
+
+    if (__ENVIRONMENT__ !== 'production') {
+      performance.mark('animate-start')
+    }
+
+    store.frameDeltaEMA =
+      1 / (FRAME_DELTA_EMA_ALPHA / frameDelta + FRAME_DELTA_EMA_ALPHA_REVERSE / frameDeltaEMA)
+
+    store.frameDelta += frameDelta
+    store.timestampLast = timestamp
 
-  const multiplexer = (action: SnaprollActionMultiplexer) => {
-    const reference = state.subscriptions
+    pool.type = SnaprollActionType.Begin
+    pool.timestamp = timestamp
+
+    callback()
+
+    while (store.frameDelta >= timestep) {
+      pool.type = SnaprollActionType.Update
+      pool.timestep = timestep
+      callback()
+
+      store.frameDelta -= timestep
+    }
+
+    pool.type = SnaprollActionType.Draw
+    pool.delta = store.frameDelta
+    callback()
+
+    if (__ENVIRONMENT__ !== 'production') {
+      performance.measure('animate', { end: performance.now(), start: 'animate-start' })
+    }
+  }
+
+  return animate
+}
+
+// const frameDeltaEMAUpdateInterval = 300
+// if (timestamp > state.frameDeltaEMALastUpdate + frameDeltaEMAUpdateInterval) {
+//   state.frameDeltaEMA =
+//     1 /
+//     ((frameDeltaEMAAlpha * state.frameDeltaEMAFramesSinceLastUpdate) /
+//       (timestamp - state.frameDeltaEMALastUpdate) +
+//       (1 - frameDeltaEMAAlpha) / state.frameDeltaEMA)
+//
+//   state.frameDeltaEMALastUpdate = timestamp
+//   state.frameDeltaEMAFramesSinceLastUpdate = 0
+// }
+// state.frameDeltaEMAFramesSinceLastUpdate++
+
+export class Snaproll {
+  private readonly callback = () => {
+    const reference = this.store.subscriptions
     const length = reference.length
+    const action = this.store.pool
 
     for (let index = 0; index < length; index++) {
       const subscription = reference[index]
@@ -213,211 +248,162 @@ export const snaproll = (options: Partial<SnaprollOptions> = {}) => {
     }
   }
 
-  const resume = () => {
-    if (state.type === TypeState.Active) {
-      return
-    }
-
-    state.type = subscriptionActive(state.subscriptions) ? TypeState.Active : TypeState.Idle
-
-    if (state.type === TypeState.Active) {
-      state.frameId = requestAnimationFrame((timestamp) => {
-        state.timestampLast = timestamp
-        // state.frameDeltaEMALastUpdate = timestamp
-        // state.frameDeltaEMAFramesSinceLastUpdate = 0
+  private store: Store
 
-        state.frameId = requestAnimationFrame(animate)
-      })
-    }
+  constructor(options: Partial<SnaprollOptions> = {}) {
+    this.store = createStore(options)
   }
 
-  const idle = () => {
-    if (state.type !== TypeState.Active || subscriptionActive(state.subscriptions)) {
+  private idle() {
+    const store = this.store
+
+    if (store.state !== TypeState.Active || subscriptionActive(store.subscriptions)) {
       return
     }
 
-    cancelAnimationFrame(state.frameId)
-    state.type = TypeState.Idle
+    cancelAnimationFrame(store.frameId)
+    store.state = TypeState.Idle
   }
 
-  const pause = () => {
-    if (state.type === TypeState.Paused) {
+  public pause() {
+    const store = this.store
+
+    if (store.state === TypeState.Paused) {
       return
     }
 
-    if (state.type === TypeState.Active) {
-      cancelAnimationFrame(state.frameId)
+    if (store.state === TypeState.Active) {
+      cancelAnimationFrame(store.frameId)
     }
 
-    state.type = TypeState.Paused
+    store.state = TypeState.Paused
+  }
+
+  public reset(options: { keepSubscriptions?: boolean } & Partial<SnaprollOptions> = {}) {
+    const previousStore = this.store
+    const keepSubscriptions = options?.keepSubscriptions !== false
+
+    // preserve the options
+    this.store = createStore(
+      {
+        fps: options.fps ?? previousStore.frameDeltaEMA,
+        timestep: options.timestep ?? previousStore.timestep,
+        type: previousStore.state,
+      },
+      keepSubscriptions ? [...previousStore.subscriptions] : undefined,
+    )
+  }
+
+  public resetFrameDelta() {
+    const oldFrameDelta = this.store.frameDelta
+    this.store.frameDelta = 0
+
+    // The cumulative amount of elapsed time in milliseconds that has not yet
+    // been simulated, but is being discarded as a result of calling this
+    // function.
+    return oldFrameDelta
   }
 
-  const animate = (timestamp: number) => {
-    state.frameId = requestAnimationFrame(animate)
-    const frameDelta = timestamp - state.timestampLast
-    const frameDeltaDeviation = Math.max(0, state.frameDeltaMin - frameDelta) / state.frameDeltaEMA
+  public resume() {
+    const store = this.store
 
-    if (state.timestampLast + frameDeltaDeviation * state.frameDeltaMin > timestamp) {
+    if (store.state === TypeState.Active) {
       return
     }
 
-    // TODO: esroll variable for build
-    if (__ENVIRONMENT__ !== 'production') {
-      performance.mark('animate-start')
+    store.state = subscriptionActive(store.subscriptions) ? TypeState.Active : TypeState.Idle
+
+    if (store.state === TypeState.Active) {
+      store.frameId = requestAnimationFrame((timestamp) => {
+        store.timestampLast = timestamp
+        // state.frameDeltaEMALastUpdate = timestamp
+        // state.frameDeltaEMAFramesSinceLastUpdate = 0
+
+        store.frameId = requestAnimationFrame(createAnimate(store, this.callback))
+      })
     }
+  }
 
-    state.frameDeltaEMA =
-      1 / (FRAME_DELTA_EMA_ALPHA / frameDelta + FRAME_DELTA_EMA_ALPHA_REVERSE / state.frameDeltaEMA)
-
-    // const frameDeltaEMAUpdateInterval = 300
-    // if (timestamp > state.frameDeltaEMALastUpdate + frameDeltaEMAUpdateInterval) {
-    //   state.frameDeltaEMA =
-    //     1 /
-    //     ((frameDeltaEMAAlpha * state.frameDeltaEMAFramesSinceLastUpdate) /
-    //       (timestamp - state.frameDeltaEMALastUpdate) +
-    //       (1 - frameDeltaEMAAlpha) / state.frameDeltaEMA)
-    //
-    //   state.frameDeltaEMALastUpdate = timestamp
-    //   state.frameDeltaEMAFramesSinceLastUpdate = 0
-    // }
-    // state.frameDeltaEMAFramesSinceLastUpdate++
-
-    state.frameDelta += frameDelta
-    state.timestampLast = timestamp
+  public subscribe(
+    value: SnaprollSubscription,
+    options?: { activate?: boolean },
+  ): SnaprollSubscriptionControls {
+    // eslint-disable-next-line typescript/no-this-alias
+    const self = this
+    const state = self.store
+
+    if (subscriptionFind(value, state.subscriptions) === undefined) {
+      const reference = state.subscriptions
+      const active = options?.activate !== false
+      state.subscriptions = [...reference, { active, value }]
+
+      if (state.state === TypeState.Idle) {
+        self.resume()
+      }
+    }
 
-    pool.type = SnaprollActionType.Begin
-    pool.timestamp = timestamp
+    return {
+      pause() {
+        const subscriptions = state.subscriptions
+        const subscription = subscriptionFind(value, subscriptions)
 
-    multiplexer(pool)
+        if (subscription === undefined) {
+          return
+        }
 
-    state.updateSteps = 0
-    while (state.frameDelta >= state.timestep) {
-      pool.type = SnaprollActionType.Update
-      pool.timestep = state.timestep
-      multiplexer(pool)
+        subscription.active = false
+        self.idle()
+      },
+      resume() {
+        const subscriptions = state.subscriptions
+        const subscription = subscriptionFind(value, subscriptions)
 
-      state.frameDelta -= state.timestep
+        if (subscription === undefined) {
+          return
+        }
 
-      // 4 seconds
-      if (++state.updateSteps >= state.updateStepsMax) {
-        state.panic = true
-        break
-      }
-    }
+        subscription.active = true
 
-    pool.type = SnaprollActionType.Draw
-    pool.timestep = state.timestep
-    pool.delta = state.frameDelta
-    pool.panic = state.panic
-    multiplexer(pool)
+        if (state.state === TypeState.Idle) {
+          self.resume()
+        }
+      },
+      unsubscribe() {
+        const subscriptions = state.subscriptions
+        const subscription = subscriptionFind(value, subscriptions)
 
-    state.panic = false
+        if (subscription === undefined) {
+          return
+        }
 
-    if (__ENVIRONMENT__ !== 'production') {
-      performance.measure('animate', { end: performance.now(), start: 'animate-start' })
+        state.subscriptions = subscriptionRemove(value, subscriptions)
+        self.idle()
+      },
     }
   }
 
-  return {
-    get fps() {
-      // return 1000 / state.frameDeltaEMA
-      return state.frameDeltaEMA !== 0 ? 1000 / state.frameDeltaEMA : 0
-    },
-    set fps(value: number) {
-      assertIsFPS(value)
-
-      state.frameDeltaMin = 1000 / value
-    },
-    pause,
-    reset(options: { keepSubscriptions?: boolean } & Partial<SnaprollOptions> = {}) {
-      const keepSubscriptions = options?.keepSubscriptions !== false
-
-      // preserve the options
-      state = createState(
-        {
-          fps: options.fps ?? state.frameDeltaEMA,
-          timestep: options.timestep ?? state.timestep,
-          type: state.type,
-        },
-        keepSubscriptions ? [...state.subscriptions] : undefined,
-      )
-    },
-    resetFrameDelta() {
-      const oldFrameDelta = state.frameDelta
-      state.frameDelta = 0
-
-      // The cumulative amount of elapsed time in milliseconds that has not yet
-      // been simulated, but is being discarded as a result of calling this
-      // function.
-      return oldFrameDelta
-    },
-    resume,
-    get state() {
-      return STATES[state.type]
-    },
-    subscribe(
-      value: SnaprollSubscription,
-      options?: { activate?: boolean },
-    ): SnaprollSubscriptionControls {
-      if (subscriptionFind(value, state.subscriptions) === undefined) {
-        const reference = state.subscriptions
-        const active = options?.activate !== false
-        state.subscriptions = [...reference, { active, value }]
-
-        if (state.type === TypeState.Idle) {
-          resume()
-        }
-      }
+  public get fps() {
+    // return 1000 / state.frameDeltaEMA
+    return this.store.frameDeltaEMA !== 0 ? 1000 / this.store.frameDeltaEMA : 0
+  }
 
-      return {
-        pause: () => {
-          const subscriptions = state.subscriptions
-          const subscription = subscriptionFind(value, subscriptions)
-
-          if (subscription === undefined) {
-            return
-          }
-
-          subscription.active = false
-          idle()
-        },
-        resume: () => {
-          const subscriptions = state.subscriptions
-          const subscription = subscriptionFind(value, subscriptions)
-
-          if (subscription === undefined) {
-            return
-          }
-
-          subscription.active = true
-
-          if (state.type === TypeState.Idle) {
-            resume()
-          }
-        },
-        unsubscribe() {
-          const subscriptions = state.subscriptions
-          const subscription = subscriptionFind(value, subscriptions)
-
-          if (subscription === undefined) {
-            return
-          }
-
-          state.subscriptions = subscriptionRemove(value, subscriptions)
-          idle()
-        },
-      }
-    },
-    // How many milliseconds should be simulated by every update.
-    get timestep() {
-      return state.timestep
-    },
-    // How many milliseconds should be simulated by every update.
-    set timestep(value: number) {
-      assertIsTimestep(value)
-
-      state.timestep = value
-      state.updateStepsMax = calculateUpdateStepsMax(state.timestep)
-    },
+  public set fps(value: number) {
+    assertIsFPS(value)
+
+    this.store.frameDeltaMin = 1000 / value
+  }
+
+  public get state() {
+    return STATES[this.store.state]
+  }
+
+  public get timestep() {
+    return this.store.timestep
+  }
+
+  public set timestep(value: number) {
+    assertIsTimestep(value)
+
+    this.store.timestep = value
   }
 }