README
¶
tinywasm/html
HTML element builder API for TinyWasm components.
Overview
tinywasm/html provides declarative HTML element builders for use in TinyWasm components.
It was separated from tinywasm/dom so that dom can focus solely on DOM manipulation and syscall.
Installation
go get github.com/tinywasm/html
Usage (dot-import)
import (
. "github.com/tinywasm/html" // Div, Span, H1, Nav, Button...
. "github.com/tinywasm/dom" // Event, Component, Render, Append
)
func (c *MyComponent) Render() *dom.Element {
return Div().Class("container").Child(
H1().Text("Welcome"),
P().Text("Minimalist UI."),
Button().Text("Click").On("click", func(e dom.Event) {}),
)
}
Document shell
Document / DocumentString emit the full HTML shell that assetmin writes as index.html:
<!DOCTYPE html>, <html lang>, <head> with charset, viewport
(width=device-width, initial-scale=1, viewport-fit=cover), optional title/favicon/CSS/JS,
and <body>. Empty DocumentOptions{} already includes the viewport — no field to set.
SSR HTML Templates
Components that need a custom SSR template implement RenderHTML() string in their html.go file:
//go:build !wasm
package mycomponent
import . "github.com/tinywasm/html"
func (c *MyComponent) RenderHTML() string {
return Div().Set(clsRoot.AsAttr()).String()
}
Available Builders
Block: Div, Span, P, Pre, Code, Strong, Small, Mark Headings: H1, H2, H3, H4, H5, H6 Lists: Ul, Ol, Li Semantic: Nav, Section, Main, Article, Header, Footer, Aside, Details, Summary, Dialog, Figure, Figcaption Tables: Table, Thead, Tbody, Tfoot, Tr, Th, Td Form-adjacent: Fieldset, Legend, Label, Button, Canvas, Style, Script Special: A(href), Input(type), Option, SelectedOption, Br, Hr
Related Packages
- tinywasm/dom — DOM manipulation, Element type, lifecycle interfaces
- tinywasm/svg — SVG builders + icon sprite
- tinywasm/image — Image builders
Documentation
¶
Index ¶
- func A(href string) *Element
- func Article() *Element
- func Aside() *Element
- func Br() *Element
- func Button() *Element
- func Canvas() *Element
- func Code() *Element
- func Details() *Element
- func Dialog() *Element
- func Div() *Element
- func Document(opts DocumentOptions, body ...Component) *Element
- func DocumentString(opts DocumentOptions, body ...Component) string
- func Fieldset() *Element
- func Figcaption() *Element
- func Figure() *Element
- func Footer() *Element
- func H1() *Element
- func H2() *Element
- func H3() *Element
- func H4() *Element
- func H5() *Element
- func H6() *Element
- func Header() *Element
- func Hr() *Element
- func Input(typ string) *Element
- func Label() *Element
- func Legend() *Element
- func Li() *Element
- func Main() *Element
- func Mark() *Element
- func Nav() *Element
- func Ol() *Element
- func Option(value, text string) *Element
- func P() *Element
- func Pre() *Element
- func RewriteAssetURLs(htmlStr, newRoot string) string
- func Script() *Element
- func Section() *Element
- func SelectedOption(value, text string) *Element
- func Small() *Element
- func Span() *Element
- func Strong() *Element
- func Style() *Element
- func Summary() *Element
- func Table() *Element
- func Tbody() *Element
- func Td() *Element
- func Tfoot() *Element
- func Th() *Element
- func Thead() *Element
- func Tr() *Element
- func Ul() *Element
- type DocumentOptions
- type HTMLProvider
- type Page
- type PagesProvider
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func Document ¶ added in v0.0.3
func Document(opts DocumentOptions, body ...Component) *Element
Document builds the complete document shell as *Element (the <html> element). Does not include <!DOCTYPE html> — use DocumentString for the full output.
func DocumentString ¶ added in v0.0.3
func DocumentString(opts DocumentOptions, body ...Component) string
DocumentString renders the full HTML document including <!DOCTYPE html>. This is what assetmin writes to disk as index.html.
func Figcaption ¶
func Figcaption() *Element
func RewriteAssetURLs ¶ added in v0.0.3
RewriteAssetURLs rewrites relative href/src attributes in an HTML fragment, keeping only the filename and prepending newRoot. It ignores absolute URLs, rooted paths, and non-file schemes (data:, mailto:, tel:, javascript:). SSR/backend-only: this is excluded from wasm builds (its only caller, assetmin, is backend).
func SelectedOption ¶
func SelectedOption(value, text string) *Element
Types ¶
type DocumentOptions ¶ added in v0.0.3
type DocumentOptions struct {
Lang string // default "en"
Title string
CSSURL string // <link rel="stylesheet">
JSURL string // <script src defer>
FaviconURL string // <link rel="icon">
Head string // extra markup for <head> (optional)
// Description, Canonical and Image are the per-page metadata a search or
// answer engine reads. They are typed fields rather than markup pushed
// through Head so that a site emitting many pages cannot silently ship
// two of them sharing one description — the single most common way a
// multi-page static site loses its per-page ranking.
Description string // <meta name="description"> and og:description
Canonical string // absolute URL; <link rel="canonical"> and og:url
Image string // absolute URL; og:image
// JSONLD is a schema.org document embedded as
// <script type="application/ld+json">. It stays a string because its
// shape is caller-defined (LocalBusiness, MedicalClinic, Service, …) and
// modelling every schema.org type is not this package's job. Emitted
// verbatim — the caller is responsible for it being valid JSON.
JSONLD string
}
DocumentOptions configures the document shell.
type HTMLProvider ¶
type HTMLProvider interface {
RenderHTML() string
}
HTMLProvider is an optional capability: components that expose a static SSR HTML template fragment for injection by assetmin.
Implement in a component's html.go file (//go:build !wasm). Most components do NOT need this — only those with a static shell distinct from their dynamic Render() output.
Example in mycomponent/html.go:
//go:build !wasm
package mycomponent
import . "github.com/tinywasm/html"
func (c *MyComponent) RenderHTML() string {
return Div(clsRoot.AsAttr()).String()
}
For raw static HTML:
func (c *MyComponent) RenderHTML() string {
return `<div class="root"></div>`
}
type Page ¶ added in v0.0.17
type Page struct {
// Path is the site-absolute route, e.g. "/" or "/especialidades/oftalmologia/".
// A trailing slash means the compiler writes <path>/index.html so the URL
// serves without an extension.
Path string
// Doc is the head metadata for THIS page. Title, Description and Canonical
// are what differ per page; CSSURL/JSURL/FaviconURL are normally filled in
// by the compiler, which is the only layer that knows the built asset names.
Doc DocumentOptions
// Body is the rendered markup placed inside <body>.
Body string
}
Page is one emitted document of a multi-page static site: where it is served from, the head metadata that makes it rank on its own, and its body markup.
A site compiler turns each Page into one file. RenderHTML above is the single-page case (one document at "/"); Page is what a module declares when it owns several routes — a specialty per URL, an article per URL — each needing its own title, description and canonical, which is precisely what a single shared index.html cannot express.
type PagesProvider ¶ added in v0.0.17
type PagesProvider interface {
RenderPages() []Page
}
PagesProvider is an optional capability: a module that owns several routes declares them here instead of (or in addition to) RenderHTML.
Implement in a //go:build !wasm file, like the other SSR producers:
func (m *Module) RenderPages() []Page {
return []Page{{
Path: "/especialidades/oftalmologia/",
Doc: DocumentOptions{Title: "Oftalmología en Chillán — …", Description: "…"},
Body: body.String(),
}}
}
Source Files
Directories