refactor folder structure
This commit is contained in:
244
go/wasmruntime/vdom/vnode.go
Normal file
244
go/wasmruntime/vdom/vnode.go
Normal file
@@ -0,0 +1,244 @@
|
||||
// Package vdom is a platform-neutral virtual DOM shared by the server (renders
|
||||
// to an HTML string) and the client (reconciles into the real DOM). It compiles
|
||||
// on BOTH native and js/wasm, so the same component code runs in both places —
|
||||
// which is what makes server-side rendering + client hydration possible.
|
||||
package vdom
|
||||
|
||||
import (
|
||||
"html"
|
||||
"sort"
|
||||
"strconv"
|
||||
"strings"
|
||||
)
|
||||
|
||||
// Event is a DOM event passed to handlers. The client provides a concrete
|
||||
// implementation; on the server events are never invoked, and every accessor
|
||||
// returns its zero value.
|
||||
type Event interface {
|
||||
PreventDefault()
|
||||
StopPropagation()
|
||||
Value() string // target.value (for inputs)
|
||||
Checked() bool // target.checked (for checkboxes / radios)
|
||||
Key() string // KeyboardEvent.key — compare against the KEY_* constants
|
||||
ClientX() int // pointer position, viewport coordinates
|
||||
ClientY() int //
|
||||
Target() any // the platform DOM handle of event.target; nil on the server
|
||||
SetData(format, data string) // DataTransfer — no-ops off a drag event
|
||||
GetData(format string) string
|
||||
}
|
||||
|
||||
// VNode is a virtual DOM node. Tag == "" is a text node (content in Text). HTML,
|
||||
// if set on an element, is raw innerHTML (children ignored). Tag == TagPortal
|
||||
// renders its children into document.body instead of in place.
|
||||
type VNode struct {
|
||||
Tag string
|
||||
Text string
|
||||
HTML string
|
||||
Attrs map[string]string
|
||||
Props map[string]string
|
||||
Events map[string]func(Event)
|
||||
Children []*VNode
|
||||
|
||||
// Ref, if set, receives the DOM node this VNode renders to (see WithRef).
|
||||
Ref *Ref
|
||||
|
||||
// Runtime holds the wasm reconciler's per-node bookkeeping (DOM handle,
|
||||
// listener wrappers). It's `any` so this package stays platform-neutral; it
|
||||
// is nil on the server.
|
||||
Runtime any
|
||||
}
|
||||
|
||||
// Mod configures a VNode while it is built.
|
||||
type Mod interface{ apply(*VNode) }
|
||||
|
||||
// TagPortal marks a node whose children are mounted into document.body rather
|
||||
// than into its own parent. It is how a floating panel escapes an ancestor's
|
||||
// `overflow: hidden` (menus scroll, modals clip) or `transform` (which would
|
||||
// re-root `position: fixed` onto the modal instead of the viewport). In the tree
|
||||
// it occupies a hidden, zero-size placeholder; the children live at body level.
|
||||
const TagPortal = "#portal"
|
||||
|
||||
// El builds an element VNode.
|
||||
func El(tag string, mods ...Mod) *VNode {
|
||||
n := &VNode{Tag: tag, Attrs: map[string]string{}, Props: map[string]string{}, Events: map[string]func(Event){}}
|
||||
for _, m := range mods {
|
||||
m.apply(n)
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
// Portal renders its children into document.body. On the server it renders the
|
||||
// placeholder only — floating content is closed during SSR, so there is nothing
|
||||
// to emit, and the placeholder keeps the client's hydration walk aligned.
|
||||
func Portal(children ...*VNode) *VNode {
|
||||
n := El(TagPortal)
|
||||
for _, c := range children {
|
||||
c.apply(n)
|
||||
}
|
||||
return n
|
||||
}
|
||||
|
||||
// Text builds a text VNode.
|
||||
func Text(s string) *VNode { return &VNode{Text: s} }
|
||||
|
||||
func (n *VNode) apply(parent *VNode) {
|
||||
if n != nil { // a nil child renders nothing (e.g. a closed Modal/Menu returns nil)
|
||||
parent.Children = append(parent.Children, n)
|
||||
}
|
||||
}
|
||||
|
||||
type attrMod struct{ k, v string }
|
||||
|
||||
func (a attrMod) apply(n *VNode) { n.Attrs[a.k] = a.v }
|
||||
|
||||
// Attr sets an HTML attribute.
|
||||
func Attr(k, v string) Mod { return attrMod{k, v} }
|
||||
|
||||
type propMod struct{ k, v string }
|
||||
|
||||
func (p propMod) apply(n *VNode) { n.Props[p.k] = p.v }
|
||||
|
||||
// Prop sets a live DOM property (e.g. an input's value).
|
||||
func Prop(k, v string) Mod { return propMod{k, v} }
|
||||
|
||||
// BoolProp sets a boolean DOM property: checked, disabled, open, and the rest of
|
||||
// boolProps below.
|
||||
//
|
||||
// Use this rather than Prop for those — a boolean written as a string is wrong in BOTH
|
||||
// directions, and wrong in the same direction both times, which is what makes it such a
|
||||
// good hiding place for a bug. In HTML a boolean attribute is presence-based, so
|
||||
// `checked="false"` renders a TICKED box. In JS every non-empty string is truthy, so
|
||||
// `el.checked = "false"` also ticks it. A checkbox bound with Prop is therefore ticked
|
||||
// forever, and looks fine until you try to untick it.
|
||||
func BoolProp(k string, on bool) Mod { return propMod{k, strconv.FormatBool(on)} }
|
||||
|
||||
// boolProps are the DOM properties whose type is boolean, so both the reconciler and
|
||||
// SSR can special-case them (see BoolProp for why they must).
|
||||
//
|
||||
// This is a name table because the DOM is a name table: there is no way to ask, of a
|
||||
// VNode alone, whether `checked` on this tag is a boolean. Every framework carries the
|
||||
// same list.
|
||||
var boolProps = map[string]bool{
|
||||
"checked": true,
|
||||
"disabled": true,
|
||||
"readOnly": true,
|
||||
"required": true,
|
||||
"selected": true,
|
||||
"multiple": true,
|
||||
"hidden": true,
|
||||
"open": true,
|
||||
"autofocus": true,
|
||||
"indeterminate": true,
|
||||
"defaultChecked": true,
|
||||
}
|
||||
|
||||
// IsBoolProp reports whether a prop name is a boolean DOM property. The reconciler
|
||||
// needs it to write a real bool instead of a string.
|
||||
func IsBoolProp(k string) bool { return boolProps[k] }
|
||||
|
||||
type htmlMod struct{ html string }
|
||||
|
||||
func (h htmlMod) apply(n *VNode) { n.HTML = h.html }
|
||||
|
||||
// Raw sets inner HTML verbatim (children ignored) — e.g. a server-computed SVG.
|
||||
func Raw(html string) Mod { return htmlMod{html} }
|
||||
|
||||
type eventMod struct {
|
||||
name string
|
||||
h func(Event)
|
||||
}
|
||||
|
||||
func (e eventMod) apply(n *VNode) { n.Events[e.name] = e.h }
|
||||
|
||||
// On registers an event handler that ignores the event object.
|
||||
func On(event string, h func()) Mod { return eventMod{event, func(Event) { h() }} }
|
||||
|
||||
// OnEvent registers an event handler that receives the Event.
|
||||
func OnEvent(event string, h func(Event)) Mod { return eventMod{event, h} }
|
||||
|
||||
// --- server-side HTML rendering (used for SSR; runs on any platform) ---
|
||||
|
||||
var voidTags = map[string]bool{"br": true, "hr": true, "img": true, "input": true, "meta": true, "link": true}
|
||||
|
||||
// RenderHTML serializes a VNode tree to HTML with NO extra whitespace, so the
|
||||
// browser's parsed childNodes line up 1:1 with the VNode children on hydration.
|
||||
func RenderHTML(n *VNode) string {
|
||||
var b strings.Builder
|
||||
writeNode(&b, n)
|
||||
return b.String()
|
||||
}
|
||||
|
||||
func writeNode(b *strings.Builder, n *VNode) {
|
||||
if n.Tag == "" {
|
||||
b.WriteString(html.EscapeString(n.Text))
|
||||
return
|
||||
}
|
||||
if n.Tag == TagPortal {
|
||||
// Placeholder only — the children belong to document.body, which SSR does
|
||||
// not own. Emitting the same element the client creates keeps hydration's
|
||||
// childNodes lined up.
|
||||
b.WriteString(`<div data-portal="" style="display:none"></div>`)
|
||||
return
|
||||
}
|
||||
b.WriteByte('<')
|
||||
b.WriteString(n.Tag)
|
||||
writeAttrs(b, n.Attrs)
|
||||
writeProps(b, n.Props) // props like an input's value show up as attributes in SSR
|
||||
b.WriteByte('>')
|
||||
if voidTags[n.Tag] {
|
||||
return
|
||||
}
|
||||
if n.HTML != "" {
|
||||
b.WriteString(n.HTML) // raw
|
||||
} else {
|
||||
for _, c := range n.Children {
|
||||
writeNode(b, c)
|
||||
}
|
||||
}
|
||||
b.WriteString("</")
|
||||
b.WriteString(n.Tag)
|
||||
b.WriteByte('>')
|
||||
}
|
||||
|
||||
func writeAttrs(b *strings.Builder, m map[string]string) {
|
||||
for _, k := range sortedKeys(m) {
|
||||
writeAttr(b, k, m[k])
|
||||
}
|
||||
}
|
||||
|
||||
// writeProps serializes live DOM properties as HTML attributes for SSR, so the
|
||||
// server's markup shows what the client's props will hold.
|
||||
//
|
||||
// A boolean prop is emitted as a BARE attribute when true and omitted entirely when
|
||||
// false — that is what the HTML boolean-attribute rule means. Writing checked="false"
|
||||
// would render a ticked checkbox, which is the exact opposite of what was asked for.
|
||||
func writeProps(b *strings.Builder, m map[string]string) {
|
||||
for _, k := range sortedKeys(m) {
|
||||
v := m[k]
|
||||
if boolProps[k] {
|
||||
if v == "true" {
|
||||
b.WriteByte(' ')
|
||||
b.WriteString(strings.ToLower(k))
|
||||
}
|
||||
continue
|
||||
}
|
||||
writeAttr(b, k, v)
|
||||
}
|
||||
}
|
||||
|
||||
func writeAttr(b *strings.Builder, k, v string) {
|
||||
b.WriteByte(' ')
|
||||
b.WriteString(k)
|
||||
b.WriteString(`="`)
|
||||
b.WriteString(html.EscapeString(v))
|
||||
b.WriteByte('"')
|
||||
}
|
||||
|
||||
func sortedKeys(m map[string]string) []string {
|
||||
keys := make([]string, 0, len(m))
|
||||
for k := range m {
|
||||
keys = append(keys, k)
|
||||
}
|
||||
sort.Strings(keys)
|
||||
return keys
|
||||
}
|
||||
Reference in New Issue
Block a user