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

Remove reactive class/style (CSSX covers it), add error boundaries + resource

Browse Source 
Reactive class/style (:class-map, :style-map) removed — CSSX components
already handle dynamic class/style via defcomp with full SX logic.

Added:
- error-boundary render-dom form: try/catch around children, renders
  fallback fn with (err retry) on failure, disposes partial effects
- resource async signal: wraps promise into signal with loading/data/error
  states, transitions automatically on resolve/reject
- try-catch, error-message, promise-then platform functions
- Updated Phase 2 status tables and demo page numbering

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-08 16:35:19 +00:00
parent 6bda2bafa2
commit a496ee6ae6
6 changed files with 228 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
sx/sx/reactive-islands.sx
View File

@@ -137,10 +137,6 @@
(td :class "px-3 py-2 text-stone-700" "Keyed reconciliation")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx: :key attr, extract-key"))
(tr :class "border-b border-stone-100"
(td :class "px-3 py-2 text-stone-700" "Reactive class/style")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx: :class-map, :style-map"))
(tr :class "border-b border-stone-100"
(td :class "px-3 py-2 text-stone-700" "Refs")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
@@ -300,35 +296,7 @@
(p :class "text-sm text-green-700" "Thanks for agreeing!")))))
;; 7. Reactive class/style — toggle classes and styles from signals
(defisland ~demo-class-map ()
(let ((active (signal false))
(size (signal 100)))
(div :class "rounded border border-violet-200 bg-violet-50 p-4 my-4 space-y-3"
(div :class "flex items-center gap-3"
(button :class "px-3 py-1 rounded bg-violet-600 text-white text-sm font-medium hover:bg-violet-700"
:on-click (fn (e) (swap! active not))
"Toggle Active")
(button :class "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400"
:on-click (fn (e) (swap! size (fn (s) (+ s 20))))
"Grow")
(button :class "px-3 py-1 rounded bg-stone-300 text-stone-700 text-sm hover:bg-stone-400"
:on-click (fn (e) (swap! size (fn (s) (max 40 (- s 20)))))
"Shrink"))
(div :class "flex justify-center"
(div
:class "rounded flex items-center justify-center font-mono text-sm transition-all duration-300"
:class-map (dict
"bg-violet-600" active
"text-white" active
"bg-stone-200" (computed (fn () (not (deref active))))
"text-stone-700" (computed (fn () (not (deref active)))))
:style-map (dict
"width" (computed (fn () (str (deref size) "px")))
"height" (computed (fn () (str (deref size) "px"))))
(if (deref active) "ON" "OFF"))))))
;; 8. Refs — mutable boxes + DOM element access
;; 7. Refs — mutable boxes + DOM element access
(defisland ~demo-refs ()
(let ((input-ref (ref nil))
(count (signal 0)))
@@ -348,7 +316,7 @@
(p :class "text-xs text-stone-400"
"The ref holds a mutable reference to the input element. Clicking the button calls focus() imperatively — no signal needed."))))
;; 9. Portal — render into a remote DOM target
;; 8. Portal — render into a remote DOM target
(defisland ~demo-portal ()
(let ((open? (signal false)))
(div :class "rounded border border-violet-200 bg-violet-50 p-4 my-4"
@@ -416,30 +384,24 @@
(~doc-code :code (highlight "(defisland ~demo-input-binding ()\n (let ((name (signal \"\"))\n (agreed (signal false)))\n (div\n (input :type \"text\" :bind name\n :placeholder \"Type your name...\")\n (span \"Hello, \" (strong (deref name)) \"!\")\n (input :type \"checkbox\" :bind agreed)\n (when (deref agreed)\n (p \"Thanks for agreeing!\")))))" "lisp"))
(p (code ":bind") " detects the element type automatically — text inputs use " (code "value") " + " (code "input") " event, checkboxes use " (code "checked") " + " (code "change") " event. The effect only updates the DOM when the value actually changed, preventing cursor jump."))
(~doc-section :title "7. Reactive Class/Style" :id "demo-class-map"
(p (code ":class-map") " takes a dict of class names to signals. Each class is toggled reactively via " (code "classList.add/remove") ". " (code ":style-map") " takes a dict of style properties to signals. Both use a single effect that auto-tracks all dependencies.")
(~demo-class-map)
(~doc-code :code (highlight "(defisland ~demo-class-map ()\n (let ((active (signal false))\n (size (signal 100)))\n (div\n (button :on-click (fn (e) (swap! active not))\n \"Toggle Active\")\n (button :on-click (fn (e) (swap! size (fn (s) (+ s 20))))\n \"Grow\")\n (div\n :class-map (dict\n \"bg-violet-600\" active\n \"text-white\" active\n \"bg-stone-200\" (computed (fn () (not (deref active)))))\n :style-map (dict\n \"width\" (computed (fn () (str (deref size) \"px\")))\n \"height\" (computed (fn () (str (deref size) \"px\"))))\n (if (deref active) \"ON\" \"OFF\")))))" "lisp"))
(p "Unlike " (code "reactive-attr") " (which replaces the entire attribute string), " (code "class-map") " uses " (code "classList.toggle") " per class — more efficient and doesn't clobber classes set by CSS transitions or third-party scripts."))
(~doc-section :title "8. Refs" :id "demo-refs"
(~doc-section :title "7. Refs" :id "demo-refs"
(p "A " (code "ref") " is a mutable box that does " (em "not") " trigger reactivity. Like React's " (code "useRef") " — holds values between renders and provides imperative DOM access via " (code ":ref") " attribute.")
(~demo-refs)
(~doc-code :code (highlight "(defisland ~demo-refs ()\n (let ((input-ref (ref nil))\n (count (signal 0)))\n (div\n (input :type \"text\" :ref input-ref\n :placeholder \"Focus me with the button...\")\n (button :on-click (fn (e)\n (do\n (dom-focus (ref-get input-ref))\n (swap! count inc)))\n \"Focus Input\")\n (span \"Focused \" (deref count) \" times\"))))" "lisp"))
(p (code ":ref") " on an element sets " (code "ref.current") " to the DOM node after rendering. " (code "ref-get") " and " (code "ref-set!") " are non-reactive — writing to a ref doesn't trigger effects. Use refs for focus management, animations, canvas contexts, and anything requiring imperative DOM access."))
(~doc-section :title "9. Portals" :id "demo-portal"
(~doc-section :title "8. Portals" :id "demo-portal"
(p "A " (code "portal") " renders children into a DOM node " (em "outside") " the island's subtree. Essential for modals, tooltips, and toasts — anything that must escape " (code "overflow:hidden") " or z-index stacking.")
(~demo-portal)
(~doc-code :code (highlight "(defisland ~demo-portal ()\n (let ((open? (signal false)))\n (div\n (button :on-click (fn (e) (swap! open? not))\n (if (deref open?) \"Close Modal\" \"Open Modal\"))\n (portal \"#portal-root\"\n (when (deref open?)\n (div :class \"fixed inset-0 bg-black/50 ...\"\n :on-click (fn (e) (reset! open? false))\n (div :class \"bg-white rounded-lg p-6 ...\"\n :on-click (fn (e) (stop-propagation e))\n (h2 \"Portal Modal\")\n (p \"Rendered outside the island's DOM.\")\n (button :on-click (fn (e) (reset! open? false))\n \"Close\"))))))))" "lisp"))
(p "The portal content lives in " (code "#portal-root") " (typically at the page body level), not inside the island. On island disposal, portal content is automatically removed from its target — the " (code "register-in-scope") " mechanism handles cleanup."))
(~doc-section :title "10. How defisland Works" :id "how-defisland"
(~doc-section :title "9. How defisland Works" :id "how-defisland"
(p (code "defisland") " creates a reactive component. Same calling convention as " (code "defcomp") " — keyword args, rest children — but with a reactive boundary. Inside an island, " (code "deref") " subscribes DOM nodes to signals.")
(~doc-code :code (highlight ";; Definition — same syntax as defcomp\n(defisland ~counter (&key initial)\n (let ((count (signal (or initial 0))))\n (div\n (span (deref count)) ;; reactive text node\n (button :on-click (fn (e) (swap! count inc)) ;; event handler\n \"+\"))))\n\n;; Usage — same as any component\n(~counter :initial 42)\n\n;; Server-side rendering:\n;; <div data-sx-island=\"counter\" data-sx-state='{\"initial\":42}'>\n;; <span>42</span><button>+</button>\n;; </div>\n;;\n;; Client hydrates: signals + effects + event handlers attach" "lisp"))
(p "Each " (code "deref") " call registers the enclosing DOM node as a subscriber. Signal changes update " (em "only") " the subscribed nodes — no virtual DOM, no diffing, no component re-renders."))
(~doc-section :title "11. Test suite" :id "demo-tests"
(~doc-section :title "10. Test suite" :id "demo-tests"
(p "17 tests verify the signal runtime against the spec. All pass in the Python test runner (which uses the hand-written evaluator with native platform primitives).")
(~doc-code :code (highlight ";; Signal basics (6 tests)\n(assert-true (signal? (signal 42)))\n(assert-equal 42 (deref (signal 42)))\n(assert-equal 5 (deref 5)) ;; non-signal passthrough\n\n;; reset! changes value\n(let ((s (signal 0)))\n (reset! s 10)\n (assert-equal 10 (deref s)))\n\n;; reset! does NOT notify when value unchanged (identical? check)\n\n;; Computed (3 tests)\n(let ((a (signal 3)) (b (signal 4))\n (sum (computed (fn () (+ (deref a) (deref b))))))\n (assert-equal 7 (deref sum))\n (reset! a 10)\n (assert-equal 14 (deref sum)))\n\n;; Effects (4 tests) — immediate run, re-run on change, dispose, cleanup\n;; Batch (1 test) — defers notifications, deduplicates subscribers\n;; defisland (3 tests) — creates island, callable, accepts children" "lisp"))
(p :class "mt-2 text-sm text-stone-500" "Run: " (code "python3 shared/sx/tests/run.py signals")))
@@ -695,9 +657,9 @@
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 text-stone-700" "adapter-dom.sx: :bind signal, :key attr"))
(tr :class "border-b border-stone-100"
(td :class "px-3 py-2 text-stone-700" "Class/style + refs + portals")
(td :class "px-3 py-2 text-stone-700" "Refs + portals")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 text-stone-700" ":class-map, :style-map, ref, :ref, portal"))
(td :class "px-3 py-2 text-stone-700" "ref, ref-get, ref-set!, :ref, portal"))
(tr
(td :class "px-3 py-2 text-stone-700" "Phase 2 remaining")
(td :class "px-3 py-2 text-violet-700 font-medium"
@@ -745,11 +707,6 @@
(td :class "px-3 py-2 text-stone-500 text-xs" "key prop")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx"))
(tr :class "border-b border-stone-100"
(td :class "px-3 py-2 text-stone-700" "Reactive class/style")
(td :class "px-3 py-2 text-stone-500 text-xs" "className={...}")
(td :class "px-3 py-2 text-green-700 font-medium" "Done")
(td :class "px-3 py-2 font-mono text-xs text-stone-500" "adapter-dom.sx"))
(tr :class "border-b border-stone-100"
(td :class "px-3 py-2 text-stone-700" "Refs")
(td :class "px-3 py-2 text-stone-500 text-xs" "useRef")
@@ -834,19 +791,6 @@
;; P1 — important
;; -----------------------------------------------------------------------
(~doc-section :title "P1: Reactive Class and Style" :id "reactive-class"
(p "Dynamic CSS classes are the most common form of reactive styling. Currently you can write " (code "(div :class (str \"panel \" (if (deref open?) \"visible\" \"hidden\")))") " and " (code "reactive-attr") " handles it. But this requires string concatenation and full attribute replacement on every change.")
(~doc-subsection :title "Design"
(p "Two new helpers in " (code "adapter-dom.sx") ":")
(~doc-code :code (highlight ";; class-map: conditionally toggle classes\n(div :class-map (dict\n \"active\" (deref selected?)\n \"loading\" (deref loading?)\n \"hidden\" (not (deref visible?))))\n;; Generates: effect that adds/removes each class\n;; based on the truthiness of its signal-derived value\n\n;; style-map: reactive inline styles\n(div :style-map (dict\n \"width\" (str (deref progress) \"%\")\n \"opacity\" (if (deref visible?) \"1\" \"0\")\n \"transform\" (str \"translateX(\" (deref x) \"px)\")))\n;; Generates: effect that sets each style property" "lisp"))
(p "Implementation: during element rendering, detect " (code ":class-map") " / " (code ":style-map") " keywords. For each entry, create a single effect that reads all signal dependencies and updates the element. The effect auto-tracks — only the relevant signals trigger re-evaluation."))
(~doc-subsection :title "Why not just reactive-attr?"
(p (code "reactive-attr") " replaces the entire attribute string. For classes, this means every signal change rewrites " (code "className") " — touching all classes even if only one toggled. " (code "class-map") " uses " (code "classList.toggle") " per class, which is more efficient and doesn't clobber classes set by other code (CSS transitions, third-party scripts).")))
(~doc-section :title "P1: Refs" :id "refs"
(p "A ref is a mutable container that does " (em "not") " trigger reactivity when written. React's " (code "useRef") " is used for two things: holding mutable values between renders, and accessing DOM elements imperatively.")
@@ -925,7 +869,6 @@
(ol :class "space-y-3 text-stone-600 list-decimal list-inside"
(li (strong "Input binding") " (P0) — unlocks forms. Smallest change, biggest impact. One new function in adapter-dom.sx, two platform primitives (" (code "dom-set-prop") ", " (code "dom-get-prop") "). Add to demo page immediately.")
(li (strong "Keyed reconciliation") " (P0) — unlocks efficient dynamic lists. Replace reactive-list's effect body. Add " (code ":key") " extraction. No new primitives needed.")
(li (strong "Reactive class/style") " (P1) — quality of life. Two new attr handlers in adapter-dom.sx. Uses existing " (code "classList") " / " (code "style") " DOM APIs.")
(li (strong "Refs") " (P1) — trivial: three functions in signals.sx + one attr handler. Unlocks canvas, focus management, animation frame patterns.")
(li (strong "Portals") " (P1) — one new render-dom form. Needs disposal integration. Unlocks modals, tooltips, toasts.")
(li (strong "Error boundaries") " (P2) — one new render-dom form with try/catch. Independent of everything else.")