The highest tagged major version is
README
¶
Render Package
Location: render/
The render package bootstraps the browser runtime and mounts elements into the DOM. It is built for js/wasm.
Primary Entry Points
To(element *runtime.Element, selector string)
Mounts an element into the first DOM node that matches a CSS selector.
render.To(dom.CreateElement(App, nil), "#app")
ToElement(element *runtime.Element, domElement js.Value)
Mounts an element into a specific DOM element you already looked up through syscall/js.
container := js.Global().Get("document").Call("getElementById", "app")
render.ToElement(dom.CreateElement(App, nil), container)
What It Does
- initializes the global runtime with the wasm DOM, event, scheduler, and browser-state adapters
- renders the initial element tree
- routes later state/atom/effect-driven updates through the runtime
The runtime itself lives in internal/runtime/. The render package is the browser-facing mount layer.
Related Packages
Documentation
¶
Overview ¶
Package render provides functions to render GoWebComponents to the DOM.
This package is the entry point for mounting your application to the browser DOM. It handles the initial render and sets up the reactive rendering system that automatically updates the DOM when component state changes.
Basic usage:
import (
"github.com/monstercameron/GoWebComponents/render"
"github.com/monstercameron/GoWebComponents/dom"
)
func main() {
app := dom.Div(nil,
dom.H1(nil, "Hello, GoWebComponents!"),
dom.P(nil, "Welcome to reactive WASM development"),
)
render.To(app, "#app")
}
The render package provides two main functions:
- To: Renders to a CSS selector (most common)
- ToElement: Renders to a specific DOM element (advanced)
After the initial render, the framework automatically manages subsequent renders when component state changes through hooks like hooks.UseState or state.UseAtom.
Example with a component:
func App(props dom.Attrs) *fiber.Element {
count, setCount := hooks.UseState(0)
return dom.Div(nil,
dom.H1(nil, fmt.Sprintf("Count: %d", count())),
dom.Button(map[string]interface{}{
"onclick": js.FuncOf(func(this js.Value, args []js.Value) interface{} {
setCount(count() + 1) // Automatically triggers re-render
return nil
}),
}, "Increment"),
)
}
func main() {
render.To(App(nil), "#app")
}
The render package integrates with the fiber reconciliation engine to provide efficient, incremental DOM updates. Only the parts of the DOM that actually changed are updated, making it performant even for complex UIs.
Index ¶
Examples ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
func To ¶
To renders an element to a DOM node specified by a CSS selector. This is the primary function for mounting your application to the page.
The selector can be any valid CSS selector:
- ID selector: "#app", "#root"
- Class selector: ".container"
- Tag selector: "body", "main"
- Complex selector: "div.container", "#app > div"
The function queries the DOM for the first matching element and renders the provided Element into it. If the selector doesn't match any element, the function will panic.
Example:
func main() {
app := dom.Div(nil,
dom.H1(nil, "My App"),
HomePage(nil),
)
render.To(app, "#app") // Renders into <div id="app"></div>
}
The element is mounted and the reactive rendering system is initialized. Subsequent updates from hooks or state changes will automatically re-render only the affected parts of the DOM.
Example ¶
package main
import (
"github.com/monstercameron/GoWebComponents/dom"
"github.com/monstercameron/GoWebComponents/render"
)
func main() {
// Create an element
app := dom.Div(nil, dom.Text("Hello World"))
// Render it to the element with id "app"
// This starts the application
render.To(app, "#app")
}
Output:
func ToElement ¶
ToElement renders an element to a specific DOM element (js.Value). This is a lower-level function for advanced use cases where you already have a reference to a DOM element.
Example:
func main() {
doc := js.Global().Get("document")
container := doc.Call("getElementById", "app")
app := dom.Div(nil,
dom.H1(nil, "My App"),
)
render.ToElement(app, container)
}
Most applications should use To() with a CSS selector instead, as it's more convenient and readable.
Source Files