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

Add suspense, resource, and transitions — Phase 2 complete

Browse Source 
- suspense render-dom form: shows fallback while resource loads, swaps
  to body content when resource signal resolves
- resource async signal: wraps promise into signal with loading/data/error
  dict, auto-transitions on resolve/reject via promise-then
- transition: defers signal writes to requestIdleCallback, sets pending
  signal for UI feedback during expensive operations
- Added schedule-idle, promise-then platform functions
- All Phase 2 features now marked Done in status tables

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-08 16:40:13 +00:00
parent a496ee6ae6
commit 7efd1b401b
6 changed files with 211 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

67
shared/sx/ref/adapter-dom.sx
View File

@@ -309,7 +309,8 @@
(define RENDER_DOM_FORMS
(list "if" "when" "cond" "case" "let" "let*" "begin" "do"
"define" "defcomp" "defisland" "defmacro" "defstyle" "defhandler"
"map" "map-indexed" "filter" "for-each" "portal" "error-boundary"))
"map" "map-indexed" "filter" "for-each" "portal"
"error-boundary" "suspense"))
(define render-dom-form?
(fn (name)
@@ -434,6 +435,10 @@
(= name "error-boundary")
(render-dom-error-boundary args env ns)
;; suspense — show fallback while resource is loading
(= name "suspense")
(render-dom-suspense args env ns)
;; for-each (render variant)
(= name "for-each")
(let ((f (trampoline (eval-expr (nth expr 1) env)))
@@ -823,6 +828,66 @@
container))))
;; --------------------------------------------------------------------------
;; render-dom-suspense — show fallback while resource is loading
;; --------------------------------------------------------------------------
;;
;; (suspense fallback-expr body...)
;;
;; Renders fallback-expr initially. When used with a resource signal,
;; an effect watches the resource state and swaps in the body content
;; once loading is complete. If the resource errors, renders the error.
;;
;; The simplest pattern: wrap a resource deref in suspense.
;;
;; (suspense
;; (div "Loading...")
;; (let ((data (get (deref user-resource) "data")))
;; (div (get data "name"))))
(define render-dom-suspense
(fn (args env ns)
(let ((fallback-expr (first args))
(body-exprs (rest args))
(container (dom-create-element "div" nil)))
(dom-set-attr container "data-sx-suspense" "true")
;; Render fallback immediately
(dom-append container (render-to-dom fallback-expr env ns))
;; Try to render body — if it works, replace fallback
;; The body typically derefs a resource signal, which triggers
;; an effect that re-renders when the resource resolves
(let ((body-disposers (list)))
(effect (fn ()
;; Dispose previous body renders
(for-each (fn (d) (d)) body-disposers)
(set! body-disposers (list))
;; Try rendering the body
(try-catch
(fn ()
(let ((frag (create-fragment)))
(with-island-scope
(fn (disposable)
(append! body-disposers disposable)
(register-in-scope disposable))
(fn ()
(for-each
(fn (child)
(dom-append frag (render-to-dom child env ns)))
body-exprs)))
;; Success — replace container content with body
(dom-set-prop container "innerHTML" "")
(dom-append container frag)))
(fn (err)
;; Body threw — keep showing fallback (or show error)
nil))))
;; Register cleanup
(register-in-scope
(fn ()
(for-each (fn (d) (d)) body-disposers)
(set! body-disposers (list)))))
container)))
;; --------------------------------------------------------------------------
;; Platform interface — DOM adapter
;; --------------------------------------------------------------------------

10
shared/sx/ref/bootstrap_js.py
View File

@@ -449,6 +449,7 @@ class JSEmitter:
"dom-focus": "domFocus",
"try-catch": "tryCatch",
"error-message": "errorMessage",
"schedule-idle": "scheduleIdle",
"element-value": "elementValue",
"validate-for-request": "validateForRequest",
"with-transition": "withTransition",
@@ -3031,6 +3032,11 @@ PLATFORM_ORCHESTRATION_JS = """
function promiseResolve(val) { return Promise.resolve(val); }
function promiseThen(p, onResolve, onReject) {
if (!p || !p.then) return p;
return onReject ? p.then(onResolve, onReject) : p.then(onResolve);
}
function promiseCatch(p, fn) { return p && p.catch ? p.catch(fn) : p; }
// --- Abort controllers ---
@@ -3474,6 +3480,10 @@ PLATFORM_ORCHESTRATION_JS = """
function errorMessage(e) {
return e && e.message ? e.message : String(e);
}
function scheduleIdle(fn) {
if (typeof requestIdleCallback !== "undefined") requestIdleCallback(fn);
else setTimeout(fn, 0);
}
function elementValue(el) { return el && el.value !== undefined ? el.value : NIL; }
function domAddListener(el, event, fn, opts) {

26
shared/sx/ref/signals.sx
View File

@@ -438,3 +438,29 @@
(fn (data) (reset! state (dict "loading" false "data" data "error" nil)))
(fn (err) (reset! state (dict "loading" false "data" nil "error" err))))
state)))
;; ==========================================================================
;; 16. Transitions — non-urgent signal updates
;; ==========================================================================
;;
;; Transitions mark updates as non-urgent. The thunk's signal writes are
;; deferred to an idle callback, keeping the UI responsive during expensive
;; computations.
;;
;; (transition pending-signal thunk)
;;
;; Sets pending-signal to true, schedules thunk via requestIdleCallback
;; (or setTimeout 0 as fallback), then sets pending-signal to false when
;; the thunk completes. Signal writes inside the thunk are batched.
;;
;; Platform interface required:
;; (schedule-idle thunk) → void — requestIdleCallback or setTimeout(fn, 0)
(define transition
(fn (pending-sig thunk)
(reset! pending-sig true)
(schedule-idle
(fn ()
(batch thunk)
(reset! pending-sig false)))))