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

Stepper island: eager parsing + SSR content in lakes

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-23 18:26:51 +00:00
parent c4224925f9
commit 6e804bbb5c
1 changed files with 34 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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")))))))))