gromer

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

0a85abbb — Peter John

add useState in counter

Files changed (6) hide show

css.go CHANGED Viewed

@@ -476,6 +476,14 @@ func mapApply(obj KeyValues) {
 	}
 }
+func CreateTheme() {
+}
+func Styled(name string, classes string) {
+}
+// var Button = Styled("button", "px-20 bg-gray-500")
 var normalizeStyles = `
 			*, ::before, ::after { box-sizing: border-box; }
 			html { -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; line-height: 1.15; -webkit-text-size-adjust: 100%; }

example/components/button.go CHANGED Viewed

@@ -6,7 +6,7 @@ import (
 func Button2(title, clickHandler string) *Element {
 	return Button(Css("bg-gray-300 border-b-2 border-white hover:bg-gray-200 focus:outline-none rounded text-gray-700"), OnClick(clickHandler),
-		Div(Css("flex flex-row flex-1 justify-center items-center p-4"),
+		Div(Css("flex flex-row flex-1 justify-center items-center py-4 px-6"),
 			Text(title),
 		),
 	)

example/components/counter.go CHANGED Viewed

@@ -1,26 +1,20 @@
 package components
 import (
+	"context"
 	"strconv"
 	. "github.com/pyros2097/gromer"
 )
-// func CounterReducer(start int) Reducer {
-// 	return Reducer{
-// 		Name: "counter",
-// 		State: State{
-// 			"count": start,
-// 		},
-// 		Actions: Actions{
-// 			"increment": func() string { return "this.state.count += 1;" },
-// 			"decrement": func() string { return "this.state.count -= 1;" },
-// 		},
-// 	}
-// }
-func Counter(start int) *Element {
+func Counter(c context.Context, start int) *Element {
-	// data := CounterReducer(start)
+	count, setCount := UseState(c, start)
+	increment := func() {
+		setCount(count().(int) + 1)
+	}
+	decrement := func() {
+		setCount(count().(int) + 1)
+	}
 	return Col(Css("text-3xl text-gray-700"),
 		Row(
 			Row(Css("underline"),
@@ -29,10 +23,15 @@ func Counter(start int) *Element {
 		),
 		Row(
 			Button2("-", "decrement"),
-			Row(Css("m-20 text-5xl"), XText("state.count"),
+			Row(Css("m-20 text-5xl"), XText("count"),
-				Text(strconv.Itoa(start)),
+				Text("count"),
 			),
 			Button2("+", "increment"),
 		),
+		M{
+			"count":     strconv.Itoa(count().(int)),
+			"increment": increment,
+			"decrement": decrement,
+		},
 	)
 }

example/pages/get.go CHANGED Viewed

@@ -9,6 +9,7 @@ import (
 )
 func GET(c context.Context) (HtmlPage, int, error) {
+	ctx := WithState(c)
 	userID := GetUserID(c)
 	return Html(
 		Head(
@@ -28,7 +29,7 @@ func GET(c context.Context) (HtmlPage, int, error) {
 				H2(Text("Hello this is a h2")),
 				H3(XData("{ message: 'I ❤️ Alpine' }"), XText("message"), Text("")),
 				Div(Css("mt-10"),
-					Counter(4),
+					Counter(ctx, 4),
 				),
 			),
 		),

hooks.go CHANGED Viewed

@@ -1,6 +1,10 @@
 package gromer
+import (
+	"context"
+)
-type Context struct {
+type StateContext struct {
 	index int
 	datas []interface{}
 }
@@ -17,15 +21,24 @@ type Context struct {
 // 	}
 // }
+func getState(ctx context.Context) *StateContext {
+	return ctx.Value("state").(*StateContext)
+}
+func WithState(ctx context.Context) context.Context {
+	return context.WithValue(ctx, "state", &StateContext{})
+}
-func UseState(c *Context, s interface{}) (func() interface{}, func(v interface{})) {
+func UseState(ctx context.Context, s interface{}) (func() interface{}, func(v interface{})) {
+	stateContext := getState(ctx)
-	localIndex := c.index
+	localIndex := stateContext.index
-	if len(c.datas) <= c.index+1 {
+	if len(stateContext.datas) <= stateContext.index+1 {
-		c.datas = append(c.datas, s)
+		stateContext.datas = append(stateContext.datas, s)
-		c.index += 1
+		stateContext.index += 1
 	}
 	return func() interface{} {
-			return c.datas[localIndex].(interface{})
+			return stateContext.datas[localIndex].(interface{})
 		}, func(v interface{}) {
-			c.datas[localIndex] = v
+			stateContext.datas[localIndex] = v
 		}
 }

html.go CHANGED Viewed

@@ -2,6 +2,7 @@ package gromer
 import (
 	"bytes"
+	"context"
 	"fmt"
 	"io"
 	"strconv"
@@ -45,6 +46,7 @@ func mergeAttributes(parent *Element, uis ...interface{}) *Element {
 }
 type HtmlPage struct {
+	ctx         context.Context
 	classLookup map[string]bool
 	css         *bytes.Buffer
 	js          *bytes.Buffer
@@ -87,6 +89,7 @@ func (p *HtmlPage) WriteHtml(w io.Writer) {
 func Html(h *Element, b *Element) HtmlPage {
 	return HtmlPage{
+		// ctx:         context.WithValue(ctx, "state", &StateContext{}),
 		classLookup: map[string]bool{},
 		js:          bytes.NewBuffer(nil),
 		css:         bytes.NewBuffer(nil),
@@ -97,9 +100,9 @@ func Html(h *Element, b *Element) HtmlPage {
 func Head(elems ...*Element) *Element {
 	basic := []*Element{
-		&Element{tag: "meta", selfClosing: true, attrs: map[string]string{"charset": "UTF-8"}},
+		{tag: "meta", selfClosing: true, attrs: map[string]string{"charset": "UTF-8"}},
-		&Element{tag: "meta", selfClosing: true, attrs: map[string]string{"http-equiv": "Content-Type", "content": "text/html;charset=utf-8"}},
+		{tag: "meta", selfClosing: true, attrs: map[string]string{"http-equiv": "Content-Type", "content": "text/html;charset=utf-8"}},
-		&Element{tag: "meta", selfClosing: true, attrs: map[string]string{"http-equiv": "encoding", "content": "utf-8"}},
+		{tag: "meta", selfClosing: true, attrs: map[string]string{"http-equiv": "encoding", "content": "utf-8"}},
 	}
 	return &Element{tag: "head", children: append(basic, elems...)}
 }