Seamless HTMX integration in golang applications.
This repository contains the htmx Go package, designed to enhance server-side handling of HTML generated with the HTMX library. It provides a set of tools to easily manage swap behaviors, trigger configurations, and other HTMX-related functionalities in a Go server environment.
- Swap Configuration: Configure swap behaviors for HTMX responses, including style, timing, and scrolling.
- Trigger Management: Define and manage triggers for HTMX events, supporting both simple and detailed triggers.
- Middleware Support: Integrate HTMX seamlessly with Go middleware for easy HTMX header configuration.
- io.Writer Support: The HTMX handler implements the io.Writer interface for easy integration with existing Go code.
- Component Rendering: Render (partial) components in response to HTMX requests, enhancing user experience and performance.
To install the htmx package, use the following command:
go get -u github.com/donseba/go-htmxinitialize the htmx service like so :
package main
import (
"log"
"net/http"
"github.com/donseba/go-htmx"
"github.com/donseba/go-htmx/middleware"
)
type App struct {
htmx *htmx.HTMX
}
func main() {
// new app with htmx instance
app := &App{
htmx: htmx.New(),
}
mux := http.NewServeMux()
// wrap the htmx example middleware around the http handler
mux.Handle("/", middleware.MiddleWare(http.HandlerFunc(app.Home)))
err := http.ListenAndServe(":3000", mux)
log.Fatal(err)
}
func (a *App) Home(w http.ResponseWriter, r *http.Request) {
// initiate a new htmx handler
h := a.htmx.NewHandler(w, r)
// check if the request is a htmx request
if h.IsHxRequest() {
// do something
}
// check if the request is boosted
if h.IsHxBoosted() {
// do something
}
// check if the request is a history restore request
if h.IsHxHistoryRestoreRequest() {
// do something
}
// check if the request is a prompt request
if h.RenderPartial() {
// do something
}
// set the headers for the response, see docs for more options
h.PushURL("http://push.url")
h.ReTarget("#ReTarged")
// write the output like you normally do.
// check the inspector tool in the browser to see that the headers are set.
_, _ = h.Write([]byte("OK"))
}The htmx package provides several functions to determine the nature of HTMX requests in your Go application. These checks allow you to tailor the server's response based on specific HTMX-related conditions.
This function checks if the incoming HTTP request is made by HTMX.
func (h *Handler) IsHxRequest() boolUsage: Use this check to identify requests initiated by HTMX and differentiate them from standard HTTP requests. Example: Applying special handling or returning partial HTML snippets in response to an HTMX request.
Determines if the HTMX request is boosted, which typically indicates an enhancement of the user experience with HTMX's AJAX capabilities.
func (h *Handler) IsHxBoosted() boolUsage: Useful in scenarios where you want to provide an enriched or different response for boosted requests. Example: Loading additional data or scripts that are specifically meant for AJAX-enhanced browsing.
Checks if the HTMX request is a history restore request. This type of request occurs when HTMX is restoring content from the browser's history.
func (h *Handler) IsHxHistoryRestoreRequest() boolUsage: Helps in handling scenarios where users navigate using browser history, and the application needs to restore previous states or content. Example: Resetting certain states or re-fetching data that was previously displayed.
This function returns true for HTMX requests that are either standard or boosted, as long as they are not history restore requests. It is a combined check used to determine if a partial render is appropriate.
func (h *Handler) RenderPartial() boolUsage: Ideal for deciding when to render partial HTML content, which is a common pattern in applications using HTMX. Example: Returning only the necessary HTML fragments to update a part of the webpage, instead of rendering the entire page.
Swapping is a way to replace the content of a dom element with the content of the response.
This is done by setting the HX-Swap header to the id of the dom element you want to swap.
func (c *Controller) Route(w http.ResponseWriter, r *http.Request) {
// initiate a new htmx handler
h := a.htmx.NewHandler(w, r)
// Example usage of Swap
swap := htmx.NewSwap().Swap(time.Second * 2).ScrollBottom()
h.ReSwapWithObject(swap)
_, _ = h.Write([]byte("your content"))
}Trigger events are a way to trigger events on the dom element.
This is done by setting the HX-Trigger header to the event you want to trigger.
func (c *Controller) Route(w http.ResponseWriter, r *http.Request) {
// initiate a new htmx handler
h := a.htmx.NewHandler(w, r)
// Example usage of Swap
trigger := htmx.NewTrigger().AddEvent("event1").AddEventDetailed("event2", "Hello, World!")
h.TriggerWithObject(swap)
// or
h.TriggerAfterSettleWithObject(swap)
// or
h.TriggerAfterSwapWithObject(swap)
_, _ = h.Write([]byte("your content"))
}comprehensive support for triggering various types of notifications within your Go applications, enhancing user interaction and feedback. The package provides a set of functions to easily manage and trigger different notification types such as success, info, warning, error, and custom notifications. Available Notification Types
- Success: Use for positive confirmation messages.
- Info: Ideal for informational messages.
- Warning: Suitable for cautionary messages.
- Error: Use for error or failure messages.
- Custom: Allows for defining your own notification types.
Triggering notifications is straightforward. Here are some examples demonstrating how to use each function:
func (h *Handler) MyHandlerFunc(w http.ResponseWriter, r *http.Request) {
// Trigger a success notification
h.TriggerSuccess("Operation completed successfully")
// Trigger an info notification
h.TriggerInfo("This is an informational message")
// Trigger a warning notification
h.TriggerWarning("Warning: Please check your input")
// Trigger an error notification
h.TriggerError("Error: Unable to process your request")
// Trigger a custom notification
h.TriggerCustom("customType", "This is a custom notification", nil)
}The htmx package provides built-in support for four primary notification levels, each representing a different type of message:
success: Indicates successful completion of an operation.info: Conveys informational messages.warning: Alerts about potential issues or cautionary information.error: Signals an error or problem that occurred.
Each notification type is designed to communicate specific kinds of messages clearly and effectively in your application's user interface.
In addition to these standard notification levels, the htmx package also allows for custom notifications using the TriggerCustom method. This method provides the flexibility to define a custom level and message, catering to unique notification requirements.
func (h *Handler) MyHandlerFunc(w http.ResponseWriter, r *http.Request) {
// Trigger standard notifications
h.TriggerSuccess("Operation successful")
h.TriggerInfo("This is for your information")
h.TriggerWarning("Please be cautious")
h.TriggerError("An error has occurred")
// Trigger a custom notification
h.TriggerCustom("customLevel", "This is a custom notification")
}The TriggerCustom method enables you to specify a custom level (e.g., "customLevel") and an accompanying message. This method is particularly useful when you need to go beyond the predefined notification types and implement a notification system that aligns closely with your application's specific context or branding.
You can also pass additional data with your notifications. Here's an example:
func (h *Handler) MyHandlerFunc(w http.ResponseWriter, r *http.Request) {
customData := map[string]string{"key1": "value1", "key2": "value2"}
h.TriggerInfo("User logged in", customData)
}please refer to the htmx documentation regarding event triggering. and the example confirmation UI
HX-Trigger: {"showMessage":{"level" : "info", "message" : "Here Is A Message"}}
And handle this event like so:
document.body.addEventListener("showMessage", function(evt){
if(evt.detail.level === "info"){
alert(evt.detail.message);
}
})Each property of the JSON object on the right hand side will be copied onto the details object for the event.
In addition to the standard notification types, the htmx package allows you to customize the event name used for triggering notifications. This is done by modifying the htmx.DefaultNotificationKey. Changing this key will affect the event name in the HTMX trigger, allowing you to tailor it to specific needs or naming conventions of your application. Setting a Custom Notification Key
Before triggering notifications, you can set a custom event name as follows:
htmx.DefaultNotificationKey = "myCustomEventName"The Render method in the Handler struct allows for dynamic rendering of full or partial content based on the request type. This flexibility is particularly useful for applications using HTMX, enabling efficient updates of specific parts of a web page without requiring a full reload.
Template Caching: Templates are cached by default to improve performance. However, during development, you might want to disable this caching to see changes immediately. You can control this behavior by setting the htmx.UseTemplateCache property to false.
Example Usage: You can find a more detailed example in the examples/render folder in the repository. Below is a simplified version to illustrate the main concept:
func (a *App) Home(w http.ResponseWriter, r *http.Request) {
h := a.htmx.NewHandler(w, r)
data := map[string]any{
"Title": "Super awesome example",
"Text": "Welcome to the home page",
}
sidebar := htmx.NewComponent("sidebar.html")
parent := htmx.NewComponent("index.html").SetData(data).With(sidebar, "Sidebar")
page := htmx.NewComponent("home.html").SetData(data).Wrap(parent, "Content")
_, err := h.Render(r.Context(), page)
if err != nil {
_ = fmt.Errorf("error rendering page: %v", err)
}
}To add a subcomponent to an existing component, use the With method. This method allows you to embed components within other components, facilitating the construction of complex layouts. For instance, you might add a sidebar to a main content area.
The Wrap method is used to wrap one component within another. This is particularly useful for handling different types of requests. For example, when an HTMX request is detected, only the specific component is rendered. For standard requests, the full page, including its layout and all subcomponents, is rendered. This ensures efficient and contextually appropriate content delivery.
Data can be passed to components using the SetData method. The data is accessible within the templates via the Data object, allowing you to dynamically render content based on the provided data.
data := map[string]any{
"Title": "My Page",
"Content": "This is dynamic content",
}
component := htmx.NewComponent("template.html").SetData(data)This method ensures that your components are flexible and can adapt to the data provided, making your templates more dynamic and reusable.
- Template Caching: Enabled by default, can be disabled via htmx.UseTemplateCache.
- Adding Components: Use the With method to embed subcomponents.
- Wrapping Components: Use the Wrap method to manage partial and full page rendering.
- Passing Data: Use the SetData method to pass dynamic data to templates.
The htmx package is designed for versatile integration into Go applications, providing support both with and without the use of middleware. Below, we showcase two examples demonstrating the package's usage in scenarios involving middleware.
func MiddleWare(next http.Handler) http.Handler {
fn := func(w http.ResponseWriter, r *http.Request) {
ctx := r.Context()
hxh := htmx.HxRequestHeaderFromRequest(c.Request())
ctx = context.WithValue(ctx, htmx.ContextRequestHeader, hxh)
next.ServeHTTP(w, r.WithContext(ctx))
}
return http.HandlerFunc(fn)
}func MiddleWare(next echo.HandlerFunc) echo.HandlerFunc {
return func(c echo.Context) error {
ctx := c.Request().Context()
hxh := htmx.HxRequestHeaderFromRequest(c.Request())
ctx = context.WithValue(ctx, htmx.ContextRequestHeader, hxh)
c.SetRequest(c.Request().WithContext(ctx))
return next(c)
}
}In case you want to use a custom logger, like zap, you can inject them into the slog package like so:
import (
"go.uber.org/zap"
"go.uber.org/zap/exp/zapslog"
)
func main() {
// create a new htmx instance with the logger
app := &App{
htmx: htmx.New(),
}
zapLogger := zap.Must(zap.NewProduction())
defer zapLogger.Sync()
logger := slog.New(zapslog.NewHandler(zapLogger.Core(), nil))
app.htmx.SetLog(logger)
}The htmx package is designed to be versatile and can be used in various Go web frameworks. Below are examples of how to use the package in two popular Go web frameworks: Echo and Gin.
func (c *controller) Hello(c echo.Context) error {
// initiate a new htmx handler
h := c.app.htmx.NewHandler(c.Response(), c.Request())
// Example usage of Swap
swap := htmx.NewSwap().Swap(time.Second * 2).ScrollBottom()
h.ReSwapWithObject(swap)
_, _ = h.Write([]byte("your content"))
}func (c *controller) Hello(c *gin.Context) {
// initiate a new htmx handler
h := c.app.htmx.NewHandler(c.Writer, c.Request)
// Example usage of Swap
swap := htmx.NewSwap().Swap(time.Second * 2).ScrollBottom()
h.ReSwapWithObject(swap)
_, _ = h.Write([]byte("your content"))
}The htmx package provides support for Server-Sent Events (SSE) in Go applications. This feature allows you to send real-time updates from the server to the client, enabling live updates and notifications in your web application.
You can read about this feature in the htmx documentation and the MDN Web Docs.
Create an endpoint in your Go application to handle SSE requests. (see the example for a better understanding)
func (a *App) SSE(w http.ResponseWriter, r *http.Request) {
cl := &client{
id: uuid.New().String()
ch: make(chan *htmx.SSEMessage),
}
sseManager.Handle(w, cl)
}In order to send a message to the client, you can use the Send method on the SSEManager object.
go func() {
for {
// Send a message every seconds
time.Sleep(1 * time.Second)
msg := sse.
NewMessage(fmt.Sprintf("The current time is: %v", time.Now().Format(time.RFC850))).
WithEvent("Time")
sseManager.Send()
}
}()There are 2 helper methods to simplify the usage of SSE in your HTMX application.
The Manager is created in the background and is not exposed to the user.
You can change the default worker pool size by setting the htmx.DefaultSSEWorkerPoolSize variable.
// SSEHandler handles the server-sent events. this is a shortcut and is not the preferred way to handle sse.
func (h *HTMX) SSEHandler(w http.ResponseWriter, cl sse.Client)
// SSESend sends a message to all connected clients.
func (h *HTMX) SSESend(message sse.Envelope)Contributions are what make the open-source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.
If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement".
Remember to give the project a star! Thanks again!
- Fork this repo
- Create a new branch with
mainas the base branch - Add your changes
- Raise a Pull Request
Distributed under the MIT License. See LICENSE for more information.