gromer

git clone https://pyrossh.dev/repos/gromer.git

gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs.

7b7eb741 — pyros2097

refac js

Files changed (14) hide show

app.go +0 -9
app_nowasm.go +0 -4
app_wasm.go +1 -18
attributes.go +9 -7
component.go +5 -11
element.go +22 -24
js.go → js/js.go +27 -2
js_nowasm.go → js/js_nowasm.go +4 -2
js_wasm.go → js/js_wasm.go +16 -2
node.go +8 -23
raw.go +5 -4
readme.md +8 -8
selectors.go +5 -4
utils.go +3 -1

app.go CHANGED Viewed

@@ -1,9 +1,5 @@
 package app
-var (
-	staticResourcesURL string
-)
 // Reload reloads the current page.
 func Reload() {
 	dispatch(func() {
@@ -18,8 +14,3 @@ func Reload() {
 func Run(r RenderFunc) {
 	run(r)
 }
-// Window returns the JavaScript "window" object.
-func Window() BrowserWindow {
-	return window
-}

app_nowasm.go CHANGED Viewed

@@ -7,10 +7,6 @@ import (
 	"os"
 )
-var (
-	window *browserWindow
-)
 func getenv(k string) string {
 	return os.Getenv(k)
 }

app_wasm.go CHANGED Viewed

@@ -2,22 +2,19 @@ package app
 import (
 	"context"
-	"fmt"
 	"net/url"
-	"syscall/js"
 )
 var (
 	body       *elem
 	content    UI
 	rootPrefix string
-	window     = &browserWindow{value: value{Value: js.Global()}}
 )
 func run(render RenderFunc) {
 	defer func() {
 		err := recover()
-		displayLoadError(err)
+		// show alert
 		panic(err)
 	}()
@@ -62,16 +59,6 @@ func initContent() {
 	body.body = append(body.body, content)
 }
-func displayLoadError(err interface{}) {
-	loadingLabel := Window().
-		Get("document").
-		Call("getElementById", "app-wasm-loader-label")
-	if !loadingLabel.Truthy() {
-		return
-	}
-	loadingLabel.Set("innerText", fmt.Sprint(err))
-}
 func onPopState(this Value, args []Value) interface{} {
 	dispatch(func() {
 		// navigate(Window().URL(), false)
@@ -86,7 +73,3 @@ func isExternalNavigation(u *url.URL) bool {
 func isFragmentNavigation(u *url.URL) bool {
 	return u.Fragment != ""
 }
-func reload() {
-	Window().Get("location").Call("reload")
-}

attributes.go CHANGED Viewed

@@ -2,6 +2,8 @@ package app
 import (
 	"context"
+	"github.com/pyros2097/wapp/js"
 )
 type baseAttribute struct {
@@ -12,7 +14,7 @@ func (c baseAttribute) Kind() Kind {
 	return Attribute
 }
-func (c baseAttribute) JSValue() Value {
+func (c baseAttribute) JSValue() js.Value {
 	return nil
 }
@@ -39,7 +41,7 @@ func (c baseAttribute) attributes() map[string]string {
 	return nil
 }
-func (c baseAttribute) eventHandlers() map[string]eventHandler {
+func (c baseAttribute) eventHandlers() map[string]js.EventHandler {
 	return nil
 }
@@ -85,19 +87,19 @@ func OnClick(cb func()) UI {
 type OnChangeAttribute struct {
 	baseAttribute
-	cb EventHandler
+	cb js.EventHandlerFunc
 }
-func OnChange(cb EventHandler) UI {
+func OnChange(cb js.EventHandlerFunc) UI {
 	return OnChangeAttribute{cb: cb}
 }
 type OnInputAttribute struct {
 	baseAttribute
-	cb EventHandler
+	cb js.EventHandlerFunc
 }
-func OnInput(cb EventHandler) UI {
+func OnInput(cb js.EventHandlerFunc) UI {
 	return OnInputAttribute{cb: cb}
 }
@@ -113,7 +115,7 @@ func mergeAttributes(parent *elem, uis ...UI) {
 					parent.setAttr("class", c.classes)
 				}
 			case OnClickAttribute:
-				parent.setEventHandler("click", func(e Event) {
+				parent.setEventHandler("click", func(e js.Event) {
 					c.cb()
 				})
 			case OnChangeAttribute:

component.go CHANGED Viewed

@@ -6,6 +6,7 @@ import (
 	"strings"
 	"github.com/pyros2097/wapp/errors"
+	"github.com/pyros2097/wapp/js"
 )
 var contextMap = map[int]*RenderContext{}
@@ -21,7 +22,7 @@ func (r RenderFunc) Kind() Kind {
 	return FunctionalComponent
 }
-func (r RenderFunc) JSValue() Value {
+func (r RenderFunc) JSValue() js.Value {
 	c := getCurrentContext()
 	return c.root.JSValue()
 }
@@ -85,7 +86,7 @@ func (r RenderFunc) attributes() map[string]string {
 	return nil
 }
-func (r RenderFunc) eventHandlers() map[string]eventHandler {
+func (r RenderFunc) eventHandlers() map[string]js.EventHandler {
 	return nil
 }
@@ -107,18 +108,11 @@ func (r RenderFunc) children() []UI {
 func (r RenderFunc) mount() error {
 	c := getCurrentContext()
 	if r.Mounted() {
-		return errors.New("mounting component failed").
-			Tag("reason", "already mounted").
+		panic("mounting component failed already mounted " + r.name() + r.Kind().String())
-			Tag("name", r.name()).
-			Tag("kind", r.Kind())
 	}
 	root := r.Render()
 	if err := mount(root); err != nil {
-		return errors.New("mounting component failed").
+		panic("mounting component failed " + r.name() + r.Kind().String())
-			Tag("name", r.name()).
-			Tag("kind", r.Kind()).
-			Wrap(err)
 	}
 	root.setParent(c.this)
 	c.root = root

element.go CHANGED Viewed

@@ -5,13 +5,14 @@ import (
 	"io"
 	"github.com/pyros2097/wapp/errors"
+	"github.com/pyros2097/wapp/js"
 )
 type elem struct {
 	attrs       map[string]string
 	body        []UI
-	events      map[string]eventHandler
+	events      map[string]js.EventHandler
-	jsvalue     Value
+	jsvalue     js.Value
 	parentElem  UI
 	selfClosing bool
 	tag         string
@@ -22,7 +23,7 @@ func (e *elem) Kind() Kind {
 	return HTML
 }
-func (e *elem) JSValue() Value {
+func (e *elem) JSValue() js.Value {
 	return e.jsvalue
 }
@@ -47,7 +48,7 @@ func (e *elem) attributes() map[string]string {
 	return e.attrs
 }
-func (e *elem) eventHandlers() map[string]eventHandler {
+func (e *elem) eventHandlers() map[string]js.EventHandler {
 	return e.events
 }
@@ -71,7 +72,7 @@ func (e *elem) mount() error {
 			Tag("kind", e.Kind())
 	}
-	v := Window().Get("document").Call("createElement", e.tag)
+	v := js.Window.Get("document").Call("createElement", e.tag)
 	if !v.Truthy() {
 		return errors.New("mounting ui element failed").
 			Tag("reason", "create javascript node returned nil").
@@ -307,7 +308,7 @@ func (e *elem) delAttr(k string) {
 	delete(e.attrs, k)
 }
-func (e *elem) updateEventHandler(handlers map[string]eventHandler) {
+func (e *elem) updateEventHandler(handlers map[string]js.EventHandler) {
 	for k, current := range e.events {
 		if _, exists := handlers[k]; !exists {
 			e.delJsEventHandler(k, current)
@@ -315,11 +316,11 @@ func (e *elem) updateEventHandler(handlers map[string]eventHandler) {
 	}
 	if e.events == nil && len(handlers) != 0 {
-		e.events = make(map[string]eventHandler, len(handlers))
+		e.events = make(map[string]js.EventHandler, len(handlers))
 	}
 	for k, new := range handlers {
-		if current, exists := e.events[k]; !current.equal(new) {
+		if current, exists := e.events[k]; !current.Equal(new) {
 			if exists {
 				e.delJsEventHandler(k, current)
 			}
@@ -330,27 +331,24 @@ func (e *elem) updateEventHandler(handlers map[string]eventHandler) {
 	}
 }
-func (e *elem) setEventHandler(k string, h EventHandler) {
+func (e *elem) setEventHandler(k string, h js.EventHandlerFunc) {
 	if e.events == nil {
-		e.events = make(map[string]eventHandler)
+		e.events = make(map[string]js.EventHandler)
 	}
-	e.events[k] = eventHandler{
+	e.events[k] = js.NewEventHandler(k, h)
-		event: k,
-		value: h,
-	}
 }
-func (e *elem) setJsEventHandler(k string, h eventHandler) {
+func (e *elem) setJsEventHandler(k string, h js.EventHandler) {
-	jshandler := makeJsEventHandler(e.self(), h.value)
+	jshandler := makeJsEventHandler(e.self(), h.Value)
-	h.jsvalue = jshandler
+	h.JSvalue = jshandler
 	e.events[k] = h
 	e.JSValue().Call("addEventListener", k, jshandler)
 }
-func (e *elem) delJsEventHandler(k string, h eventHandler) {
+func (e *elem) delJsEventHandler(k string, h js.EventHandler) {
-	e.JSValue().Call("removeEventListener", k, h.jsvalue)
+	e.JSValue().Call("removeEventListener", k, h.JSvalue)
-	h.jsvalue.Release()
+	h.JSvalue.Release()
 	delete(e.events, k)
 }
@@ -407,7 +405,7 @@ func (e *elem) HtmlWithIndent(w io.Writer, indent int) {
 }
 type text struct {
-	jsvalue    Value
+	jsvalue    js.Value
 	parentElem UI
 	value      string
 }
@@ -421,7 +419,7 @@ func (t *text) Kind() Kind {
 	return SimpleText
 }
-func (t *text) JSValue() Value {
+func (t *text) JSValue() js.Value {
 	return t.jsvalue
 }
@@ -448,7 +446,7 @@ func (t *text) attributes() map[string]string {
 	return nil
 }
-func (t *text) eventHandlers() map[string]eventHandler {
+func (t *text) eventHandlers() map[string]js.EventHandler {
 	return nil
 }
@@ -473,7 +471,7 @@ func (t *text) mount() error {
 			Tag("value", t.value)
 	}
-	t.jsvalue = Window().
+	t.jsvalue = js.Window.
 		Get("document").
 		Call("createTextNode", t.value)

js.go → js/js.go RENAMED Viewed

@@ -1,6 +1,9 @@
-package app
+package js
+import (
+	"fmt"
-import "net/url"
+	"net/url"
+)
 // Type represents the JavaScript type of a Value.
 type Type int
@@ -222,3 +225,25 @@ func CopyBytesToGo(dst []byte, src Value) int {
 func CopyBytesToJS(dst Value, src []byte) int {
 	return copyBytesToJS(dst, src)
 }
+// EventHandler represents a function that can handle HTML events. They are
+// always called on the UI goroutine.
+type EventHandlerFunc func(e Event)
+type EventHandler struct {
+	Event   string
+	JSvalue Func
+	Value   EventHandlerFunc
+}
+func NewEventHandler(e string, v EventHandlerFunc) EventHandler {
+	return EventHandler{
+		Event: e,
+		Value: v,
+	}
+}
+func (h EventHandler) Equal(o EventHandler) bool {
+	return h.Event == o.Event &&
+		fmt.Sprintf("%p", h.Value) == fmt.Sprintf("%p", o.Value)
+}

js_nowasm.go → js/js_nowasm.go RENAMED Viewed

@@ -1,11 +1,13 @@
 // +build !wasm
-package app
+package js
 import (
 	"net/url"
 )
+var Window = &browserWindow{value: value{}}
 type value struct{}
 func (v value) Bool() bool {
@@ -116,7 +118,7 @@ func (w browserWindow) CursorPosition() (x, y int) {
 	panic("wasm required")
 }
-func (w browserWindow) setCursorPosition(x, y int) {
+func (w browserWindow) SetCursorPosition(x, y int) {
 	panic("wasm required")
 }

js_wasm.go → js/js_wasm.go RENAMED Viewed

@@ -1,4 +1,4 @@
-package app
+package js
 import (
 	"net/url"
@@ -8,6 +8,8 @@ import (
 	"github.com/pyros2097/wapp/errors"
 )
+var Window = &browserWindow{value: value{Value: js.Global()}}
 type value struct {
 	js.Value
 }
@@ -149,7 +151,7 @@ func (w *browserWindow) CursorPosition() (x, y int) {
 	return w.cursorX, w.cursorY
 }
-func (w *browserWindow) setCursorPosition(x, y int) {
+func (w *browserWindow) SetCursorPosition(x, y int) {
 	w.cursorX = x
 	w.cursorY = y
 }
@@ -174,6 +176,18 @@ func (w *browserWindow) AddEventListener(event string, h EventHandler) func() {
 	}
 }
+func (w *browserWindow) Location() *Location {
+	return &Location{value: Window.Get("location")}
+}
+type Location struct {
+	value js.Value
+}
+func (l *Location) Reload() {
+	l.value.Call("reload")
+}
 func val(v js.Value) Value {
 	return value{Value: v}
 }

node.go CHANGED Viewed

@@ -1,11 +1,11 @@
 package app
 import (
-	"fmt"
 	"io"
 	"reflect"
 	"github.com/pyros2097/wapp/errors"
+	"github.com/pyros2097/wapp/js"
 )
 // UI is the interface that describes a user interface element such as
@@ -15,7 +15,7 @@ type UI interface {
 	Kind() Kind
 	// JSValue returns the javascript value linked to the element.
-	JSValue() Value
+	JSValue() js.Value
 	// Reports whether the element is mounted.
 	Mounted() bool
@@ -24,7 +24,7 @@ type UI interface {
 	self() UI
 	setSelf(UI)
 	attributes() map[string]string
-	eventHandlers() map[string]eventHandler
+	eventHandlers() map[string]js.EventHandler
 	parent() UI
 	setParent(UI)
 	children() []UI
@@ -123,28 +123,13 @@ func FilterUIElems(uis ...UI) []UI {
 	return elems
 }
-// EventHandler represents a function that can handle HTML events. They are
-// always called on the UI goroutine.
-type EventHandler func(e Event)
-type eventHandler struct {
-	event   string
-	jsvalue Func
-	value   EventHandler
-}
-func (h eventHandler) equal(o eventHandler) bool {
-	return h.event == o.event &&
-		fmt.Sprintf("%p", h.value) == fmt.Sprintf("%p", o.value)
-}
-func makeJsEventHandler(src UI, h EventHandler) Func {
+func makeJsEventHandler(src UI, h js.EventHandlerFunc) js.Func {
-	return FuncOf(func(this Value, args []Value) interface{} {
+	return js.FuncOf(func(this js.Value, args []js.Value) interface{} {
 		dispatch(func() {
 			if !src.Mounted() {
 				return
 			}
-			e := Event{
+			e := js.Event{
 				Value: args[0],
 			}
 			trackMousePosition(e)
@@ -155,7 +140,7 @@ func makeJsEventHandler(src UI, h EventHandler) Func {
 	})
 }
-func trackMousePosition(e Event) {
+func trackMousePosition(e js.Event) {
 	x := e.Get("clientX")
 	if !x.Truthy() {
 		return
@@ -166,7 +151,7 @@ func trackMousePosition(e Event) {
 		return
 	}
-	Window().setCursorPosition(x.Int(), y.Int())
+	js.Window.SetCursorPosition(x.Int(), y.Int())
 }
 func isErrReplace(err error) bool {

raw.go CHANGED Viewed

@@ -6,6 +6,7 @@ import (
 	"strings"
 	"github.com/pyros2097/wapp/errors"
+	"github.com/pyros2097/wapp/js"
 )
 // Raw returns a ui element from the given raw value. HTML raw value must have a
@@ -29,7 +30,7 @@ func Raw(v string) UI {
 }
 type raw struct {
-	jsvalue    Value
+	jsvalue    js.Value
 	parentElem UI
 	tag        string
 	value      string
@@ -39,7 +40,7 @@ func (r *raw) Kind() Kind {
 	return RawHTML
 }
-func (r *raw) JSValue() Value {
+func (r *raw) JSValue() js.Value {
 	return r.jsvalue
 }
@@ -66,7 +67,7 @@ func (r *raw) attributes() map[string]string {
 	return nil
 }
-func (r *raw) eventHandlers() map[string]eventHandler {
+func (r *raw) eventHandlers() map[string]js.EventHandler {
 	return nil
 }
@@ -90,7 +91,7 @@ func (r *raw) mount() error {
 			Tag("kind", r.Kind())
 	}
-	wrapper := Window().Get("document").Call("createElement", "div")
+	wrapper := js.Window.Get("document").Call("createElement", "div")
 	wrapper.Set("innerHTML", r.value)
 	value := wrapper.Get("firstChild")

readme.md CHANGED Viewed

@@ -137,13 +137,13 @@ func main() {
 The directory structure is a lot lke this,
 ```sh
-└── assets
+├── assets
-|   └── icon.png
+│   └── icon.png
-|   └── styles.css
+│   └── styles.css
 ├── pages
-|   └── index
+│   └── index
-|	    └── main.go
+│	    └── main.go
-|   └── about
+│   └── about
-|	    └── main.go
+│	    └── main.go
-|── main.go
+└── main.go
 ```

selectors.go CHANGED Viewed

@@ -7,6 +7,7 @@ import (
 	"sort"
 	"github.com/pyros2097/wapp/errors"
+	"github.com/pyros2097/wapp/js"
 )
 // RangeLoop represents a control structure that iterates within a slice, an
@@ -90,7 +91,7 @@ func (r rangeLoop) Kind() Kind {
 	return Selector
 }
-func (r rangeLoop) JSValue() Value {
+func (r rangeLoop) JSValue() js.Value {
 	return nil
 }
@@ -117,7 +118,7 @@ func (r rangeLoop) attributes() map[string]string {
 	return nil
 }
-func (r rangeLoop) eventHandlers() map[string]eventHandler {
+func (r rangeLoop) eventHandlers() map[string]js.EventHandler {
 	return nil
 }
@@ -203,7 +204,7 @@ func (c condition) Kind() Kind {
 	return Selector
 }
-func (c condition) JSValue() Value {
+func (c condition) JSValue() js.Value {
 	return nil
 }
@@ -230,7 +231,7 @@ func (c condition) attributes() map[string]string {
 	return nil
 }
-func (c condition) eventHandlers() map[string]eventHandler {
+func (c condition) eventHandlers() map[string]js.EventHandler {
 	return nil
 }

utils.go CHANGED Viewed

@@ -3,6 +3,8 @@ package app
 import (
 	"io"
 	"unsafe"
+	"github.com/pyros2097/wapp/js"
 )
 var (
@@ -17,7 +19,7 @@ type Context struct {
 	// The JavaScript value of the element tied to the context. This is a
 	// shorthand for:
 	//  ctx.Src.JSValue()
-	JSSrc Value
+	JSSrc js.Value
 }
 // Dispatcher is a function that executes the given function on the goroutine

~repos /gromer

git clone https://pyrossh.dev/repos/gromer.git

gromer is a framework and cli to build multipage web apps in golang using htmx and alpinejs.