Add SSE, response headers, view transitions, and 5 new sx attributes
Some checks failed
Build and Deploy / build-and-deploy (push) Has been cancelled
Some checks failed
Build and Deploy / build-and-deploy (push) Has been cancelled
Implement missing SxEngine features: - SSE (sx-sse, sx-sse-swap) with EventSource management and auto-cleanup - Response headers: SX-Trigger, SX-Retarget, SX-Reswap, SX-Redirect, SX-Refresh, SX-Location, SX-Replace-Url, SX-Trigger-After-Swap/Settle - View Transitions API: transition:true swap modifier + global config - every:<time> trigger for polling (setInterval) - sx-replace-url (replaceState instead of pushState) - sx-disabled-elt (disable elements during request) - sx-prompt (window.prompt, value sent as SX-Prompt header) - sx-params (filter form parameters: *, none, not x,y, x,y) Adds docs (ATTR_DETAILS, BEHAVIOR_ATTRS, headers, events), demo components in reference.sx, API endpoints (prompt-echo, sse-time), and 27 new unit tests for engine logic. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -551,3 +551,95 @@
|
||||
:class "text-red-500 text-sm hover:text-red-700" "Remove"))
|
||||
(p :class "text-xs text-stone-400"
|
||||
"Items fade out immediately on click (optimistic), then are removed when the server responds.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-replace-url
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~ref-replace-url-demo ()
|
||||
(div :class "space-y-3"
|
||||
(button
|
||||
:sx-get "/reference/api/time"
|
||||
:sx-target "#ref-replurl-result"
|
||||
:sx-swap "innerHTML"
|
||||
:sx-replace-url "true"
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Load (replaces URL)")
|
||||
(div :id "ref-replurl-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
"Click to load — URL changes but no new history entry.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-disabled-elt
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~ref-disabled-elt-demo ()
|
||||
(div :class "space-y-3"
|
||||
(div :class "flex gap-3 items-center"
|
||||
(button :id "ref-diselt-btn"
|
||||
:sx-get "/reference/api/slow-echo"
|
||||
:sx-target "#ref-diselt-result"
|
||||
:sx-swap "innerHTML"
|
||||
:sx-disabled-elt "#ref-diselt-btn"
|
||||
:sx-vals "{\"q\": \"hello\"}"
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm disabled:opacity-50"
|
||||
"Click (disables during request)")
|
||||
(span :class "text-xs text-stone-400" "Button is disabled while request is in-flight."))
|
||||
(div :id "ref-diselt-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
"Click the button to see it disable during the request.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-prompt
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~ref-prompt-demo ()
|
||||
(div :class "space-y-3"
|
||||
(button
|
||||
:sx-get "/reference/api/prompt-echo"
|
||||
:sx-target "#ref-prompt-result"
|
||||
:sx-swap "innerHTML"
|
||||
:sx-prompt "Enter your name:"
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Prompt & send")
|
||||
(div :id "ref-prompt-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
"Click to enter a name via prompt — it is sent as the SX-Prompt header.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-params
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~ref-params-demo ()
|
||||
(div :class "space-y-3"
|
||||
(form
|
||||
:sx-post "/reference/api/echo-vals"
|
||||
:sx-target "#ref-params-result"
|
||||
:sx-swap "innerHTML"
|
||||
:sx-params "name"
|
||||
:class "flex gap-2"
|
||||
(input :type "text" :name "name" :placeholder "Name (sent)"
|
||||
:class "flex-1 px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
|
||||
(input :type "text" :name "secret" :placeholder "Secret (filtered)"
|
||||
:class "flex-1 px-3 py-2 border border-stone-300 rounded text-sm focus:outline-none focus:ring-2 focus:ring-violet-500")
|
||||
(button :type "submit"
|
||||
:class "px-4 py-2 bg-violet-600 text-white rounded hover:bg-violet-700 transition-colors text-sm"
|
||||
"Submit"))
|
||||
(div :id "ref-params-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-400 text-sm"
|
||||
"Only 'name' will be sent — 'secret' is filtered by sx-params.")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
;; sx-sse
|
||||
;; ---------------------------------------------------------------------------
|
||||
|
||||
(defcomp ~ref-sse-demo ()
|
||||
(div :class "space-y-3"
|
||||
(div :sx-sse "/reference/api/sse-time"
|
||||
:sx-sse-swap "time"
|
||||
:sx-swap "innerHTML"
|
||||
(div :id "ref-sse-result"
|
||||
:class "p-3 rounded bg-stone-50 text-stone-600 text-sm font-mono"
|
||||
"Connecting to SSE stream..."))
|
||||
(p :class "text-xs text-stone-400"
|
||||
"Server pushes time updates every 2 seconds via Server-Sent Events.")))
|
||||
|
||||
Reference in New Issue
Block a user