README
¶
Go HTML component engine
This is just a simple/naive experiment for making HTML components based on the Go templates.
Components are defined in ./component/<tag>.gohtml and will replace <tag attr1="val1">content</tag> in the main HTML of the page.
Simple component
For example, component can be defined like this:
{{define "mybutton"}}
<button type="button" class="btn btn-{{ .Attrs.type }}">
{{ .Content }}
</button>
{{end}}
And used like this:
<body>
<div>
<MyButton type="primary">Hello!</MyButton>
</div>
</body>
The resulting HTML will be rendered as:
<body>
<div>
<button type="button" class="btn btn-primary">
Hello!
</button>
</div>
</body>
Accessing data
Components can also access external data, which is exposed as .DB in the template context by the library user.
For example, when using the library, data interface can be defined as:
type ExampleRecord struct {
ID int
Name string
}
type ExampleDB struct {
}
func (d *ExampleDB) Table() []ExampleRecord {
return []ExampleRecord{
{ID: 1, Name: "Foo"},
{ID: 2, Name: "Bar"},
}
}
Then we can define a table component that shows this data:
{{define "mytable"}}
<table class="table">
<tbody>
{{range .DB.Table}}
<tr><td>{{.ID}}</td><td>{{.Name}}</td></tr>
{{end}}
</tbody>
</table>
{{end}}
And component can be used on the main HTML as:
<body>
<div>
<MyTable></MyTable>
</div>
</body>
We can potentially let the user pass parameters to this component. For this we first need to add parameter to the method:
func (d *ExampleDB) Table(limit int) []ExampleRecord
And pass this parameter from component tag attributes:
{{range .DB.Table .Attrs.limit}}
Usage on the main html:
<body>
<div>
<MyTable limit="10"></MyTable>
</div>
</body>
License
MIT
Documentation
¶
Index ¶
Constants ¶
This section is empty.
Variables ¶
This section is empty.
Functions ¶
This section is empty.
Types ¶
type Context ¶
type Context[T any] struct { // Content is an inner HTML of a component tag. Content template.HTML // Attrs is a map of HTML attributes of the component tag. Attrs map[string]string // DB is an interface for accessing external data. DB T }
Context is passed to each component when rendering.
Context has a generic parameter for data interface, which can be customized by client code.
type Engine ¶
type Engine[T any] struct { // contains filtered or unexported fields }
Engine renders HTML page with components. See RenderPage for details.
func (*Engine[T]) RenderPage ¶
RenderPage renders an HTML page by replacing component tags with rendered versions.
It scans HTML page for tags that have a matching <tag>.gohtml file in the component directory. This component is then rendered from a template file and is appended back to the main HTML.
Source Files
Directories