dom

package
v0.0.1 Latest Latest
Warning

This package is not in the latest version of its module.

 Go to latest Published: Mar 14, 2026 License: MIT Imports: 0 Imported by: 0

README

DOM Package

Location: /dom

GoWebComponents/
├── dom/              ← YOU ARE HERE
│   ├── doc.go
│   ├── dom.go
│   ├── event.go
│   └── html.go
├── hooks/
├── state/
├── render/
├── router/
├── fetch/
├── internal/
├── examples/
└── ...

Overview

The dom package provides a comprehensive API for creating and manipulating HTML elements in a type-safe, declarative way. It's the foundation for building user interfaces with GoWebComponents.

Key Components

Element Creation (dom.go)
  • CreateElement() - Factory function for creating virtual DOM elements
  • Element type definitions and attribute handling
  • Virtual DOM node structure
HTML Element Constructors (html.go)

Over 80 HTML element functions including:

  • Layout: Div, Span, Section, Article, Header, Footer, Nav, Main, Aside
  • Text: H1-H6, P, Blockquote, Pre, Code, Em, Strong, Small
  • Forms: Form, Input, Textarea, Select, Option, Button, Label, Fieldset
  • Interactive: A, Button, Details, Summary, Dialog
  • Media: Img, Video, Audio, Canvas, Svg, Picture, Source
  • Tables: Table, Thead, Tbody, Tfoot, Tr, Th, Td, Caption
  • Lists: Ul, Ol, Li, Dl, Dt, Dd
  • Semantic: Time, Mark, Progress, Meter, Data, Output
Event Handling (event.go)
  • GoEvent struct - Type-safe event wrapper
  • Event helper methods:
    • GetValue() - Extract input values
    • IsChecked() - Get checkbox state
    • GetKey() - Keyboard event handling
    • PreventDefault() - Prevent default behavior
    • StopPropagation() - Stop event bubbling
Type Definitions
type Attrs = map[string]interface{}  // Element attributes
type Element struct {                // Virtual DOM element
    Type     string
    Props    Attrs
    Children []interface{}
}

Usage Example

import (
    "github.com/monstercameron/GoWebComponents/dom"
    "syscall/js"
)

func MyComponent(props dom.Attrs) *dom.Element {
    handleClick := js.FuncOf(func(this js.Value, args []js.Value) interface{} {
        println("Button clicked!")
        return nil
    })

    return dom.Div(dom.Attrs{
        "class": "container",
    },
        dom.H1(nil, dom.Text("Welcome")),
        dom.P(dom.Attrs{
            "class": "description",
        }, dom.Text("This is a demo component")),
        dom.Button(dom.Attrs{
            "onclick": handleClick,
            "class": "btn btn-primary",
        }, dom.Text("Click Me")),
    )
}
  • /render - Uses this package to render elements to actual DOM
  • /hooks - Provides hooks that work with DOM elements
  • /examples - See practical usage in example applications

Documentation

See doc.go for the official Go package documentation.

Documentation

Overview

Package dom provides HTML element constructors and DOM manipulation utilities for GoWebComponents.

This package offers a type-safe way to create HTML elements programmatically in Go, with automatic conversion of children and optimized performance through element pooling and smart string handling.

Basic usage: 

import "github.com/monstercameron/GoWebComponents/dom"

// Create simple elements
element := dom.Div(nil,
    dom.H1(nil, "Hello World"),
    dom.P(nil, "Welcome to GoWebComponents"),
)

The package includes constructors for all standard HTML5 elements, organized by category:

  • Document Structure: Html, Head, Body, Title, Meta, Link, Style, Script
  • Layout: Div, Span, P, Section, Article, Aside, Header, Footer, Main, Nav
  • Headings: H1, H2, H3, H4, H5, H6
  • Text: Strong, Em, Small, Mark, Code, Pre, Blockquote, Cite
  • Lists: Ul, Ol, Li, Dl, Dt, Dd
  • Links & Media: A, Img, Video, Audio, Source, Canvas, Svg
  • Forms: Form, Input, Textarea, Button, Select, Option, Label, Fieldset
  • Tables: Table, Thead, Tbody, Tfoot, Tr, Th, Td, Caption
  • Interactive: Details, Summary, Dialog

All element constructors accept attributes as a map and variadic children: 

dom.Div(dom.Attrs{"class": "container", "id": "main"},
    dom.H1(nil, "Title"),
    dom.P(nil, "Content"),
)

Helper functions are provided for common patterns: 

dom.ClassProps("btn-primary")           // Creates map with class attribute
dom.IdProps("my-element")               // Creates map with id attribute
dom.HrefProps("/about")                 // Creates map with href attribute
dom.ClassIdProps("container", "main")   // Creates map with both class and id

Index

Examples

Constants

This section is empty.

Variables

This section is empty.

Functions

func ClassIdProps 

func ClassIdProps(className, id string) map[string]interface{}

ClassIdProps creates a props map with both class and id attributes.

func ClassProps 

func ClassProps(className string) map[string]interface{}

ClassProps creates a props map with only a class attribute. Uses pre-allocated maps for common CSS classes to reduce allocations.

func CreateElement 

func CreateElement(typ interface{}, props map[string]interface{}, children ...interface{}) *runtime.Element

CreateElement creates a virtual DOM element with the given type, props, and children. This is the low-level element creation function used by all HTML element constructors.

The type can be:

  • A string representing an HTML tag name (e.g., "div", "span")
  • A component function that returns an Element

Props is a map of HTML attributes and event handlers. Children can be Elements, strings (auto-converted to Text nodes), or component functions.

Example: 

dom.CreateElement("div", map[string]interface{}{
    "class": "container",
    "id": "main",
}, dom.Text("Content"))

func EmptyProps 

func EmptyProps() map[string]interface{}

EmptyProps returns an empty props map.

func Fragment 

func Fragment(props map[string]interface{}, children ...interface{}) *runtime.Element

Fragment groups multiple elements without creating a wrapper DOM node. This is equivalent to React's Fragment (<> syntax). Fragments allow you to return multiple elements from a component without introducing an extra div or other wrapper element.

Fragments are useful for:

  • Avoiding unnecessary wrapper divs in lists
  • Keeping semantic HTML structure clean
  • Avoiding CSS layout issues from wrapper elements
  • Grouping related elements without a container

Example with Fragment to group items without wrapper: 

func ListItems(props dom.Attrs) *dom.Element {
    return dom.Fragment(nil,
        dom.Li(nil, dom.Text("Item 1")),
        dom.Li(nil, dom.Text("Item 2")),
        dom.Li(nil, dom.Text("Item 3")),
    )
}
// Renders as:
// <li>Item 1</li>
// <li>Item 2</li>
// <li>Item 3</li>
// NOT wrapped in an extra div or span

Example in a list to avoid key warnings: 

func TodoList(props dom.Attrs) *dom.Element {
    items := []string{"Buy milk", "Write code", "Review PR"}
    children := make([]interface{}, 0)

    for i, item := range items {
        children = append(children,
            dom.Fragment(nil,
                dom.H3(nil, dom.Text(fmt.Sprintf("Task %d", i+1))),
                dom.P(nil, dom.Text(item)),
            ),
        )
    }

    return dom.Ul(nil, children...)
}

Note: Fragment props are currently ignored. In the future, only the "key" prop will be supported for list reconciliation purposes.

func HrefProps 

func HrefProps(href string) map[string]interface{}

HrefProps creates a props map with only an href attribute.

func IdProps 

func IdProps(id string) map[string]interface{}

IdProps creates a props map with only an id attribute.

func InputTypeProps 

func InputTypeProps(inputType string) map[string]interface{}

InputTypeProps creates a props map with only a type attribute. Uses pre-allocated maps for common input types to reduce allocations.

func NilProps 

func NilProps() map[string]interface{}

NilProps returns a nil props map - useful for elements without attributes.

func Text 

func Text(content string) *runtime.Element

Text creates a text node element. This is the primary way to create text content in the virtual DOM.

Example: 

dom.Text("Hello, World!")

Types

type Attributes 

type Attributes = map[string]interface{}

type Attrs 

type Attrs = map[string]interface{}

Type aliases for cleaner attribute syntax

type Element 

type Element = runtime.Element

func A 

func A(props Attrs, children ...interface{}) *Element

func Abbr 

func Abbr(props Attrs, children ...interface{}) *Element

func Address 

func Address(props Attrs, children ...interface{}) *Element

func Article 

func Article(props Attrs, children ...interface{}) *Element

func Aside 

func Aside(props Attrs, children ...interface{}) *Element

func Audio 

func Audio(props Attrs, children ...interface{}) *Element

func Bdi 

func Bdi(props Attrs, children ...interface{}) *Element

func Bdo 

func Bdo(props Attrs, children ...interface{}) *Element

func Blockquote 

func Blockquote(props Attrs, children ...interface{}) *Element

func Body 

func Body(props Attrs, children ...interface{}) *Element

func Br 

func Br(props Attrs) *Element

func Button 

func Button(props Attrs, children ...interface{}) *Element
Example 
package main

import (
	"fmt"

	"github.com/monstercameron/GoWebComponents/dom"
)

func main() {
	// Create a button with an onclick handler
	// Note: In a real app, you would use hooks.GoUseFunc for the handler
	btn := dom.Button(
		dom.Attrs{
			"class": "btn btn-primary",
			"type":  "button",
		},
		dom.Text("Click Me"),
	)

	fmt.Printf("Created button: %v\n", btn != nil)
}

Output:
Created button: true

func Canvas 

func Canvas(props Attrs, children ...interface{}) *Element

func Caption 

func Caption(props Attrs, children ...interface{}) *Element

func Cite 

func Cite(props Attrs, children ...interface{}) *Element

func Code 

func Code(props Attrs, children ...interface{}) *Element

func Col 

func Col(props Attrs) *Element

func Colgroup 

func Colgroup(props Attrs, children ...interface{}) *Element

func Data 

func Data(props Attrs, children ...interface{}) *Element

func Datalist 

func Datalist(props Attrs, children ...interface{}) *Element

func Dd 

func Dd(props Attrs, children ...interface{}) *Element

func Del 

func Del(props Attrs, children ...interface{}) *Element

func Details 

func Details(props Attrs, children ...interface{}) *Element

func Dfn 

func Dfn(props Attrs, children ...interface{}) *Element

func Dialog 

func Dialog(props Attrs, children ...interface{}) *Element

func Div 

func Div(props Attrs, children ...interface{}) *Element
Example 
package main

import (
	"fmt"

	"github.com/monstercameron/GoWebComponents/dom"
)

func main() {
	// Create a simple div with text content
	element := dom.Div(
		dom.Attrs{"class": "container"},
		dom.H1(nil, dom.Text("Hello World")),
		dom.P(nil, dom.Text("This is a paragraph")),
	)

	// In a real application, this element would be rendered to the DOM
	// using render.ToElement(element, container)
	fmt.Printf("Created element: %v\n", element != nil)
}

Output:
Created element: true

func DivWithComponents 

func DivWithComponents(props map[string]interface{}, componentRefs ...func(map[string]interface{}) *Element) *Element

DivWithComponents creates a div element with component references as children.

func Dl 

func Dl(props Attrs, children ...interface{}) *Element

func Dt 

func Dt(props Attrs, children ...interface{}) *Element

func Em 

func Em(props Attrs, children ...interface{}) *Element

func Embed 

func Embed(props Attrs) *Element

func Fieldset 

func Fieldset(props Attrs, children ...interface{}) *Element

func Figcaption 

func Figcaption(props Attrs, children ...interface{}) *Element

func Figure 

func Figure(props Attrs, children ...interface{}) *Element
func Footer(props Attrs, children ...interface{}) *Element

func Form 

func Form(props Attrs, children ...interface{}) *Element
Example 
package main

import (
	"fmt"

	"github.com/monstercameron/GoWebComponents/dom"
)

func main() {
	// Create a login form
	form := dom.Form(
		dom.Attrs{"class": "login-form"},
		dom.Div(
			dom.Attrs{"class": "form-group"},
			dom.Label(dom.Attrs{"for": "username"}, dom.Text("Username")),
			dom.Input(dom.Attrs{
				"type": "text",
				"id":   "username",
				"name": "username",
			}),
		),
		dom.Div(
			dom.Attrs{"class": "form-group"},
			dom.Label(dom.Attrs{"for": "password"}, dom.Text("Password")),
			dom.Input(dom.Attrs{
				"type": "password",
				"id":   "password",
				"name": "password",
			}),
		),
		dom.Button(
			dom.Attrs{"type": "submit"},
			dom.Text("Login"),
		),
	)

	fmt.Printf("Created form: %v\n", form != nil)
}

Output:
Created form: true

func H1 

func H1(props Attrs, children ...interface{}) *Element

func H2 

func H2(props Attrs, children ...interface{}) *Element

func H3 

func H3(props Attrs, children ...interface{}) *Element

func H4 

func H4(props Attrs, children ...interface{}) *Element

func H5 

func H5(props Attrs, children ...interface{}) *Element

func H6 

func H6(props Attrs, children ...interface{}) *Element
func Head(props Attrs, children ...interface{}) *Element
func Header(props Attrs, children ...interface{}) *Element

func Hgroup 

func Hgroup(props Attrs, children ...interface{}) *Element

func Hr 

func Hr(props Attrs) *Element

func Html 

func Html(props Attrs, children ...interface{}) *Element

func Img 

func Img(props Attrs) *Element

func Input 

func Input(props Attrs) *Element

func Ins 

func Ins(props Attrs, children ...interface{}) *Element

func Kbd 

func Kbd(props Attrs, children ...interface{}) *Element

func Label 

func Label(props Attrs, children ...interface{}) *Element

func Legend 

func Legend(props Attrs, children ...interface{}) *Element

func Li 

func Li(props Attrs, children ...interface{}) *Element
func Link(props Attrs) *Element

func Main 

func Main(props Attrs, children ...interface{}) *Element

func MainWithComponents 

func MainWithComponents(props map[string]interface{}, componentRefs ...func(map[string]interface{}) *Element) *Element

MainWithComponents creates a main element with component references as children.

func Mark 

func Mark(props Attrs, children ...interface{}) *Element

func Meta 

func Meta(props Attrs) *Element

func Meter 

func Meter(props Attrs, children ...interface{}) *Element
func Nav(props Attrs, children ...interface{}) *Element

func Object 

func Object(props Attrs, children ...interface{}) *Element

func Ol 

func Ol(props Attrs, children ...interface{}) *Element

func Optgroup 

func Optgroup(props Attrs, children ...interface{}) *Element

func Option 

func Option(props Attrs, children ...interface{}) *Element

func Output 

func Output(props Attrs, children ...interface{}) *Element

func P 

func P(props Attrs, children ...interface{}) *Element

func Param 

func Param(props Attrs) *Element

func Picture 

func Picture(props Attrs, children ...interface{}) *Element

func Portal 

func Portal(props Attrs) *Element

func Pre 

func Pre(props Attrs, children ...interface{}) *Element

func Progress 

func Progress(props Attrs, children ...interface{}) *Element

func Q 

func Q(props Attrs, children ...interface{}) *Element

func Rp 

func Rp(props Attrs, children ...interface{}) *Element

func Rt 

func Rt(props Attrs, children ...interface{}) *Element

func Ruby 

func Ruby(props Attrs, children ...interface{}) *Element

func Samp 

func Samp(props Attrs, children ...interface{}) *Element

func Script 

func Script(props Attrs, children ...interface{}) *Element

func Section 

func Section(props Attrs, children ...interface{}) *Element

func SectionWithComponents 

func SectionWithComponents(props map[string]interface{}, componentRefs ...func(map[string]interface{}) *Element) *Element

SectionWithComponents creates a section element with component references as children.

func Select 

func Select(props Attrs, children ...interface{}) *Element

func Slot 

func Slot(props Attrs, children ...interface{}) *Element

func Small 

func Small(props Attrs, children ...interface{}) *Element

func Source 

func Source(props Attrs) *Element

func Span 

func Span(props Attrs, children ...interface{}) *Element

func Strong 

func Strong(props Attrs, children ...interface{}) *Element

func Style 

func Style(props Attrs, children ...interface{}) *Element

func Sub 

func Sub(props Attrs, children ...interface{}) *Element

func Summary 

func Summary(props Attrs, children ...interface{}) *Element

func Sup 

func Sup(props Attrs, children ...interface{}) *Element

func Svg 

func Svg(props Attrs, children ...interface{}) *Element

func Table 

func Table(props Attrs, children ...interface{}) *Element

func Tbody 

func Tbody(props Attrs, children ...interface{}) *Element

func Td 

func Td(props Attrs, children ...interface{}) *Element

func Template 

func Template(props Attrs, children ...interface{}) *Element

func Textarea 

func Textarea(props Attrs, children ...interface{}) *Element

func Tfoot 

func Tfoot(props Attrs, children ...interface{}) *Element

func Th 

func Th(props Attrs, children ...interface{}) *Element

func Thead 

func Thead(props Attrs, children ...interface{}) *Element

func Time 

func Time(props Attrs, children ...interface{}) *Element

func Title 

func Title(props Attrs, children ...interface{}) *Element

func Tr 

func Tr(props Attrs, children ...interface{}) *Element

func Track 

func Track(props Attrs) *Element

func Ul 

func Ul(props Attrs, children ...interface{}) *Element
Example 
package main

import (
	"fmt"

	"github.com/monstercameron/GoWebComponents/dom"
)

func main() {
	// Create an unordered list
	list := dom.Ul(
		dom.Attrs{"class": "item-list"},
		dom.Li(nil, dom.Text("Item 1")),
		dom.Li(nil, dom.Text("Item 2")),
		dom.Li(nil, dom.Text("Item 3")),
	)

	fmt.Printf("Created list: %v\n", list != nil)
}

Output:
Created list: true

func Var 

func Var(props Attrs, children ...interface{}) *Element

func Video 

func Video(props Attrs, children ...interface{}) *Element

func Wbr 

func Wbr(props Attrs) *Element

func WithComponents 

func WithComponents(tagName string, props map[string]interface{}, componentRefs ...func(map[string]interface{}) *Element) *Element

WithComponents creates an element with component references as children.

type GoEvent 

type GoEvent = runtime.GoEvent

GoEvent is a Go-friendly wrapper around the JavaScript event object. It provides a safe, convenient API for working with DOM events in Go.

GoEvent is automatically provided to event handlers registered with hooks.GoUseFunc when using the func(GoEvent) signature.

Example: 

handleClick := hooks.GoUseFunc(func(event dom.GoEvent) {
    event.PreventDefault()
    println("Clicked!")
})

Button(Attrs{"onclick": handleClick}, "Click Me")

Example with form input: 

handleChange := hooks.GoUseFunc(func(event dom.GoEvent) {
    value := event.GetValue()
    println("New value:", value)
})

Input(Attrs{"oninput": handleChange}, nil)

Methods:

  • GetValue(): Retrieves input element value
  • IsChecked(): Gets checkbox/radio button state
  • GetKey(): Gets the key from keyboard events
  • PreventDefault(): Prevents browser default action
  • StopPropagation(): Stops event bubbling
  • JSValue(): Gets the underlying js.Value

Source Files

View all Source files

Jump to

Keyboard shortcuts

? : This menu
/ : Search site
f or F : Jump to
y or Y : Canonical URL
go.dev uses cookies from Google to deliver and enhance the quality of its services and to analyze traffic. Learn more.