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

Optimize stepper: rebuild-preview replaces step replay

Browse Source 
- do-back: uses steps-to-preview + render-to-dom (O(1) render)
  instead of replaying every do-step from 0 (O(n) DOM ops + cssx)
- Hydration effect: same rebuild-preview instead of step replay
- Cookie save moved to button on-click only (not per-step)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-25 16:20:13 +00:00
parent 43cf590541
commit c62e7319cf
1 changed files with 25 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
sx/sx/home-stepper.sx
View File

@@ -219,17 +219,25 @@
;; Component expressions handled by lake's reactive render ;; Component expressions handled by lake's reactive render
nil)) nil))
(swap! step-idx inc) (swap! step-idx inc)
(update-code-highlight) (update-code-highlight)))))
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper"))))) (rebuild-preview (fn (target)
;; Rebuild preview in one shot from steps-to-preview (pure SX→DOM)
(let ((container (get-preview)))
(when container
(dom-set-prop container "innerHTML" "")
(let ((expr (steps-to-preview (deref steps) target)))
(when expr
(let ((dom (render-to-dom expr (get-render-env nil) nil)))
(when dom
(dom-append container dom)))))
(set-stack (list container))))))
(do-back (fn () (do-back (fn ()
(when (> (deref step-idx) 0) (when (> (deref step-idx) 0)
(let ((target (- (deref step-idx) 1)) (let ((target (- (deref step-idx) 1)))
(container (get-preview))) (rebuild-preview target)
(when container (dom-set-prop container "innerHTML" "")) (reset! step-idx target)
(set-stack (list (get-preview))) (update-code-highlight)
(reset! step-idx 0) (set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper"))))))))
(for-each (fn (_) (do-step)) (slice (deref steps) 0 target))
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper")))))))
;; Freeze scope for persistence — same mechanism, cookie storage ;; Freeze scope for persistence — same mechanism, cookie storage
(freeze-scope "home-stepper" (fn () (freeze-scope "home-stepper" (fn ()
(freeze-signal "step" step-idx))) (freeze-signal "step" step-idx)))
@@ -254,13 +262,7 @@
(let ((_eff (effect (fn () (let ((_eff (effect (fn ()
(schedule-idle (fn () (schedule-idle (fn ()
(build-code-dom) (build-code-dom)
(let ((preview (get-preview))) (rebuild-preview (deref step-idx))
(when preview (dom-set-prop preview "innerHTML" "")))
(batch (fn ()
(let ((target (deref step-idx)))
(reset! step-idx 0)
(set-stack (list (get-preview)))
(for-each (fn (_) (do-step)) (slice (deref steps) 0 target)))))
(update-code-highlight) (update-code-highlight)
(run-post-render-hooks))))))) (run-post-render-hooks)))))))
(div :class "space-y-4" (div :class "space-y-4"
@@ -282,7 +284,9 @@
(deref code-tokens))) (deref code-tokens)))
;; Controls ;; Controls
(div :class "flex items-center justify-center gap-2 md:gap-3" (div :class "flex items-center justify-center gap-2 md:gap-3"
(button :on-click (fn (e) (do-back)) (button :on-click (fn (e)
(do-back)
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper")))
:class (str "px-2 py-1 rounded text-3xl " :class (str "px-2 py-1 rounded text-3xl "
(if (> (deref step-idx) 0) (if (> (deref step-idx) 0)
"text-stone-600 hover:text-stone-800 hover:bg-stone-100" "text-stone-600 hover:text-stone-800 hover:bg-stone-100"
@@ -290,7 +294,9 @@
"\u25c0") "\u25c0")
(span :class "text-sm text-stone-500 font-mono tabular-nums" (span :class "text-sm text-stone-500 font-mono tabular-nums"
(deref step-idx) " / " (len (deref steps))) (deref step-idx) " / " (len (deref steps)))
(button :on-click (fn (e) (do-step)) (button :on-click (fn (e)
(do-step)
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper")))
:class (str "px-2 py-1 rounded text-3xl " :class (str "px-2 py-1 rounded text-3xl "
(if (< (deref step-idx) (len (deref steps))) (if (< (deref step-idx) (len (deref steps)))
"text-violet-600 hover:text-violet-800 hover:bg-violet-50" "text-violet-600 hover:text-violet-800 hover:bg-violet-50"
@@ -299,6 +305,6 @@
;; Live preview — shows partial result up to current step. ;; Live preview — shows partial result up to current step.
;; Same SX rendered by server (HTML) and client (DOM). ;; Same SX rendered by server (HTML) and client (DOM).
(lake :id "home-preview" (lake :id "home-preview"
(steps-to-preview (deref steps) (deref step-idx)))))))) (steps-to-preview (deref steps) (deref step-idx))))))