event detail html state (#51)

* event.html, event.state * refactor helpers * twitter example: alpinejs dev build example
livefir · Feb 18, 2024 · 2cbe5b8 · 2cbe5b8
1 parent 62d6207
commit 2cbe5b8
Show file tree

Hide file tree

Showing 7 changed files with 66 additions and 82 deletions.
diff --git a/alpinejs-plugin/src/index.js b/alpinejs-plugin/src/index.js
@@ -73,76 +73,44 @@ const Plugin = (Alpine) => {
                     //console.log(el)
                     //console.log(event)
                     //console.log(event.detail)
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
                     let toHTML = el.cloneNode(false)
-                    toHTML.innerHTML = eventDetail.trim()
+                    toHTML.innerHTML = eventHTML(event, detail).trim()
                     morphElement(el, toHTML.outerHTML)
                 }
             },
             replaceEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    morphElement(el, eventDetail)
+                    morphElement(el, eventHTML(event, detail))
                 }
             },
             appendEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    appendElement(el, eventDetail)
+                    appendElement(el, eventHTML(event, detail))
                 }
             },
             prependEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    prependElement(el, eventDetail)
+                    prependElement(el, eventHTML(event, detail))
                 }
             },
             afterEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    afterElement(el, eventDetail)
+                    afterElement(el, eventHTML(event, detail))
                 }
             },
             beforeEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    beforeElement(el, eventDetail)
+                    beforeElement(el, eventHTML(event, detail))
                 }
             },
             removeEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    removeElement(el, eventDetail)
+                    removeElement(el, eventHTML(event, detail))
                 }
             },
             removeParentEl(detail) {
                 return function (event) {
-                    let eventDetail = event.detail
-                    if (detail) {
-                        eventDetail = detail
-                    }
-                    removeParentElement(el, eventDetail)
+                    removeParentElement(el, eventHTML(event, detail))
                 }
             },
             emit(id, params, target) {
@@ -326,6 +294,14 @@ const Plugin = (Alpine) => {
         }
     })
 
+    const eventHTML = (event, detail) => {
+        let html = event.detail.html ? event.detail.html : ''
+        if (detail) {
+            html = detail.html ? detail.html : ''
+        }
+        return html
+    }
+
     const toElements = (htmlString) => {
         var template = document.createElement('template')
         template.innerHTML = htmlString

diff --git a/examples/twitter/routes/partials/header.html b/examples/twitter/routes/partials/header.html
@@ -1,8 +1,6 @@
 {{ define "header" }}
     <meta charset="UTF-8" />
-    <meta
-        name="description"
-        content="" />
+    <meta name="description" content="" />
     <meta
         name="viewport"
         content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=1.0" />
@@ -16,13 +14,14 @@
     <link
         rel="stylesheet"
         href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css" />
-    {{/* <script
-        defer
-        src="http://localhost:8000/cdn.js"></script>
-    */}}
-    <script
-        defer
-        src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script>
+    {{ if fir.Development }}
+        <script defer src="http://localhost:8000/cdn.js"></script>
+    {{ else }}
+        <script
+            defer
+            src="https://unpkg.com/@livefir/fir@latest/dist/fir.min.js"></script>
+    {{ end }}
+
 
     <script
         defer

diff --git a/internal/dom/dom.go b/internal/dom/dom.go
@@ -4,10 +4,16 @@ import (
 	"github.com/livefir/fir/internal/eventstate"
 )
 
+type Detail struct {
+	HTML  string `json:"html,omitempty"`
+	State any    `json:"state,omitempty"`
+	Data  any    `json:"data,omitempty"`
+}
+
 type Event struct {
 	Type   *string `json:"type,omitempty"`
 	Target *string `json:"target,omitempty"`
-	Detail any     `json:"detail,omitempty"`
+	Detail *Detail `json:"detail,omitempty"`
 	Key    *string `json:"key,omitempty"`
 	// Private fields
 	ID    string          `json:"-"`

diff --git a/pubsub/pubsub.go b/pubsub/pubsub.go
@@ -9,20 +9,20 @@ import (
 	"github.com/goccy/go-json"
 
 	"github.com/go-redis/redis/v8"
+	"github.com/livefir/fir/internal/dom"
 	"github.com/livefir/fir/internal/eventstate"
 	"github.com/livefir/fir/internal/logger"
 )
 
 // code modeled after https://github.com/purposeinplay/go-commons/blob/v0.6.2/pubsub/inmem/pubsub.go
 
 type Event struct {
-	ID          *string         `json:"id"`
-	State       eventstate.Type `json:"state"`
-	Target      *string         `json:"target"`
-	Detail      any             `json:"detail"`
-	StateDetail any             `json:"state_detail"`
-	SessionID   *string         `json:"session_id"`
-	ElementKey  *string         `json:"element_key"`
+	ID         *string         `json:"id"`
+	State      eventstate.Type `json:"state"`
+	Target     *string         `json:"target"`
+	Detail     *dom.Detail     `json:"detail"`
+	SessionID  *string         `json:"session_id"`
+	ElementKey *string         `json:"element_key"`
 }
 
 // Subscription is a subscription to a channel.

diff --git a/render.go b/render.go
@@ -122,14 +122,17 @@ func buildDOMEventFromTemplate(ctx RouteContext, pubsubEvent pubsub.Event, event
 			Type:   eventType,
 			Key:    pubsubEvent.ElementKey,
 			Target: targetOrClassName(pubsubEvent.Target, getClassName(*eventType)),
-			Detail: pubsubEvent.StateDetail,
+			Detail: &dom.Detail{State: pubsubEvent.Detail.State},
 		}
 	}
 	eventType := fir(eventIDWithState, templateName)
-	templateData := pubsubEvent.Detail
+	var templateData any
+	if pubsubEvent.Detail != nil {
+		templateData = pubsubEvent.Detail.Data
+	}
 	routeTemplate := ctx.route.getTemplate().Funcs(newFirFuncMap(ctx, nil))
 	if pubsubEvent.State == eventstate.Error && pubsubEvent.Detail != nil {
-		errs, ok := pubsubEvent.Detail.(map[string]any)
+		errs, ok := pubsubEvent.Detail.Data.(map[string]any)
 		if !ok {
 			logger.Errorf("error: %s", "pubsubEvent.Detail is not a map[string]any")
 			return nil
@@ -152,7 +155,7 @@ func buildDOMEventFromTemplate(ctx RouteContext, pubsubEvent pubsub.Event, event
 		Type:   eventType,
 		Key:    pubsubEvent.ElementKey,
 		Target: targetOrClassName(pubsubEvent.Target, getClassName(*eventType)),
-		Detail: value,
+		Detail: &dom.Detail{HTML: value, State: pubsubEvent.Detail.State},
 	}
 
 }
@@ -205,14 +208,14 @@ func getUnsetErrorEvents(cch *cache.Cache, sessionID *string, events []dom.Event
 		newErrorEvents = append(newErrorEvents, dom.Event{
 			Type:   eventType,
 			Target: &target,
-			Detail: "",
 		})
 	}
 
 	return newErrorEvents
 }
 
 func buildTemplateValue(t *template.Template, templateName string, data any) (string, error) {
+	logger.Infof("template %v, templateName: %v, data: %v", t, templateName, data)
 	if t == nil {
 		return "", nil
 	}

diff --git a/render_test.go b/render_test.go
@@ -130,7 +130,7 @@ func TestGetUnsetErrorEvents(t *testing.T) {
 
 	result = getUnsetErrorEvents(cch, sessionID, events)
 	expected := []dom.Event{
-		{Type: ptr("error"), Target: ptr("target2"), Detail: ""},
+		{Type: ptr("error"), Target: ptr("target2")},
 	}
 	if !reflect.DeepEqual(result, expected) {
 		t.Errorf("Expected result %v, got: %v", expected, result)
@@ -149,7 +149,7 @@ func TestGetUnsetErrorEvents(t *testing.T) {
 	result = getUnsetErrorEvents(cch, sessionID, events)
 
 	expected = []dom.Event{
-		{Type: ptr("error2"), Target: ptr("target2"), Detail: ""},
+		{Type: ptr("error2"), Target: ptr("target2")},
 	}
 	if !reflect.DeepEqual(result, expected) {
 		t.Errorf("Expected result %v, got: %v", expected, result)

diff --git a/route.go b/route.go
@@ -12,6 +12,7 @@ import (
 	"github.com/goccy/go-json"
 
 	"github.com/gorilla/websocket"
+	"github.com/livefir/fir/internal/dom"
 	firErrors "github.com/livefir/fir/internal/errors"
 	"github.com/livefir/fir/internal/eventstate"
 	"github.com/livefir/fir/internal/logger"
@@ -453,7 +454,7 @@ func handleOnEventResult(err error, ctx RouteContext, publish eventPublisher) {
 			State:      eventstate.Error,
 			Target:     &target,
 			ElementKey: ctx.event.ElementKey,
-			Detail:     errs,
+			Detail:     &dom.Detail{Data: errs},
 			SessionID:  ctx.event.SessionID,
 		})
 		return
@@ -469,7 +470,7 @@ func handleOnEventResult(err error, ctx RouteContext, publish eventPublisher) {
 			State:      eventstate.Error,
 			Target:     &target,
 			ElementKey: ctx.event.ElementKey,
-			Detail:     errs,
+			Detail:     &dom.Detail{Data: errs},
 			SessionID:  ctx.event.SessionID,
 		})
 		return
@@ -479,30 +480,29 @@ func handleOnEventResult(err error, ctx RouteContext, publish eventPublisher) {
 			State:      eventstate.OK,
 			Target:     &target,
 			ElementKey: ctx.event.ElementKey,
-			Detail:     *errVal,
+			Detail:     &dom.Detail{Data: *errVal},
 			SessionID:  ctx.event.SessionID,
 		})
 		return
 
 	case *routeDataWithState:
 		publish(pubsub.Event{
-			ID:          &ctx.event.ID,
-			State:       eventstate.OK,
-			Target:      &target,
-			ElementKey:  ctx.event.ElementKey,
-			Detail:      *errVal.routeData,
-			StateDetail: *errVal.stateData,
-			SessionID:   ctx.event.SessionID,
+			ID:         &ctx.event.ID,
+			State:      eventstate.OK,
+			Target:     &target,
+			ElementKey: ctx.event.ElementKey,
+			Detail:     &dom.Detail{Data: *errVal.routeData, State: *errVal.stateData},
+			SessionID:  ctx.event.SessionID,
 		})
 		return
 	case *stateData:
 		publish(pubsub.Event{
-			ID:          &ctx.event.ID,
-			State:       eventstate.OK,
-			Target:      &target,
-			ElementKey:  ctx.event.ElementKey,
-			StateDetail: *errVal,
-			SessionID:   ctx.event.SessionID,
+			ID:         &ctx.event.ID,
+			State:      eventstate.OK,
+			Target:     &target,
+			ElementKey: ctx.event.ElementKey,
+			Detail:     &dom.Detail{State: *errVal},
+			SessionID:  ctx.event.SessionID,
 		})
 		return
 	default:
@@ -515,7 +515,7 @@ func handleOnEventResult(err error, ctx RouteContext, publish eventPublisher) {
 			State:      eventstate.Error,
 			Target:     &target,
 			ElementKey: ctx.event.ElementKey,
-			Detail:     errs,
+			Detail:     &dom.Detail{Data: errs},
 			SessionID:  ctx.event.SessionID,
 		})
 		return