Debounce applying plugins on page load

CHANGELOG.md

@@ -19,4 +19,5 @@ Each tagged version of Datastar is accompanied by a release note. Read the [rele
 ### Fixed
 
 - Fixed a bug in which `datastar-remove-fragments` events were not having any effect ([#664](https://github.com/starfederation/datastar/issues/664)).
-- Fixed a bug in which `datastarNaN` could be used as an auto-generated element ID ([#679](https://github.com/starfederation/datastar/issues/679)).
+- Fixed a bug in which `datastarNaN` could be used as an auto-generated element ID ([#679](https://github.com/starfederation/datastar/issues/679)).
+- Fixed a bug in which plugins were being applied to the DOM twice on page load.

library/src/engine/engine.ts

@@ -1,6 +1,6 @@
 import { Hash, elUniqId, walkDOM } from '../utils/dom'
 import { camel } from '../utils/text'
-import { delay } from '../utils/timing'
+import { debounce } from '../utils/timing'
 import { effect } from '../vendored/preact-core'
 import { DSP, DSS } from './consts'
 import { initErr, runtimeErr } from './errors'
@@ -85,11 +85,11 @@ export class Engine {
       return a.name.localeCompare(b.name)
     })
 
-    this.#delayedApply()
+    this.#debouncedApply()
   }
 
-  // Delay applying plugins to give them time to load
-  #delayedApply = delay(() => {
+  // Add a debounce so that it is only applyied once, regardless of how many times the load function is called
+  #debouncedApply = debounce(() => {
     this.#apply(document.body)
     this.#observe()
   }, 1)

library/src/plugins/official/dom/attributes/on.ts

@@ -12,7 +12,7 @@ import {
 } from '../../../../engine/types'
 import { tagHas, tagToMs } from '../../../../utils/tags'
 import { camel, modifyCasing } from '../../../../utils/text'
-import { debounce, delay, throttle } from '../../../../utils/timing'
+import { debounce, throttle } from '../../../../utils/timing'
 import { supportsViewTransitions } from '../../../../utils/view-transtions'
 import type { Signal } from '../../../../vendored/preact-core'
 
@@ -43,8 +43,10 @@ export const On: AttributePlugin = {
 
     const delayArgs = mods.get('delay')
     if (delayArgs) {
-      const wait = tagToMs(delayArgs)
-      callback = delay(callback, wait)
+      const delay = tagToMs(delayArgs)
+      setTimeout(() => {
+        callback()
+      }, delay)
     }
 
     const debounceArgs = mods.get('debounce')

library/src/utils/timing.ts

@@ -1,16 +1,5 @@
 export type TimerHandler = (...args: any[]) => void
 
-export function delay(
-  callback: TimerHandler,
-  wait: number,
-): TimerHandler {
-  return (...args: any[]) => {
-    setTimeout(() => {
-      callback(...args)
-    }, wait)
-  }
-}
-
 export function debounce(
   callback: TimerHandler,
   wait: number,