hexops / vecty

Vecty lets you build responsive and dynamic web frontends in Go using WebAssembly, competing with modern web frameworks like React & VueJS.
BSD 3-Clause "New" or "Revised" License
2.82k stars 144 forks source link

Add a basic example on usage #282

Closed soypat closed 3 years ago

soypat commented 3 years ago

I really have no idea how to start using this framework. There is nothing to go on at a glance.

An example of proper examples/documentation would be https://github.com/gin-gonic/gin#api-examples 's API section

For example: How do I go about generating the html for my page?? How would I even use that in a project?

type Page struct {
    vecty.Core
}

func (Page) Render() vecty.ComponentOrHTML {
    return elem.Body(
        &Header{},
    )
}
type Header struct {
    Title string
    vecty.Core
}

func (h *Header) Render() vecty.ComponentOrHTML {
    return elem.Header(
        vecty.Markup(style.Width("100%"), vecty.Style("text-align", "center")),
        elem.Span(
            vecty.Markup(vecty.Style("padding", string(style.Px(15))), vecty.Style("display", "inline-block")),
            vecty.Text(h.Title),
        ),
    )
}
VinceJnz commented 3 years ago

Have you looked at the examples? https://github.com/hexops/vecty/tree/main/example

soypat commented 3 years ago

Have you looked at the examples? https://github.com/hexops/vecty/tree/main/example

This is useful! May I add a PR to add it to README.md? I usually look there for use cases, users, examples- and I'm sure I'm not the only one

soypat commented 3 years ago

@VinceJnz Running gopherjs build or gopherjs serve just leaves me with a blank page on todomvc... there's no index.html or anything to visualize the example. What Am I supposed to do?

VinceJnz commented 3 years ago

Sorry I can't help you with gopherjs. I have been building the wasm in go using the following: set GOOS=js set GOARCH=wasm go build -o main.wasm

slimsag commented 3 years ago

As noted, examples and instructions for usage are found in https://github.com/hexops/vecty/blob/main/example/README.md

Also, as the README calls out - Vecty is still experimental and hence documentation is intentionally lacking at this stage. You can read more about that here: https://github.com/hexops/vecty#current-status

Feel free to send a PR to link to example/README.md from the main README if you think that'd be helpful for others!