chore: Refactor event listener example using Composition APIs

Author: mirkobrombin

docs/examples/components/event_listener_component.go

@@ -5,30 +5,31 @@ package components
 import (
 	_ "embed"
 
+	"github.com/rfwlab/rfw/v1/composition"
 	core "github.com/rfwlab/rfw/v1/core"
-	events "github.com/rfwlab/rfw/v1/events"
 )
 
 //go:embed templates/event_listener_component.rtml
 var eventListenerComponentTpl []byte
 
 func NewEventListenerComponent() *core.HTMLComponent {
 	c := core.NewComponent("EventListenerComponent", eventListenerComponentTpl, nil)
-	// Always start from zero to avoid residual persisted values.
-	c.Store.Set("clicks", float64(0))
-	c.SetOnMount(func(cmp *core.HTMLComponent) {
-		btn := cmp.GetRef("clickBtn")
-		ch := events.Listen("click", btn.Value)
-		go func() {
-			for range ch {
-				switch v := cmp.Store.Get("clicks").(type) {
-				case float64:
-					cmp.Store.Set("clicks", v+1)
-				case int:
-					cmp.Store.Set("clicks", float64(v)+1)
-				}
-			}
-		}()
+	cmp := composition.Wrap(c)
+
+	// Register event handler before mount so the template can bind it.
+	cmp.On("increment", func() {
+		switch v := c.Store.Get("clicks").(type) {
+		case float64:
+			c.Store.Set("clicks", v+1)
+		case int:
+			c.Store.Set("clicks", v+1)
+		default:
+			c.Store.Set("clicks", 1)
+		}
 	})
+
+	// Initialize store on mount.
+	cmp.SetOnMount(func(*core.HTMLComponent) { c.Store.Set("clicks", 0) })
+
 	return c
 }

docs/examples/components/templates/event_listener_component.rtml

@@ -1,7 +1,7 @@
 <root>
     <div class="p-4 pt-0">
         <h2 class="text-xl font-bold mb-4">Event Listener Component</h2>
-        <button [clickBtn] class="px-4 py-2 border border-gray-300 dark:border-zinc-700 bg-lightbg dark:bg-darkbg text-black dark:text-white font-semibold rounded-full hover:bg-white hover:text-red-600 transition">Click me</button>
+        <button class="px-4 py-2 border border-gray-300 dark:border-zinc-700 bg-lightbg dark:bg-darkbg text-black dark:text-white font-semibold rounded-full hover:bg-white hover:text-red-600 transition" @on:click:increment>Click me</button>
         <p class="mt-4">Clicks: @store:app.default.clicks</p>
     </div>
 </root>