dispatch event siblings (#25)

* dispatch events to siblings

* add comments

* update alpine js plugin

alpinejs-plugin/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livefir/fir",
-  "version": "0.0.23",
+  "version": "0.0.24",
   "repository": {
     "type": "git",
     "url": "https://github.com/livefir/fir"

alpinejs-plugin/src/index.js

@@ -337,8 +337,21 @@ const Plugin = (Alpine) => {
                 document.dispatchEvent(event)
                 return
             }
-            const eventSourceElement = document.getElementById(operation.eid)
-            eventSourceElement.dispatchEvent(event)
+
+            const elem = document.getElementById(operation.eid)
+            const getSiblings = (elm) =>
+                elm &&
+                elm.parentNode &&
+                [...elm.parentNode.children].filter(
+                    (node) =>
+                        node != elm &&
+                        (node.hasAttribute(`@${operation.selector}`) ||
+                            node.hasAttribute(`x-on:${operation.selector}`))
+                )
+
+            const sibs = getSiblings(elem)
+            sibs.forEach((sib) => sib.dispatchEvent(event))
+            elem.dispatchEvent(event)
         },
     }
 

examples/twitter/routes/index.html

@@ -20,7 +20,8 @@
             style="margin-top:1rem;margin-bottom:1rem;">
             <input type="text" name="body" placeholder="a new tweet" />
             <!-- validation error for the name=body set by ctx.FieldError(...) -->
-
+            <!-- $fir.replace replaces the content of the element on which it is invoked -->
+            <!-- $fir.replaceEl replaces the element on which it is invoked -->
             <p
                 id="body-err"
                 @fir:create-tweet:body:error.window="$fir.replace()">
@@ -34,28 +35,35 @@
         <div id="tweets" @fir:create-tweet.window="$fir.appendEl()">
             {{ range .tweets }}
                 <!-- block "tweet*" matches the element id of event listeners: 
-                @fir:like-tweet(tweet-{{ .ID }}),
                 @fir:delete-tweet(tweet-{{ .ID }})
                 @fir:create-tweet(tweets)
-                The block is re-rendered on the server aftter the event is emitted by $fir.xxxEl()
-                The output html is patched(replaceEl,removeEl,appendEl) to the element on the client.
+                Similary, block "like-tweet*" matches the element id of event listeners:
+                @fir:like-tweet(tweet-{{ .ID }})
+                The block is re-rendered on the server aftter the event is emitted by $fir.submit()
+                The output html is patched(removeEl,appendEl,replace,) to the element on the client.
                -->
                 {{ block "tweet*" . }}
                     <div
                         id="tweet-{{ .ID }}"
-                        @fir:like-tweet="$fir.replaceEl()"
                         @fir:delete-tweet="$fir.removeEl()"
                         style="display: flex;margin-top:1rem;margin-bottom:1rem;">
                         <div style="margin-right:1rem">
                             Tweet:
                             {{ .Body }}
                         </div>
-                        <div style="margin-right:1rem">
-                            Likes:
-                            {{ .LikesCount }}
+                        <div
+                            id="like-tweet-{{ .ID }}"
+                            @fir:like-tweet="$fir.replace()"
+                            style="margin-right:1rem">
+                            {{ block "like-tweet*" . }}
+                                <div>
+                                    Likes:
+                                    {{ .LikesCount }}
+                                </div>
+                            {{ end }}
                         </div>
                         <form
-                            id="tweet-{{ .ID }}"
+                            id="update-tweet-{{ .ID }}"
                             method="post"
                             @submit.prevent="$fir.submit()"
                             style="margin-right:1rem">

examples/twitter/routes/partials/header.html

@@ -14,10 +14,11 @@
     <link
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/[email protected]/css/bulma.min.css" />
-    {{/* <script defer src="http://localhost:8000/cdn.js"></script> */}}
-    <script
+    <script defer src="http://localhost:8000/cdn.js"></script>
+    {{/* <script
         defer
         src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script>
+    */}}
 
     <script
         defer

go.mod

@@ -5,6 +5,7 @@ go 1.19
 require (
 	entgo.io/ent v0.11.4
 	github.com/Masterminds/sprig/v3 v3.2.3
+	github.com/PuerkitoBio/goquery v1.8.0
 	github.com/alecthomas/chroma v0.10.0
 	github.com/alexedwards/scs/v2 v2.5.0
 	github.com/davecgh/go-spew v1.1.1
@@ -31,7 +32,6 @@ require (
 	ariga.io/atlas v0.7.3-0.20221011160332-3ca609863edd // indirect
 	github.com/Masterminds/goutils v1.1.1 // indirect
 	github.com/Masterminds/semver/v3 v3.2.0 // indirect
-	github.com/PuerkitoBio/goquery v1.8.0 // indirect
 	github.com/agext/levenshtein v1.2.1 // indirect
 	github.com/andybalholm/cascadia v1.3.1 // indirect
 	github.com/apparentlymart/go-textseg/v13 v13.0.0 // indirect

parse.go

@@ -130,7 +130,7 @@ func parseTemplate(opt routeOpt) (*template.Template, error) {
 	return layoutSetContentSet(opt)
 }
 
-func parseEventRenderMapping(allTemplates []string, eventTemplateMap map[string]string, r io.Reader) {
+func parseEventRenderMapping(rt *route, r io.Reader) {
 	doc, err := goquery.NewDocumentFromReader(r)
 	if err != nil {
 		panic(err)
@@ -140,9 +140,9 @@ func parseEventRenderMapping(allTemplates []string, eventTemplateMap map[string]
 			if strings.HasPrefix(a.Key, "@fir:") || strings.HasPrefix(a.Key, "x-on:fir:") {
 				templateName, exists := node.Attr("id")
 				if exists {
-					if !slices.Contains(allTemplates, templateName) {
+					if !slices.Contains(rt.allTemplates, templateName) {
 						// try to match the id with template as a pattern
-						for _, pattern := range allTemplates {
+						for _, pattern := range rt.allTemplates {
 							if !match.IsPattern(pattern) {
 								continue
 							}
@@ -162,7 +162,9 @@ func parseEventRenderMapping(allTemplates []string, eventTemplateMap map[string]
 					if len(parts) > 0 {
 						eventID = parts[0]
 					}
-					eventTemplateMap[eventID] = templateName
+					rt.Lock()
+					rt.eventTemplateMap[eventID] = templateName
+					rt.Unlock()
 				}
 			}
 		}

route.go

@@ -10,6 +10,7 @@ import (
 	"os"
 	"path/filepath"
 	"strings"
+	"sync"
 
 	"github.com/golang/glog"
 	"github.com/google/uuid"
@@ -152,6 +153,7 @@ type route struct {
 	allTemplates     []string
 	eventTemplateMap map[string]string
 	routeOpt
+	sync.RWMutex
 }
 
 func newRoute(cntrl *controller, routeOpt *routeOpt) *route {
@@ -605,7 +607,7 @@ func (rt *route) buildEventRenderMapping() {
 		pagePath := filepath.Join(opt.publicDir, page)
 		// is layout html content or a file/directory
 		if isFileOrString(pagePath, opt) {
-			parseEventRenderMapping(rt.allTemplates, rt.eventTemplateMap, strings.NewReader(page))
+			parseEventRenderMapping(rt, strings.NewReader(page))
 		} else {
 			// compile layout
 			commonFiles := []string{pagePath}
@@ -619,15 +621,15 @@ func (rt *route) buildEventRenderMapping() {
 					if err != nil {
 						panic(err)
 					}
-					parseEventRenderMapping(rt.allTemplates, rt.eventTemplateMap, r)
+					parseEventRenderMapping(rt, r)
 				}
 			} else {
 				for _, v := range commonFiles {
 					r, err := os.OpenFile(v, os.O_RDONLY, 0644)
 					if err != nil {
 						panic(err)
 					}
-					parseEventRenderMapping(rt.allTemplates, rt.eventTemplateMap, r)
+					parseEventRenderMapping(rt, r)
 				}
 
 			}