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

Add Phase 2 P1 features: reactive class/style, refs, portals

Browse Source 
- :class-map dict toggles classes reactively via classList.add/remove
- :style-map dict sets inline styles reactively via el.style[prop]
- ref/ref-get/ref-set! mutable boxes (non-reactive, like useRef)
- :ref attribute sets ref.current to DOM element after rendering
- portal render-dom form renders children into remote target element
- Portal content auto-removed on island disposal via register-in-scope
- Added #portal-root div to page shell template
- Added stop-propagation and dom-focus platform functions
- Demo islands for all three features on the demo page
- Updated status tables: all P0/P1 features marked Done

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
giles
2026-03-08 16:27:55 +00:00
parent 3103d7ff9d
commit 6bda2bafa2
7 changed files with 357 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
shared/static/scripts/sx-browser.js
View File

@@ -14,7 +14,7 @@
// =========================================================================
var NIL = Object.freeze({ _nil: true, toString: function() { return "nil"; } });
var SX_VERSION = "2026-03-08T16:12:12Z";
var SX_VERSION = "2026-03-08T16:24:34Z";
function isNil(x) { return x === NIL || x === null || x === undefined; }
function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -1492,7 +1492,7 @@ return result; }, args);
return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
var attrName = keywordName(arg);
var attrVal = trampoline(evalExpr(nth(args, (get(state, "i") + 1)), env));
(isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy((isSxTruthy(startsWith(attrName, "on-")) && isCallable(attrVal))) ? domListen(el, slice(attrName, 3), attrVal) : (isSxTruthy((isSxTruthy((attrName == "bind")) && isSignal(attrVal))) ? bindInput(el, attrVal) : (isSxTruthy(contains(BOOLEAN_ATTRS, attrName)) ? (isSxTruthy(attrVal) ? domSetAttr(el, attrName, "") : NIL) : (isSxTruthy((attrVal == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(attrVal))))))));
(isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy((isSxTruthy(startsWith(attrName, "on-")) && isCallable(attrVal))) ? domListen(el, slice(attrName, 3), attrVal) : (isSxTruthy((isSxTruthy((attrName == "bind")) && isSignal(attrVal))) ? bindInput(el, attrVal) : (isSxTruthy((attrName == "class-map")) ? reactiveClassMap(el, attrVal) : (isSxTruthy((attrName == "style-map")) ? reactiveStyleMap(el, attrVal) : (isSxTruthy((attrName == "ref")) ? refSet_b(attrVal, el) : (isSxTruthy(contains(BOOLEAN_ATTRS, attrName)) ? (isSxTruthy(attrVal) ? domSetAttr(el, attrName, "") : NIL) : (isSxTruthy((attrVal == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(attrVal)))))))))));
return assoc(state, "skip", true, "i", (get(state, "i") + 1));
})() : ((isSxTruthy(!isSxTruthy(contains(VOID_ELEMENTS, tag))) ? domAppend(el, renderToDom(arg, env, newNs)) : NIL), assoc(state, "i", (get(state, "i") + 1)))));
})(); }, {["i"]: 0, ["skip"]: false}, args);
@@ -1546,7 +1546,7 @@ return result; }, args);
var renderDomUnknownComponent = function(name) { return error((String("Unknown component: ") + String(name))); };
// RENDER_DOM_FORMS
var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each"];
var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each", "portal"];
// render-dom-form?
var isRenderDomForm = function(name) { return contains(RENDER_DOM_FORMS, name); };
@@ -1604,7 +1604,7 @@ return result; }, args);
return domAppend(frag, val);
})(); }, coll);
return frag;
})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "portal")) ? renderDomPortal(args, env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
var f = trampoline(evalExpr(nth(expr, 1), env));
var coll = trampoline(evalExpr(nth(expr, 2), env));
var frag = createFragment();
@@ -1613,7 +1613,7 @@ return result; }, args);
return domAppend(frag, val);
})(); } }
return frag;
})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns)))))))))))); };
})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))))))); };
// render-lambda-dom
var renderLambdaDom = function(f, args, env, ns) { return (function() {
@@ -1755,6 +1755,32 @@ return (isSxTruthy(testFn()) ? (function() {
return domListen(el, (isSxTruthy(isCheckbox) ? "change" : "input"), function(e) { return (isSxTruthy(isCheckbox) ? reset_b(sig, domGetProp(el, "checked")) : reset_b(sig, domGetProp(el, "value"))); });
})(); };
// reactive-class-map
var reactiveClassMap = function(el, classDict) { return effect(function() { return forEach(function(cls) { return (function() {
var val = deref(get(classDict, cls));
return (isSxTruthy(val) ? domAddClass(el, cls) : domRemoveClass(el, cls));
})(); }, keys(classDict)); }); };
// reactive-style-map
var reactiveStyleMap = function(el, styleDict) { return effect(function() { return forEach(function(prop) { return domSetStyle(el, prop, (String(deref(get(styleDict, prop))))); }, keys(styleDict)); }); };
// render-dom-portal
var renderDomPortal = function(args, env, ns) { return (function() {
var selector = trampoline(evalExpr(first(args), env));
var target = domQuery(selector);
return (isSxTruthy(!isSxTruthy(target)) ? (logWarn((String("Portal target not found: ") + String(selector))), createComment((String("portal: ") + String(selector) + String(" (not found)")))) : (function() {
var marker = createComment((String("portal: ") + String(selector)));
var frag = createFragment();
{ var _c = rest(args); for (var _i = 0; _i < _c.length; _i++) { var child = _c[_i]; domAppend(frag, renderToDom(child, env, ns)); } }
(function() {
var portalNodes = domChildNodes(frag);
domAppend(target, frag);
return registerInScope(function() { return forEach(function(n) { return domRemove(n); }, portalNodes); });
})();
return marker;
})());
})(); };
// === Transpiled from engine ===
@@ -3014,6 +3040,15 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
// register-in-scope
var registerInScope = function(disposable) { return (isSxTruthy(_islandScope) ? _islandScope(disposable) : NIL); };
// ref
var ref = function(initial) { return {["current"]: initial}; };
// ref-get
var refGet = function(r) { return get(r, "current"); };
// ref-set!
var refSet_b = function(r, v) { return dictSet(r, "current", v); };
// *store-registry*
var _storeRegistry = {};
@@ -3775,6 +3810,8 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
// --- Events ---
function preventDefault_(e) { if (e && e.preventDefault) e.preventDefault(); }
function stopPropagation_(e) { if (e && e.stopPropagation) e.stopPropagation(); }
function domFocus(el) { if (el && el.focus) el.focus(); }
function elementValue(el) { return el && el.value !== undefined ? el.value : NIL; }
function domAddListener(el, event, fn, opts) {

47
shared/static/scripts/sx-ref.js
View File

@@ -14,7 +14,7 @@
// =========================================================================
var NIL = Object.freeze({ _nil: true, toString: function() { return "nil"; } });
var SX_VERSION = "2026-03-08T16:12:12Z";
var SX_VERSION = "2026-03-08T16:24:34Z";
function isNil(x) { return x === NIL || x === null || x === undefined; }
function isSxTruthy(x) { return x !== false && !isNil(x); }
@@ -1492,7 +1492,7 @@ return result; }, args);
return (isSxTruthy(skip) ? assoc(state, "skip", false, "i", (get(state, "i") + 1)) : (isSxTruthy((isSxTruthy((typeOf(arg) == "keyword")) && ((get(state, "i") + 1) < len(args)))) ? (function() {
var attrName = keywordName(arg);
var attrVal = trampoline(evalExpr(nth(args, (get(state, "i") + 1)), env));
(isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy((isSxTruthy(startsWith(attrName, "on-")) && isCallable(attrVal))) ? domListen(el, slice(attrName, 3), attrVal) : (isSxTruthy((isSxTruthy((attrName == "bind")) && isSignal(attrVal))) ? bindInput(el, attrVal) : (isSxTruthy(contains(BOOLEAN_ATTRS, attrName)) ? (isSxTruthy(attrVal) ? domSetAttr(el, attrName, "") : NIL) : (isSxTruthy((attrVal == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(attrVal))))))));
(isSxTruthy(sxOr(isNil(attrVal), (attrVal == false))) ? NIL : (isSxTruthy((isSxTruthy(startsWith(attrName, "on-")) && isCallable(attrVal))) ? domListen(el, slice(attrName, 3), attrVal) : (isSxTruthy((isSxTruthy((attrName == "bind")) && isSignal(attrVal))) ? bindInput(el, attrVal) : (isSxTruthy((attrName == "class-map")) ? reactiveClassMap(el, attrVal) : (isSxTruthy((attrName == "style-map")) ? reactiveStyleMap(el, attrVal) : (isSxTruthy((attrName == "ref")) ? refSet_b(attrVal, el) : (isSxTruthy(contains(BOOLEAN_ATTRS, attrName)) ? (isSxTruthy(attrVal) ? domSetAttr(el, attrName, "") : NIL) : (isSxTruthy((attrVal == true)) ? domSetAttr(el, attrName, "") : domSetAttr(el, attrName, (String(attrVal)))))))))));
return assoc(state, "skip", true, "i", (get(state, "i") + 1));
})() : ((isSxTruthy(!isSxTruthy(contains(VOID_ELEMENTS, tag))) ? domAppend(el, renderToDom(arg, env, newNs)) : NIL), assoc(state, "i", (get(state, "i") + 1)))));
})(); }, {["i"]: 0, ["skip"]: false}, args);
@@ -1546,7 +1546,7 @@ return result; }, args);
var renderDomUnknownComponent = function(name) { return error((String("Unknown component: ") + String(name))); };
// RENDER_DOM_FORMS
var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each"];
var RENDER_DOM_FORMS = ["if", "when", "cond", "case", "let", "let*", "begin", "do", "define", "defcomp", "defisland", "defmacro", "defstyle", "defhandler", "map", "map-indexed", "filter", "for-each", "portal"];
// render-dom-form?
var isRenderDomForm = function(name) { return contains(RENDER_DOM_FORMS, name); };
@@ -1604,7 +1604,7 @@ return result; }, args);
return domAppend(frag, val);
})(); }, coll);
return frag;
})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
})() : (isSxTruthy((name == "filter")) ? renderToDom(trampoline(evalExpr(expr, env)), env, ns) : (isSxTruthy((name == "portal")) ? renderDomPortal(args, env, ns) : (isSxTruthy((name == "for-each")) ? (function() {
var f = trampoline(evalExpr(nth(expr, 1), env));
var coll = trampoline(evalExpr(nth(expr, 2), env));
var frag = createFragment();
@@ -1613,7 +1613,7 @@ return result; }, args);
return domAppend(frag, val);
})(); } }
return frag;
})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns)))))))))))); };
})() : renderToDom(trampoline(evalExpr(expr, env)), env, ns))))))))))))); };
// render-lambda-dom
var renderLambdaDom = function(f, args, env, ns) { return (function() {
@@ -1755,6 +1755,32 @@ return (isSxTruthy(testFn()) ? (function() {
return domListen(el, (isSxTruthy(isCheckbox) ? "change" : "input"), function(e) { return (isSxTruthy(isCheckbox) ? reset_b(sig, domGetProp(el, "checked")) : reset_b(sig, domGetProp(el, "value"))); });
})(); };
// reactive-class-map
var reactiveClassMap = function(el, classDict) { return effect(function() { return forEach(function(cls) { return (function() {
var val = deref(get(classDict, cls));
return (isSxTruthy(val) ? domAddClass(el, cls) : domRemoveClass(el, cls));
})(); }, keys(classDict)); }); };
// reactive-style-map
var reactiveStyleMap = function(el, styleDict) { return effect(function() { return forEach(function(prop) { return domSetStyle(el, prop, (String(deref(get(styleDict, prop))))); }, keys(styleDict)); }); };
// render-dom-portal
var renderDomPortal = function(args, env, ns) { return (function() {
var selector = trampoline(evalExpr(first(args), env));
var target = domQuery(selector);
return (isSxTruthy(!isSxTruthy(target)) ? (logWarn((String("Portal target not found: ") + String(selector))), createComment((String("portal: ") + String(selector) + String(" (not found)")))) : (function() {
var marker = createComment((String("portal: ") + String(selector)));
var frag = createFragment();
{ var _c = rest(args); for (var _i = 0; _i < _c.length; _i++) { var child = _c[_i]; domAppend(frag, renderToDom(child, env, ns)); } }
(function() {
var portalNodes = domChildNodes(frag);
domAppend(target, frag);
return registerInScope(function() { return forEach(function(n) { return domRemove(n); }, portalNodes); });
})();
return marker;
})());
})(); };
// === Transpiled from engine ===
@@ -3014,6 +3040,15 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
// register-in-scope
var registerInScope = function(disposable) { return (isSxTruthy(_islandScope) ? _islandScope(disposable) : NIL); };
// ref
var ref = function(initial) { return {["current"]: initial}; };
// ref-get
var refGet = function(r) { return get(r, "current"); };
// ref-set!
var refSet_b = function(r, v) { return dictSet(r, "current", v); };
// *store-registry*
var _storeRegistry = {};
@@ -3775,6 +3810,8 @@ return (isSxTruthy((_batchDepth == 0)) ? (function() {
// --- Events ---
function preventDefault_(e) { if (e && e.preventDefault) e.preventDefault(); }
function stopPropagation_(e) { if (e && e.stopPropagation) e.stopPropagation(); }
function domFocus(el) { if (el && el.focus) el.focus(); }
function elementValue(el) { return el && el.value !== undefined ? el.value : NIL; }
function domAddListener(el, event, fn, opts) {

1
shared/sx/helpers.py
View File

@@ -662,6 +662,7 @@ details.group{{overflow:hidden}}details.group>summary{{list-style:none}}details.
<script type="text/sx" data-mount="body">{page_sx}</script>
<script src="{asset_url}/scripts/sx-browser.js?v={sx_js_hash}"></script>
<script src="{asset_url}/scripts/body.js?v={body_js_hash}"></script>
<div id="portal-root"></div>
</body>
</html>"""

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

@@ -185,6 +185,15 @@
;; Two-way input binding: :bind signal
(and (= attr-name "bind") (signal? attr-val))
(bind-input el attr-val)
;; class-map: reactively toggle classes
(= attr-name "class-map")
(reactive-class-map el attr-val)
;; style-map: reactively set inline styles
(= attr-name "style-map")
(reactive-style-map el attr-val)
;; ref: set ref.current to this element
(= attr-name "ref")
(ref-set! attr-val el)
;; Boolean attr
(contains? BOOLEAN_ATTRS attr-name)
(when attr-val (dom-set-attr el attr-name ""))
@@ -306,7 +315,7 @@
(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"))
"map" "map-indexed" "filter" "for-each" "portal"))
(define render-dom-form?
(fn (name)
@@ -423,6 +432,10 @@
(= name "filter")
(render-to-dom (trampoline (eval-expr expr env)) env ns)
;; portal — render children into a remote target element
(= name "portal")
(render-dom-portal args env ns)
;; for-each (render variant)
(= name "for-each")
(let ((f (trampoline (eval-expr (nth expr 1) env)))
@@ -700,6 +713,86 @@
(reset! sig (dom-get-prop el "value"))))))))
;; --------------------------------------------------------------------------
;; reactive-class-map — toggle classes based on signals
;; --------------------------------------------------------------------------
;;
;; Dict values should be signals or booleans. Signals are deref'd reactively.
;;
;; (div :class-map (dict "active" selected? "hidden" hide-computed))
;;
;; Creates a single effect that deref's each value (tracking signal deps)
;; and calls classList.add/remove for each class.
(define reactive-class-map
(fn (el class-dict)
(effect (fn ()
(for-each
(fn (cls)
(let ((val (deref (get class-dict cls))))
(if val
(dom-add-class el cls)
(dom-remove-class el cls))))
(keys class-dict))))))
;; --------------------------------------------------------------------------
;; reactive-style-map — reactively set inline styles via signals
;; --------------------------------------------------------------------------
;;
;; Dict values should be signals or strings. Signals are deref'd reactively.
;;
;; (div :style-map (dict "width" width-sig "opacity" opacity-computed))
;;
;; Creates a single effect that deref's each value and sets the style property.
(define reactive-style-map
(fn (el style-dict)
(effect (fn ()
(for-each
(fn (prop)
(dom-set-style el prop (str (deref (get style-dict prop)))))
(keys style-dict))))))
;; --------------------------------------------------------------------------
;; render-dom-portal — render children into a remote target element
;; --------------------------------------------------------------------------
;;
;; (portal "#modal-root" (div "content"))
;;
;; Renders children into the DOM node matched by the selector, rather than
;; into the current position. Returns a comment marker at the original
;; position. Registers a disposer to clean up portal content on island
;; teardown.
(define render-dom-portal
(fn (args env ns)
(let ((selector (trampoline (eval-expr (first args) env)))
(target (dom-query selector)))
(if (not target)
;; Target not found — render nothing, log warning
(do
(log-warn (str "Portal target not found: " selector))
(create-comment (str "portal: " selector " (not found)")))
(let ((marker (create-comment (str "portal: " selector)))
(frag (create-fragment)))
;; Render children into the fragment
(for-each
(fn (child) (dom-append frag (render-to-dom child env ns)))
(rest args))
;; Track portal nodes for disposal
(let ((portal-nodes (dom-child-nodes frag)))
;; Append into remote target
(dom-append target frag)
;; Register disposer: remove portal content on island teardown
(register-in-scope
(fn ()
(for-each (fn (n) (dom-remove n)) portal-nodes))))
;; Return marker at original position
marker)))))
;; --------------------------------------------------------------------------
;; Platform interface — DOM adapter
;; --------------------------------------------------------------------------
@@ -724,6 +817,20 @@
;; (dom-set-data el key val) → void (store arbitrary data on element)
;; (dom-get-data el key) → any (retrieve data stored on element)
;;
;; Property access (for input binding):
;; (dom-set-prop el name val) → void (set JS property: el[name] = val)
;; (dom-get-prop el name) → any (read JS property: el[name])
;;
;; Class manipulation (for reactive class-map):
;; (dom-add-class el cls) → void (classList.add)
;; (dom-remove-class el cls) → void (classList.remove)
;;
;; Style manipulation (for reactive style-map):
;; (dom-set-style el prop val) → void (el.style[prop] = val)
;;
;; Query (for portals):
;; (dom-query selector) → Element or nil (document.querySelector)
;;
;; Event handling:
;; (dom-listen el name handler) → remove-fn (addEventListener, returns remover)
;; (dom-dispatch el name detail)→ boolean (dispatch CustomEvent, bubbles: true)
@@ -748,7 +855,11 @@
;;
;; From signals.sx:
;; signal, deref, reset!, swap!, computed, effect, batch
;; signal?, with-island-scope
;; signal?, with-island-scope, register-in-scope
;; ref, ref-get, ref-set!
;;
;; Pure primitives used:
;; keys, get, str
;;
;; Iteration:
;; (for-each-indexed fn coll) → call fn(index, item) for each element

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

@@ -444,6 +444,8 @@ class JSEmitter:
"dom-outer-html": "domOuterHtml",
"dom-body-inner-html": "domBodyInnerHtml",
"prevent-default": "preventDefault_",
"stop-propagation": "stopPropagation_",
"dom-focus": "domFocus",
"element-value": "elementValue",
"validate-for-request": "validateForRequest",
"with-transition": "withTransition",
@@ -3461,6 +3463,8 @@ PLATFORM_ORCHESTRATION_JS = """
// --- Events ---
function preventDefault_(e) { if (e && e.preventDefault) e.preventDefault(); }
function stopPropagation_(e) { if (e && e.stopPropagation) e.stopPropagation(); }
function domFocus(el) { if (el && el.focus) el.focus(); }
function elementValue(el) { return el && el.value !== undefined ? el.value : NIL; }
function domAddListener(el, event, fn, opts) {

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

@@ -306,7 +306,28 @@
;; ==========================================================================
;; 12. Named stores — page-level signal containers (L3)
;; 12. Refs — mutable boxes, no reactivity
;; ==========================================================================
;;
;; A ref is a mutable container that does NOT trigger subscriptions when
;; written. Like React's useRef: holds mutable values between renders, and
;; provides imperative DOM element access via :ref attribute.
(define ref
(fn (initial)
(dict "current" initial)))
(define ref-get
(fn (r)
(get r "current")))
(define ref-set!
(fn (r v)
(dict-set! r "current" v)))
;; ==========================================================================
;; 13. Named stores — page-level signal containers (L3)
;; ==========================================================================
;;
;; Stores persist across island creation/destruction. They live at page