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

Add Examples section to reactive islands page with highlighted source

Browse Source 
Each demo island now has a live rendering and its highlighted SX source
code via (component-source), matching the geography/cek.sx pattern.
14 subsections covering all 15 demo islands.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-31 10:12:45 +00:00
parent d26029fee2
commit 1b13872369
1 changed files with 162 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
sx/sx/reactive-islands/index.sx
View File

@@ -233,6 +233,168 @@
" retrieves, "
(code "clear-stores")
" wipes all on full page navigation."))
(~docs/section
:title "Examples"
:id "examples"
(p
"Each example below shows a live island and its source. Every island hydrates from server-rendered HTML — the reactive behaviour activates on the client.")
(~docs/section
:title "Counter"
:id "demo-counter"
(p "Signals, computed, and " (code "swap!") " in a minimal example.")
(~reactive-islands/index/demo-counter :initial 0)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-counter")
"lisp")))
(~docs/section
:title "Temperature Converter"
:id "demo-temperature"
(p
"Two signals, each derived from the other via "
(code "effect")
".")
(~reactive-islands/index/demo-temperature)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-temperature")
"lisp")))
(~docs/section
:title "Imperative Handlers"
:id "demo-imperative"
(p "Multi-statement " (code "(do ...)") " bodies in event handlers.")
(~reactive-islands/index/demo-imperative)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-imperative")
"lisp")))
(~docs/section
:title "Stopwatch"
:id "demo-stopwatch"
(p
(code "set-interval")
" and "
(code "clear-interval")
" with signal-driven UI.")
(~reactive-islands/index/demo-stopwatch)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-stopwatch")
"lisp")))
(~docs/section
:title "Reactive List"
:id "demo-reactive-list"
(p "Dynamic list with keyed reconciliation — add and remove items.")
(~reactive-islands/index/demo-reactive-list)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-reactive-list")
"lisp")))
(~docs/section
:title "Input Binding"
:id "demo-input-binding"
(p "Two-way binding via " (code ":bind") " attribute.")
(~reactive-islands/index/demo-input-binding)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-input-binding")
"lisp")))
(~docs/section
:title "Dynamic Classes"
:id "demo-dynamic-class"
(p
"Reactive class toggling with "
(code "deref")
" in attribute expressions.")
(~reactive-islands/index/demo-dynamic-class)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-dynamic-class")
"lisp")))
(~docs/section
:title "Portal"
:id "demo-portal"
(p "Render content outside the island's DOM subtree.")
(~reactive-islands/index/demo-portal)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-portal")
"lisp")))
(~docs/section
:title "Error Boundary"
:id "demo-error-boundary"
(p "Catch rendering errors without crashing the page.")
(~reactive-islands/index/demo-error-boundary)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-error-boundary")
"lisp")))
(~docs/section
:title "DOM Refs"
:id "demo-refs"
(p "Access raw DOM elements via " (code ":ref") " signal.")
(~reactive-islands/index/demo-refs)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-refs")
"lisp")))
(~docs/section
:title "Resource"
:id "demo-resource"
(p
"Async data fetching with "
(code "promise-then")
" and loading state.")
(~reactive-islands/index/demo-resource)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-resource")
"lisp")))
(~docs/section
:title "Transition"
:id "demo-transition"
(p
"Debounced search with "
(code "schedule-idle")
" and "
(code "batch")
".")
(~reactive-islands/index/demo-transition)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-transition")
"lisp")))
(~docs/section
:title "Named Stores"
:id "demo-stores"
(p
"Two islands sharing state via "
(code "def-store")
" / "
(code "use-store")
". Change the colour in the writer — the reader updates.")
(~reactive-islands/index/demo-store-writer)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-store-writer")
"lisp"))
(~reactive-islands/index/demo-store-reader)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-store-reader")
"lisp")))
(~docs/section
:title "Event Bridge"
:id "demo-event-bridge"
(p
"Server-rendered content communicating with an island via "
(code "bridge-event")
".")
(~reactive-islands/index/demo-event-bridge)
(~docs/code
:src (highlight
(component-source "~reactive-islands/index/demo-event-bridge")
"lisp"))))
(~docs/section
:title "Design Principles"
:id "principles"