dom

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")),
    )
}

Related Packages

• /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