Optimize stepper: rebuild-preview replaces step replay

- 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:
2026-03-25 16:20:13 +00:00
parent 43cf590541
commit c62e7319cf

View File

@@ -219,17 +219,25 @@
;; Component expressions handled by lake's reactive render
nil))
(swap! step-idx inc)
(update-code-highlight)
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper")))))
(update-code-highlight)))))
(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 ()
(when (> (deref step-idx) 0)
(let ((target (- (deref step-idx) 1))
(container (get-preview)))
(when container (dom-set-prop container "innerHTML" ""))
(set-stack (list (get-preview)))
(reset! step-idx 0)
(for-each (fn (_) (do-step)) (slice (deref steps) 0 target))
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper")))))))
(let ((target (- (deref step-idx) 1)))
(rebuild-preview target)
(reset! step-idx target)
(update-code-highlight)
(set-cookie "sx-home-stepper" (freeze-to-sx "home-stepper"))))))))
;; Freeze scope for persistence — same mechanism, cookie storage
(freeze-scope "home-stepper" (fn ()
(freeze-signal "step" step-idx)))
@@ -254,13 +262,7 @@
(let ((_eff (effect (fn ()
(schedule-idle (fn ()
(build-code-dom)
(let ((preview (get-preview)))
(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)))))
(rebuild-preview (deref step-idx))
(update-code-highlight)
(run-post-render-hooks)))))))
(div :class "space-y-4"
@@ -282,7 +284,9 @@
(deref code-tokens)))
;; Controls
(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 "
(if (> (deref step-idx) 0)
"text-stone-600 hover:text-stone-800 hover:bg-stone-100"
@@ -290,7 +294,9 @@
"\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))
(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 "
(if (< (deref step-idx) (len (deref steps)))
"text-violet-600 hover:text-violet-800 hover:bg-violet-50"
@@ -299,6 +305,6 @@
;; Live preview — shows partial result up to current step.
;; Same SX rendered by server (HTML) and client (DOM).
(lake :id "home-preview"
(steps-to-preview (deref steps) (deref step-idx))))))))
(steps-to-preview (deref steps) (deref step-idx))))))