Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/arturoeanton/go-echo-live-view
POC for test the idea of Phoenix LiveView in Go and Echo
https://github.com/arturoeanton/go-echo-live-view
client-server echo echo-framework go golang live-view liveview phoenix websocket
Last synced: 3 months ago
JSON representation
POC for test the idea of Phoenix LiveView in Go and Echo
- Host: GitHub
- URL: https://github.com/arturoeanton/go-echo-live-view
- Owner: arturoeanton
- License: apache-2.0
- Created: 2021-07-07T16:18:14.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2023-04-25T04:53:34.000Z (almost 2 years ago)
- Last Synced: 2024-06-20T00:31:21.642Z (8 months ago)
- Topics: client-server, echo, echo-framework, go, golang, live-view, liveview, phoenix, websocket
- Language: Go
- Homepage:
- Size: 3.03 MB
- Stars: 20
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# go-echo-live-view
Little POC for test the idea of Phoenix LiveView in Go and Echo (https://github.com/labstack/echo)
The idea was stolen from https://github.com/brendonmatos/golive
## Driver Methods
| Method | Description |
| --- | --- |
| `Remove` | return document.getElementById("$id").remove() |
| `GetHTML` | return document.getElementById("$id").innerHTML |
| `GetText` | return document.getElementById("$id").innerText |
| `GetPropertie` | return document.getElementById("$id")[$propertie] |
| `GetValue` | return document.getElementById("$id").value |
| `GetStyle` | return document.getElementById("$id").style["$propertie"] |
| `GetElementById` | return document.getElementById("$id").value |
| `EvalScript` | execute eval($code);|
| `FillValue` | document.getElementById("$id").innerHTML = $value |
| `SetHTML` | document.getElementById("$id").innerHTML = $value |
| `SetText` | document.getElementById("$id").innerText = $value|
| `SetPropertie` | document.getElementById("$id")[$propertie] = $value |
| `SetValue` | document.getElementById("$id").value = $value|
| `SetStyle` | document.getElementById("$id").style.cssText = $style |
## Example
```golang
package main
import (
"fmt"
"github.com/arturoeanton/go-echo-live-view/components"
"github.com/arturoeanton/go-echo-live-view/liveview"
"github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware"
)
func main() {
e := echo.New()
e.Use(middleware.Logger())
e.Use(middleware.Recover())
home := liveview.PageControl{
Title: "Home",
Lang: "en",
Path: "/",
Router: e,
}
home.Register(func() *liveview.ComponentDriver {
button1 := liveview.NewDriver("button1", &components.Button{Caption: "Sum 1"})
text1 := liveview.NewDriver("text1", &components.InputText{})
text1.Events["KeyUp"] = func(data interface{}) {
text1.FillValue("div_text_result", data.(string))
}
button1.Events["Click"] = func(data interface{}) {
button := button1.Component.(*components.Button)
button.I++
text := button.Driver.GetElementById("text1")
button.Driver.FillValue("span_result", fmt.Sprint(button.I)+" -> "+text)
button.Driver.EvalScript("console.log(1)")
}
return components.NewLayout("home", `
{{ mount "text1"}}
{{mount "button1"}}
`).Mount(text1).Mount(button1)
})
e.Logger.Fatal(e.Start(":1323"))
}
```
## Interface Component
```golang
type Component interface {
GetTemplate() string
Start()
}
```
## Example go-notebook
https://github.com/arturoeanton/go-notebook
## More Examples
### example_todo
### example1
### Example Style
```golang
package main
import (
"github.com/arturoeanton/go-echo-live-view/components"
"github.com/arturoeanton/go-echo-live-view/liveview"
"github.com/labstack/echo/v4"
"github.com/labstack/echo/v4/middleware"
)
type Button struct {
Driver *liveview.ComponentDriver
}
func (t *Button) Start() {
t.Driver.Commit()
}
func (t *Button) GetTemplate() string {
return `Change style`
}
func (t *Button) Click(data interface{}) {
background := t.Driver.GetStyle("button1", "background")
if background != "red" {
t.Driver.SetStyle("button1", "background: red")
} else {
t.Driver.SetStyle("button1", "background: blue")
}
}
func main() {
e := echo.New()
e.Use(middleware.Logger())
e.Use(middleware.Recover())
home := liveview.PageControl{
Title: "Home",
HeadCode: "head.html",
Lang: "en",
Path: "/",
Router: e,
// Debug: true,
}
home.Register(func() *liveview.ComponentDriver {
button1 := liveview.NewDriver("button1", &Button{})
return components.NewLayout("home", `
{{mount "button1"}} `).Mount(button1)
})
e.Logger.Fatal(e.Start(":1323"))
}
```
