Reactive code view with syntax colouring, fix indenting and nil refs
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m3s
All checks were successful
Build and Deploy / build-and-deploy (push) Successful in 1m3s
- Each token span independently reacts to step-idx via deref-as-shift - Colours match highlight.py: sky for HTML tags, rose for components, emerald for strings, violet for keywords, amber for numbers - Current step bold+violet bg, completed steps dimmed - No closing paren on separate line - Fix bare nil → NIL in eventDetail and domGetData Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -52,7 +52,7 @@
|
||||
(do (append! tokens {"text" (str "\"" expr "\"") "cls" "text-emerald-700" "step" (get step-ref "v")})
|
||||
(dict-set! step-ref "v" (+ (get step-ref "v") 1)))
|
||||
(number? expr)
|
||||
(do (append! tokens {"text" (str expr) "cls" "text-blue-600" "step" (get step-ref "v")})
|
||||
(do (append! tokens {"text" (str expr) "cls" "text-amber-700" "step" (get step-ref "v")})
|
||||
(dict-set! step-ref "v" (+ (get step-ref "v") 1)))
|
||||
(= (type-of expr) "keyword")
|
||||
(append! tokens {"text" (str ":" (keyword-name expr)) "cls" "text-violet-600" "step" (get step-ref "v")})
|
||||
@@ -60,9 +60,9 @@
|
||||
(let ((name (symbol-name expr)))
|
||||
(append! tokens {"text" name "cls"
|
||||
(cond
|
||||
(is-html-tag? name) "text-rose-600 font-semibold"
|
||||
(starts-with? name "~") "text-violet-700"
|
||||
:else "text-blue-800")
|
||||
(is-html-tag? name) "text-sky-700 font-semibold"
|
||||
(starts-with? name "~") "text-rose-600 font-semibold"
|
||||
:else "text-stone-700")
|
||||
"step" (get step-ref "v")}))
|
||||
(list? expr)
|
||||
(if (empty? expr)
|
||||
@@ -173,16 +173,15 @@
|
||||
(build-code-tokens (first parsed) tokens step-ref 0)
|
||||
(reset! code-tokens tokens)))))))
|
||||
(div :class "space-y-4"
|
||||
;; Reactive code view — tokens highlight as you step
|
||||
;; 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"))
|
||||
(cur (deref step-idx)))
|
||||
(let ((step-num (get tok "step")))
|
||||
(span :class (str (get tok "cls")
|
||||
(cond
|
||||
(= step-num -1) ""
|
||||
(= step-num cur) " bg-violet-100 rounded font-bold"
|
||||
(< step-num cur) " opacity-50"
|
||||
(= 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)))
|
||||
|
||||
Reference in New Issue
Block a user