giles
cf5e767510
Add client-side route matching so pure pages (no IO deps) can render instantly without a server roundtrip. Page metadata serialized as SX dict literals (not JSON) in <script type="text/sx-pages"> blocks. - New router.sx spec: route pattern parsing and matching (6 pure functions) - boot.sx: process page registry using SX parser at startup - orchestration.sx: intercept boost links for client routing with try-first/fallback — client attempts local eval, falls back to server - helpers.py: _build_pages_sx() serializes defpage metadata as SX - Routing analyzer demo page showing per-page client/server classification - 32 tests for Phase 2 IO detection (scan_io_refs, transitive_io_refs, compute_all_io_refs, component_pure?) + fallback/ref parity - 37 tests for Phase 3 router functions + page registry serialization - Fix bootstrap_py.py _emit_let cell variable initialization bug - Fix missing primitive aliases (split, length, merge) in bootstrap_py.py Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
97 lines
5.9 KiB
Plaintext
97 lines
5.9 KiB
Plaintext
;; Routing analyzer — live demonstration of client-side routing classification.
|
|
;; Shows which pages route client-side (pure, instant) vs server-side (IO/data).
|
|
;; @css bg-green-100 text-green-800 bg-violet-600 bg-stone-200 text-violet-600 text-stone-600 text-green-600 rounded-full h-2.5 grid-cols-2 bg-blue-100 text-blue-800 bg-amber-100 text-amber-800 grid-cols-4 marker:text-stone-400 bg-blue-50 bg-amber-50 text-blue-700 text-amber-700 border-blue-200 border-amber-200 bg-blue-500 bg-amber-500 grid-cols-3 border-green-200 bg-green-50 text-green-700
|
|
|
|
(defcomp ~routing-analyzer-content (&key pages total-pages client-count
|
|
server-count registry-sample)
|
|
(~doc-page :title "Routing Analyzer"
|
|
|
|
(p :class "text-stone-600 mb-6"
|
|
"Live classification of all " (strong (str total-pages)) " pages by routing mode. "
|
|
"Pages without " (code ":data") " dependencies are "
|
|
(span :class "text-green-700 font-medium" "client-routable")
|
|
" — after initial load they render instantly from the page registry without a server roundtrip. "
|
|
"Pages with data dependencies fall back to "
|
|
(span :class "text-amber-700 font-medium" "server fetch")
|
|
" transparently. Powered by "
|
|
(a :href "/specs/router" :class "text-violet-700 underline" "router.sx")
|
|
" route matching and "
|
|
(a :href "/specs/deps" :class "text-violet-700 underline" "deps.sx")
|
|
" IO detection.")
|
|
|
|
(div :class "mb-8 grid grid-cols-4 gap-4"
|
|
(~analyzer-stat :label "Total Pages" :value (str total-pages)
|
|
:cls "text-violet-600")
|
|
(~analyzer-stat :label "Client-Routable" :value (str client-count)
|
|
:cls "text-green-600")
|
|
(~analyzer-stat :label "Server-Only" :value (str server-count)
|
|
:cls "text-amber-600")
|
|
(~analyzer-stat :label "Client Ratio" :value (str (round (* (/ client-count total-pages) 100)) "%")
|
|
:cls "text-blue-600"))
|
|
|
|
;; Route classification bar
|
|
(div :class "mb-8"
|
|
(div :class "flex items-center gap-2 mb-2"
|
|
(span :class "text-sm font-medium text-stone-600" "Client")
|
|
(div :class "flex-1")
|
|
(span :class "text-sm font-medium text-stone-600" "Server"))
|
|
(div :class "w-full bg-amber-200 rounded-full h-4 overflow-hidden"
|
|
(div :class "bg-green-500 h-4 rounded-l-full transition-all"
|
|
:style (str "width: " (round (* (/ client-count total-pages) 100)) "%"))))
|
|
|
|
(~doc-section :title "Route Table" :id "routes"
|
|
(div :class "space-y-2"
|
|
(map (fn (page)
|
|
(~routing-row
|
|
:name (get page "name")
|
|
:path (get page "path")
|
|
:mode (get page "mode")
|
|
:has-data (get page "has-data")
|
|
:content-expr (get page "content-expr")
|
|
:reason (get page "reason")))
|
|
pages)))
|
|
|
|
(~doc-section :title "Page Registry Format" :id "registry"
|
|
(p :class "text-stone-600 mb-4"
|
|
"The server serializes page metadata as SX dict literals inside "
|
|
(code "<script type=\"text/sx-pages\">")
|
|
". The client's parser reads these at boot, building a route table with parsed URL patterns. "
|
|
"No JSON involved — the same SX parser handles everything.")
|
|
(when (not (empty? registry-sample))
|
|
(div :class "not-prose"
|
|
(pre :class "text-xs leading-relaxed whitespace-pre-wrap overflow-x-auto bg-stone-100 rounded border border-stone-200 p-4"
|
|
(code (highlight registry-sample "lisp"))))))
|
|
|
|
(~doc-section :title "How Client Routing Works" :id "how"
|
|
(ol :class "list-decimal pl-5 space-y-2 text-stone-700"
|
|
(li (strong "Boot: ") "boot.sx finds " (code "<script type=\"text/sx-pages\">") ", calls " (code "parse") " on the SX content, then " (code "parse-route-pattern") " on each page's path to build " (code "_page-routes") ".")
|
|
(li (strong "Click: ") "orchestration.sx intercepts boost link clicks via " (code "bind-client-route-link") ". Extracts the pathname from the href.")
|
|
(li (strong "Match: ") (code "find-matching-route") " from router.sx tests the pathname against all parsed patterns. Returns the first match with extracted URL params.")
|
|
(li (strong "Check: ") "If the matched page has " (code ":has-data true") ", skip to server fetch. Otherwise proceed to client eval.")
|
|
(li (strong "Eval: ") (code "try-eval-content") " merges the component env + URL params + closure, then parses and renders the content expression to DOM.")
|
|
(li (strong "Swap: ") "On success, the rendered DOM replaces " (code "#main-panel") " contents, " (code "pushState") " updates the URL, and the console logs " (code "sx:route client /path") ".")
|
|
(li (strong "Fallback: ") "If anything fails (no match, eval error, missing component), the click falls through to a standard server fetch. Console logs " (code "sx:route server /path") ". The user sees no difference.")))))
|
|
|
|
(defcomp ~routing-row (&key name path mode has-data content-expr reason)
|
|
(div :class (str "rounded border p-3 flex items-center gap-3 "
|
|
(if (= mode "client")
|
|
"border-green-200 bg-green-50"
|
|
"border-amber-200 bg-amber-50"))
|
|
;; Mode badge
|
|
(span :class (str "inline-block px-2 py-0.5 rounded text-xs font-bold uppercase "
|
|
(if (= mode "client")
|
|
"bg-green-600 text-white"
|
|
"bg-amber-500 text-white"))
|
|
mode)
|
|
;; Page info
|
|
(div :class "flex-1 min-w-0"
|
|
(div :class "flex items-center gap-2"
|
|
(span :class "font-mono font-semibold text-stone-800 text-sm" name)
|
|
(span :class "text-stone-400 text-xs font-mono" path))
|
|
(when reason
|
|
(div :class "text-xs text-stone-500 mt-0.5" reason)))
|
|
;; Content expression
|
|
(when content-expr
|
|
(div :class "hidden md:block max-w-xs truncate"
|
|
(code :class "text-xs text-stone-500" content-expr)))))
|