FEAT: Make SSE easier #911
Description
There is friction when using SSE with Air. While we have a good SSEResponse for the backend, the client remains obtuse. Per https://htmx.org/extensions/sse/ you have to:
- Use an
air.Scriptto import the SSE extension to match this HTML spec:
<head>
<!-- import htmx -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/htmx.min.js" integrity="sha384-/TgkGk7p307TH7EXJDuUlgG3Ce1UVolAOFopFekQkkXihi5u/6OCvVKyz1W+idaz" crossorigin="anonymous"></script>
<!-- import htmx's SSE extension -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]" integrity="sha384-A986SAtodyH8eg8x8irJnYUk7i9inVQqYigD6qZ9evobksGNIXfeFvDwLSHcp31N" crossorigin="anonymous"></script>
</head>- The tag to be modified then has to have these controls
<div
hx-ext="sse" <!-- enable the SSE plugin -->
sse-connect="/chatroom" <!-- connect to the route endpoint serving an SSE endpoint -->
sse-swap="message"> <!-- Message event type -->
Contents of this box will be updated in real time
with every SSE message received from the chatroom.
</div>Describe the feature
Some kind of wrapper around all of the above would be useful. Something like this might be the way:
air.Div(
# The following line would:
# prepend the current tag with the SSE import:
# <script src="https://cdn.jsdelivr.net/npm/[email protected]" integrity="sha384-A986SAtodyH8eg8x8irJnYUk7i9inVQqYigD6qZ9evobksGNIXfeFvDwLSHcp31N" crossorigin="anonymous"></script>
# and would generate these attributes:
# hx-ext="sse"
# sse-connect="/chatroom"
sse="/chatroom",
# Generates a hx-swap attribute per the SSE extention docs
sse_swap=""
)