Fix Pretext island reactivity: deref inside DOM tree, not let binding
The (let ((lines (deref layout))) ...) pattern captured the layout value once at island initialization. Replacing with (deref layout) inline in the DOM expressions makes the reactive system track the dependency and re-render when signals change. Sliders and algorithm toggle now trigger layout recomputation and DOM update. Remaining: reactive DOM patching for absolutely-positioned spans creates visual artifacts (old spans persist). Needs keyed list or full container replacement. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -67,55 +67,50 @@
|
|||||||
(div
|
(div
|
||||||
(~tw :tokens "text-xs text-stone-400")
|
(~tw :tokens "text-xs text-stone-400")
|
||||||
(str (deref max-w) "px / " (deref font-size) "px")))
|
(str (deref max-w) "px / " (deref font-size) "px")))
|
||||||
(let
|
(div
|
||||||
((lines (deref layout))
|
:class "relative rounded-lg border border-stone-200 bg-white overflow-hidden"
|
||||||
(lh (* (deref font-size) 1.5))
|
|
||||||
(mxw (deref max-w))
|
|
||||||
(sz (deref font-size)))
|
|
||||||
(div
|
(div
|
||||||
:class "relative rounded-lg border border-stone-200 bg-white overflow-hidden"
|
:class "px-4 pt-3 pb-1"
|
||||||
(div
|
(span
|
||||||
:class "px-4 pt-3 pb-1"
|
:class "text-xs font-medium uppercase tracking-wide text-stone-400"
|
||||||
(span
|
(str
|
||||||
:class "text-xs font-medium uppercase tracking-wide text-stone-400"
|
"Client-side — "
|
||||||
(str
|
(len (deref layout))
|
||||||
"Client-side — "
|
" lines, "
|
||||||
(len lines)
|
(len words)
|
||||||
" lines, "
|
" words")))
|
||||||
(len words)
|
(div
|
||||||
" words")))
|
:style (str
|
||||||
(div
|
"position:relative;height:"
|
||||||
:style (str
|
(* (len (deref layout)) (* (deref font-size) 1.5))
|
||||||
"position:relative;height:"
|
"px;padding:12px 16px;")
|
||||||
(* (len lines) lh)
|
(map
|
||||||
"px;padding:12px 16px;")
|
(fn
|
||||||
(map
|
(line)
|
||||||
(fn
|
(let
|
||||||
(line)
|
((y (get line :y)))
|
||||||
(let
|
(map
|
||||||
((y (get line :y)))
|
(fn
|
||||||
(map
|
(pw)
|
||||||
(fn
|
(span
|
||||||
(pw)
|
:style (str
|
||||||
(span
|
"position:absolute;left:"
|
||||||
:style (str
|
(+ (get pw :x) 16)
|
||||||
"position:absolute;left:"
|
"px;top:"
|
||||||
(+ (get pw :x) 16)
|
(+ y 12)
|
||||||
"px;top:"
|
"px;font-family:'Pretext Serif',serif;font-size:"
|
||||||
(+ y 12)
|
(deref font-size)
|
||||||
"px;font-family:'Pretext Serif',serif;font-size:"
|
"px;line-height:"
|
||||||
sz
|
(* (deref font-size) 1.5)
|
||||||
"px;line-height:"
|
"px;white-space:nowrap;")
|
||||||
lh
|
(get pw :word)))
|
||||||
"px;white-space:nowrap;")
|
(get line :words))))
|
||||||
(get pw :word)))
|
(deref layout)))
|
||||||
(get line :words))))
|
(div
|
||||||
lines))
|
:class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between"
|
||||||
(div
|
(span
|
||||||
:class "px-4 py-2 border-t border-stone-100 bg-stone-50 flex justify-between"
|
:class "text-xs text-stone-400"
|
||||||
(span
|
(str (len (deref layout)) " lines"))
|
||||||
:class "text-xs text-stone-400"
|
(span
|
||||||
(str (len lines) " lines"))
|
:class "text-xs text-stone-400"
|
||||||
(span
|
(str "width: " (deref max-w) "px")))))))))
|
||||||
:class "text-xs text-stone-400"
|
|
||||||
(str "width: " mxw "px"))))))))))
|
|
||||||
|
|||||||
Reference in New Issue
Block a user