@fluixi/dom 1.0.0-alpha.53

package/dist/lib/dom/server/nodes.js

@@ -0,0 +1,304 @@
+/**
+ * Server node model — a minimal, serialization-oriented stand-in for the DOM
+ * Node/Element API that @fluixi/dom's runtime calls. Under server mode the leaf
+ * factories (createNativeElement/createTextNode/createMarker) return these
+ * instead of real DOM nodes, so insert/spread/Show/For run unchanged and the
+ * result serializes to an HTML string. This is the "universal renderer" seam:
+ * our runtime talks to nodes via methods, so we mock exactly those methods
+ * (no jsdom). See ./serialize.ts for the string emitter.
+ *
+ * Only the surface the runtime actually uses is implemented (measured against
+ * runtime.ts): the linked tree (parentNode/childNodes/*Sibling + append/insert/
+ * remove/replace), attributes, the JSX_PROPERTIES properties (className/value/
+ * checked/selected/innerHTML/textContent/innerText/htmlFor/indeterminate),
+ * style, classList, and no-op event listeners.
+ */
+import { SERVER_NODE } from './host.js';
+export const NODE_ELEMENT = 1;
+export const NODE_TEXT = 3;
+export const NODE_COMMENT = 8;
+// ---------------------------------------------------------------------------
+// Base node — the linked-tree mechanics insert() relies on.
+// ---------------------------------------------------------------------------
+export class ServerNode {
+    // Brand the host.ts guards check for (lets them skip an instanceof on these classes).
+    [SERVER_NODE] = true;
+    parentNode = null;
+    childNodes = [];
+    get firstChild() {
+        return this.childNodes[0] ?? null;
+    }
+    get lastChild() {
+        return this.childNodes[this.childNodes.length - 1] ?? null;
+    }
+    get nextSibling() {
+        const p = this.parentNode;
+        if (!p)
+            return null;
+        const i = p.childNodes.indexOf(this);
+        return i >= 0 ? p.childNodes[i + 1] ?? null : null;
+    }
+    get previousSibling() {
+        const p = this.parentNode;
+        if (!p)
+            return null;
+        const i = p.childNodes.indexOf(this);
+        return i > 0 ? p.childNodes[i - 1] ?? null : null;
+    }
+    get parentElement() {
+        return this.parentNode;
+    }
+    appendChild(child) {
+        if (child.parentNode)
+            child.parentNode.removeChild(child);
+        child.parentNode = this;
+        this.childNodes.push(child);
+        return child;
+    }
+    insertBefore(child, ref) {
+        if (ref == null)
+            return this.appendChild(child);
+        if (child.parentNode)
+            child.parentNode.removeChild(child);
+        const i = this.childNodes.indexOf(ref);
+        child.parentNode = this;
+        if (i < 0)
+            this.childNodes.push(child);
+        else
+            this.childNodes.splice(i, 0, child);
+        return child;
+    }
+    removeChild(child) {
+        const i = this.childNodes.indexOf(child);
+        if (i >= 0)
+            this.childNodes.splice(i, 1);
+        child.parentNode = null;
+        return child;
+    }
+    replaceChild(next, old) {
+        const i = this.childNodes.indexOf(old);
+        if (i >= 0) {
+            if (next.parentNode)
+                next.parentNode.removeChild(next);
+            next.parentNode = this;
+            this.childNodes[i] = next;
+            old.parentNode = null;
+        }
+        return old;
+    }
+    // Event listeners are inert on the server.
+    addEventListener() { }
+    removeEventListener() { }
+}
+// ---------------------------------------------------------------------------
+// Text + Comment
+// ---------------------------------------------------------------------------
+export class ServerText extends ServerNode {
+    nodeType = NODE_TEXT;
+    data;
+    constructor(value) {
+        super();
+        this.data = value;
+    }
+    get nodeValue() {
+        return this.data;
+    }
+    set nodeValue(v) {
+        this.data = v == null ? '' : String(v);
+    }
+    get textContent() {
+        return this.data;
+    }
+    set textContent(v) {
+        this.data = v == null ? '' : String(v);
+    }
+    cloneNode() {
+        return new ServerText(this.data);
+    }
+}
+export class ServerComment extends ServerNode {
+    nodeType = NODE_COMMENT;
+    data;
+    constructor(value) {
+        super();
+        this.data = value;
+    }
+    get nodeValue() {
+        return this.data;
+    }
+    set nodeValue(v) {
+        this.data = v == null ? '' : String(v);
+    }
+    cloneNode() {
+        return new ServerComment(this.data);
+    }
+}
+// ---------------------------------------------------------------------------
+// style + classList helpers (runtime sets element.style.cssText, element.style
+// .camelKey, and element.classList.toggle/add/remove/contains).
+// ---------------------------------------------------------------------------
+export class ServerStyle {
+    // declared keys are stored as own props; cssText holds a raw string blob.
+    cssText = '';
+    setProperty(name, value) {
+        this[name] = value;
+    }
+    removeProperty(name) {
+        delete this[name];
+    }
+}
+class ServerClassList {
+    el;
+    constructor(el) {
+        this.el = el;
+    }
+    list() {
+        const c = this.el.getAttribute('class');
+        return c ? c.split(/\s+/).filter(Boolean) : [];
+    }
+    write(arr) {
+        if (arr.length)
+            this.el.setAttribute('class', arr.join(' '));
+        else
+            this.el.removeAttribute('class');
+    }
+    add(...names) {
+        const arr = this.list();
+        for (const n of names)
+            if (!arr.includes(n))
+                arr.push(n);
+        this.write(arr);
+    }
+    remove(...names) {
+        this.write(this.list().filter((c) => !names.includes(c)));
+    }
+    contains(name) {
+        return this.list().includes(name);
+    }
+    toggle(name, force) {
+        const has = this.contains(name);
+        const on = force === undefined ? !has : force;
+        if (on)
+            this.add(name);
+        else
+            this.remove(name);
+        return on;
+    }
+}
+// ---------------------------------------------------------------------------
+// Element — attributes + the JSX_PROPERTIES properties + style/classList.
+// ---------------------------------------------------------------------------
+export class ServerElement extends ServerNode {
+    nodeType = NODE_ELEMENT;
+    localName;
+    tagName;
+    isSVG;
+    namespaceURI;
+    attributes = new Map();
+    style = new ServerStyle();
+    classList = new ServerClassList(this);
+    /** raw HTML set via innerHTML — emitted verbatim, bypassing childNodes. */
+    rawHTML = null;
+    constructor(tag, isSVG = false) {
+        super();
+        this.localName = tag.toLowerCase();
+        this.tagName = isSVG ? tag : tag.toUpperCase();
+        this.isSVG = isSVG;
+        this.namespaceURI = isSVG ? 'http://www.w3.org/2000/svg' : null;
+    }
+    setAttribute(name, value) {
+        this.attributes.set(name, String(value));
+    }
+    removeAttribute(name) {
+        this.attributes.delete(name);
+    }
+    getAttribute(name) {
+        return this.attributes.has(name) ? this.attributes.get(name) : null;
+    }
+    hasAttribute(name) {
+        return this.attributes.has(name);
+    }
+    get id() {
+        return this.getAttribute('id') ?? '';
+    }
+    set id(v) {
+        if (v == null)
+            this.removeAttribute('id');
+        else
+            this.setAttribute('id', v);
+    }
+    // JSX_PROPERTIES: className/value/checked/selected/innerHTML/innerText/
+    // textContent/indeterminate/htmlFor flow through setProperty (element[k]=v).
+    get className() {
+        return this.getAttribute('class') ?? '';
+    }
+    set className(v) {
+        if (v == null)
+            this.removeAttribute('class');
+        else
+            this.setAttribute('class', v);
+    }
+    get htmlFor() {
+        return this.getAttribute('for') ?? '';
+    }
+    set htmlFor(v) {
+        if (v == null)
+            this.removeAttribute('for');
+        else
+            this.setAttribute('for', v);
+    }
+    set value(v) {
+        if (v == null)
+            this.removeAttribute('value');
+        else
+            this.setAttribute('value', String(v));
+    }
+    set checked(v) {
+        if (v)
+            this.setAttribute('checked', '');
+        else
+            this.removeAttribute('checked');
+    }
+    set selected(v) {
+        if (v)
+            this.setAttribute('selected', '');
+        else
+            this.removeAttribute('selected');
+    }
+    // indeterminate is a live-only DOM property with no HTML serialization.
+    set indeterminate(_v) { }
+    get textContent() {
+        return this.childNodes.map((c) => c.textContent ?? '').join('');
+    }
+    set textContent(v) {
+        for (const c of this.childNodes)
+            c.parentNode = null;
+        this.childNodes = [];
+        this.rawHTML = null;
+        if (v != null && v !== '')
+            this.appendChild(new ServerText(String(v)));
+    }
+    set innerText(v) {
+        this.textContent = v;
+    }
+    set innerHTML(v) {
+        for (const c of this.childNodes)
+            c.parentNode = null;
+        this.childNodes = [];
+        this.rawHTML = v == null ? '' : String(v);
+    }
+    cloneNode(deep = false) {
+        const el = new ServerElement(this.localName, this.isSVG);
+        el.attributes = new Map(this.attributes);
+        el.style.cssText = this.style.cssText;
+        el.rawHTML = this.rawHTML;
+        if (deep)
+            for (const c of this.childNodes)
+                el.appendChild(c.cloneNode(true));
+        return el;
+    }
+}
+// Server-only; serialize.ts uses it. The client-facing guards are in host.ts.
+export function isServerNodeValue(x) {
+    return x instanceof ServerNode;
+}

package/dist/lib/dom/server/nodes.mjs

@@ -0,0 +1 @@
+var a=Symbol.for("fluixi.server-node");var g=1,p=3,N=8,c;c=a;var n=class{constructor(){this[c]=!0;this.parentNode=null;this.childNodes=[]}get firstChild(){return this.childNodes[0]??null}get lastChild(){return this.childNodes[this.childNodes.length-1]??null}get nextSibling(){let t=this.parentNode;if(!t)return null;let e=t.childNodes.indexOf(this);return e>=0?t.childNodes[e+1]??null:null}get previousSibling(){let t=this.parentNode;if(!t)return null;let e=t.childNodes.indexOf(this);return e>0?t.childNodes[e-1]??null:null}get parentElement(){return this.parentNode}appendChild(t){return t.parentNode&&t.parentNode.removeChild(t),t.parentNode=this,this.childNodes.push(t),t}insertBefore(t,e){if(e==null)return this.appendChild(t);t.parentNode&&t.parentNode.removeChild(t);let r=this.childNodes.indexOf(e);return t.parentNode=this,r<0?this.childNodes.push(t):this.childNodes.splice(r,0,t),t}removeChild(t){let e=this.childNodes.indexOf(t);return e>=0&&this.childNodes.splice(e,1),t.parentNode=null,t}replaceChild(t,e){let r=this.childNodes.indexOf(e);return r>=0&&(t.parentNode&&t.parentNode.removeChild(t),t.parentNode=this,this.childNodes[r]=t,e.parentNode=null),e}addEventListener(){}removeEventListener(){}},o=class s extends n{constructor(e){super();this.nodeType=p;this.data=e}get nodeValue(){return this.data}set nodeValue(e){this.data=e==null?"":String(e)}get textContent(){return this.data}set textContent(e){this.data=e==null?"":String(e)}cloneNode(){return new s(this.data)}},u=class s extends n{constructor(e){super();this.nodeType=N;this.data=e}get nodeValue(){return this.data}set nodeValue(e){this.data=e==null?"":String(e)}cloneNode(){return new s(this.data)}},l=class{constructor(){this.cssText=""}setProperty(t,e){this[t]=e}removeProperty(t){delete this[t]}},d=class{constructor(t){this.el=t}list(){let t=this.el.getAttribute("class");return t?t.split(/\s+/).filter(Boolean):[]}write(t){t.length?this.el.setAttribute("class",t.join(" ")):this.el.removeAttribute("class")}add(...t){let e=this.list();for(let r of t)e.includes(r)||e.push(r);this.write(e)}remove(...t){this.write(this.list().filter(e=>!t.includes(e)))}contains(t){return this.list().includes(t)}toggle(t,e){let r=this.contains(t),i=e===void 0?!r:e;return i?this.add(t):this.remove(t),i}},h=class s extends n{constructor(e,r=!1){super();this.nodeType=g;this.attributes=new Map;this.style=new l;this.classList=new d(this);this.rawHTML=null;this.localName=e.toLowerCase(),this.tagName=r?e:e.toUpperCase(),this.isSVG=r,this.namespaceURI=r?"http://www.w3.org/2000/svg":null}setAttribute(e,r){this.attributes.set(e,String(r))}removeAttribute(e){this.attributes.delete(e)}getAttribute(e){return this.attributes.has(e)?this.attributes.get(e):null}hasAttribute(e){return this.attributes.has(e)}get id(){return this.getAttribute("id")??""}set id(e){e==null?this.removeAttribute("id"):this.setAttribute("id",e)}get className(){return this.getAttribute("class")??""}set className(e){e==null?this.removeAttribute("class"):this.setAttribute("class",e)}get htmlFor(){return this.getAttribute("for")??""}set htmlFor(e){e==null?this.removeAttribute("for"):this.setAttribute("for",e)}set value(e){e==null?this.removeAttribute("value"):this.setAttribute("value",String(e))}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set selected(e){e?this.setAttribute("selected",""):this.removeAttribute("selected")}set indeterminate(e){}get textContent(){return this.childNodes.map(e=>e.textContent??"").join("")}set textContent(e){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=null,e!=null&&e!==""&&this.appendChild(new o(String(e)))}set innerText(e){this.textContent=e}set innerHTML(e){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=e==null?"":String(e)}cloneNode(e=!1){let r=new s(this.localName,this.isSVG);if(r.attributes=new Map(this.attributes),r.style.cssText=this.style.cssText,r.rawHTML=this.rawHTML,e)for(let i of this.childNodes)r.appendChild(i.cloneNode(!0));return r}};function m(s){return s instanceof n}export{N as NODE_COMMENT,g as NODE_ELEMENT,p as NODE_TEXT,u as ServerComment,h as ServerElement,n as ServerNode,l as ServerStyle,o as ServerText,m as isServerNodeValue};

package/dist/lib/dom/server/render.cjs

@@ -0,0 +1 @@
+"use strict";var y=Object.defineProperty;var U=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var J=Object.prototype.hasOwnProperty;var B=(n,e)=>{for(var t in e)y(n,t,{get:e[t],enumerable:!0})},G=(n,e,t,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let s of W(e))!J.call(n,s)&&s!==t&&y(n,s,{get:()=>e[s],enumerable:!(r=U(e,s))||r.enumerable});return n};var K=n=>G(y({},"__esModule",{value:!0}),n);var pe={};B(pe,{renderToString:()=>ue,renderToStringAsync:()=>de,serializeResourceData:()=>z,setDataRedactor:()=>le});module.exports=K(pe);var k=require("@fluixi/reactive/signal"),i=require("@fluixi/reactive/signal");var f=typeof document>"u";function c(n){f=n}var _=Symbol.for("fluixi.server-node"),Q=null;function D(n){Q=n}var w=1,R=3,b=8,M;M=_;var d=class{constructor(){this[M]=!0;this.parentNode=null;this.childNodes=[]}get firstChild(){return this.childNodes[0]??null}get lastChild(){return this.childNodes[this.childNodes.length-1]??null}get nextSibling(){let e=this.parentNode;if(!e)return null;let t=e.childNodes.indexOf(this);return t>=0?e.childNodes[t+1]??null:null}get previousSibling(){let e=this.parentNode;if(!e)return null;let t=e.childNodes.indexOf(this);return t>0?e.childNodes[t-1]??null:null}get parentElement(){return this.parentNode}appendChild(e){return e.parentNode&&e.parentNode.removeChild(e),e.parentNode=this,this.childNodes.push(e),e}insertBefore(e,t){if(t==null)return this.appendChild(e);e.parentNode&&e.parentNode.removeChild(e);let r=this.childNodes.indexOf(t);return e.parentNode=this,r<0?this.childNodes.push(e):this.childNodes.splice(r,0,e),e}removeChild(e){let t=this.childNodes.indexOf(e);return t>=0&&this.childNodes.splice(t,1),e.parentNode=null,e}replaceChild(e,t){let r=this.childNodes.indexOf(t);return r>=0&&(e.parentNode&&e.parentNode.removeChild(e),e.parentNode=this,this.childNodes[r]=e,t.parentNode=null),t}addEventListener(){}removeEventListener(){}},p=class n extends d{constructor(t){super();this.nodeType=R;this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t==null?"":String(t)}get textContent(){return this.data}set textContent(t){this.data=t==null?"":String(t)}cloneNode(){return new n(this.data)}},g=class n extends d{constructor(t){super();this.nodeType=b;this.data=t}get nodeValue(){return this.data}set nodeValue(t){this.data=t==null?"":String(t)}cloneNode(){return new n(this.data)}},S=class{constructor(){this.cssText=""}setProperty(e,t){this[e]=t}removeProperty(e){delete this[e]}},T=class{constructor(e){this.el=e}list(){let e=this.el.getAttribute("class");return e?e.split(/\s+/).filter(Boolean):[]}write(e){e.length?this.el.setAttribute("class",e.join(" ")):this.el.removeAttribute("class")}add(...e){let t=this.list();for(let r of e)t.includes(r)||t.push(r);this.write(t)}remove(...e){this.write(this.list().filter(t=>!e.includes(t)))}contains(e){return this.list().includes(e)}toggle(e,t){let r=this.contains(e),s=t===void 0?!r:t;return s?this.add(e):this.remove(e),s}},h=class n extends d{constructor(t,r=!1){super();this.nodeType=w;this.attributes=new Map;this.style=new S;this.classList=new T(this);this.rawHTML=null;this.localName=t.toLowerCase(),this.tagName=r?t:t.toUpperCase(),this.isSVG=r,this.namespaceURI=r?"http://www.w3.org/2000/svg":null}setAttribute(t,r){this.attributes.set(t,String(r))}removeAttribute(t){this.attributes.delete(t)}getAttribute(t){return this.attributes.has(t)?this.attributes.get(t):null}hasAttribute(t){return this.attributes.has(t)}get id(){return this.getAttribute("id")??""}set id(t){t==null?this.removeAttribute("id"):this.setAttribute("id",t)}get className(){return this.getAttribute("class")??""}set className(t){t==null?this.removeAttribute("class"):this.setAttribute("class",t)}get htmlFor(){return this.getAttribute("for")??""}set htmlFor(t){t==null?this.removeAttribute("for"):this.setAttribute("for",t)}set value(t){t==null?this.removeAttribute("value"):this.setAttribute("value",String(t))}set checked(t){t?this.setAttribute("checked",""):this.removeAttribute("checked")}set selected(t){t?this.setAttribute("selected",""):this.removeAttribute("selected")}set indeterminate(t){}get textContent(){return this.childNodes.map(t=>t.textContent??"").join("")}set textContent(t){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=null,t!=null&&t!==""&&this.appendChild(new p(String(t)))}set innerText(t){this.textContent=t}set innerHTML(t){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=t==null?"":String(t)}cloneNode(t=!1){let r=new n(this.localName,this.isSVG);if(r.attributes=new Map(this.attributes),r.style.cssText=this.style.cssText,r.rawHTML=this.rawHTML,t)for(let s of this.childNodes)r.appendChild(s.cloneNode(!0));return r}};var Y=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),L=/&/g,Z=/</g,ee=/>/g,te=/"/g;function E(n){return n.replace(L,"&amp;").replace(Z,"&lt;").replace(ee,"&gt;")}function O(n){return n.replace(L,"&amp;").replace(te,"&quot;")}function ne(n){return n.startsWith("--")?n:n.replace(/[A-Z]/g,e=>"-"+e.toLowerCase())}function re(n){if(!n)return"";let e=[];n.cssText&&e.push(n.cssText.trim().replace(/;\s*$/,""));for(let t of Object.keys(n)){if(t==="cssText")continue;let r=n[t];r==null||r===""||e.push(`${ne(t)}: ${r}`)}return e.join("; ")}function se(n){let e="",t=re(n.style);for(let[r,s]of n.attributes)r==="style"&&t||(e+=` ${r}="${O(s)}"`);if(t){let r=n.attributes.get("style"),s=r?`${r.replace(/;\s*$/,"")}; ${t}`:t;e+=` style="${O(s)}"`}return e}function a(n){if(n==null||n===!1||n===!0)return"";if(typeof n=="string")return E(n);if(typeof n=="number")return E(String(n));if(typeof n=="function")return a(n());if(Array.isArray(n))return n.map(a).join("");switch(n.nodeType){case R:return E(n.data??"");case b:return`<!--${n.data??""}-->`;case w:{let e=n.localName,t=`<${e}${se(n)}>`;if(Y.has(e))return t;let r=n.rawHTML!=null?n.rawHTML:(n.childNodes??[]).map(a).join("");return`${t}${r}</${e}>`}}return Array.isArray(n.childNodes)?n.childNodes.map(a).join(""):""}var $="__FX_DATA__";function I(n){return n.replace(/[<>&\u2028\u2029]/g,e=>"\\u"+e.charCodeAt(0).toString(16).padStart(4,"0"))}var m,ie={getStore:()=>m,run(n,e){let t=m;m=n;try{return e()}finally{m=t}}},F=ie;function C(n={}){n.locals||(n.locals=n.request?oe(n.request):{});let e=0,t=0,r=null,s=new Map,o=new Map;return{event:n,routeData:new Map,matchedRoute:new Map,nextId:()=>`s${e++}`,nextResourceId:()=>{if(r===null)return`r${t++}`;let u=s.get(r)??0;return s.set(r,u+1),`${r}:r${u}`},nextIslandNamespace:u=>{let l=o.get(u)??0;return o.set(u,l+1),`${u}#${l}`},withResourceScope(u,l){let v=r;r=u;try{return l()}finally{r=v}},pending:new Set,data:new Map}}function A(n,e){return F.run(n,e)}function N(){return F.getStore()}var j=new WeakMap;function oe(n){let e=j.get(n);return e||(e={},j.set(n,e)),e}var H=!1;function X(){H||(H=!0,D({createElement:(n,e)=>new h(n,e),createText:n=>new p(n),createComment:n=>new g(n)}))}function ue(n,e={}){let t=f;X(),c(!0);let r=C(e.event);try{return A(r,()=>(0,k.createRoot)(s=>{try{let o=typeof n=="function"?n():n;return a(o)}finally{s()}}))}finally{c(t)}}var V=!1;function ae(){V||(V=!0,(0,i.setResourceTracker)(n=>{N()?.pending.add(n)}),(0,i.setResourceIdSource)(()=>N()?.nextResourceId()??""),(0,i.setResourceDataSink)((n,e)=>{n&&N()?.data.set(n,e)}))}var q=null;function le(n){q=n}function z(n){if(n.data.size===0)return"";let e={};for(let[r,s]of n.data){let o=s;if(q)try{o=q(s,r)}catch{continue}o!==void 0&&(e[r]=o)}if(Object.keys(e).length===0)return"";let t=I(JSON.stringify(e));return`<script type="application/json" id="${$}">${t}<\/script>`}var ce=50;async function de(n,e={}){let t=f;X(),c(!0),ae();let r=C(e.event);try{return await A(r,async()=>{e.preload&&await e.preload(e.event);let s,o=null,u=()=>{};(0,k.createRoot)(x=>{u=x,o=(0,i.getOwner)(),s=typeof n=="function"?n():n});let l=()=>{try{(0,i.runWithOwner)(o,()=>a(s))}catch{}};l();let v=0;for(;r.pending.size>0&&v++<ce;){let x=Array.from(r.pending);r.pending.clear(),await Promise.allSettled(x),await(0,i.flush)(),l()}let P=(0,i.runWithOwner)(o,()=>a(s))+z(r);return u(),P})}finally{c(t)}}

package/dist/lib/dom/server/render.d.ts

@@ -0,0 +1,45 @@
+import { type RequestContext, type RequestEvent } from './request-context.js';
+export interface RenderOptions {
+    /** request being rendered — exposed to the app via getRequestEvent() */
+    event?: RequestEvent;
+    /**
+     * Runs ONCE inside the request context, before the app renders. Use it to resolve
+     * request-scoped state the render depends on (region, locale, session) and seed it
+     * into the request data so the client hydrates from the same value. @fluixi/server
+     * passes `preloadServerState` here to drive `createIsomorphicState`.
+     */
+    preload?: (event?: RequestEvent) => void | Promise<void>;
+}
+export declare function renderToString(app: () => any, options?: RenderOptions): string;
+/**
+ * Optional redactor: transform (or drop) each resource value before it's serialized
+ * into `__FX_DATA__`. Resource data is embedded in the page HTML and visible to anyone,
+ * so use this to strip server-only fields (tokens, password hashes, internal ids).
+ * Return the value to serialize, or `undefined` to omit the entry entirely (the client
+ * then refetches that resource instead of seeding it). Server-only, app-wide.
+ *
+ *   setDataRedactor((value) => {
+ *     if (value && typeof value === 'object' && 'passwordHash' in value) {
+ *       const { passwordHash, ...safe } = value as any;
+ *       return safe;
+ *     }
+ *     return value;
+ *   });
+ */
+type DataRedactor = (value: unknown, id: string) => unknown;
+export declare function setDataRedactor(fn: DataRedactor | null): void;
+/**
+ * Serialize the collected resource data into an inline script the client reads
+ * before hydrating (seeds resources so they don't refetch). Empty when no data.
+ * Each value passes through the redactor (if set) first.
+ */
+export declare function serializeResourceData(ctx: RequestContext): string;
+/** Ref-count of in-flight async renders, to scope eager stale-effect scheduling. */
+/**
+ * Async SSR: render, then await every resource fetch the render kicked off,
+ * letting their settle() re-run the render effects in place, until the tree is
+ * stable; then serialize. Resolves Suspense boundaries to their content.
+ */
+export declare function renderToStringAsync(app: () => any, options?: RenderOptions): Promise<string>;
+export {};
+//# sourceMappingURL=render.d.ts.map

package/dist/lib/dom/server/render.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"render.d.ts","sourceRoot":"","sources":["../../../../src/lib/dom/server/render.ts"],"names":[],"mappings":"AAiCA,OAAO,EAIL,KAAK,cAAc,EACnB,KAAK,YAAY,EAClB,MAAM,sBAAsB,CAAC;AAE9B,MAAM,WAAW,aAAa;IAC5B,wEAAwE;IACxE,KAAK,CAAC,EAAE,YAAY,CAAC;IACrB;;;;;OAKG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,YAAY,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;CAC1D;AAED,wBAAgB,cAAc,CAAC,GAAG,EAAE,MAAM,GAAG,EAAE,OAAO,GAAE,aAAkB,GAAG,MAAM,CAmBlF;AAqBD;;;;;;;;;;;;;;GAcG;AACH,KAAK,YAAY,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE,MAAM,KAAK,OAAO,CAAC;AAE5D,wBAAgB,eAAe,CAAC,EAAE,EAAE,YAAY,GAAG,IAAI,GAAG,IAAI,CAE7D;AAED;;;;GAIG;AACH,wBAAgB,qBAAqB,CAAC,GAAG,EAAE,cAAc,GAAG,MAAM,CAsBjE;AAKD,oFAAoF;AAEpF;;;;GAIG;AACH,wBAAsB,mBAAmB,CACvC,GAAG,EAAE,MAAM,GAAG,EACd,OAAO,GAAE,aAAkB,GAC1B,OAAO,CAAC,MAAM,CAAC,CAyDjB"}

package/dist/lib/dom/server/render.js

@@ -0,0 +1,174 @@
+/**
+ * Server rendering — run an imperative app() under server mode and serialize the
+ * resulting node tree to HTML. `renderToString` is synchronous render-once (for
+ * loader-free apps); `renderToStringAsync` awaits in-flight resources/Suspense
+ * before serializing. Both wrap the render in createRoot so effects/owner are
+ * disposed afterwards.
+ */
+import { createRoot } from '@fluixi/reactive/signal';
+import { setResourceTracker, setResourceIdSource, setResourceDataSink, getOwner, runWithOwner, flush, } from '@fluixi/reactive/signal';
+import { isServer, setServerMode, registerServerNodes } from './host.js';
+import { ServerElement, ServerText, ServerComment } from './nodes.js';
+import { serializeNode } from './serialize.js';
+// Register the node classes with the runtime seam on first render. Done from here
+// (not the client barrel) so the classes only load on the server.
+let _nodesRegistered = false;
+function ensureServerNodes() {
+    if (_nodesRegistered)
+        return;
+    _nodesRegistered = true;
+    registerServerNodes({
+        createElement: (tag, isSVG) => new ServerElement(tag, isSVG),
+        createText: (value) => new ServerText(value),
+        createComment: (value) => new ServerComment(value),
+    });
+}
+import { escapeFxJson, FX_DATA_ID } from './fx-data.js';
+import { createRequestContext, runWithRequestContext, getRequestContext, } from './request-context.js';
+export function renderToString(app, options = {}) {
+    const prev = isServer;
+    ensureServerNodes();
+    setServerMode(true);
+    const ctx = createRequestContext(options.event);
+    try {
+        return runWithRequestContext(ctx, () => createRoot((dispose) => {
+            try {
+                const tree = typeof app === 'function' ? app() : app;
+                return serializeNode(tree);
+            }
+            finally {
+                dispose();
+            }
+        }));
+    }
+    finally {
+        setServerMode(prev);
+    }
+}
+// Install the SSR resource hooks once (never unset). They route to the *current*
+// request context — so concurrent async renders stay isolated (with an
+// AsyncLocalStorage store injected) instead of a per-call setter clobbering a
+// sibling render's sink.
+let _hooksInstalled = false;
+function ensureResourceHooks() {
+    if (_hooksInstalled)
+        return;
+    _hooksInstalled = true;
+    setResourceTracker((p) => {
+        getRequestContext()?.pending.add(p);
+    });
+    // Stable id (creation order) the client matches during hydration.
+    setResourceIdSource(() => getRequestContext()?.nextResourceId() ?? '');
+    // Resolved values are collected for serialization into the page.
+    setResourceDataSink((id, value) => {
+        if (id)
+            getRequestContext()?.data.set(id, value);
+    });
+}
+let _redactor = null;
+export function setDataRedactor(fn) {
+    _redactor = fn;
+}
+/**
+ * Serialize the collected resource data into an inline script the client reads
+ * before hydrating (seeds resources so they don't refetch). Empty when no data.
+ * Each value passes through the redactor (if set) first.
+ */
+export function serializeResourceData(ctx) {
+    if (ctx.data.size === 0)
+        return '';
+    const obj = {};
+    for (const [k, v] of ctx.data) {
+        let out = v;
+        if (_redactor) {
+            // A throwing redactor must not crash the render or leak — omit on error.
+            try {
+                out = _redactor(v, k);
+            }
+            catch {
+                continue;
+            }
+        }
+        if (out === undefined)
+            continue; // redacted → omit (client refetches)
+        obj[k] = out;
+    }
+    if (Object.keys(obj).length === 0)
+        return '';
+    // Non-executable JSON block (CSP-friendly; never runs as JS), escaped with the standard
+    // SSR-JSON set so no value can break out of the <script>. The client reads it via
+    // getServerData() → JSON.parse(textContent).
+    const json = escapeFxJson(JSON.stringify(obj));
+    return `<script type="application/json" id="${FX_DATA_ID}">${json}</script>`;
+}
+/** Bound on resolve→refetch waterfalls so a buggy loader can't spin forever. */
+const MAX_ASYNC_ROUNDS = 50;
+/** Ref-count of in-flight async renders, to scope eager stale-effect scheduling. */
+/**
+ * Async SSR: render, then await every resource fetch the render kicked off,
+ * letting their settle() re-run the render effects in place, until the tree is
+ * stable; then serialize. Resolves Suspense boundaries to their content.
+ */
+export async function renderToStringAsync(app, options = {}) {
+    const prev = isServer;
+    ensureServerNodes();
+    setServerMode(true);
+    ensureResourceHooks();
+    const ctx = createRequestContext(options.event);
+    try {
+        return await runWithRequestContext(ctx, async () => {
+            // Resolve request-scoped state (region/locale/session) BEFORE the app renders,
+            // inside the request context so it can read the event and write into ctx.data
+            // for client transfer. Runs once per request. Guarded so the no-preload path
+            // keeps its original synchronous flow into createRoot (an extra `await undefined`
+            // tick here reorders the lazy/Suspense drain and breaks hydration).
+            if (options.preload)
+                await options.preload(options.event);
+            let tree;
+            let rootOwner = null;
+            let dispose = () => { };
+            createRoot((d) => {
+                dispose = d;
+                rootOwner = getOwner();
+                tree = typeof app === 'function' ? app() : app;
+            });
+            // Serialize INSIDE the render root's owner. The probe/serialize below force
+            // lazy subtrees to render, which can CREATE resources; running with the root as
+            // owner makes those resources owned by the root, so dispose() cancels them. If
+            // we serialized with Owner=null (the default after createRoot returns), a
+            // resource created during serialize would be unowned → never cancelled → it
+            // settles AFTER the response is serialized and the root disposed, re-running an
+            // effect on a torn-down/detached tree (the storefront's "page shows, then errors
+            // ~2-3s later" crash). Wrapped because a suspended read may throw its promise.
+            const probe = () => {
+                try {
+                    runWithOwner(rootOwner, () => serializeNode(tree));
+                }
+                catch { /* suspended read — resource self-registered */ }
+            };
+            // Force the (lazily-built) component tree to evaluate so every resource/lazy
+            // load is created and self-registers in ctx.pending BEFORE we drain. A tree
+            // behind deferred memos (e.g. a router <Outlet/>) renders NOTHING until serialize.
+            probe();
+            let rounds = 0;
+            while (ctx.pending.size > 0 && rounds++ < MAX_ASYNC_ROUNDS) {
+                const batch = Array.from(ctx.pending);
+                ctx.pending.clear();
+                await Promise.allSettled(batch);
+                // resource settle() queues the dependent render effects — run them so
+                // the tree reflects resolved data (and any waterfall fetch registers).
+                await flush();
+                // Re-probe: a freshly-resolved lazy/route reveals its OWN resources only
+                // when its subtree is evaluated — force that so they register for the next round.
+                probe();
+            }
+            // Serialize the resolved resource data so the client seeds it (no refetch).
+            const html = runWithOwner(rootOwner, () => serializeNode(tree)) + serializeResourceData(ctx);
+            dispose();
+            return html;
+        });
+    }
+    finally {
+        setServerMode(prev);
+    }
+}

package/dist/lib/dom/server/render.mjs

@@ -0,0 +1 @@
+import{createRoot as H}from"@fluixi/reactive/signal";import{setResourceTracker as Z,setResourceIdSource as ee,setResourceDataSink as te,getOwner as ne,runWithOwner as I,flush as re}from"@fluixi/reactive/signal";var p=typeof document>"u";function l(n){p=n}var A=Symbol.for("fluixi.server-node"),z=null;function q(n){z=n}var S=1,T=3,w=8,k;k=A;var c=class{constructor(){this[k]=!0;this.parentNode=null;this.childNodes=[]}get firstChild(){return this.childNodes[0]??null}get lastChild(){return this.childNodes[this.childNodes.length-1]??null}get nextSibling(){let t=this.parentNode;if(!t)return null;let e=t.childNodes.indexOf(this);return e>=0?t.childNodes[e+1]??null:null}get previousSibling(){let t=this.parentNode;if(!t)return null;let e=t.childNodes.indexOf(this);return e>0?t.childNodes[e-1]??null:null}get parentElement(){return this.parentNode}appendChild(t){return t.parentNode&&t.parentNode.removeChild(t),t.parentNode=this,this.childNodes.push(t),t}insertBefore(t,e){if(e==null)return this.appendChild(t);t.parentNode&&t.parentNode.removeChild(t);let r=this.childNodes.indexOf(e);return t.parentNode=this,r<0?this.childNodes.push(t):this.childNodes.splice(r,0,t),t}removeChild(t){let e=this.childNodes.indexOf(t);return e>=0&&this.childNodes.splice(e,1),t.parentNode=null,t}replaceChild(t,e){let r=this.childNodes.indexOf(e);return r>=0&&(t.parentNode&&t.parentNode.removeChild(t),t.parentNode=this,this.childNodes[r]=t,e.parentNode=null),e}addEventListener(){}removeEventListener(){}},d=class n extends c{constructor(e){super();this.nodeType=T;this.data=e}get nodeValue(){return this.data}set nodeValue(e){this.data=e==null?"":String(e)}get textContent(){return this.data}set textContent(e){this.data=e==null?"":String(e)}cloneNode(){return new n(this.data)}},f=class n extends c{constructor(e){super();this.nodeType=w;this.data=e}get nodeValue(){return this.data}set nodeValue(e){this.data=e==null?"":String(e)}cloneNode(){return new n(this.data)}},x=class{constructor(){this.cssText=""}setProperty(t,e){this[t]=e}removeProperty(t){delete this[t]}},y=class{constructor(t){this.el=t}list(){let t=this.el.getAttribute("class");return t?t.split(/\s+/).filter(Boolean):[]}write(t){t.length?this.el.setAttribute("class",t.join(" ")):this.el.removeAttribute("class")}add(...t){let e=this.list();for(let r of t)e.includes(r)||e.push(r);this.write(e)}remove(...t){this.write(this.list().filter(e=>!t.includes(e)))}contains(t){return this.list().includes(t)}toggle(t,e){let r=this.contains(t),s=e===void 0?!r:e;return s?this.add(t):this.remove(t),s}},g=class n extends c{constructor(e,r=!1){super();this.nodeType=S;this.attributes=new Map;this.style=new x;this.classList=new y(this);this.rawHTML=null;this.localName=e.toLowerCase(),this.tagName=r?e:e.toUpperCase(),this.isSVG=r,this.namespaceURI=r?"http://www.w3.org/2000/svg":null}setAttribute(e,r){this.attributes.set(e,String(r))}removeAttribute(e){this.attributes.delete(e)}getAttribute(e){return this.attributes.has(e)?this.attributes.get(e):null}hasAttribute(e){return this.attributes.has(e)}get id(){return this.getAttribute("id")??""}set id(e){e==null?this.removeAttribute("id"):this.setAttribute("id",e)}get className(){return this.getAttribute("class")??""}set className(e){e==null?this.removeAttribute("class"):this.setAttribute("class",e)}get htmlFor(){return this.getAttribute("for")??""}set htmlFor(e){e==null?this.removeAttribute("for"):this.setAttribute("for",e)}set value(e){e==null?this.removeAttribute("value"):this.setAttribute("value",String(e))}set checked(e){e?this.setAttribute("checked",""):this.removeAttribute("checked")}set selected(e){e?this.setAttribute("selected",""):this.removeAttribute("selected")}set indeterminate(e){}get textContent(){return this.childNodes.map(e=>e.textContent??"").join("")}set textContent(e){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=null,e!=null&&e!==""&&this.appendChild(new d(String(e)))}set innerText(e){this.textContent=e}set innerHTML(e){for(let r of this.childNodes)r.parentNode=null;this.childNodes=[],this.rawHTML=e==null?"":String(e)}cloneNode(e=!1){let r=new n(this.localName,this.isSVG);if(r.attributes=new Map(this.attributes),r.style.cssText=this.style.cssText,r.rawHTML=this.rawHTML,e)for(let s of this.childNodes)r.appendChild(s.cloneNode(!0));return r}};var P=new Set(["area","base","br","col","embed","hr","img","input","link","meta","param","source","track","wbr"]),D=/&/g,U=/</g,W=/>/g,J=/"/g;function R(n){return n.replace(D,"&amp;").replace(U,"&lt;").replace(W,"&gt;")}function _(n){return n.replace(D,"&amp;").replace(J,"&quot;")}function B(n){return n.startsWith("--")?n:n.replace(/[A-Z]/g,t=>"-"+t.toLowerCase())}function G(n){if(!n)return"";let t=[];n.cssText&&t.push(n.cssText.trim().replace(/;\s*$/,""));for(let e of Object.keys(n)){if(e==="cssText")continue;let r=n[e];r==null||r===""||t.push(`${B(e)}: ${r}`)}return t.join("; ")}function K(n){let t="",e=G(n.style);for(let[r,s]of n.attributes)r==="style"&&e||(t+=` ${r}="${_(s)}"`);if(e){let r=n.attributes.get("style"),s=r?`${r.replace(/;\s*$/,"")}; ${e}`:e;t+=` style="${_(s)}"`}return t}function u(n){if(n==null||n===!1||n===!0)return"";if(typeof n=="string")return R(n);if(typeof n=="number")return R(String(n));if(typeof n=="function")return u(n());if(Array.isArray(n))return n.map(u).join("");switch(n.nodeType){case T:return R(n.data??"");case w:return`<!--${n.data??""}-->`;case S:{let t=n.localName,e=`<${t}${K(n)}>`;if(P.has(t))return e;let r=n.rawHTML!=null?n.rawHTML:(n.childNodes??[]).map(u).join("");return`${e}${r}</${t}>`}}return Array.isArray(n.childNodes)?n.childNodes.map(u).join(""):""}var M="__FX_DATA__";function O(n){return n.replace(/[<>&\u2028\u2029]/g,t=>"\\u"+t.charCodeAt(0).toString(16).padStart(4,"0"))}var h,Q={getStore:()=>h,run(n,t){let e=h;h=n;try{return t()}finally{h=e}}},$=Q;function b(n={}){n.locals||(n.locals=n.request?Y(n.request):{});let t=0,e=0,r=null,s=new Map,i=new Map;return{event:n,routeData:new Map,matchedRoute:new Map,nextId:()=>`s${t++}`,nextResourceId:()=>{if(r===null)return`r${e++}`;let o=s.get(r)??0;return s.set(r,o+1),`${r}:r${o}`},nextIslandNamespace:o=>{let a=i.get(o)??0;return i.set(o,a+1),`${o}#${a}`},withResourceScope(o,a){let N=r;r=o;try{return a()}finally{r=N}},pending:new Set,data:new Map}}function E(n,t){return $.run(n,t)}function m(){return $.getStore()}var L=new WeakMap;function Y(n){let t=L.get(n);return t||(t={},L.set(n,t)),t}var j=!1;function V(){j||(j=!0,q({createElement:(n,t)=>new g(n,t),createText:n=>new d(n),createComment:n=>new f(n)}))}function Te(n,t={}){let e=p;V(),l(!0);let r=b(t.event);try{return E(r,()=>H(s=>{try{let i=typeof n=="function"?n():n;return u(i)}finally{s()}}))}finally{l(e)}}var F=!1;function se(){F||(F=!0,Z(n=>{m()?.pending.add(n)}),ee(()=>m()?.nextResourceId()??""),te((n,t)=>{n&&m()?.data.set(n,t)}))}var C=null;function we(n){C=n}function ie(n){if(n.data.size===0)return"";let t={};for(let[r,s]of n.data){let i=s;if(C)try{i=C(s,r)}catch{continue}i!==void 0&&(t[r]=i)}if(Object.keys(t).length===0)return"";let e=O(JSON.stringify(t));return`<script type="application/json" id="${M}">${e}<\/script>`}var oe=50;async function Re(n,t={}){let e=p;V(),l(!0),se();let r=b(t.event);try{return await E(r,async()=>{t.preload&&await t.preload(t.event);let s,i=null,o=()=>{};H(v=>{o=v,i=ne(),s=typeof n=="function"?n():n});let a=()=>{try{I(i,()=>u(s))}catch{}};a();let N=0;for(;r.pending.size>0&&N++<oe;){let v=Array.from(r.pending);r.pending.clear(),await Promise.allSettled(v),await re(),a()}let X=I(i,()=>u(s))+ie(r);return o(),X})}finally{l(e)}}export{Te as renderToString,Re as renderToStringAsync,ie as serializeResourceData,we as setDataRedactor};

package/dist/lib/dom/server/request-context.cjs

@@ -0,0 +1 @@
+"use strict";var a=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var w=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var r in t)a(e,r,{get:t[r],enumerable:!0})},C=(e,t,r,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of w(t))!S.call(e,s)&&s!==r&&a(e,s,{get:()=>t[s],enumerable:!(n=f(t,s))||n.enumerable});return e};var M=e=>C(a({},"__esModule",{value:!0}),e);var b={};k(b,{createRequestContext:()=>L,getLocals:()=>y,getRequestContext:()=>q,getRequestEvent:()=>x,getRequestLocals:()=>g,runWithRequestContext:()=>v,setRequestStore:()=>T});module.exports=M(b);var c,p={getStore:()=>c,run(e,t){let r=c;c=e;try{return t()}finally{c=r}}},i=p;function T(e){i=e??p}function L(e={}){e.locals||(e.locals=e.request?g(e.request):{});let t=0,r=0,n=null,s=new Map,l=new Map;return{event:e,routeData:new Map,matchedRoute:new Map,nextId:()=>`s${t++}`,nextResourceId:()=>{if(n===null)return`r${r++}`;let o=s.get(n)??0;return s.set(n,o+1),`${n}:r${o}`},nextIslandNamespace:o=>{let u=l.get(o)??0;return l.set(o,u+1),`${o}#${u}`},withResourceScope(o,u){let d=n;n=o;try{return u()}finally{n=d}},pending:new Set,data:new Map}}function v(e,t){return i.run(e,t)}function q(){return i.getStore()}function x(){return q()?.event}function y(){let e=x();return e?(e.locals||(e.locals={}),e.locals):{}}var R=new WeakMap;function g(e){let t=R.get(e);return t||(t={},R.set(e,t)),t}