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.

5c294ccd — Peter John

new stuff

Files changed (7) hide show

.snapshots/{TestHtmlPage → TestHtmlPage.html} +19 -32
aa/main.go +131 -0
cmd/scripts/migrate/main.go +32 -0
cmd/scripts/seed/main.go +38 -0
css.go +1 -0
html.go +28 -41
html_test.go +45 -65

.snapshots/{TestHtmlPage → TestHtmlPage.html} RENAMED Viewed

@@ -65,16 +65,16 @@
 			img, video { max-width: 100%; height: auto; }
 			[hidden] { display: none; }
 			*, ::before, ::after { --tw-border-opacity: 1; border-color: rgba(229, 231, 235, var(--tw-border-opacity)); }
-      .flex { display: flex; }
+      .flex { display: flex; }
-      .flex-col { flex-direction: column; }
+      .flex-col { flex-direction: column; }
-      .justify-center { justify-content: center; }
+      .justify-center { justify-content: center; }
-      .items-center { align-items: center; }
+      .items-center { align-items: center; }
-      .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
+      .text-3xl { font-size: 1.875rem; line-height: 2.25rem; }
-      .text-gray-700 { color: rgba(55, 65, 81, 1); }
+      .text-gray-700 { color: rgba(55, 65, 81, 1); }
-      .flex-row { flex-direction: row; }
+      .flex-row { flex-direction: row; }
-      .underline { text-decoration: underline; }
+      .underline { text-decoration: underline; }
-      .m-20 { margin: 5rem; }
+      .m-20 { margin: 5rem; }
-      .text-8xl { font-size: 6rem; line-height: 1; }
+      .text-5xl { font-size: 3rem; line-height: 1; }
     </style>
   </head>
   <body>
@@ -82,36 +82,23 @@
     <h2>            Hello this is a h2    </h2>
-    <h3 x-text="message" x-data="{ message: 'I ❤️ Alpine' }">                </h3>
+    <h3 x-data="{ message: 'I ❤️ Alpine' }" x-text="message">                </h3>
-    <counter x-data="counter">      <div class="flex flex-col justify-center items-center text-3xl text-gray-700">
+    <div class="flex flex-col justify-center items-center text-3xl text-gray-700">
-        <div class="flex flex-row justify-center items-center">          <div class="flex flex-row justify-center items-center underline">                        Counter          </div>
+      <div class="flex flex-row justify-center items-center">        <div class="flex flex-row justify-center items-center underline">                    Counter        </div>
-        </div>
+      </div>
-        <div x-data="counter" class="flex flex-row justify-center items-center">
+      <div class="flex flex-row justify-center items-center">
-          <button class="btn m-20" @click="decrement">                        -          </button>
+        <button @click="Decrement">                    -        </button>
-          <div class="flex flex-row justify-center items-center m-20 text-8xl" x-text="state.count">                        4          </div>
+        <div x-text="state.count" class="flex flex-row justify-center items-center m-20 text-5xl">                    4        </div>
-          <button class="btn m-20" @click="increment">                        +          </button>
+        <button @click="Increment">                    +        </button>
-        </div>
       </div>
-    </counter>
+    </div>
     <script>
 			document.addEventListener('alpine:init', () => {
-				Alpine.data('counter',  () => ({
-					state: {
-						count:1,
-					},
-					increment() {this.state.count += 1;},
-					decrement() {this.state.count -= 1;},
-				}));
 			});
 	    </script>
   </body>

aa/main.go ADDED Viewed

@@ -0,0 +1,131 @@
+package main
+import (
+	"bytes"
+	"strings"
+	"golang.org/x/net/html"
+)
+type M map[string]interface{}
+type ReqContext struct {
+	JS  *bytes.Buffer
+	CSS *bytes.Buffer
+}
+type Component func(ReqContext) string
+var components = map[string]Component{}
+func RegisterComponent(k string, v Component) {
+	components[k] = v
+}
+func Html2(ctx ReqContext, input string, data map[string]interface{}) string {
+	return input
+}
+func ParseHTML(ctx ReqContext, input string, data map[string]interface{}) *html.Node {
+	doc, err := html.Parse(bytes.NewBufferString(input))
+	if err != nil {
+		panic(err)
+	}
+	return doc
+}
+func init() {
+	RegisterComponent("Layout", func(c ReqContext) string {
+		return Html2(c, `
+		<html>
+			<body>
+				<div>
+				<slot></slot>
+				</div>
+			</body>
+		</html>
+		`, M{})
+	})
+}
+func properTitle(input string) string {
+	words := strings.Split(input, " ")
+	smallwords := " a an on the to "
+	for index, word := range words {
+		if strings.Contains(smallwords, " "+word+" ") && word != string(word[0]) {
+			words[index] = word
+		} else {
+			words[index] = strings.Title(word)
+		}
+	}
+	return strings.Join(words, " ")
+}
+func main() {
+	// vctx := velvet.NewContext()
+	// for k, v := range data {
+	// 	vctx.Set(k, v)
+	// }
+	// s, err := velvet.Render(textOutput, vctx)
+	// if err != nil {
+	// 	panic(err)
+	// }
+	ctx := ReqContext{JS: bytes.NewBuffer(nil), CSS: bytes.NewBuffer(nil)}
+	txt := `
+		<Layout>
+			<p>
+				Hello world
+			</p>
+		</Layout>
+	`
+	docs := ParseHTML(ctx, txt, M{})
+	textOutput := ""
+	var f func(txt string, n *html.Node)
+	f = func(txt string, n *html.Node) {
+		removeExtraStuff := func(tag string) bool {
+			return !strings.Contains(txt, "<"+tag+">") && n.Type == html.ElementNode && n.Data == tag
+		}
+		constainsHtml := removeExtraStuff("html") || removeExtraStuff("body") || removeExtraStuff("head")
+		if !constainsHtml && n.Type == html.ElementNode {
+			textOutput += "<" + n.Data + ">"
+		}
+		if n.Type == html.TextNode {
+			textOutput += n.Data
+		}
+		if n.Type == html.ElementNode && n.Data == "slot" {
+		}
+		if c, ok := components[properTitle(n.Data)]; ok {
+			ctext := c(ctx)
+			newNodes := ParseHTML(ctx, ctext, M{})
+			f(ctext, newNodes)
+		}
+		for c := n.FirstChild; c != nil; c = c.NextSibling {
+			f(txt, c)
+		}
+		if !constainsHtml && n.Type == html.ElementNode {
+			textOutput += "</" + n.Data + ">"
+		}
+	}
+	f(txt, docs)
+	println("textOutput", textOutput)
+}
+// func Index2(c *context.ReqContext) (interface{}, int, error) {
+// 	data := M{
+// 		"userID":  c.UserID,
+// 		"message": "I ❤️ Alpine",
+// 	}
+// return Html(`
+// <page x-data="pageData">
+// 	<div class="flex flex-col items-center justify-center">
+// 		<header></header>
+// 		<h1>Hello <template x-text="userID"></template></h1>
+// 		<h2>Hello this is a h1</h1>
+// 		<h2>Hello this is a h2</h1>
+// 		<h3 x-text="message"></h3>
+// 		<counter start={4}></counter>
+// 	</div>
+// </page>
+// 	`, data), 200, nil
+// }

cmd/scripts/migrate/main.go ADDED Viewed

@@ -0,0 +1,32 @@
+package main
+import (
+	c "context"
+	"io/ioutil"
+	"wapp-example/context"
+)
+func main() {
+	db := context.InitDB()
+	ctx := c.Background()
+	tx, err := context.BeginTransaction(db, ctx)
+	if err != nil {
+		panic(err)
+	}
+	files, err := ioutil.ReadDir("./migrations")
+	if err != nil {
+		panic(err)
+	}
+	for _, f := range files {
+		data, err := ioutil.ReadFile("./migrations/" + f.Name())
+		if err != nil {
+			panic(err)
+		}
+		tx.MustExec(string(data))
+	}
+	err = tx.Commit()
+	if err != nil {
+		panic(err)
+	}
+}

cmd/scripts/seed/main.go ADDED Viewed

@@ -0,0 +1,38 @@
+package main
+import (
+	c "context"
+	"github.com/bxcodec/faker/v3"
+	"wapp-example/context"
+	"wapp-example/pages/api/todos"
+)
+func main() {
+	db := context.InitDB()
+	ctx := c.Background()
+	tx, err := context.BeginTransaction(db, ctx)
+	if err != nil {
+		panic(err)
+	}
+	reqContext := context.ReqContext{
+		Tx:     tx,
+		UserID: "123",
+	}
+	for i := 0; i < 20; i++ {
+		ti := todos.TodoInput{}
+		err := faker.FakeData(&ti)
+		if err != nil {
+			panic(err)
+		}
+		_, _, err = todos.POST(reqContext, ti)
+		if err != nil {
+			panic(err)
+		}
+	}
+	err = tx.Commit()
+	if err != nil {
+		panic(err)
+	}
+}

css.go CHANGED Viewed

@@ -3,6 +3,7 @@ package wapp
 type M map[string]interface{}
 type MS map[string]string
 type Arr []interface{}
 type KeyValues struct {
 	Keys   M
 	Values MS

html.go CHANGED Viewed

@@ -7,10 +7,9 @@ import (
 	"io"
 	"net/http"
 	"reflect"
+	"runtime"
 	"strconv"
 	"strings"
-	"github.com/gobuffalo/velvet"
 )
 func writeIndent(w io.Writer, indent int) {
@@ -55,7 +54,7 @@ func (p *HtmlPage) computeCss(elems []*Element) {
 				if s, ok := twClassLookup[c]; ok {
 					if _, ok2 := p.classLookup[c]; !ok2 {
 						p.classLookup[c] = true
-						p.css.WriteString("      ." + c + " { " + s + " } \n")
+						p.css.WriteString("      ." + c + " { " + s + " }\n")
 					}
 				}
 			}
@@ -69,7 +68,7 @@ func (p *HtmlPage) computeCss(elems []*Element) {
 func (p *HtmlPage) computeJs(elems []*Element) {
 	for _, el := range elems {
 		if strings.HasPrefix(el.text, "wapp_js|") {
-			p.js.WriteString(strings.Replace(el.text, "wapp_js|", "", 1) + "\n")
+			p.js.WriteString(strings.Replace(el.text, "wapp_js|", "", 1)) //  + "\n" // TODO check with multiple components
 		}
 		if len(el.children) > 0 {
 			p.computeJs(el.children)
@@ -85,8 +84,7 @@ func (p *HtmlPage) WriteHtml(w io.Writer) {
 	p.Head.children = append(p.Head.children, StyleTag(Text(normalizeStyles+p.css.String())))
 	p.Head.writeHtmlIndent(w, 1)
 	p.Body.children = append(p.Body.children, Script(Text(fmt.Sprintf(`
-			document.addEventListener('alpine:init', () => {
+			document.addEventListener('alpine:init', () => {%s
-				%s
 			});
 	`, p.js.String()))))
 	p.Body.writeHtmlIndent(w, 1)
@@ -116,34 +114,26 @@ func Body(elems ...*Element) *Element {
 	return &Element{tag: "body", children: elems}
 }
-func Component(r Reducer, uis ...interface{}) *Element {
+func Component(state interface{}, uis ...interface{}) *Element {
-	v := velvet.NewContext()
+	pc, _, _, _ := runtime.Caller(1)
+	details := runtime.FuncForPC(pc)
+	arr := strings.Split(details.Name(), ".")
-	stateMap := map[string]interface{}{}
+	name := strings.ToLower(arr[len(arr)-1])
-	actionsMap := map[string]interface{}{}
+	// actionsMap := map[string]interface{}{}
-	// structType := reflect.TypeOf(r)
+	// actionsType := reflect.TypeOf(actions)
-	for k, v := range r.State {
-		stateMap[k+":"] = v
-	}
-	for k, v := range r.Actions {
+	// for k, v := range r.Actions {
-		actionsMap[k] = "() {" + v() + "}"
+	// 	actionsMap[k] = "() {" + v() + "}"
+	// }
+	stateData, err := json.MarshalIndent(state, "					", "	")
+	if err != nil {
+		panic(err)
 	}
-	v.Set("name", r.Name)
-	v.Set("state", stateMap)
-	v.Set("actions", actionsMap)
-	s, err := velvet.Render(`
+	js := fmt.Sprintf(`
-				Alpine.data('{{ name }}',  () => ({
+				Alpine.data('%s',  () => (%s));`, name, string(stateData))
-					state: {
-						{{#each state}}{{ @key }}{{ @value }},
-						{{/each}}
-					},
-					{{#each actions}}{{ @key }}{{ @value }},
-					{{/each}}
-				}));
-	`, v)
 	if err != nil {
 		panic(err)
 	}
-	return mergeAttributes(&Element{tag: r.Name, text: "wapp_js|" + s}, append([]interface{}{XData(r.Name)}, uis...)...)
+	return mergeAttributes(&Element{tag: name, text: "wapp_js|" + js}, append([]interface{}{XData(name)}, uis...)...)
 }
 type Element struct {
@@ -349,8 +339,14 @@ func Attr(k, v string) Attribute {
 	return Attribute{k, v}
 }
+func GetFunctionName(i interface{}) string {
+	fnName := runtime.FuncForPC(reflect.ValueOf(i).Pointer()).Name()
+	parts := strings.Split(fnName, ".")
+	return strings.Replace(parts[len(parts)-1], "-fm", "", 1)
+}
-func OnClick(v string) Attribute {
+func OnClick(v interface{}) Attribute {
-	return Attribute{"@click", v}
+	return Attribute{"@click", GetFunctionName(v)}
 }
 func ID(v string) Attribute {
@@ -437,15 +433,6 @@ func XText(v string) Attribute {
 	return Attribute{"x-text", v}
 }
-type State map[string]interface{}
-type Actions map[string]func() string
-type Reducer struct {
-	Name string
-	State
-	Actions
-}
 func RespondError(w http.ResponseWriter, status int, err error) {
 	w.WriteHeader(status)
 	w.Header().Set("Content-Type", "application/json")

html_test.go CHANGED Viewed

@@ -16,84 +16,63 @@ func Col(uis ...interface{}) *Element {
 	return NewElement("div", false, append([]interface{}{Css("flex flex-col justify-center items-center")}, uis...)...)
 }
-// type Container func() *Element
-// func CounterData(start int) Container {
-// 	return CreateContainer(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;" },
-// 		},
-// 	})
-// }
-// type CounterState struct {
+type CounterState struct {
-// 	Count int
+	Count int
-// }
+}
-// type CounterActions struct {
-// 	Increment func() string
-// 	Decrement func() string
-// }
-// type CounterReducer struct {
+func Counter(start int) *Element {
-// 	Reducer
-// 	State   CounterState
+	c := CounterState{Count: start}
-// 	Actions CounterActions
-// }
+	return c.Render()
+}
-// func CounterData(start int) CounterReducer {
-// 	return CounterReducer{
-// 		Reducer: "counter",
-// 		State: CounterState{
+func (c *CounterState) Increment() {
-// 			Count: 1,
-// 		},
-// 		Actions: CounterActions{
-// 			Increment: func() string { return "this.state.count += 1;" },
-// 			Decrement: func() string { return "this.state.count -= 1;" },
-// 		},
-// 	}
-// }
+	c.Count += 1
+}
-func CounterData(start int) Reducer {
+func (c *CounterState) Decrement() {
-	return Reducer{
-		Name: "counter",
-		State: State{
-			"count": 1,
+	c.Count -= 1
-		},
-		Actions: Actions{
-			"increment": func() string { return "this.state.count += 1;" },
-			"decrement": func() string { return "this.state.count -= 1;" },
-		},
-	}
 }
-func Counter(start int) *Element {
+func (c *CounterState) Render() *Element {
-	data := CounterData(start)
-	return Component(data, Col(Css("text-3xl text-gray-700"),
+	return Col(Css("text-3xl text-gray-700"),
 		Row(
 			Row(Css("underline"),
 				Text("Counter"),
 			),
 		),
-		Row(XData("counter"),
+		Row(
-			Button(Css("btn m-20"), OnClick("decrement"),
+			Button(OnClick(c.Decrement), Text("-")),
-				Text("-"),
-			),
-			Row(Css("m-20 text-8xl"), XText("state.count"),
+			Row(Css("m-20 text-5xl"), XText("state.count"),
-				Text(strconv.Itoa(start)),
+				Text(strconv.Itoa(c.Count)),
-			),
-			Button(Css("btn m-20"), OnClick("increment"),
-				Text("+"),
 			),
+			Button(OnClick(c.Increment), Text("+")),
 		),
-	))
+	)
 }
+// func CounterHtml() string {
+// 	return `
+// 		<div class="flex flex-col justify-center items-center text-3xl text-gray-700">
+// 			<div class="flex flex-row justify-center items-center">
+// 				<div class="flex flex-row justify-center items-center underline">
+// 					Counter
+// 				</div>
+// 			</div>
+// 			<div class="flex flex-row justify-center items-center">
+// 				<button class="btn m-20" @click={{actions.Increment}}>
+// 					-
+// 				</button>
+// 				<div class="flex flex-row justify-center items-center m-20 text-8xl">
+// 					{{ state.count }}
+// 				</div>
+// 				<button class="btn m-20" @click={{actions.Decrement}}>
+// 					+
+// 				</button>
+// 			</div>
+// 		</div>
+// 	`
+// }
 func TestHtmlPage(t *testing.T) {
 	b := bytes.NewBuffer(nil)
 	p := Html(
@@ -117,5 +96,6 @@ func TestHtmlPage(t *testing.T) {
 		),
 	)
 	p.WriteHtml(b)
+	c := cupaloy.New(cupaloy.SnapshotFileExtension(".html"))
-	cupaloy.SnapshotT(t, b.String())
+	c.SnapshotT(t, b.String())
 }

~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.