From 6e804bbb5c77182392eb3c603790edea810f5112 Mon Sep 17 00:00:00 2001 From: giles Date: Mon, 23 Mar 2026 18:26:51 +0000 Subject: [PATCH] Stepper island: eager parsing + SSR content in lakes Moved source parsing (sx-parse, split-tag, build-code-tokens) out of the effect so it runs eagerly during SSR. Only DOM manipulation (build-code-dom, schedule-idle) stays in the effect. Lakes now have SSR content: - code-view: shows source code as preformatted text - home-preview: shows "the joy of sx" with styled spans Client hydrates and replaces with interactive version. Co-Authored-By: Claude Opus 4.6 (1M context) --- sx/sx/home-stepper.sx | 61 ++++++++++++++++++++++++------------------- 1 file changed, 34 insertions(+), 27 deletions(-) diff --git a/sx/sx/home-stepper.sx b/sx/sx/home-stepper.sx index 254bf25..8c86965 100644 --- a/sx/sx/home-stepper.sx +++ b/sx/sx/home-stepper.sx @@ -195,35 +195,35 @@ ;; Validate — reset to default if out of range (when (or (< (deref step-idx) 0) (> (deref step-idx) 16)) (reset! step-idx 9)))) - ;; Auto-parse via effect (bind to _ to suppress return value in DOM) + ;; Parse source eagerly (pure computation — works in SSR and client) + (let ((parsed (sx-parse source))) + (when (not (empty? parsed)) + (let ((result (list)) + (step-ref (dict "v" 0))) + (split-tag (first parsed) result) + (reset! steps result) + (let ((tokens (list))) + (dict-set! step-ref "v" 0) + (build-code-tokens (first parsed) tokens step-ref 0) + (reset! code-tokens tokens))))) + ;; DOM build via effect (client-only — needs live DOM) (let ((_eff (effect (fn () - (let ((parsed (sx-parse source))) - (when (not (empty? parsed)) - (let ((result (list)) - (step-ref (dict "v" 0))) - (split-tag (first parsed) result) - (reset! steps result) - (let ((tokens (list))) - (dict-set! step-ref "v" 0) - (build-code-tokens (first parsed) tokens step-ref 0) - (reset! code-tokens tokens)) - ;; Defer code DOM build until lake exists - (schedule-idle (fn () - (build-code-dom) - ;; Clear preview and replay to initial step-idx - (let ((preview (get-preview))) - (when preview (dom-set-prop preview "innerHTML" ""))) - (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) - (run-post-render-hooks)))))))))) + (schedule-idle (fn () + (build-code-dom) + (let ((preview (get-preview))) + (when preview (dom-set-prop preview "innerHTML" ""))) + (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) + (run-post-render-hooks))))))) (div :class "space-y-4" - ;; Code view lake — spans built imperatively, classes updated on step + ;; Code view lake — client builds interactive spans, SSR shows source (div (~cssx/tw :tokens "font-mono bg-stone-50 rounded p-2 overflow-x-auto leading-relaxed whitespace-pre-wrap") :style "font-size:0.5rem" - (lake :id "code-view")) + (lake :id "code-view" + (pre :style "margin:0;white-space:pre-wrap;" source))) ;; Controls (div :class "flex items-center justify-center gap-2 md:gap-3" (button :on-click (fn (e) (do-back)) @@ -240,5 +240,12 @@ "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")))))) + ;; Live preview lake — SSR shows the final rendered result + (lake :id "home-preview" + (div (~cssx/tw :tokens "text-center") + (h1 (~cssx/tw :tokens "text-3xl font-bold mb-2") + (span (~cssx/tw :tokens "text-rose-500") "the ") + (span (~cssx/tw :tokens "text-amber-500") "joy ") + (span (~cssx/tw :tokens "text-emerald-500") "of ") + (span (~cssx/tw :tokens "text-violet-600 text-4xl") "sx"))))))))) +