search

nobonobo / wecty

Frontend ToolKit for Go and TinyGo.
BSD 2-Clause "Simplified" License
34 stars 3 forks source link
frontend go spa tinygo wasm

readme

Wecty

Wecty: フロントエンドツールキット for Go and TinyGo

方針

機能

基本の使い方

ツールのセットアップ

go get github.com/nobonobo/wecty/cmd/wecty

ファイル群の準備

top.html

<form @submit="{{c.OnSubmit}}">
  <button>Submit</button>
</form>

以下のコマンドを実行した場合、

wecty generate -c TopView top.html

top_gen.go が生成されます

package main

import (
  "github.com/nobonobo/wecty"
)

func (c *TopView) Render() wecty.HTML {
  return wecty.Tag("form",
    wecty.Event("submit", c.OnSubmit),
    wecty.Tag("button", vecty.Text("Submit")),
  )
}

以下のような Go コードを手書きで書いておくことでコンポーネントとして利用可能になります。

top.go

package main

import (
  "github.com/nobonobo/wecty"
)

type TopView struct {
  wecty.Core
}

func (c *TopView) OnSubmit(ev js.Value) interface{} {
  println("submit!")
  return nil
}

また以下の記述を top.go に加えておくと go generate で wecty generate が自動的に走るようになります。

//go:generate wecty generate -c TopView -p main top.html

main.go

package main

import (
  "github.com/nobonobo/wecty"
)

func main() {
  wecty.RenderBody(wecty.Tag("body", &TopView{}))
  select {}
}

あとはwecty serverを起動しておけば、 http://localhost:8080をブラウザで開くだけで top_gen.go が生成され WASM がビルド＆サーブされブラウザで動作を開始する

開発の進め方

Q&A

コンポーネントに成れる構造体の条件

DOM ツリーのマークアップ

コンポーネント.Render() HTMLメソッドを実装するには 単一の wecty.Tag(...)の戻り値を return するように記述する。

func (c *コンポーネント) Render() HTML {
  return wecty.Tag(...)
}

wecty.Tag 関数の定義は以下の通り

wecty.Tag(tagName, markups ...wecty.Markup) *Node

tagName には HTML タグ名を渡す。markups には以下の記述を書く。

Markup になれるもの一覧

ユーティリティ

wecty いくつかのサブコマンドをもつユーティリティ

wecty generate

Usage of generate:
  -c string
        component name
  -o string
        output filename
  -p string
        output package name (default "main")

HTML ライクなマークアップの基本

<body></body> -> wecty.Tag("body")

属性マークアップ

<h1 id="title">Title</h1>:

wecty.Tag("h1",
  wecty.Attr("id", "title"),
  vecty.Text("Title"),
)

Class マークアップ

<h1 class="title large">Title</h1>:

wecty.Tag("h1",
  wecty.Class{
    "title": true,
    "large": true,
  },
  vecty.Text("Title"),
)

イベントマークアップ

<form @submit="{{c.OnSubmit}}">
  <button>Submit</button>
</form>
wecty.Tag("form",
  wecty.Event("submit", c.OnSubmit),
  wecty.Tag("button", vecty.Text("Submit")),
)

RAW 記述

<import>github.com/nobonobo/examples/todo/components</import>
<div><raw>&components.Item{}</raw></div>
import (
  "github.com/nobonobo/examples/todo/components"
)
...
  return wecty.Tag("div",
    &components.Item{},
  )
...

wecty server

開発用簡易 HTTP サーバー

Usage of server:
  -addr string
        listen address (default ":8080")
  -p path=endpoint
      add reverse proxy rule (allow multiple rules)
  -tinygo
        use tinygo tool chain

機能

コマンドオプション

例：

wecty server -addr :8080 -p /api/=http://localhost:9001

バックエンドサーバーを http://localhost:9001 にて動作させた状態で開発を進める場合などで使います。

出力サイズ

Todo サンプルのコンパイル事例

ツール WASM サイズ gzipped
Go 2.8MiB 787.2KiB
TinyGo 374KiB 154KiB

既知の問題

今後の機能追加