Fix the `__delay` modifier (#721)

CHANGELOG.md

@@ -10,4 +10,5 @@ Each tagged version of Datastar is accompanied by a release note. Read the [rele
 
 - Fixed a bug in which `data-signals` was being reapplied each time any attribute changed on an element ([#709](https://github.com/starfederation/datastar/issues/709)).
 - Fixed a bug in which focus was not being restored to input elements after merging fragments ([#710](https://github.com/starfederation/datastar/issues/710)).
+- Fixed a bug in which the `__delay` modifier was being ignored ([#720](https://github.com/starfederation/datastar/issues/720)).
 - Fixed a bug in which signals bound to text input elements with a `value` attribute were being reset to the value when the entered value was empty.

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, throttle } from '../../../../utils/timing'
+import { debounce, delay, throttle } from '../../../../utils/timing'
 import { supportsViewTransitions } from '../../../../utils/view-transtions'
 import type { Signal } from '../../../../vendored/preact-core'
 
@@ -42,10 +42,8 @@ export const On: AttributePlugin = {
 
     const delayArgs = mods.get('delay')
     if (delayArgs) {
-      const delay = tagToMs(delayArgs)
+      const wait = tagToMs(delayArgs)
-      setTimeout(() => {
+      callback = delay(callback, wait)
-        callback()
-      }, delay)
     }
 
     const debounceArgs = mods.get('debounce')
@@ -81,7 +79,7 @@ export const On: AttributePlugin = {
 
     if (key === 'load') {
       // Delay the callback to the next microtask so that indicators can be set
-      setTimeout(() => callback(), 0)
+      setTimeout(callback, 0)
       return () => {}
     }
 
@@ -92,6 +90,7 @@ export const On: AttributePlugin = {
         duration = tagToMs(durationArgs)
         const leading = tagHas(durationArgs, 'leading', false)
         if (leading) {
+          // TODO: check if this should be removed, since we use attribute hashes
           // Remove `.leading` from the dataset so the callback is only ever called on page load
           el.dataset[rawKey.replace('.leading', '')] = value
           delete el.dataset[rawKey]

library/src/utils/timing.ts

@@ -1,5 +1,16 @@
 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,

sdk/go/consts.go

@@ -7,8 +7,8 @@ import "time"
 const (
     DatastarKey = "datastar"
     Version                   = "1.0.0-beta.8"
-    VersionClientByteSize     = 39825
+    VersionClientByteSize     = 39718
-    VersionClientByteSizeGzip = 14893
+    VersionClientByteSizeGzip = 14873
 
     //region Default durations
 

site/routes_tests.go

@@ -42,6 +42,7 @@ func setupTests(ctx context.Context, router chi.Router) (err error) {
 				{ID: "merge_fragment_signals"},
 				{ID: "merge_fragment_whitespace"},
 				{ID: "on_load"},
+				{ID: "on_load_delay"},
 				{ID: "radio_input"},
 				{ID: "ref"},
 				{ID: "remove_fragment"},

site/smoketests/on_load_delay_test.go

@@ -0,0 +1,9 @@
+package smoketests
+
+import (
+	"testing"
+)
+
+func TestUnitOnLoadDelay(t *testing.T) {
+	setupPageTestOnDelay(t, "tests/on_load_delay")
+}

site/smoketests/setup_test.go

@@ -6,6 +6,7 @@ import (
 	"os"
 	"sync"
 	"testing"
+	"time"
 
 	"github.com/delaneyj/toolbelt"
 	"github.com/go-rod/rod"
@@ -77,6 +78,19 @@ func setupPageTestOnLoad(t *testing.T, subURL string) {
 	})
 }
 
+func setupPageTestOnDelay(t *testing.T, subURL string) {
+	setupPageTest(t, subURL, func(runner runnerFn) {
+		runner(subURL, func(t *testing.T, page *rod.Page) {
+			result := page.MustElement("#result")
+			page.WaitStable(100 * time.Millisecond)
+			page.MustWaitIdle()
+			after, err := result.Text()
+			assert.NoError(t, err)
+			assert.Contains(t, after, "1")
+		})
+	})
+}
+
 func setupPageTestOnClick(t *testing.T, subURL string) {
 	setupPageTest(t, subURL, func(runner runnerFn) {
 		runner(subURL, func(t *testing.T, page *rod.Page) {

site/static/md/tests/on_load_delay.md

@@ -0,0 +1,10 @@
+# On Load Delay
+
+Tests that the on load event is triggered with a delay.
+
+<div data-signals-result="false" data-on-load__delay.100ms="$result = true" >
+  Result:
+  <code id="result" data-text="$result ? 1 : 0">0</code>
+  <hr />
+  Expected result on wait: <code>1</code>
+</div>