From 169097097c4e52fbdb10b4dc6a8f7b86d0fcd531 Mon Sep 17 00:00:00 2001 From: giles Date: Sat, 14 Mar 2026 20:47:10 +0000 Subject: [PATCH] Imperative code view: spans built once, classes updated on each step MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Code view uses a lake with imperative DOM spans. Each token has its base syntax colour class stored. On each step, update-code-highlight iterates all spans and sets class based on step-idx: evaluated tokens go bold, current step gets violet bg, future stays normal. No reactive re-rendering of the code view — direct DOM class updates. Co-Authored-By: Claude Opus 4.6 (1M context) --- sx/sx/home-stepper.sx | 147 +++++++++++++++++++++--------------------- 1 file changed, 73 insertions(+), 74 deletions(-) diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx index 81a7e40..02b9487 100644 --- a/sx/sx/home-stepper.sx +++ b/sx/sx/home-stepper.sx @@ -3,20 +3,16 @@ (steps (signal (list))) (step-idx (signal 0)) (dom-stack-sig (signal (list))) - ;; Code view: list of {text class step-index} tokens - (code-tokens (signal (list)))) + (code-tokens (signal (list))) + (code-spans (list))) (letrec - ((split-tag (fn (expr result step-counter) + ((split-tag (fn (expr result) (cond (not (list? expr)) - (do (append! result {"type" "leaf" "expr" expr}) - (set! step-counter (+ step-counter 1)) - step-counter) - (empty? expr) step-counter + (append! result {"type" "leaf" "expr" expr}) + (empty? expr) nil (not (= (type-of (first expr)) "symbol")) - (do (append! result {"type" "leaf" "expr" expr}) - (set! step-counter (+ step-counter 1)) - step-counter) + (append! result {"type" "leaf" "expr" expr}) (is-html-tag? (symbol-name (first expr))) (let ((ctag (symbol-name (first expr))) (cargs (rest expr)) @@ -35,17 +31,10 @@ :else (do (set! ckw false) (append! cch a)))) cargs) (append! result {"type" "open" "tag" ctag "attrs" cat "spreads" spreads}) - (let ((open-step step-counter)) - (set! step-counter (+ step-counter 1)) - (for-each (fn (c) (set! step-counter (split-tag c result step-counter))) cch) - (append! result {"type" "close" "tag" ctag}) - (set! step-counter (+ step-counter 1)) - step-counter)) + (for-each (fn (c) (split-tag c result)) cch) + (append! result {"type" "close" "tag" ctag})) :else - (do (append! result {"type" "expr" "expr" expr}) - (set! step-counter (+ step-counter 1)) - step-counter)))) - ;; Build code tokens from source AST — each token tagged with its step index + (append! result {"type" "expr" "expr" expr})))) (build-code-tokens (fn (expr tokens step-ref indent) (cond (string? expr) @@ -65,44 +54,32 @@ :else "text-stone-700") "step" (get step-ref "v")})) (list? expr) - (if (empty? expr) - (append! tokens {"text" "()" "cls" "text-stone-400" "step" (get step-ref "v")}) + (when (not (empty? expr)) (let ((head (first expr)) (is-tag (and (= (type-of head) "symbol") (is-html-tag? (symbol-name head)))) (is-comp (and (= (type-of head) "symbol") (starts-with? (symbol-name head) "~"))) (open-step (get step-ref "v"))) - ;; Opening paren (append! tokens {"text" "(" "cls" "text-stone-400" "step" open-step}) - ;; For tags: open step covers tag name + attrs (when (or is-tag is-comp) (dict-set! step-ref "v" (+ (get step-ref "v") 1))) - ;; Head (build-code-tokens head tokens step-ref indent) - ;; Args - (let ((args (rest expr)) - (is-first-line true)) - (for-each (fn (a) - (let ((is-child (and (list? a) (not (empty? a)) - (= (type-of (first a)) "symbol") - (or (is-html-tag? (symbol-name (first a))) - (starts-with? (symbol-name (first a)) "~"))))) - (if (and is-tag is-child) - ;; Child element on new line with indent - (do (append! tokens {"text" (str "\n" (join "" (map (fn (_) " ") (range 0 (+ indent 1))))) "cls" "" "step" -1}) - (build-code-tokens a tokens step-ref (+ indent 1))) - ;; Inline arg - (do (append! tokens {"text" " " "cls" "" "step" -1}) - (build-code-tokens a tokens step-ref indent))))) - args)) - ;; Close paren — matches the close step for tags - (when is-tag - (append! tokens {"text" "\n" "cls" "" "step" -1})) + (for-each (fn (a) + (let ((is-child (and (list? a) (not (empty? a)) + (= (type-of (first a)) "symbol") + (or (is-html-tag? (symbol-name (first a))) + (starts-with? (symbol-name (first a)) "~"))))) + (if (and is-tag is-child) + (do (append! tokens {"text" (str "\n" (join "" (map (fn (_) " ") (range 0 (+ indent 1))))) "cls" "" "step" -1}) + (build-code-tokens a tokens step-ref (+ indent 1))) + (do (append! tokens {"text" " " "cls" "" "step" -1}) + (build-code-tokens a tokens step-ref indent))))) + (rest expr)) (append! tokens {"text" ")" "cls" "text-stone-400" "step" (if is-tag (get step-ref "v") open-step)}) (when is-tag (dict-set! step-ref "v" (+ (get step-ref "v") 1))))) - :else - (append! tokens {"text" (str expr) "cls" "text-stone-500" "step" (get step-ref "v")})))) + :else nil))) (get-preview (fn () (dom-query "[data-sx-lake=\"home-preview\"]"))) + (get-code-view (fn () (dom-query "[data-sx-lake=\"code-view\"]"))) (get-stack (fn () (deref dom-stack-sig))) (set-stack (fn (v) (reset! dom-stack-sig v))) (push-stack (fn (el) (reset! dom-stack-sig (append (deref dom-stack-sig) (list el))))) @@ -110,7 +87,34 @@ (let ((s (deref dom-stack-sig))) (when (> (len s) 1) (reset! dom-stack-sig (slice s 0 (- (len s) 1))))))) + (build-code-dom (fn () + (when (and (empty? code-spans) (not (empty? (deref code-tokens)))) + (let ((code-el (get-code-view))) + (when code-el + (dom-set-prop code-el "innerHTML" "") + (for-each (fn (tok) + (let ((sp (dom-create-element "span" nil))) + (dom-set-attr sp "class" (get tok "cls")) + (dom-set-prop sp "textContent" (get tok "text")) + (dom-append code-el sp) + (append! code-spans (dict "el" sp "step" (get tok "step") "cls" (get tok "cls"))))) + (deref code-tokens))))))) + (update-code-highlight (fn () + (let ((cur (deref step-idx))) + (for-each (fn (s) + (let ((step-num (get s "step")) + (el (get s "el")) + (base (get s "cls"))) + (when (not (= step-num -1)) + (dom-set-attr el "class" + (str base + (cond + (= step-num cur) " bg-violet-100 rounded px-0.5 font-bold" + (< step-num cur) " font-bold text-lg" + :else " opacity-40")))))) + code-spans)))) (do-step (fn () + (build-code-dom) (when (< (deref step-idx) (len (deref steps))) (when (empty? (get-stack)) (let ((p (get-preview))) @@ -150,7 +154,8 @@ (let ((rendered (render-to-dom (get step "expr") (make-env) nil))) (when (and parent rendered) (dom-append parent rendered))))) - (swap! step-idx inc)))) + (swap! step-idx inc) + (update-code-highlight)))) (do-back (fn () (when (> (deref step-idx) 0) (let ((target (- (deref step-idx) 1)) @@ -164,42 +169,36 @@ (let ((parsed (sx-parse source))) (when (not (empty? parsed)) (let ((result (list)) - (step-ref (signal 0))) - (split-tag (first parsed) result 0) + (step-ref (dict "v" 0))) + (split-tag (first parsed) result) (reset! steps result) - ;; Build code tokens (let ((tokens (list))) (dict-set! step-ref "v" 0) (build-code-tokens (first parsed) tokens step-ref 0) - (reset! code-tokens tokens))))))) + (reset! code-tokens tokens)) + ;; Defer code DOM build until lake exists + (schedule-idle (fn () + (build-code-dom) + (update-code-highlight)))))))) (div :class "space-y-4" - ;; Reactive code view — each token span reacts to step-idx via deref-as-shift - (pre :class "text-sm font-mono bg-stone-50 rounded p-4 overflow-x-auto leading-relaxed" - (map (fn (tok) - (let ((step-num (get tok "step"))) - (span :class (str (get tok "cls") - (cond - (= step-num -1) "" - (= step-num (deref step-idx)) " bg-violet-100 rounded font-bold" - (< step-num (deref step-idx)) " opacity-60" - :else "")) - (get tok "text")))) - (deref code-tokens))) + ;; Code view lake — spans built imperatively, classes updated on step + (lake :id "code-view" :tag "pre" + :class "text-sm font-mono bg-stone-50 rounded p-4 overflow-x-auto leading-relaxed") ;; Controls - (div :class "flex items-center justify-center gap-2" + (div :class "flex items-center justify-center gap-3" (button :on-click (fn (e) (do-back)) - :class (str "px-3 py-1.5 rounded text-sm " + :class (str "px-2 py-1 rounded text-lg " (if (> (deref step-idx) 0) - "bg-stone-200 text-stone-700 hover:bg-stone-300" - "bg-stone-100 text-stone-300 cursor-not-allowed")) + "text-stone-600 hover:text-stone-800 hover:bg-stone-100" + "text-stone-300 cursor-not-allowed")) "\u25c0") + (span :class "text-sm text-stone-500 font-mono tabular-nums" + (deref step-idx) " / " (len (deref steps))) (button :on-click (fn (e) (do-step)) - :class (str "px-3 py-1.5 rounded text-sm " + :class (str "px-2 py-1 rounded text-lg " (if (< (deref step-idx) (len (deref steps))) - "bg-violet-500 text-white hover:bg-violet-600" - "bg-violet-200 text-violet-400 cursor-not-allowed")) - "Step \u25b6") - (span :class "text-xs text-stone-400" (deref step-idx)) - (span :class "text-xs text-stone-400" " / 16")) - ;; Live preview + "text-violet-600 hover:text-violet-800 hover:bg-violet-50" + "text-violet-300 cursor-not-allowed")) + "\u25b6")) + ;; Live preview lake (lake :id "home-preview")))))