sx-tools: WASM kernel updates, TW/CSSX rework, content refresh, new debugging tools
Build tooling: updated OCaml bootstrapper, compile-modules, bundle.sh, sx-build-all. WASM browser: rebuilt sx_browser.bc.js/wasm, sx-platform-2.js, .sxbc bytecode files. CSSX/Tailwind: reworked cssx.sx templates and tw-layout, added tw-type support. Content: refreshed essays, plans, geography, reactive islands, docs, demos, handlers. New tools: bisect_sxbc.sh, test-spa.js, render-trace.sx, morph playwright spec. Tests: added test-match.sx, test-examples.sx, updated test-tw.sx and web tests. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -2,63 +2,63 @@
|
||||
~docs/page
|
||||
(&key title &rest children)
|
||||
(div
|
||||
:class "max-w-4xl mx-auto px-6 pb-8 pt-4"
|
||||
(div :class "prose prose-stone max-w-none space-y-6" children)))
|
||||
(~tw :tokens "max-w-4xl mx-auto px-6 pb-8 pt-4")
|
||||
(div (~tw :tokens "prose prose-stone max-w-none space-y-6") children)))
|
||||
|
||||
(defcomp
|
||||
~docs/section
|
||||
(&key title id &rest children)
|
||||
(section
|
||||
:id id
|
||||
:class "space-y-4"
|
||||
(h2 :class "text-2xl font-semibold text-stone-800" title)
|
||||
(~tw :tokens "space-y-4")
|
||||
(h2 (~tw :tokens "text-2xl font-semibold text-stone-800") title)
|
||||
children))
|
||||
|
||||
(defcomp
|
||||
~docs/subsection
|
||||
(&key title &rest children)
|
||||
(div
|
||||
:class "space-y-3"
|
||||
(h3 :class "text-xl font-semibold text-stone-700" title)
|
||||
(~tw :tokens "space-y-3")
|
||||
(h3 (~tw :tokens "text-xl font-semibold text-stone-700") title)
|
||||
children))
|
||||
|
||||
(defcomp
|
||||
~docs/code
|
||||
(&key src)
|
||||
(div
|
||||
:class "not-prose bg-stone-100 rounded-lg p-5 overflow-x-auto my-6"
|
||||
(~tw :tokens "not-prose bg-stone-100 rounded-lg p-5 overflow-x-auto my-6")
|
||||
(pre
|
||||
:class "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono"
|
||||
(~tw :tokens "text-sm leading-relaxed whitespace-pre-wrap break-words font-mono")
|
||||
src)))
|
||||
|
||||
(defcomp
|
||||
~docs/note
|
||||
(&key &rest children)
|
||||
(div
|
||||
:class "border-l-4 border-violet-400 bg-violet-50 p-4 text-stone-700 text-sm"
|
||||
(~tw :tokens "border-l-4 border-violet-400 bg-violet-50 p-4 text-stone-700 text-sm")
|
||||
children))
|
||||
|
||||
(defcomp
|
||||
~docs/table
|
||||
(&key headers rows)
|
||||
(div
|
||||
:class "overflow-x-auto rounded border border-stone-200"
|
||||
(~tw :tokens "overflow-x-auto rounded border border-stone-200")
|
||||
(table
|
||||
:class "w-full text-left text-sm"
|
||||
(~tw :tokens "w-full text-left text-sm")
|
||||
(thead
|
||||
(tr
|
||||
:class "border-b border-stone-200 bg-stone-100"
|
||||
(~tw :tokens "border-b border-stone-200 bg-stone-100")
|
||||
(map
|
||||
(fn (h) (th :class "px-3 py-2 font-medium text-stone-600" h))
|
||||
(fn (h) (th (~tw :tokens "px-3 py-2 font-medium text-stone-600") h))
|
||||
headers)))
|
||||
(tbody
|
||||
(map
|
||||
(fn
|
||||
(row)
|
||||
(tr
|
||||
:class "border-b border-stone-100"
|
||||
(~tw :tokens "border-b border-stone-100")
|
||||
(map
|
||||
(fn (cell) (td :class "px-3 py-2 text-stone-700" cell))
|
||||
(fn (cell) (td (~tw :tokens "px-3 py-2 text-stone-700") cell))
|
||||
row)))
|
||||
rows)))))
|
||||
|
||||
@@ -66,9 +66,9 @@
|
||||
~docs/attr-row
|
||||
(&key attr description exists href)
|
||||
(tr
|
||||
:class "border-b border-stone-100"
|
||||
(~tw :tokens "border-b border-stone-100")
|
||||
(td
|
||||
:class "px-3 py-2 font-mono text-sm whitespace-nowrap"
|
||||
(~tw :tokens "px-3 py-2 font-mono text-sm whitespace-nowrap")
|
||||
(if
|
||||
href
|
||||
(a
|
||||
@@ -78,30 +78,30 @@
|
||||
:sx-select "#sx-content"
|
||||
:sx-swap "outerHTML"
|
||||
:sx-push-url "true"
|
||||
:class "text-violet-700 hover:text-violet-900 underline"
|
||||
(~tw :tokens "text-violet-700 hover:text-violet-900 underline")
|
||||
attr)
|
||||
(span :class "text-violet-700" attr)))
|
||||
(td :class "px-3 py-2 text-stone-700 text-sm" description)
|
||||
(span (~tw :tokens "text-violet-700") attr)))
|
||||
(td (~tw :tokens "px-3 py-2 text-stone-700 text-sm") description)
|
||||
(td
|
||||
:class "px-3 py-2 text-center"
|
||||
(~tw :tokens "px-3 py-2 text-center")
|
||||
(if
|
||||
exists
|
||||
(span :class "text-emerald-600 text-sm" "yes")
|
||||
(span :class "text-stone-400 text-sm italic" "not yet")))))
|
||||
(span (~tw :tokens "text-emerald-600 text-sm") "yes")
|
||||
(span (~tw :tokens "text-stone-400 text-sm italic") "not yet")))))
|
||||
|
||||
(defcomp
|
||||
~docs/primitives-table
|
||||
(&key category primitives)
|
||||
(div
|
||||
:class "space-y-2"
|
||||
(h4 :class "text-lg font-semibold text-stone-700" category)
|
||||
(~tw :tokens "space-y-2")
|
||||
(h4 (~tw :tokens "text-lg font-semibold text-stone-700") category)
|
||||
(div
|
||||
:class "flex flex-wrap gap-2"
|
||||
(~tw :tokens "flex flex-wrap gap-2")
|
||||
(map
|
||||
(fn
|
||||
(p)
|
||||
(span
|
||||
:class "inline-block px-2 py-1 rounded bg-stone-100 font-mono text-sm text-stone-700"
|
||||
(~tw :tokens "inline-block px-2 py-1 rounded bg-stone-100 font-mono text-sm text-stone-700")
|
||||
p))
|
||||
primitives))))
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
~docs/nav
|
||||
(&key items current)
|
||||
(nav
|
||||
:class "flex flex-wrap gap-2 mb-8"
|
||||
(~tw :tokens "flex flex-wrap gap-2 mb-8")
|
||||
(map
|
||||
(fn
|
||||
(item)
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -8,7 +8,7 @@
|
||||
|
||||
(defhandler ref-time (&key)
|
||||
(let ((now (helper "now" "%H:%M:%S")))
|
||||
(span :class "text-stone-800 text-sm"
|
||||
(span (~tw :tokens "text-stone-800 text-sm")
|
||||
"Server time: " (strong now))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
(defhandler ref-greet (&key)
|
||||
(let ((name (or (form-data "name") "stranger")))
|
||||
(span :class "text-stone-800 text-sm"
|
||||
(span (~tw :tokens "text-stone-800 text-sm")
|
||||
"Hello, " (strong name) "!")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -26,7 +26,7 @@
|
||||
|
||||
(defhandler ref-status (&key)
|
||||
(let ((status (or (form-data "status") "unknown")))
|
||||
(span :class "text-stone-700 text-sm"
|
||||
(span (~tw :tokens "text-stone-700 text-sm")
|
||||
"Status: " (strong status) " — updated via PUT")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -51,8 +51,8 @@
|
||||
(defhandler ref-trigger-search (&key)
|
||||
(let ((q (helper "request-arg" "q" "")))
|
||||
(if (empty? q)
|
||||
(span :class "text-stone-400 text-sm" "Start typing to trigger a search.")
|
||||
(span :class "text-stone-800 text-sm"
|
||||
(span (~tw :tokens "text-stone-400 text-sm") "Start typing to trigger a search.")
|
||||
(span (~tw :tokens "text-stone-800 text-sm")
|
||||
"Results for: " (strong q)))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -61,7 +61,7 @@
|
||||
|
||||
(defhandler ref-swap-item (&key)
|
||||
(let ((now (helper "now" "%H:%M:%S")))
|
||||
(div :class "text-sm text-violet-700"
|
||||
(div (~tw :tokens "text-sm text-violet-700")
|
||||
"New item (" now ")")))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -71,10 +71,10 @@
|
||||
(defhandler ref-oob (&key)
|
||||
(let ((now (helper "now" "%H:%M:%S")))
|
||||
(<>
|
||||
(span :class "text-emerald-700 text-sm"
|
||||
(span (~tw :tokens "text-emerald-700 text-sm")
|
||||
"Main updated at " now)
|
||||
(div :id "ref-oob-side" :sx-swap-oob "innerHTML"
|
||||
(span :class "text-violet-700 text-sm"
|
||||
(span (~tw :tokens "text-violet-700 text-sm")
|
||||
"OOB updated at " now)))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -87,7 +87,7 @@
|
||||
(div :id "the-header"
|
||||
(h3 "Page header — not selected"))
|
||||
(div :id "the-content"
|
||||
(span :class "text-emerald-700 text-sm"
|
||||
(span (~tw :tokens "text-emerald-700 text-sm")
|
||||
"This fragment was selected from a larger response. Time: " now))
|
||||
(div :id "the-footer"
|
||||
(p "Page footer — not selected")))))
|
||||
@@ -99,7 +99,7 @@
|
||||
(defhandler ref-slow-echo (&key)
|
||||
(sleep 800)
|
||||
(let ((q (helper "request-arg" "q" "")))
|
||||
(span :class "text-stone-800 text-sm"
|
||||
(span (~tw :tokens "text-stone-800 text-sm")
|
||||
"Echo: " (strong q))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -108,7 +108,7 @@
|
||||
|
||||
(defhandler ref-upload-name (&key)
|
||||
(let ((name (or (file-name "file") "(no file)")))
|
||||
(span :class "text-stone-800 text-sm"
|
||||
(span (~tw :tokens "text-stone-800 text-sm")
|
||||
"Received: " (strong name))))
|
||||
|
||||
;; ---------------------------------------------------------------------------
|
||||
@@ -118,8 +118,8 @@
|
||||
(defhandler ref-echo-headers (&key)
|
||||
(let ((headers (helper "request-headers" :prefix "X-")))
|
||||
(if (empty? headers)
|
||||
(span :class "text-stone-400 text-sm" "No custom headers received.")
|
||||
(ul :class "text-sm text-stone-700 space-y-1"
|
||||
(span (~tw :tokens "text-stone-400 text-sm") "No custom headers received.")
|
||||
(ul (~tw :tokens "text-sm text-stone-700 space-y-1")
|
||||
(map (fn (h)
|
||||
(li (strong (first h)) ": " (last h)))
|
||||
headers)))))
|
||||
@@ -131,8 +131,8 @@
|
||||
(defhandler ref-echo-vals (&key)
|
||||
(let ((vals (helper "request-args")))
|
||||
(if (empty? vals)
|
||||
(span :class "text-stone-400 text-sm" "No values received.")
|
||||
(ul :class "text-sm text-stone-700 space-y-1"
|
||||
(span (~tw :tokens "text-stone-400 text-sm") "No values received.")
|
||||
(ul (~tw :tokens "text-sm text-stone-700 space-y-1")
|
||||
(map (fn (v)
|
||||
(li (strong (first v)) ": " (last v)))
|
||||
vals)))))
|
||||
@@ -145,5 +145,5 @@
|
||||
(let ((n (inc-counter "ref-flaky")))
|
||||
(if (!= (mod n 3) 0)
|
||||
(error 503)
|
||||
(span :class "text-emerald-700 text-sm"
|
||||
(span (~tw :tokens "text-emerald-700 text-sm")
|
||||
"Success on attempt " n "!"))))
|
||||
|
||||
@@ -2,33 +2,33 @@
|
||||
|
||||
|
||||
(defcomp ~home/hero (&key &rest children)
|
||||
(div :class "max-w-4xl mx-auto px-6 py-16 text-center"
|
||||
(h1 :class "text-5xl font-bold text-stone-900 mb-4"
|
||||
(span :class "text-violet-600 font-mono" "(<sx>)"))
|
||||
(p :class "text-2xl text-stone-600 mb-4"
|
||||
(div (~tw :tokens "max-w-4xl mx-auto px-6 py-16 text-center")
|
||||
(h1 (~tw :tokens "text-5xl font-bold text-stone-900 mb-4")
|
||||
(span (~tw :tokens "text-violet-600 font-mono") "(<sx>)"))
|
||||
(p (~tw :tokens "text-2xl text-stone-600 mb-4")
|
||||
"The framework-free reactive hypermedium")
|
||||
(p :class "text-sm text-stone-400"
|
||||
(p (~tw :tokens "text-sm text-stone-400")
|
||||
"© Giles Bradshaw 2026")
|
||||
(p :class "text-lg text-stone-500 max-w-2xl mx-auto mb-12"
|
||||
(p (~tw :tokens "text-lg text-stone-500 max-w-2xl mx-auto mb-12")
|
||||
"(sx === code === data === protocol === content === behaviour === layout === style === spec === sx)")
|
||||
(div :class "bg-stone-100 rounded-lg p-6 text-left font-mono text-sm mx-auto max-w-2xl"
|
||||
(pre :class "leading-relaxed whitespace-pre-wrap" children))))
|
||||
(div (~tw :tokens "bg-stone-100 rounded-lg p-6 text-left font-mono text-sm mx-auto max-w-2xl")
|
||||
(pre (~tw :tokens "leading-relaxed whitespace-pre-wrap") children))))
|
||||
|
||||
(defcomp ~home/philosophy ()
|
||||
(div :class "max-w-4xl mx-auto px-6 py-12"
|
||||
(h2 :class "text-3xl font-bold text-stone-900 mb-8" "Design philosophy")
|
||||
(div :class "grid md:grid-cols-2 gap-8"
|
||||
(div :class "space-y-4"
|
||||
(h3 :class "text-xl font-semibold text-violet-700" "From htmx")
|
||||
(ul :class "space-y-2 text-stone-600"
|
||||
(div (~tw :tokens "max-w-4xl mx-auto px-6 py-12")
|
||||
(h2 (~tw :tokens "text-3xl font-bold text-stone-900 mb-8") "Design philosophy")
|
||||
(div (~tw :tokens "grid md:grid-cols-2 gap-8")
|
||||
(div (~tw :tokens "space-y-4")
|
||||
(h3 (~tw :tokens "text-xl font-semibold text-violet-700") "From htmx")
|
||||
(ul (~tw :tokens "space-y-2 text-stone-600")
|
||||
(li "Server-rendered DOM over the wire (no HTML)")
|
||||
(li "Hypermedia attributes on any element (sx-get, sx-post, ...)")
|
||||
(li "Target/swap model for partial page updates")
|
||||
(li "No client-side routing, no virtual DOM")
|
||||
(li "Progressive enhancement — works without JS (mostly)")))
|
||||
(div :class "space-y-4"
|
||||
(h3 :class "text-xl font-semibold text-violet-700" "From React")
|
||||
(ul :class "space-y-2 text-stone-600"
|
||||
(div (~tw :tokens "space-y-4")
|
||||
(h3 (~tw :tokens "text-xl font-semibold text-violet-700") "From React")
|
||||
(ul (~tw :tokens "space-y-2 text-stone-600")
|
||||
(li "Composable components with defcomp")
|
||||
(li "Client-side rendering from s-expression source")
|
||||
(li "Component caching via localStorage + hash invalidation")
|
||||
@@ -36,31 +36,31 @@
|
||||
(li "DOM morphing for smooth history navigation"))))))
|
||||
|
||||
(defcomp ~home/how-it-works ()
|
||||
(div :class "max-w-4xl mx-auto px-6 py-12"
|
||||
(h2 :class "text-3xl font-bold text-stone-900 mb-8" "How it works")
|
||||
(div :class "space-y-6"
|
||||
(div :class "flex items-start gap-4"
|
||||
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "1")
|
||||
(div (~tw :tokens "max-w-4xl mx-auto px-6 py-12")
|
||||
(h2 (~tw :tokens "text-3xl font-bold text-stone-900 mb-8") "How it works")
|
||||
(div (~tw :tokens "space-y-6")
|
||||
(div (~tw :tokens "flex items-start gap-4")
|
||||
(div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "1")
|
||||
(div
|
||||
(h3 :class "font-semibold text-stone-900" "Server renders sx")
|
||||
(p :class "text-stone-600" "Python builds s-expression trees. Components, elements, data — all in one format.")))
|
||||
(div :class "flex items-start gap-4"
|
||||
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "2")
|
||||
(h3 (~tw :tokens "font-semibold text-stone-900") "Server renders sx")
|
||||
(p (~tw :tokens "text-stone-600") "Python builds s-expression trees. Components, elements, data — all in one format.")))
|
||||
(div (~tw :tokens "flex items-start gap-4")
|
||||
(div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "2")
|
||||
(div
|
||||
(h3 :class "font-semibold text-stone-900" "Wire sends text/sx")
|
||||
(p :class "text-stone-600" "Responses are s-expression source code with content type text/sx. Component definitions cached client-side.")))
|
||||
(div :class "flex items-start gap-4"
|
||||
(div :class "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold" "3")
|
||||
(h3 (~tw :tokens "font-semibold text-stone-900") "Wire sends text/sx")
|
||||
(p (~tw :tokens "text-stone-600") "Responses are s-expression source code with content type text/sx. Component definitions cached client-side.")))
|
||||
(div (~tw :tokens "flex items-start gap-4")
|
||||
(div (~tw :tokens "flex-shrink-0 w-8 h-8 rounded-full bg-violet-100 text-violet-700 flex items-center justify-center font-bold") "3")
|
||||
(div
|
||||
(h3 :class "font-semibold text-stone-900" "Client evaluates + renders")
|
||||
(p :class "text-stone-600" "sx.js parses, evaluates, and renders to DOM. Same evaluator runs server-side (Python) and client-side (JS)."))))))
|
||||
(h3 (~tw :tokens "font-semibold text-stone-900") "Client evaluates + renders")
|
||||
(p (~tw :tokens "text-stone-600") "sx.js parses, evaluates, and renders to DOM. Same evaluator runs server-side (Python) and client-side (JS)."))))))
|
||||
|
||||
(defcomp ~home/credits ()
|
||||
(div :class "max-w-4xl mx-auto px-6 py-12 border-t border-stone-200"
|
||||
(p :class "text-stone-500 text-sm"
|
||||
(div (~tw :tokens "max-w-4xl mx-auto px-6 py-12 border-t border-stone-200")
|
||||
(p (~tw :tokens "text-stone-500 text-sm")
|
||||
"sx is heavily inspired by "
|
||||
(a :href "https://htmx.org" :class "text-violet-600 hover:underline" "htmx")
|
||||
(a :href "https://htmx.org" (~tw :tokens "text-violet-600 hover:underline") "htmx")
|
||||
" by Carson Gross. This documentation site is modelled on "
|
||||
(a :href "https://four.htmx.org" :class "text-violet-600 hover:underline" "four.htmx.org")
|
||||
(a :href "https://four.htmx.org" (~tw :tokens "text-violet-600 hover:underline") "four.htmx.org")
|
||||
". htmx showed that hypermedia belongs on the server. "
|
||||
"sx takes that idea and wraps it in parentheses.")))
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user