coop/rose-ash
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix duplicate sx-cssx-live style tags
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 20s
Details

Browse Source 
Cache the style element reference in _cssx-style-el so flush-cssx-to-dom
never creates more than one. Previous code called dom-query on every
flush, which could miss the element during rapid successive calls,
creating duplicates.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-14 17:16:13 +00:00
parent 41f4772ba7
commit ab46b559cd
8 changed files with 564 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

505
shared/static/scripts/sx-browser.js
View File

File diff suppressed because it is too large Load Diff

2
shared/sx/ref/adapter-dom.sx
View File

@@ -952,7 +952,7 @@
(dom-set-attr el k (str (dict-get attrs k))))
extra-keys)
;; Flush any newly collected CSS rules to live stylesheet
(flush-cssx-to-dom))
(run-post-render-hooks))
;; No longer a spread — clear tracked state
(do
(set! prev-classes (list))

51
shared/sx/ref/boot.sx
View File

@@ -88,7 +88,7 @@
(process-elements el)
(sx-hydrate-elements el)
(sx-hydrate-islands el)
(flush-cssx-to-dom))))))
(run-post-render-hooks))))))
;; --------------------------------------------------------------------------
@@ -120,7 +120,7 @@
(process-elements el)
(sx-hydrate-elements el)
(sx-hydrate-islands el)
(flush-cssx-to-dom)
(run-post-render-hooks)
(dom-dispatch el "sx:resolved" {:id id})))
(log-warn (str "resolveSuspense: no element for id=" id))))))
@@ -418,29 +418,34 @@
;; --------------------------------------------------------------------------
;; CSSX live flush — inject collected CSS rules into the DOM
;; Render hooks — generic pre/post callbacks for hydration, swap, mount.
;; The spec calls these at render boundaries; the app decides what to do.
;; Pre-render: setup before DOM changes (e.g. prepare state).
;; Post-render: cleanup after DOM changes (e.g. flush collected CSS).
;; --------------------------------------------------------------------------
;;
;; ~cssx/tw collects CSS rules via collect!("cssx" ...) during rendering.
;; On the server, ~cssx/flush emits a batch <style> tag. On the client,
;; islands render independently and no batch flush runs. This function
;; injects any unflushed rules into a persistent <style> element in <head>.
;; Called after hydration (boot + post-swap) to cover all render paths.
(define flush-cssx-to-dom :effects [mutation io]
(define *pre-render-hooks* (list))
(define *post-render-hooks* (list))
(define register-pre-render-hook :effects [mutation]
(fn ((hook-fn :as lambda))
(append! *pre-render-hooks* hook-fn)))
(define register-post-render-hook :effects [mutation]
(fn ((hook-fn :as lambda))
(append! *post-render-hooks* hook-fn)))
(define run-pre-render-hooks :effects [mutation io]
(fn ()
(let ((rules (collected "cssx")))
(when (not (empty? rules))
(let ((style (or (dom-query "#sx-cssx-live")
(let ((s (dom-create-element "style" nil)))
(dom-set-attr s "id" "sx-cssx-live")
(dom-set-attr s "data-cssx" "")
(dom-append-to-head s)
s))))
(dom-set-prop style "textContent"
(str (or (dom-get-prop style "textContent") "")
(join "" rules))))
(clear-collected! "cssx")))))
(for-each (fn (hook) (cek-call hook nil)) *pre-render-hooks*)))
(define run-post-render-hooks :effects [mutation io]
(fn ()
(log-info "run-post-render-hooks:" (len *post-render-hooks*) "hooks")
(for-each (fn (hook)
(log-info " hook type:" (type-of hook) "callable:" (callable? hook) "lambda:" (lambda? hook))
(cek-call hook nil))
*post-render-hooks*)))
;; --------------------------------------------------------------------------
@@ -464,7 +469,7 @@
(process-sx-scripts nil)
(sx-hydrate-elements nil)
(sx-hydrate-islands nil)
(flush-cssx-to-dom)
(run-post-render-hooks)
(process-elements nil))))

40
shared/sx/ref/js.sx
View File

@@ -618,7 +618,7 @@
(if (not (nil? renamed))
renamed
;; General mangling rules
(let ((result name))
(let ((result (replace name "*" "_")))
;; Handle trailing ? and !
(let ((result (cond
(ends-with? result "?")
@@ -1422,23 +1422,27 @@
(= (keyword-name (nth expr 2)) "effects"))
(nth expr 4)
(nth expr 2))))
(if (nil? val-expr)
(str "var " (js-mangle name) " = NIL;")
;; Detect zero-arg self-tail-recursive functions → while loops
(if (and (list? val-expr)
(not (empty? val-expr))
(= (type-of (first val-expr)) "symbol")
(or (= (symbol-name (first val-expr)) "fn")
(= (symbol-name (first val-expr)) "lambda"))
(list? (nth val-expr 1))
(= (len (nth val-expr 1)) 0)
(js-is-self-tail-recursive? name (rest (rest val-expr))))
;; While loop optimization
(let ((body (rest (rest val-expr)))
(loop-body (js-emit-loop-body name body)))
(str "var " (js-mangle name) " = function() { while(true) { " loop-body " } };"))
;; Normal define
(str "var " (js-mangle name) " = " (js-expr val-expr) ";"))))))
(let ((mangled (js-mangle name))
(var-decl
(if (nil? val-expr)
(str "var " (js-mangle name) " = NIL;")
;; Detect zero-arg self-tail-recursive functions → while loops
(if (and (list? val-expr)
(not (empty? val-expr))
(= (type-of (first val-expr)) "symbol")
(or (= (symbol-name (first val-expr)) "fn")
(= (symbol-name (first val-expr)) "lambda"))
(list? (nth val-expr 1))
(= (len (nth val-expr 1)) 0)
(js-is-self-tail-recursive? name (rest (rest val-expr))))
;; While loop optimization
(let ((body (rest (rest val-expr)))
(loop-body (js-emit-loop-body name body)))
(str "var " mangled " = function() { while(true) { " loop-body " } };"))
;; Normal define
(str "var " mangled " = " (js-expr val-expr) ";")))))
;; Self-register: every spec define is available to evaluated SX code
(str var-decl "\nPRIMITIVES[\"" name "\"] = " mangled ";")))))
;; --------------------------------------------------------------------------

4
shared/sx/ref/orchestration.sx
View File

@@ -460,7 +460,7 @@
(sx-process-scripts root)
(sx-hydrate root)
(sx-hydrate-islands root)
(flush-cssx-to-dom)
(run-post-render-hooks)
(process-elements root)))
@@ -871,7 +871,7 @@
(hoist-head-elements-full target)
(process-elements target)
(sx-hydrate-elements target)
(flush-cssx-to-dom)
(run-post-render-hooks)
(dom-dispatch target "sx:clientRoute"
(dict "pathname" pathname))
(log-info (str "sx:route client " pathname)))))

24
shared/sx/ref/platform_js.py
View File

@@ -1509,8 +1509,8 @@ CEK_FIXUPS_JS = '''
return cekValue(state);
};
// Expose spec functions so evaluated SX code can use them.
// Type inspection (platform interface from boundary.sx)
// Platform functions — defined in platform_js.py, not in .sx spec files.
// Spec defines self-register via js-emit-define; these are the platform interface.
PRIMITIVES["type-of"] = typeOf;
PRIMITIVES["symbol-name"] = symbolName;
PRIMITIVES["keyword-name"] = keywordName;
@@ -1520,22 +1520,7 @@ CEK_FIXUPS_JS = '''
PRIMITIVES["component?"] = isComponent;
PRIMITIVES["island?"] = isIsland;
PRIMITIVES["make-symbol"] = function(n) { return new Symbol(n); };
// Parser (from parser.sx)
PRIMITIVES["sx-serialize"] = sxSerialize;
// CEK machine (from cek.sx/frames.sx)
PRIMITIVES["make-cek-state"] = makeCekState;
PRIMITIVES["cek-step"] = cekStep;
PRIMITIVES["cek-run"] = cekRun;
PRIMITIVES["cek-terminal?"] = cekTerminal_p;
PRIMITIVES["cek-value"] = cekValue;
PRIMITIVES["eval-expr-cek"] = evalExprCek;
// Render (from adapter-html.sx / render.sx)
PRIMITIVES["is-html-tag?"] = function(n) { return HTML_TAGS.indexOf(n) >= 0; };
// Environment (for creating eval contexts)
PRIMITIVES["make-env"] = function() { return merge(componentEnv, PRIMITIVES); };
'''
@@ -1827,8 +1812,8 @@ PLATFORM_DOM_JS = """
// If lambda takes 0 params, call without event arg (convenience for on-click handlers)
var wrapped = isLambda(handler)
? (lambdaParams(handler).length === 0
? function(e) { try { cekCall(handler, NIL); } catch(err) { console.error("[sx-ref] domListen handler error:", name, err); } }
: function(e) { try { cekCall(handler, [e]); } catch(err) { console.error("[sx-ref] domListen handler error:", name, err); } })
? function(e) { try { cekCall(handler, NIL); } catch(err) { console.error("[sx-ref] domListen handler error:", name, err); } finally { runPostRenderHooks(); } }
: function(e) { try { cekCall(handler, [e]); } catch(err) { console.error("[sx-ref] domListen handler error:", name, err); } finally { runPostRenderHooks(); } })
: handler;
if (name === "click") logInfo("domListen: click on <" + (el.tagName||"?").toLowerCase() + "> text=" + (el.textContent||"").substring(0,20) + " isLambda=" + isLambda(handler));
el.addEventListener(name, wrapped);
@@ -3064,6 +3049,7 @@ def fixups_js(has_html, has_sx, has_dom, has_signals=False, has_deps=False, has_
if (typeof domTextContent === "function") PRIMITIVES["dom-text-content"] = domTextContent;
if (typeof domCreateElement === "function") PRIMITIVES["dom-create-element"] = domCreateElement;
if (typeof domAppend === "function") PRIMITIVES["dom-append"] = domAppend;
if (typeof domAppendToHead === "function") PRIMITIVES["dom-append-to-head"] = domAppendToHead;
if (typeof jsonParse === "function") PRIMITIVES["json-parse"] = jsonParse;
if (typeof nowMs === "function") PRIMITIVES["now-ms"] = nowMs;
PRIMITIVES["sx-parse"] = sxParse;

58
sx/sx/geography/cek.sx
View File

@@ -299,9 +299,7 @@
(parsed-ok (signal false))
(error-msg (signal nil)))
(letrec
((container-ref nil)
(dom-stack (list))
(built-nodes (list))
((dom-stack (list))
(split-tag (fn (expr result)
(cond
(not (list? expr))
@@ -320,31 +318,24 @@
(cond
(= (type-of a) "keyword") (do (set! ckw true) (append! cat a))
ckw (do (set! ckw false) (append! cat a))
;; Component children (~cssx/tw etc) → collect as spreads for open step
(and (list? a) (not (empty? a))
(= (type-of (first a)) "symbol")
(starts-with? (symbol-name (first a)) "~"))
(do (set! ckw false) (append! spreads a))
:else (do (set! ckw false) (append! cch a))))
cargs)
;; Open step includes spreads — they're evaluated to set attrs on the element
(append! result {"type" "open" "tag" ctag "attrs" cat "spreads" spreads})
(for-each (fn (c) (split-tag c result)) cch)
(append! result {"type" "close" "tag" ctag}))
:else
(append! result {"type" "expr" "expr" expr}))))
(do-parse (fn ()
(console-log "do-parse called")
(reset! error-msg nil)
(reset! step-idx 0)
(reset! parsed-ok false)
(set! dom-stack (list))
(set! built-nodes (list))
;; Clear preview container
(let ((c (dom-query "#render-preview")))
(console-log "container found:" c)
(when c (set! container-ref c)
(dom-set-prop c "innerHTML" "")))
(let ((container (dom-query "#render-preview")))
(when container (dom-set-prop container "innerHTML" "")))
(let ((parsed (sx-parse (deref source))))
(if (empty? parsed)
(do (reset! error-msg "Parse error") (reset! steps (list)))
@@ -352,55 +343,45 @@
(split-tag (first parsed) result)
(reset! steps result)
(reset! parsed-ok true)
;; Set up DOM stack with the preview container as root
(set! dom-stack (list (dom-query "#render-preview"))))))))
(do-step (fn ()
(console-log "do-step: idx=" (deref step-idx) "len=" (len (deref steps)) "stack=" (len dom-stack) "parent=" (if (empty? dom-stack) "nil" "ok"))
(when (and (deref parsed-ok) (< (deref step-idx) (len (deref steps))))
(let ((step (nth (deref steps) (deref step-idx)))
(step-type (get step "type"))
(parent (if (empty? dom-stack) (dom-query "#render-preview") (last dom-stack))))
(console-log " step-type=" step-type "parent=" parent)
(cond
(= step-type "open")
(let ((el (dom-create-element (get step "tag") nil))
(attrs (get step "attrs"))
(spreads (or (get step "spreads") (list))))
;; Set keyword attrs
(let loop ((i 0))
(when (< i (len attrs))
(dom-set-attr el (keyword-name (nth attrs i)) (nth attrs (+ i 1)))
(loop (+ i 2))))
;; Evaluate spread components (e.g. ~cssx/tw) and apply to element
(for-each (fn (sp)
(let ((rendered (render-to-dom sp (make-env) nil)))
(when (and rendered (spread? rendered))
(let ((sattrs (spread-attrs rendered)))
(let ((result (eval-expr sp (make-env))))
(when (and result (spread? result))
(let ((sattrs (spread-attrs result)))
(for-each (fn (k)
(if (= k "class")
(dom-set-attr el "class"
(str (or (dom-get-attr el "class") "") " " (get sattrs k)))
(dom-set-attr el k (get sattrs k))))
(keys sattrs))))
nil))
(keys sattrs))))))
spreads)
(when parent (dom-append parent el))
(set! dom-stack (append dom-stack (list el)))
(set! built-nodes (append built-nodes (list el))))
(set! dom-stack (append dom-stack (list el))))
(= step-type "close")
(when (> (len dom-stack) 1)
(set! dom-stack (slice dom-stack 0 (- (len dom-stack) 1))))
(= step-type "leaf")
(let ((val (get step "expr")))
(console-log " leaf:" val "parent=" parent)
(when parent
(when parent
(let ((val (get step "expr")))
(dom-append parent (create-text-node (if (string? val) val (str val))))))
(= step-type "expr")
(let ((rendered (render-to-dom (get step "expr") (make-env) nil)))
(console-log " expr rendered:" rendered)
(when (and parent rendered)
(dom-append parent rendered)
nil))))
(dom-append parent rendered)))))
(swap! step-idx inc))))
(do-run (fn ()
(let loop ()
@@ -408,14 +389,16 @@
(do-step)
(loop)))))
(do-back (fn ()
(console-log "do-back: idx=" (deref step-idx))
(when (and (deref parsed-ok) (> (deref step-idx) 0))
;; Reset and replay up to step-idx - 1
(let ((target (- (deref step-idx) 1)))
(do-parse)
(let loop ((n 0))
(when (< n target)
(do-step)
(loop (+ n 1)))))))))
(let ((target (- (deref step-idx) 1))
(container (dom-query "#render-preview")))
(when container (dom-set-prop container "innerHTML" ""))
(set! dom-stack (list (dom-query "#render-preview")))
(reset! step-idx 0)
(console-log " replaying to" target)
(for-each (fn (_) (do-step)) (slice (deref steps) 0 target))
(console-log " done, idx now=" (deref step-idx)))))))
(div :class "space-y-4"
(div
(label :class "text-xs text-stone-400 block mb-1" "Component expression")
@@ -482,6 +465,7 @@
;; ---------------------------------------------------------------------------
;; Demo page content
;; ---------------------------------------------------------------------------

21
sx/sxc/init-client.sx.txt
View File

@@ -1,5 +1,5 @@
;; ---------------------------------------------------------------------------
;; SX app boot — styles and behaviors injected on page load
;; SX app boot — styles, behaviors, and post-render hooks
;;
;; Replaces inline_css and init_sx from Python app config.
;; Called as a data-init script on every page.
@@ -11,6 +11,25 @@
(collect! "cssx" "@keyframes sxJiggle{0%,100%{transform:translateX(0)}25%{transform:translateX(-.5px)}75%{transform:translateX(.5px)}}")
(collect! "cssx" "a.sx-request{animation:sxJiggle .3s ease-in-out infinite}")
;; CSSX flush hook — inject collected CSS rules into a <style> tag.
;; The spec calls (run-post-render-hooks) after hydration/swap/mount.
;; This is the application's CSS injection strategy.
(console-log "init-client: registering cssx flush hook, type:" (type-of (fn () nil)))
(register-post-render-hook
(fn ()
(console-log "cssx flush: running, rules:" (len (collected "cssx")))
(let ((rules (collected "cssx")))
(when (not (empty? rules))
(let ((style (or (dom-query "[data-cssx]")
(let ((s (dom-create-element "style" nil)))
(dom-set-attr s "data-cssx" "")
(dom-append-to-head s)
s))))
(dom-set-prop style "textContent"
(str (or (dom-get-prop style "textContent") "")
(join "" rules))))
(clear-collected! "cssx")))))
;; Nav link aria-selected update on client-side routing
(dom-listen (dom-body) "sx:clientRoute"
(fn (e)