diff --git a/README.md b/README.md index 027b88b..0ce0756 100644 --- a/README.md +++ b/README.md @@ -95,13 +95,14 @@ var hx = htmx.NewTempl() ### Current Extensions supported -See [htmx/ext](./htmx/ext) for a full list of extensions. +Some of the more complex extensions supported: + +- [`class-tools`](https://pkg.go.dev/github.com/will-wow/typed-htmx-go/htmx/ext/classtools) +- [`preload`](https://pkg.go.dev/github.com/will-wow/typed-htmx-go/htmx/ext/preload) +- [`response-targets`](https://pkg.go.dev/github.com/will-wow/typed-htmx-go/htmx/ext/responsetargets) +- [`loading-states`](https://pkg.go.dev/github.com/will-wow/typed-htmx-go/htmx/ext/loadingstates) -- [`class-tools`](https://htmx.org/extensions/class-tools/) -- [`preload`](https://htmx.org/extensions/preload/) -- [`response-targets`](https://htmx.org/extensions/response-targets/) -- [`event-header`](https://htmx.org/extensions/event-header/) -- [`remove-me`](https://htmx.org/extensions/remove-me/) +See [htmx/ext](./htmx/ext) for a full list of extensions. ## Examples diff --git a/htmx/ext/sse/sse.go b/htmx/ext/sse/sse.go new file mode 100644 index 0000000..e239b36 --- /dev/null +++ b/htmx/ext/sse/sse.go @@ -0,0 +1,42 @@ +// package sse connects to an EventSource directly from HTML. It manages the connections to your web server, listens for server events, and then swaps their contents into your htmx webpage in real-time. +// +// [EventSource]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events +package sse + +import ( + "fmt" + + "github.com/will-wow/typed-htmx-go/htmx" +) + +// Extension connects to an EventSource directly from HTML. It manages the connections to your web server, listens for server events, and then swaps their contents into your htmx webpage in real-time. +// +// # Install +// +// +// +// Extension: [server-sent-events] +// +// [server-sent-events]: https://htmx.org/extensions/server-sent-events/ +// +// [EventSource]: https://developer.mozilla.org/en-US/docs/Web/API/Server-sent_events/Using_server-sent_events +const Extension htmx.Extension = "sse" + +// Message is the the default name of an empty SSE event. +const Message = "message" + +// Connect +func Connect[T any](hx htmx.HX[T], url string) T { + return hx.Attr("sse-connect", url) +} + +// Swap +func Swap[T any](hx htmx.HX[T], messageName string) T { + return hx.Attr("sse-swap", messageName) +} + +// Trigger allows SSE messages to trigger HTTP callbacks using the [htmx.HX.Trigger()] attribute. +func Trigger[T any](hx htmx.HX[T], event string) T { + prefixedEvent := fmt.Sprintf("sse:%s", event) + return hx.Attr(htmx.Trigger, prefixedEvent) +} diff --git a/htmx/ext/sse/sse_test.go b/htmx/ext/sse/sse_test.go new file mode 100644 index 0000000..58d0af6 --- /dev/null +++ b/htmx/ext/sse/sse_test.go @@ -0,0 +1,40 @@ +package sse_test + +import ( + "fmt" + + "github.com/will-wow/typed-htmx-go/htmx" + "github.com/will-wow/typed-htmx-go/htmx/ext/sse" +) + +var hx = htmx.NewStringAttrs() + +func ExampleExtension() { + attr := hx.Ext(sse.Extension) + fmt.Println(attr) + // Output: hx-ext='sse' +} + +func ExampleMessage() { + attr := sse.Swap(hx, sse.Message) + fmt.Println(attr) + // Output: sse-swap='message' +} + +func ExampleConnect() { + attr := sse.Connect(hx, "/chatroom") + fmt.Println(attr) + // Output: sse-connect='/chatroom' +} + +func ExampleSwap() { + attr := sse.Swap(hx, "event") + fmt.Println(attr) + // Output: sse-swap='event' +} + +func ExampleTrigger() { + attr := sse.Trigger(hx, "event") + fmt.Println(attr) + // Output: hx-trigger='sse:event' +}