~repos /gromer

#golang#htmx#ssr

git clone https://pyrossh.dev/repos/gromer.git
Discussions: https://groups.google.com/g/rust-embed-devs

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

Readme
|
Commits
|
Files
24596902 — pyros2097

5 years ago 
update readme
Files changed (1) hide show
  1. readme.md +110 -27
readme.md CHANGED
@@ -1,14 +1,14 @@
1
1
  <p align="center">
2
2
  <a href="https://goreportcard.com/report/github.com/pyros2097/wapp"><img src="https://goreportcard.com/badge/github.com/pyros2097/wapp" alt="Go Report Card"></a>
3
3
  <a href="https://GitHub.com/pyros2097/wapp/releases/"><img src="https://img.shields.io/github/release/pyros2097/wapp.svg" alt="GitHub release"></a>
4
- <a href="https://pkg.go.dev/github.com/pyros2097/wapp/v7/pkg/app"><img src="https://img.shields.io/badge/dev-reference-007d9c?logo=go&logoColor=white&style=flat" alt="pkg.go.dev docs"></a>
4
+ <a href="https://pkg.go.dev/github.com/pyros2097/wapp"><img src="https://img.shields.io/badge/dev-reference-007d9c?logo=go&logoColor=white&style=flat" alt="pkg.go.dev docs"></a>
5
5
  </p>
6
6
 
7
7
  **wapp** is a package to build [isomorphic web apps](https://developers.google.com/web/progressive-web-apps/) with [Go](https://golang.org) and [WebAssembly](https://webassembly.org).
8
8
 
9
- It uses a [declarative syntax](#declarative-syntax) that allows creating and dealing with HTML elements only by using Go, and without writing any HTML markup. The syntax is inspired by react and its awesome hooks and functional component features.
9
+ It uses a [declarative syntax](#declarative-syntax) that allows creating and dealing with HTML elements only by using Go, and without writing any HTML markup. The syntax is inspired by react and its awesome hooks and functional component features. It is highly opioninated and integrates very well with tailwind css for now.
10
10
 
11
- This originally started out as of fork of this awesome golang PWA framework [go-app](https://github.com/pyros2097/wapp). All credits goes to Maxence Charriere for majority of the work.
11
+ This originally started out as of fork of this awesome golang PWA framework [go-app](https://github.com/maxence-charriere/go-app). All credits goes to Maxence Charriere for majority of the work.
12
12
 
13
13
  ## Install
14
14
 
@@ -23,42 +23,125 @@ go get -u -v github.com/pyros2097/wapp
23
23
 
24
24
  ## Declarative syntax
25
25
 
26
- **go-app** uses a declarative syntax so you can write component-based UI elements just by using the Go programming language.
26
+ **wapp** uses a declarative syntax so you can write component-based UI elements just by using the Go programming language. It follows the same ideas of react. It has functional components and hooks.
27
+
28
+ The example is located here,
29
+
30
+ [wapp-example](https://github.com/pyros2097/wapp-example)
31
+
32
+ **Counter**
27
33
 
28
34
  ```go
29
- package pages
35
+ package main
30
36
 
31
37
  import (
32
- "github.com/pyros2097/wapp"
38
+ . "github.com/pyros2097/wapp"
33
39
  )
34
40
 
35
- func Index(c *app.RenderContext) app.UI {
41
+ func Counter(c *RenderContext) UI {
36
42
  count, setCount := c.UseInt(0)
37
- onclick := func(ctx app.Context, e app.Event) {
43
+ inc := func() { setCount(count() - 1) }
38
- setCount(count() + 1)
44
+ dec := func() { setCount(count() + 1) }
45
+ return Col(
46
+ Row(
47
+ Row(Css("text-6xl"),
48
+ Text("Counter"),
49
+ ),
50
+ ),
51
+ Row(
52
+ Row(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(dec),
53
+ Text("-"),
54
+ ),
55
+ Row(Css("text-6xl m-20"),
56
+ Text(count()),
57
+ ),
58
+ Row(Css("text-6xl m-20 cursor-pointer select-none"), OnClick(inc),
59
+ Text("+"),
60
+ ),
61
+ ),
62
+ )
63
+ }
64
+
65
+ func main() {
66
+ Run(Counter)
67
+ }
68
+ ```
69
+
70
+ **Clock**
71
+
72
+ ```go
73
+ package main
74
+
75
+ import (
76
+ "time"
77
+
78
+ . "github.com/pyros2097/wapp"
79
+ )
80
+
81
+ func Clock(c *RenderContext, title string) UI {
82
+ timeValue, setTime := c.UseState(time.Now())
83
+ running, setRunning := c.UseState(false)
84
+ startTimer := func() {
85
+ setRunning(true)
86
+ go func() {
87
+ for running().(bool) {
88
+ setTime(time.Now())
89
+ time.Sleep(time.Second * 1)
90
+ }
91
+ }()
39
92
  }
93
+ stopTimer := func() {
94
+ setRunning(false)
95
+ }
96
+ c.UseEffect(func() func() {
97
+ startTimer()
98
+ return stopTimer
99
+ })
100
+
101
+ return Col(
102
+ Row(
103
+ Div(Css("text-6xl"),
104
+ Text(title),
105
+ ),
106
+ ),
107
+ Row(
108
+ Div(Css("mt-10"),
109
+ Text(timeValue().(time.Time).Format("15:04:05")),
110
+ ),
111
+ ),
112
+ Row(
113
+ Div(Css("text-6xl m-20 cursor-pointer select-none"),
114
+ Text("Start"),
115
+ ).
116
+ OnClick(func(ctx Context, e Event) {
117
+ startTimer()
118
+ }),
119
+ Div(Css("text-6xl m-20 cursor-pointer select-none"),
120
+ Text("Stop"),
121
+ ).
122
+ OnClick(func(ctx Context, e Event) {
123
+ stopTimer()
124
+ }),
125
+ ),
126
+ )
127
+ }
40
128
 
41
- return app.Div().
129
+ func main() {
42
- Body(
43
- app.Div().
44
- Style("cursor", "pointer").
45
- OnClick(onclick).
130
+ Run(Clock)
46
- Body(
47
- app.Text(count()),
48
- ),
49
- app.Text("id: "+id.(string)),
50
- )
51
131
  }
132
+
52
133
  ```
53
134
 
54
- The directory should look like as the following:
135
+ The directory structure is a lot lke this,
55
136
 
56
137
  ```sh
138
+ └── assets
57
- .
139
+ | └── icon.png
140
+ | └── styles.css
58
- ├── pages
141
+ ├── pages
142
+ | └── index
143
+ | └── main.go
144
+ | └── about
145
+ | └── main.go
59
- └── index.go
146
+ |── main.go
60
- └── about.go
61
- └── static
62
- └── favicon.png
63
- └── logo.png
64
147
  ```