build browser assets with esbuild, remove page from args that now live in state

Author: mbertschler

.gitignore

@@ -0,0 +1 @@
+examples/components/dist

examples/components/go.mod

@@ -3,6 +3,7 @@ module github.com/mbertschler/blocks/components
 go 1.20
 
 require (
+	github.com/evanw/esbuild v0.17.16
 	github.com/gin-gonic/gin v1.9.0
 	github.com/mbertschler/blocks v1.0.0
 )

examples/components/go.sum

@@ -7,6 +7,8 @@ github.com/chenzhuoyu/base64x v0.0.0-20221115062448-fe3a3abad311/go.mod h1:b583j
 github.com/davecgh/go-spew v1.1.0/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
 github.com/davecgh/go-spew v1.1.1 h1:vj9j/u1bqnvCEfJOwUhtlOARqs3+rkHYY13jYWTU97c=
 github.com/davecgh/go-spew v1.1.1/go.mod h1:J7Y8YcW2NihsgmVo/mv3lAwl/skON4iLHjSsI+c5H38=
+github.com/evanw/esbuild v0.17.16 h1:Fd5Ugun51MfOAq8tviGkVIADL8tSOtAAVaUGjODHBBo=
+github.com/evanw/esbuild v0.17.16/go.mod h1:iINY06rn799hi48UqEnaQvVfZWe6W9bET78LbvN8VWk=
 github.com/gin-contrib/sse v0.1.0 h1:Y/yl/+YNO8GZSjAhjMsSuLt29uWRFHdHYUb5lYOV9qE=
 github.com/gin-contrib/sse v0.1.0/go.mod h1:RHrZQHXnP2xjPF+u1gW/2HnVO7nvIa9PG3Gm+fLHvGI=
 github.com/gin-gonic/gin v1.9.0 h1:OjyFBKICoexlu99ctXNR2gg+c5pKrKMuyjgARg9qeY8=
@@ -65,6 +67,7 @@ golang.org/x/crypto v0.5.0 h1:U/0M97KRkSFvyD/3FSmdP5W5swImpNgle/EHFhOsQPE=
 golang.org/x/crypto v0.5.0/go.mod h1:NK/OQwhpMQP3MwtdjgLlYHnH9ebylxKWv3e0fK+mkQU=
 golang.org/x/net v0.7.0 h1:rJrUqqhjsgNp7KqAIc25s9pZnjU7TUcSY7HcVZjdn1g=
 golang.org/x/net v0.7.0/go.mod h1:2Tu9+aMcznHK/AK1HMvgo6xiTLG5rD5rZLDS+rp2Bjs=
+golang.org/x/sys v0.0.0-20220715151400-c0bba94af5f8/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.0.0-20220811171246-fbc7d0a398ab/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=
 golang.org/x/sys v0.5.0 h1:MUK/U/4lj1t1oPg0HfuXDN/Z1wv31ZJ/YcPiGccS4DU=
 golang.org/x/sys v0.5.0/go.mod h1:oPkhp1MJrh7nUepCBck5+mAzfO9JrbApNNgaTdGDITg=

examples/components/js/guiapi.js

@@ -1,12 +1,14 @@
 "use strict";
 
-var callableFunctions = {}
+export var callableFunctions = {}
+
+var state = null;
 
 const debugGuiapi = true
 
-function guiapi(name, args, callback) {
+export function guiapi(name, args, callback) {
     if (debugGuiapi) {
-        console.log("guiapi", name, args)
+        console.log("guiapi", "action:", name, "args:", args, "state:", state)
     }
     if (!callback) {
         callback = () => { }
@@ -161,6 +163,15 @@ function hydrateInit(el) {
     el.classList.remove("ga")
 }
 
-function setupGuiapi() {
+export function setupGuiapi() {
+    if (window.state) {
+        state = window.state
+    }
     hydrate()
+}
+
+export default {
+    guiapi,
+    callableFunctions,
+    setupGuiapi,
 }

examples/components/js/main.js

@@ -1 +1,3 @@
-console.log("hello from main.js")
+import "../css/main.css"
+import "./todolist.js"
+

examples/components/js/todolist.js

@@ -1,5 +1,7 @@
 "use strict";
 
+import { guiapi, setupGuiapi, callableFunctions } from "./guiapi.js"
+
 const EnterKey = "Enter"
 const EscapeKey = "Escape"
 
@@ -17,19 +19,19 @@ function initEdit(element, args) {
         if (stoppedEditing) {
             return
         }
-        guiapi("TodoList.UpdateItem", { id: args.id, text: event.target.value, page: args.page });
+        guiapi("TodoList.UpdateItem", { id: args.id, text: event.target.value });
         return false;
     })
     element.addEventListener("keydown", function (event) {
         if (event.key == EscapeKey) {
             stoppedEditing = true
-            guiapi("TodoList.EditItem", { id: -1, page: args.page })
+            guiapi("TodoList.EditItem", { id: 0 })
             return false;
         }
         if (event.key != EnterKey) {
             return false;
         }
-        guiapi("TodoList.UpdateItem", { id: args.id, text: event.target.value, page: args.page });
+        guiapi("TodoList.UpdateItem", { id: args.id, text: event.target.value });
     })
     element.focus()
 }

examples/components/main.go

@@ -1,25 +1,16 @@
 package main
 
 import (
+	"fmt"
 	"log"
 	"net/http"
+
+	"github.com/evanw/esbuild/pkg/cli"
 )
 
 // TODO:
-// -[x] cookie based session
-// -[x] guiapi
-// -[x] make the storage swappable
-// -[x] counter demo
-// -[x] turn it into a reusable component
-// -[ ] extract page registration from component
-// -[ ] add a second page
-// -[ ] TODO MVC example?
-// -[ ] https://github.com/tastejs/todomvc/blob/master/app-spec.md
-
-// maybe later:
-// -[ ] offer cockroachdb as storage
-// -[ ] text field for your name
-// -[ ] esbuild integration for more complex JS and importing
+// -[x] esbuild integration for more complex JS and importing
+// -[ ] fake page switching
 
 type App struct {
 	DB     *DB
@@ -34,19 +25,39 @@ func NewApp() *App {
 }
 
 func main() {
+	err := buildBrowserAssets()
+	if err != nil {
+		log.Fatal(err)
+	}
+
 	app := NewApp()
 	counter := &Counter{App: app}
 	app.Server.RegisterComponent(counter)
 	app.Server.RegisterPage("/counter", counter.RenderPage)
 
 	registerTodoList(app.Server, app.DB)
 
-	app.Server.Static("/js/", "./js")
-	app.Server.Static("/css/", "./css")
+	app.Server.Static("/dist/", "./dist")
 
 	log.Println("listening on localhost:8000")
-	err := http.ListenAndServe("localhost:8000", app.Server.Handler())
+	err = http.ListenAndServe("localhost:8000", app.Server.Handler())
 	if err != nil {
 		log.Fatal(err)
 	}
 }
+
+func buildBrowserAssets() error {
+	log.Println("building browser assets")
+	options := []string{
+		"js/main.js",
+		"--bundle",
+		"--outfile=dist/bundle.js",
+		"--minify",
+		"--sourcemap",
+	}
+	returnCode := cli.Run(options)
+	if returnCode != 0 {
+		return fmt.Errorf("esbuild failed with code %d", returnCode)
+	}
+	return nil
+}

examples/components/todolist.go

@@ -28,6 +28,11 @@ import (
 // todolist.js: 38 lines
 // total: 511 lines
 
+// Code stats after refactoring (excluding comments and imports):
+// todolist.go: 405 lines -15%
+// todolist.js: 38 lines
+// total: 443 lines -14%
+
 func registerTodoList(server *Server, db *DB) {
 	tl := &TodoList{DB: db}
 	server.RegisterComponent(tl)
@@ -88,7 +93,7 @@ func todoLayout(todoApp html.Block, state TodoListState) (html.Block, error) {
 				html.Meta(html.Name("viewport").Content("width=device-width, initial-scale=1")),
 				html.Title(nil, html.Text("Guiapi • TodoMVC")),
 				html.Link(html.Rel("stylesheet").Href("https://cdn.jsdelivr.net/npm/[email protected]/index.min.css")),
-				html.Link(html.Rel("stylesheet").Href("/css/main.css")),
+				html.Link(html.Rel("stylesheet").Href("/dist/bundle.css")),
 			),
 			html.Body(nil,
 				todoApp,
@@ -98,9 +103,8 @@ func todoLayout(todoApp html.Block, state TodoListState) (html.Block, error) {
 					html.P(nil, html.Text("Created by "), html.A(html.Href("https://github.com/mbertschler"), html.Text("Martin Bertschler"))),
 					html.P(nil, html.Text("Part of "), html.A(html.Href("http://todomvc.com"), html.Text("TodoMVC"))),
 				),
-				html.Script(html.Src("/js/guiapi.js")),
 				html.Script(nil, html.JS("var state = "+string(stateJSON)+";")),
-				html.Script(html.Src("/js/todolist.js")),
+				html.Script(html.Src("/dist/bundle.js")),
 			),
 		),
 	}, nil
@@ -195,30 +199,30 @@ func (t *TodoList) renderMainBlock(todos *StoredTodo, page string, editItemID in
 		if page == TodoListPageCompleted && !item.Done {
 			continue
 		}
-		items.Add(t.renderItem(&item, page, editItemID))
+		items.Add(t.renderItem(&item, editItemID))
 	}
 	main := html.Elem("section", html.Class("main"),
 		html.Input(html.Class("toggle-all").Attr("type", "checkbox")),
-		html.Label(html.Class("ga").Attr("for", "toggle-all").Attr("ga-on", "click").Attr("ga-action", "TodoList.ToggleAll").
-			Attr("ga-args", fmt.Sprintf(`{"page":%q}`, page)), html.Text("Mark all as complete")),
+		html.Label(html.Class("ga").Attr("for", "toggle-all").Attr("ga-on", "click").Attr("ga-action", "TodoList.ToggleAll"),
+			html.Text("Mark all as complete")),
 		html.Ul(html.Class("todo-list"),
 			items,
 		),
 	)
 	return main, nil
 }
 
-func (t *TodoList) renderItem(item *StoredTodoItem, page string, editItemID int) html.Block {
+func (t *TodoList) renderItem(item *StoredTodoItem, editItemID int) html.Block {
 	if item.ID == editItemID {
-		return t.renderItemEdit(item, page, editItemID)
+		return t.renderItemEdit(item, editItemID)
 	}
 
 	liAttrs := html.Attr("ga-on", "dblclick").
 		Attr("ga-action", "TodoList.EditItem").
-		Attr("ga-args", fmt.Sprintf(`{"id":%d,"page":%q}`, item.ID, page))
+		Attr("ga-args", fmt.Sprintf(`{"id":%d}`, item.ID))
 	inputAttrs := html.Class("toggle ga").Attr("type", "checkbox").
 		Attr("ga-on", "click").Attr("ga-action", "TodoList.ToggleItem").
-		Attr("ga-args", fmt.Sprintf(`{"id":%d,"page":%q}`, item.ID, page))
+		Attr("ga-args", fmt.Sprintf(`{"id":%d}`, item.ID))
 	if item.Done {
 		liAttrs = liAttrs.Class("completed ga")
 		inputAttrs = inputAttrs.Attr("checked", "")
@@ -232,17 +236,17 @@ func (t *TodoList) renderItem(item *StoredTodoItem, page string, editItemID int)
 			html.Label(nil, html.Text(item.Text)),
 			html.Button(html.Class("destroy ga").
 				Attr("ga-on", "click").Attr("ga-action", "TodoList.DeleteItem").
-				Attr("ga-args", fmt.Sprintf(`{"id":%d,"page":%q}`, item.ID, page))),
+				Attr("ga-args", fmt.Sprintf(`{"id":%d}`, item.ID))),
 		),
 	)
 	return li
 }
 
-func (t *TodoList) renderItemEdit(item *StoredTodoItem, page string, editItemID int) html.Block {
+func (t *TodoList) renderItemEdit(item *StoredTodoItem, editItemID int) html.Block {
 	li := html.Li(html.Class("editing"),
 		html.Div(html.Class("view"),
 			html.Input(html.Class("edit ga").Attr("ga-init", "initEdit").
-				Attr("ga-args", fmt.Sprintf(`{"id":%d, "page":%q}`, item.ID, page)).Attr("value", item.Text)),
+				Attr("ga-args", fmt.Sprintf(`{"id":%d}`, item.ID)).Attr("value", item.Text)),
 		),
 	)
 	return li
@@ -277,8 +281,8 @@ func (t *TodoList) renderFooterBlock(todos *StoredTodo, page string) (html.Block
 
 	var clearCompletedButton html.Block
 	if someDone {
-		clearCompletedButton = html.Button(html.Class("clear-completed ga").Attr("ga-on", "click").Attr("ga-action", "TodoList.ClearCompleted").
-			Attr("ga-args", fmt.Sprintf(`{"page":%q}`, page)), html.Text("Clear completed"))
+		clearCompletedButton = html.Button(html.Class("clear-completed ga").Attr("ga-on", "click").Attr("ga-action", "TodoList.ClearCompleted"),
+			html.Text("Clear completed"))
 	}
 
 	footer := html.Elem("footer", html.Class("footer"),
@@ -316,7 +320,6 @@ func (t *TodoList) NewTodo(ctx *Context, input *NewTodoArgs) (*Response, error)
 		}
 		input.Text = strings.TrimSpace(input.Text)
 		todos.Items = append(todos.Items, StoredTodoItem{ID: highestID + 1, Text: input.Text})
-
 		return t.DB.SetTodo(todos)
 	})
 }