E0154: An island page that breaks its rules

A .vuka.html file whose markup is one tag, an island component its header imports, is the page that component backs: its struct is the island's, its exported fields the props the component reads and its exported methods what the component calls, as an @ui.Island struct's are. It lowers to an @ui.Island struct, served as ui.IslandPage serves one.

A struct embedding ui.Live is a live island page, loading what the component shows in its hooks; a struct without is a stateless one, built per request, its fields bound from the path and query. A struct with hooks must embed ui.Live. The tag passes nothing of its own: an attribute names a prop by its field, rows={Rows}, or is a client: directive; the component gets every exported field either way.

Wrong

<!-- pages/applicants.vuka.html -->
<script lang="go">
package pages

import Applicants "../web/components/Applicants.vue"

type Page struct {
	Rows []Applicant `json:"rows"`
}
</script>

<Applicants rows={find("")} />

Right

<!-- pages/applicants.vuka.html -->
<script lang="go">
package pages

import Applicants "../web/components/Applicants.vue"

type Page struct {
	ui.Live
	Rows []Applicant `json:"rows"`
	db   *Registry
}

@ui.Mount
func (p *Page) mount(ctx context.Context) error {
	p.Rows = p.db.Find("")
	return nil
}
</script>

<Applicants rows={Rows} client:load />