htmx

README

gomponents-htmx

HTMX attributes and helpers for gomponents.

Made with ✨sparkles✨ by maragu.

Does your company depend on this project? Contact me at markus@maragu.dk to discuss options for a one-time or recurring invoice to ensure its continued thriving.

Usage

go get github.com/maragudk/gomponents-htmx

package main

import (
	"errors"
	"log"
	"net/http"
	"time"

	g "github.com/maragudk/gomponents"
	c "github.com/maragudk/gomponents/components"
	. "github.com/maragudk/gomponents/html"
	ghttp "github.com/maragudk/gomponents/http"
	hx "github.com/maragudk/gomponents-htmx"
	hxhttp "github.com/maragudk/gomponents-htmx/http"
)

func main() {
	if err := start(); err != nil {
		log.Fatalln("Error:", err)
	}
}

func start() error {
	now := time.Now()
	mux := http.NewServeMux()
	mux.HandleFunc("/", ghttp.Adapt(func(w http.ResponseWriter, r *http.Request) (g.Node, error) {
		if r.Method == http.MethodPost && hxhttp.IsBoosted(r.Header) {
			now = time.Now()

			hxhttp.SetPushURL(w.Header(), "/?time="+now.Format(timeFormat))

			return partial(now), nil
		}
		return page(now), nil
	}))

	log.Println("Starting on http://localhost:8080")
	if err := http.ListenAndServe("localhost:8080", mux); err != nil && !errors.Is(err, http.ErrServerClosed) {
		return err
	}
	return nil
}

const timeFormat = "15:04:05"

func page(now time.Time) g.Node {
	return c.HTML5(c.HTML5Props{
		Title: now.Format(timeFormat),
		Head: []g.Node{
			Script(Src("https://cdn.tailwindcss.com?plugins=forms,typography")),
			Script(Src("https://unpkg.com/htmx.org")),
		},
		Body: []g.Node{
			Div(Class("max-w-7xl mx-auto p-4 prose lg:prose-lg xl:prose-xl"),
				H1(g.Text(`gomponents + HTMX`)),
				P(g.Textf(`Time at last full page refresh was %v.`, now.Format(timeFormat))),
				partial(now),
				FormEl(Method("post"), Action("/"), hx.Boost("true"), hx.Target("#partial"), hx.Swap("outerHTML"),
					Button(Type("submit"), g.Text(`Update time`),
						Class("rounded-md border border-transparent bg-orange-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-orange-700 focus:outline-none focus:ring-2 focus:ring-orange-500 focus:ring-offset-2"),
					),
				),
			),
		},
	})
}

func partial(now time.Time) g.Node {
	return P(ID("partial"), g.Textf(`Time was last updated at %v.`, now.Format(timeFormat)))
}

Made in 🇩🇰 by maragu, maker of online Go courses.

Documentation

Overview

Package htmx provides HTMX attributes and helpers for gomponents. See https://htmx.org/

Index

• func Boost(v string) g.Node
• func Confirm(v string) g.Node
• func Delete(v string) g.Node
• func Disable(v string) g.Node
• func DisabledElt(v string) g.Node
• func Disinherit(v string) g.Node
• func Encoding(v string) g.Node
• func Ext(v string) g.Node
• func Get(url string) g.Node
• func Headers(v string) g.Node
• func History(v string) g.Node
• func HistoryElt(v string) g.Node
• func Include(v string) g.Node
• func Indicator(v string) g.Node
• func On(name string, v string) g.Node
• func Params(v string) g.Node
• func Patch(v string) g.Node
• func Post(url string) g.Node
• func Preserve(v string) g.Node
• func Prompt(v string) g.Node
• func PushURL(v string) g.Node
• func Put(v string) g.Node
• func ReplaceURL(v string) g.Node
• func Request(v string) g.Node
• func Select(v string) g.Node
• func SelectOOB(v string) g.Node
• func Swap(v string) g.Node
• func SwapOOB(v string) g.Node
• func Sync(v string) g.Node
• func Target(v string) g.Node
• func Trigger(v string) g.Node
• func Validate(v string) g.Node
• func Vals(v string) g.Node

Examples

• Get

Functions

func Boost

func Boost(v string) g.Node

Boost to add or remove progressive enhancement for links and forms. See https://htmx.org/attributes/hx-boost

func Confirm

func Confirm(v string) g.Node

Confirm shows a confirm() dialog before issuing a request. See https://htmx.org/attributes/hx-confirm

func Delete

func Delete(v string) g.Node

Delete will issue a DELETE to the specified URL and swap the HTML into the DOM using a swap strategy. See https://htmx.org/attributes/hx-delete

func Disable

func Disable(v string) g.Node

Disable htmx processing for the given node and any children nodes. See https://htmx.org/attributes/hx-disable

func DisabledElt

func DisabledElt(v string) g.Node

Disable element until htmx request completes. See https://htmx.org/attributes/hx-disabled-elt/

func Disinherit

func Disinherit(v string) g.Node

Disinherit controls and disables automatic attribute inheritance for child nodes. See https://htmx.org/attributes/hx-disinherit

func Encoding

func Encoding(v string) g.Node

Encoding changes the request encoding type. See https://htmx.org/attributes/hx-encoding

func Ext

func Ext(v string) g.Node

Ext sets extensions to use for this element. See https://htmx.org/attributes/hx-ext

func Get

func Get(url string) g.Node

Get from the specified URL. See https://htmx.org/attributes/hx-get

Example

n := Button(hx.Post("/clicked"), hx.Swap("outerHTML"))
_ = n.Render(os.Stdout)

Output:

<button hx-post="/clicked" hx-swap="outerHTML"></button>

func Headers

func Headers(v string) g.Node

Headers adds to the headers that will be submitted with the request. See https://htmx.org/attributes/hx-headers

func History

func History(v string) g.Node

History prevents sensitive data being saved to the history cache. See https://htmx.org/attributes/hx-history

func HistoryElt

func HistoryElt(v string) g.Node

HistoryElt sets the element to snapshot and restore during history navigation. See https://htmx.org/attributes/hx-history-elt

func Include

func Include(v string) g.Node

Include additional data in requests. See https://htmx.org/attributes/hx-include

func Indicator

func Indicator(v string) g.Node

Indicator sets the element to put the htmx-request class on during the request. See https://htmx.org/attributes/hx-indicator

func On

func On(name string, v string) g.Node

On handles any event with a script inline. See https://htmx.org/attributes/hx-on

func Params

func Params(v string) g.Node

Params filters the parameters that will be submitted with a request. See https://htmx.org/attributes/hx-params

func Patch

func Patch(v string) g.Node

Patch issues a PATCH to the specified URL. See https://htmx.org/attributes/hx-patch

func Post

func Post(url string) g.Node

Post to the specified URL. See https://htmx.org/attributes/hx-post

func Preserve

func Preserve(v string) g.Node

Preserve specifies elements to keep unchanged between requests. See https://htmx.org/attributes/hx-preserve

func Prompt

func Prompt(v string) g.Node

Prompt shows a prompt() before submitting a request. See https://htmx.org/attributes/hx-prompt

func PushURL

func PushURL(v string) g.Node

PushURL into the browser location bar, creating a new history entry. See https://htmx.org/attributes/hx-push-url

func Put

func Put(v string) g.Node

Put issues a PUT to the specified URL. See https://htmx.org/attributes/hx-put

func ReplaceURL

func ReplaceURL(v string) g.Node

ReplaceURL replaces the URL in the browser location bar. See https://htmx.org/attributes/hx-replace-url

func Request

func Request(v string) g.Node

Request configures various aspects of the request. See https://htmx.org/attributes/hx-request

func Select

func Select(v string) g.Node

Select content to swap in from a response. See https://htmx.org/attributes/hx-select

func SelectOOB

func SelectOOB(v string) g.Node

SelectOOB content to swap in from a response, out of band (somewhere other than the target). See https://htmx.org/attributes/hx-select-oob

func Swap

func Swap(v string) g.Node

Swap controls how content is swapped in. See https://htmx.org/attributes/hx-swap

func SwapOOB

func SwapOOB(v string) g.Node

SwapOOB marks content in a response to be out of band (should swap in somewhere other than the target). See https://htmx.org/attributes/hx-swap-oob

func Sync

func Sync(v string) g.Node

Sync controls how requests made by different elements are synchronized. See https://htmx.org/attributes/hx-sync

func Target

func Target(v string) g.Node

Target specifies the target element to be swapped. See https://htmx.org/attributes/hx-target

func Trigger

func Trigger(v string) g.Node

Trigger specifies the event that triggers the request. See https://htmx.org/attributes/hx-trigger

func Validate

func Validate(v string) g.Node

Validate forces elements to validate themselves before a request. See https://htmx.org/attributes/hx-validate

func Vals

func Vals(v string) g.Node

Vals adds values to the parameters to submit with the request (JSON-formatted). See https://htmx.org/attributes/hx-vals