gox is an extension of Go's syntax that let's you write HTML-style tags directly in your source code.
Write HTML-style tags directly in your Go source, and have them get transpiled into Vecty components that can be run with GopherJS or WebAssembly.
Okay take a look:
package main
import "github.com/gopherjs/vecty"
type Page struct{
vecty.Core
}
func (w *Page) Render() vecty.ComponentOrHTML {
return <body>
<div class="amazing">
<h1>gox</h1>
<span class={"you could put dynamic content here"}/>
yeah you can do bare words too
</div>
</body>
}
func main() {
vecty.RenderBody(new(Page))
}
git clone github.com/8byt/gox
cd gox/
go run . examples/
go install github.com/hajimehoshi/wasmserve
wasmserve github.com/8byt/gox/examples/readme_1/
google-chrome http://localhost:8080
Four big reasons:
- It would be nice to have type safety, but I'm unwilling to write longform Vecty components
- It would be nice to know how Go parsing works
- I would like to learn Go by modifying its AST (Danny's reason)
- I want to write frontend code, but I don't want JS (Eric's reason)
We basically vendored the Go parser/scanner/AST/etc. and just modified it until it fit our needs.
Here's a more complicated example portion of a .gox file.
func (p *PageView) renderItemList() vecty.ComponentOrHTML {
var items vecty.List
for i, item := range store.Items {
if (store.Filter == model.Active && item.Completed) || (store.Filter == model.Completed && !item.Completed) {
continue
}
items = append(items, <ItemView Index={i} Item={item} />)
}
return <section class="main">
<input
id="toggle-all"
class="toggle-all"
type="checkbox"
checked={store.CompletedItemCount() == len(store.Items)}
onChange={p.onToggleAllCompleted}/>
<label for="toggle-all">Mark all as complete</label>
<ul class="todo-list">
{items}
</ul>
</section>
}
from our TodoMVC implementation
Wow! Okay I don't think we thought that would happen.
For now, clone this repo, and build it.
Use gox <directory> to convert .gox files into .go files (they stay in the same directory)
GopherJS should take care of the rest, use Vecty's docs and GopherJS's docs to learn more. We use gopherjs serve and things magically get transpiled again.
If you want to make this process better, we'd be happy to consider your ideas/PRs.
Thanks,
All modifications are MIT
Original Go code is all BSD
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent