Vecty bugs

main.go

package main

import (
	"encoding/hex"
	"fmt"
	"math/rand"

	"github.com/gopherjs/vecty"
	"github.com/gopherjs/vecty/elem"
	"github.com/gopherjs/vecty/event"
)

func main() {
	items := &Items{}
	for i := 0; i < 10; i++ {
		items.Add()
	}
	vecty.RenderBody(&App{Items: items})
}

type Items struct {
	lastID ItemID
	List   []*Item
}

func (items *Items) Add() {
	items.lastID++

	var data [8]byte
	rand.Read(data[:])
	name := hex.EncodeToString(data[:])

	items.List = append(items.List, &Item{items.lastID, name})
}

func (items *Items) Remove(id ItemID) {
	for i := 0; i < len(items.List); i++ {
		if items.List[i].ID == id {
			items.List = append(items.List[:i], items.List[i+1:]...)
			return
		}
	}
}

func (items *Items) Delete(i int) {
	items.List = append(items.List[:i], items.List[i+1:]...)
}

type ItemID int
type Item struct {
	ID   ItemID
	Name string
}

type App struct {
	vecty.Core
	Items *Items
}

func (app *App) AddRandom(ev *vecty.Event) {
	app.Items.Add()
	vecty.Rerender(app)
}

func (app *App) DeleteRandom(ev *vecty.Event) {
	if len(app.Items.List) == 0 {
		return
	}

	app.Items.Delete(rand.Intn(len(app.Items.List)))
	vecty.Rerender(app)
}

func (app *App) Remove(id ItemID) {
	app.Items.Remove(id)
	vecty.Rerender(app)
}

func (app *App) Render() vecty.ComponentOrHTML {
	var items []vecty.MarkupOrChild
	for i, item := range app.Items.List {
		items = append(items, &ItemView{
			App:   app,
			Index: i,
			Item:  item,
		})
	}

	return elem.Body(
		elem.Style(vecty.Text(`
			.items {
				padding-top: 1rem;
			}
			.close {
				cursor: pointer;
			}
			.close:hover {
				background: #fff;
			}
			.item {
				transition: background 1s ease-in-out;
				padding: 0.5rem;
			}
		`)),
		elem.Button(
			vecty.Markup(event.Click(app.AddRandom)),
			vecty.Text("Add"),
		),
		elem.Button(
			vecty.Markup(event.Click(app.DeleteRandom)),
			vecty.Text("Delete"),
		),
		elem.Div(
			vecty.Markup(
				vecty.Class("items"),
			),
			elem.Div(items...),
		),
	)
}

type ItemView struct {
	vecty.Core
	App   *App
	Index int   `vecty:"prop"`
	Item  *Item `vecty:"prop"`
}

func (view *ItemView) Key() interface{} {
	return view.Item.ID
}

func (view *ItemView) Mount() {
	fmt.Println("Mount: ", view.Item.Name)
}

func (view *ItemView) Unmount() {
	fmt.Println("Unmount: ", view.Item.Name)
}

func (view *ItemView) Render() vecty.ComponentOrHTML {
	return elem.Div(
		vecty.Markup(
			vecty.Class("item"),
			vecty.Style("background", fmt.Sprintf("hsla(%d,70%%,%d%%,1)", view.Item.ID*67, max(100-view.Index*10, 30))),
		),
		elem.Span(
			vecty.Markup(
				vecty.Class("close"),
				event.Click(func(ev *vecty.Event) {
					view.App.Remove(view.Item.ID)
				}),
			),
			vecty.Text("[X] "),
		),
		vecty.Text(fmt.Sprintf("#%d | %d: %s", view.Index, view.Item.ID, view.Item.Name)),
	)
}

func max(a, b int) int {
	if a > b {
		return a
	}
	return b
}