mono-jsx 0.1.3 → 0.3.0

package/jsx-runtime.mjs

@@ -6,55 +6,59 @@ var $state = Symbol.for("mono.state");
 var $computed = Symbol.for("mono.computed");
 
 // state.ts
-function createState(request) {
-  let collectDeps;
+var collectDeps;
+function createState(fc, appState, context, request) {
   const computed = (fn) => {
     const deps = /* @__PURE__ */ Object.create(null);
-    collectDeps = (key, value2) => deps[key] = value2;
+    collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
     const value = fn();
     collectDeps = void 0;
-    if (deps.size === 0) return value;
-    return [$computed, { value, deps, fn: fn.toString() }, $vnode];
+    if (value instanceof Promise || deps.size === 0) return value;
+    return [$computed, { value, deps, fn: fn.toString(), fc }, $vnode];
   };
   return new Proxy(/* @__PURE__ */ Object.create(null), {
     get(target, key, receiver) {
-      const value = Reflect.get(target, key, receiver);
-      if (key === "request") {
-        if (!request) {
-          throw new Error("request is not defined");
+      switch (key) {
+        case "app":
+          return appState;
+        case "context":
+          return context ?? {};
+        case "request":
+          if (!request) {
+            throw new Error("request is not defined");
+          }
+          return request;
+        case "computed":
+          return computed;
+        default: {
+          const value = Reflect.get(target, key, receiver);
+          if (typeof key === "symbol") {
+            return value;
+          }
+          if (collectDeps) {
+            collectDeps(fc, key, value);
+            return value;
+          }
+          return [$state, { key, value, fc }, $vnode];
         }
-        return request;
-      }
-      if (key === "computed") {
-        return computed;
-      }
-      if (typeof key === "symbol") {
-        return value;
-      }
-      if (collectDeps) {
-        collectDeps(key, value);
-        return value;
       }
-      return [$state, { key, value }, $vnode];
     },
     set(target, key, value, receiver) {
-      const vt = typeof value;
-      value = vt === "boolean" || vt === "number" || vt === "bigint" ? value : structuredClone(value);
       return Reflect.set(target, key, value, receiver);
     }
   });
 }
 
 // runtime/index.ts
-var RUNTIME_STATE_JS = `const p=(e,i)=>e.getAttribute(i),m=(e,i)=>e.hasAttribute(i),M=new Map,T=e=>M.get(e)??M.set(e,L()).get(e);function L(){const e=Object.create(null),i=new Map;function f(n,o){let a=o;Object.defineProperty(e,n,{get:()=>a,set:u=>{if(u!==a){const r=i.get(n);r&&queueMicrotask(()=>r.forEach(s=>s())),a=u}}})}function d(n,o,a,u){let r;if(o==="toggle"){let s;r=()=>{if(!s){const t=n.firstElementChild;t&&t.tagName==="TEMPLATE"&&m(t,"m-slot")?(s=t.content.childNodes,n.innerHTML=""):s=n.childNodes}a()?n.append(...s):n.innerHTML=""}}else if(o==="switch"){let s=p(n,"match"),t,l,E=c=>t.get(c)??t.set(c,[]).get(c),h;r=()=>{if(!t){t=new Map,l=[];for(const c of n.childNodes)if(c.nodeType===1&&c.tagName==="TEMPLATE"&&m(c,"m-slot")){for(const g of c.content.childNodes)g.nodeType===1&&m(g,"slot")?E(p(g,"slot")).push(g):l.push(g);c.remove()}else s?E(s).push(c):l.push(c)}h=a(),n.innerHTML="",n.append(...t.has(h)?t.get(h):l)}}else if(o&&o.length>2&&o.startsWith("[")&&o.endsWith("]")){let s=o.slice(1,-1),t=n.parentElement;t.tagName==="M-GROUP"&&(t=t.previousElementSibling),r=()=>{const l=a();l===!1?t.removeAttribute(s):(s==="class"||s==="style")&&l&&typeof l=="object"?t.setAttribute(s,s==="class"?cx(l):styleToCSS(l)):t.setAttribute(s,l===!0?"":""+l)}}else r=()=>n.textContent=""+a();if(r)for(const s of u){let t=i.get(s);t||(t=[],i.set(s,t)),t.push(r)}}return{store:e,define:f,createEffect:d}}customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,i=p(e,"mode"),f=p(e,"key"),d=T(p(e,"fc"));f?d.createEffect(e,i,()=>d.store[f],[f]):m(e,"computed")&&setTimeout(()=>{const n=e.firstChild;if(n&&n.nodeType===1&&n.type==="computed"){const o=n.textContent;o&&new Function("$",o).call(d.store,(a,u)=>d.createEffect(e,i,a,u))}})}}),Object.assign(globalThis,{$state:e=>T(e).store,$defineState:(e,i)=>{const f=e.indexOf(":");f>0&&T(e.slice(0,f)).define(e.slice(f+1),i)}});`;
-var RUNTIME_SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
-var RUNTIME_COMPONENTS_JS = {
+var STATE_JS = `const p=new Map,f=e=>p.get(e)??p.set(e,E(e)).get(e),u=(e,t)=>e.getAttribute(t),d=(e,t)=>e.hasAttribute(t),E=e=>{const t=Object.create(null),l=new Map,s=(i,c)=>{let r=c;Object.defineProperty(t,i,{get:()=>r,set:o=>{if(o!==r){const a=l.get(i);a&&queueMicrotask(()=>a.forEach(m=>m())),r=o}}})},n=(i,c)=>{let r=l.get(i);r||(r=[],l.set(i,r)),r.push(c)};return e>0&&Object.defineProperty(t,"app",{get:()=>f(0).store,enumerable:!1,configurable:!1}),{store:t,define:s,watch:n}},g=(e,t,l)=>{if(t==="toggle"){let s;return()=>{if(!s){const n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&d(n,"m-slot")?(s=n.content.childNodes,e.innerHTML=""):s=e.childNodes}l()?e.append(...s):e.innerHTML=""}}if(t==="switch"){let s=u(e,"match"),n,i,c=o=>n.get(o)??n.set(o,[]).get(o),r;return()=>{if(!n){n=new Map,i=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&d(o,"m-slot")){for(const a of o.content.childNodes)a.nodeType===1&&d(a,"slot")?c(u(a,"slot")).push(a):i.push(a);o.remove()}else s?c(s).push(o):i.push(o)}r=l(),e.innerHTML="",e.append(...n.has(r)?n.get(r):i)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let s=t.slice(1,-1),n=e.parentElement;return n.tagName==="M-GROUP"&&(n=n.previousElementSibling),()=>{const i=l();i===!1?n.removeAttribute(s):(s==="class"||s==="style")&&i&&typeof i=="object"?n.setAttribute(s,s==="class"?cx(i):styleToCSS(i)):n.setAttribute(s,i===!0?"":""+i)}}return()=>e.textContent=""+l()},h=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid state key")};customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,t=f(Number(u(e,"fc"))),l=u(e,"mode"),s=u(e,"key");s?t.watch(s,g(e,l,()=>t.store[s])):d(e,"computed")&&setTimeout(()=>{const n=e.firstChild;if(n&&n.nodeType===1&&n.type==="computed"){const i=n.textContent;i&&new Function("$",i).call(t.store,(c,r)=>{const o=g(e,l,c);for(const a of r){const[m,T]=h(a);f(m).watch(T,o)}})}})}}),Object.assign(globalThis,{$state:e=>e!==void 0?f(e).store:void 0,$defineState:(e,t)=>{const[l,s]=h(e);f(l).define(s,t)}});`;
+var SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
+var UTILS_JS = {
   /** cx.js (239 bytes) */
-  cx: `var cx=(()=>{var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}return t;})();`,
+  cx: `let cx=(()=>{var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}return t;})();`,
   /** styleToCSS.js (1203 bytes) */
-  styleToCSS: `var styleToCSS=(()=>{var c=new Set(["animation-iteration-count","aspect-ratio","border-image-outset","border-image-slice","border-image-width","box-flex-group","box-flex","box-ordinal-group","column-count","columns","fill-opacity","flex-grow","flex-negative","flex-order","flex-positive","flex-shrink","flex","flood-opacity","font-weight","grid-area","grid-column-end","grid-column-span","grid-column-start","grid-column","grid-row-end","grid-row-span","grid-row-start","grid-row","line-clamp","line-height","opacity","order","orphans","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","widows","z-index","zoom"]),s=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function l(e){if(s(e))return e;if(u(e)){let r="";for(let[o,t]of Array.isArray(e)?e:Object.entries(e)){if(t==null||t===!1||Number.isNaN(t)||!s(o))return"";let n=f(o),i=typeof t=="number"?c.has(n)?""+t:t+"px":a(""+t);r+=(r!==""?";":"")+a(n)+":"+(n==="content"?JSON.stringify(i):i)}return r}return""}function a(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}return l;})();`,
-  /** event.js (176 bytes) */
-  event: `window.$emit=(evt,el,fn,fc)=>fn.call(window.$state?.(fc)??el,evt);window.$onsubmit=(evt,el,fn,fc)=>{evt.preventDefault();fn.call(window.$state?.(fc)??el,new FormData(el),evt)};`
+  styleToCSS: `let styleToCSS=(()=>{var c=new Set(["animation-iteration-count","aspect-ratio","border-image-outset","border-image-slice","border-image-width","box-flex-group","box-flex","box-ordinal-group","column-count","columns","fill-opacity","flex-grow","flex-negative","flex-order","flex-positive","flex-shrink","flex","flood-opacity","font-weight","grid-area","grid-column-end","grid-column-span","grid-column-start","grid-column","grid-row-end","grid-row-span","grid-row-start","grid-row","line-clamp","line-height","opacity","order","orphans","stop-opacity","stroke-dasharray","stroke-dashoffset","stroke-miterlimit","stroke-opacity","stroke-width","tab-size","widows","z-index","zoom"]),s=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function l(e){if(s(e))return e;if(u(e)){let r="";for(let[o,t]of Array.isArray(e)?e:Object.entries(e)){if(t==null||t===!1||Number.isNaN(t)||!s(o))return"";let n=f(o),i=typeof t=="number"?c.has(n)?""+t:t+"px":a(""+t);r+=(r!==""?";":"")+a(n)+":"+(n==="content"?JSON.stringify(i):i)}return r}return""}function a(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}return l;})();`,
+  /** event.js (169 bytes) */
+  event: `let w=window;w.$emit=(evt,el,fn,fc)=>fn.call(w.$state?.(fc)??el,evt);w.$onsubmit=(evt,el,fn,fc)=>{evt.preventDefault();fn.call(w.$state?.(fc)??el,new FormData(el),evt)};`
 };
 
 // runtime/utils.ts
@@ -187,9 +191,9 @@ var regexpHtmlTag = /^[a-z][\w\-$]*$/;
 var selfClosingTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCodeAt(0) | 0, 0);
-var toAttrStringLit = (str) => '"' + escapeHTML(str).replaceAll('"', '\\"') + '"';
-async function renderNode(ctx, node, stripSlotProp) {
-  const { write, stateStore } = ctx;
+var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
+async function renderNode(rc, node, stripSlotProp) {
+  const { write } = rc;
   switch (typeof node) {
     case "string":
       write(escapeHTML(node));
@@ -200,11 +204,11 @@ async function renderNode(ctx, node, stripSlotProp) {
       break;
     case "object":
       if (isVNode(node)) {
-        let [tag, props] = node;
-        let children = props.children;
-        if (tag === $fragment) {
-          if (children !== void 0) {
-            await renderChildren(ctx, children);
+        const [tag, props] = node;
+        const { stateStore } = rc;
+        if (tag === $fragment || tag === "htmx") {
+          if (props.children !== void 0) {
+            await renderChildren(rc, props.children);
           }
           break;
         }
@@ -214,114 +218,98 @@ async function renderNode(ctx, node, stripSlotProp) {
           }
           break;
         }
-        if (tag === "slot") {
-          const ctxSlots = ctx.slots;
-          let slots;
-          if (ctxSlots !== void 0) {
-            if (Array.isArray(ctxSlots)) {
-              if (isVNode(ctxSlots)) {
-                slots = [ctxSlots];
-              } else {
-                slots = ctxSlots;
-              }
-            } else {
-              slots = [ctxSlots];
-            }
-          }
-          if (props.name) {
-            children = slots?.filter((v) => isVNode(v) && v[1].slot === props.name);
-          } else {
-            children = slots?.filter((v) => !isVNode(v) || !v[1].slot);
-          }
-          if (children === void 0 || Array(children) && children.length === 0) {
-            children = node[1].children;
-          }
-          if (children !== void 0) {
-            await renderChildren(ctx, children, true);
-          }
-          break;
-        }
-        const fcIndex = ctx.index.fc.toString(36);
         if (tag === $state) {
-          const { key, value } = props;
-          write('<m-state fc="' + fcIndex + '" key=' + toAttrStringLit(key) + ">");
+          const { key, value, fc } = props;
+          write('<m-state fc="' + fc + '" key=' + toAttrStringLit(key) + ">");
           if (value !== void 0 && value !== null) {
             write(escapeHTML("" + value));
           }
           write("</m-state>");
-          stateStore.set(fcIndex + ":" + key, value);
+          stateStore.set(fc + ":" + key, value);
           break;
         }
         if (tag === $computed) {
-          const { deps, value, fn } = props;
+          const { deps, value, fn, fc } = props;
           write(
-            '<m-state fc="' + fcIndex + '" computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>"
+            '<m-state fc="' + fc + '" computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>"
           );
           if (value !== void 0) {
             write(escapeHTML("" + value));
           }
           write("</m-state>");
           for (const [key, value2] of Object.entries(deps)) {
-            const stateKey = fcIndex + ":" + key;
-            if (!stateStore.has(stateKey)) {
-              stateStore.set(stateKey, value2);
+            if (!stateStore.has(key)) {
+              stateStore.set(key, value2);
+            }
+          }
+          break;
+        }
+        if (tag === "slot") {
+          const { fcSlots } = rc;
+          if (fcSlots) {
+            let slots;
+            if (props.name) {
+              slots = fcSlots.filter((v) => isVNode(v) && v[1].slot === props.name);
+            } else {
+              slots = fcSlots.filter((v) => !isVNode(v) || !v[1].slot);
             }
+            if (slots.length === 0) {
+              slots = props.children;
+            }
+            await renderChildren(rc, slots, true);
           }
           break;
         }
         if (tag === "toggle") {
+          const { value: valueProp, children } = props;
           if (children !== void 0) {
-            const valueProp = props.value;
             if (isVNode(valueProp) && valueProp[0] === $state || valueProp[0] === $computed) {
-              const { key, deps, value, fn } = valueProp[1];
-              write('<m-state mode="toggle" fc="' + fcIndex + '" ');
+              const { key, deps, value, fn, fc } = valueProp[1];
+              write('<m-state mode="toggle" fc="' + fc + '" ');
               if (key) {
                 write("key=" + toAttrStringLit(key) + ">");
-                stateStore.set(fcIndex + ":" + key, !!value);
+                stateStore.set(fc + ":" + key, !!value);
               } else {
                 write('computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>");
                 for (const [key2, value2] of Object.entries(deps)) {
-                  const stateKey = fcIndex + ":" + key2;
-                  if (!stateStore.has(stateKey)) {
-                    stateStore.set(stateKey, value2);
+                  if (!stateStore.has(key2)) {
+                    stateStore.set(key2, value2);
                   }
                 }
               }
               if (!value) {
                 write("<template m-slot>");
               }
-              await renderChildren(ctx, children);
+              await renderChildren(rc, children);
               if (!value) {
                 write("</template>");
               }
               write("</m-state>");
             } else if (valueProp) {
-              await renderChildren(ctx, children);
+              await renderChildren(rc, children);
             }
           }
           break;
         }
         if (tag === "switch") {
+          const { value: valueProp, defaultValue, children } = props;
           if (children !== void 0) {
             let slots = Array.isArray(children) ? isVNode(children) ? [children] : children : [children];
-            let valueProp = props.value;
-            let defaultValue = props.defaultValue;
             let stateful;
             let computed;
             let valueOrDefault;
             if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
-              const { key, deps, value, fn } = valueProp[1];
+              const { key, deps, value, fn, fc } = valueProp[1];
               valueOrDefault = value ?? defaultValue;
-              stateful = '<m-state mode="switch" fc="' + fcIndex + '" ';
+              stateful = '<m-state mode="switch" fc="' + fc + '" ';
               if (key) {
                 stateful += "key=" + toAttrStringLit(key) + ">";
-                stateStore.set(fcIndex + ":" + key, valueOrDefault);
+                stateStore.set(fc + ":" + key, valueOrDefault);
               } else {
                 stateful += 'computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>";
                 for (const [key2, value2] of Object.entries(deps)) {
-                  const stateKey = fcIndex + ":" + key2;
-                  if (!stateStore.has(stateKey)) {
-                    stateStore.set(stateKey, value2);
+                  if (!stateStore.has(key2)) {
+                    stateStore.set(key2, value2);
                   }
                 }
               }
@@ -350,16 +338,16 @@ async function renderNode(ctx, node, stripSlotProp) {
               }
             }
             if (matchedSlot) {
-              await renderNode(ctx, matchedSlot[1], true);
+              await renderNode(rc, matchedSlot[1], true);
             } else if (unnamedSlots.length > 0) {
-              await renderChildren(ctx, unnamedSlots);
+              await renderChildren(rc, unnamedSlots);
             }
             if (stateful) {
               if (namedSlots.length > 0 || matchedSlot && unnamedSlots.length > 0) {
                 write("<template m-slot>");
-                await renderChildren(ctx, namedSlots);
+                await renderChildren(rc, namedSlots);
                 if (matchedSlot && unnamedSlots.length > 0) {
-                  await renderChildren(ctx, unnamedSlots);
+                  await renderChildren(rc, unnamedSlots);
                 }
                 write("</template>");
               }
@@ -369,48 +357,47 @@ async function renderNode(ctx, node, stripSlotProp) {
           break;
         }
         if (typeof tag === "function") {
+          const fcIndex = ++rc.index.fc;
           const { rendering, placeholder, catch: catchFC, ...fcProps } = props ?? /* @__PURE__ */ Object.create(null);
-          let eager = ctx.eager;
-          if ((rendering ?? tag.rendering) === "eager") {
-            eager = true;
-          }
           try {
-            const v = tag.call(createState(ctx.request), fcProps);
-            ctx.index.fc++;
+            const v = tag.call(createState(fcIndex, rc.appState, rc.context, rc.request), fcProps);
+            const { children } = fcProps;
+            const fcSlots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
+            const eager = (rendering ?? tag.rendering) === "eager" || rc.eager;
             if (v instanceof Promise) {
               if (eager) {
-                await renderNode({ ...ctx, eager: true, slots: children }, await v);
+                await renderNode({ ...rc, fcIndex, eager: true, fcSlots }, await v);
               } else {
-                const chunkId = (ctx.suspenses.length + 1).toString(36);
-                ctx.suspenses.push(v.then(async (c) => {
+                const chunkId = (rc.suspenses.length + 1).toString(36);
+                rc.suspenses.push(v.then(async (c) => {
                   write('<m-chunk chunk-id="' + chunkId + '"><template>');
-                  await renderNode({ ...ctx, eager, slots: children }, c);
+                  await renderNode({ ...rc, fcIndex, eager, fcSlots }, c);
                   write("</template></m-chunk>");
                 }));
                 write('<m-portal chunk-id="' + chunkId + '">');
                 if (placeholder) {
-                  await renderNode({ ...ctx, eager: true }, placeholder);
+                  await renderNode({ ...rc, fcIndex, eager: true }, placeholder);
                 }
                 write("</m-portal>");
               }
             } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
               for (const c of v) {
-                await renderNode({ ...ctx, eager, slots: children }, c);
+                await renderNode({ ...rc, fcIndex, eager, fcSlots }, c);
               }
             } else if (isObject(v) && Symbol.asyncIterator in v) {
               if (eager) {
                 for await (const c of v) {
-                  await renderNode({ ...ctx, eager: true, slots: children }, c);
+                  await renderNode({ ...rc, fcIndex, eager: true, fcSlots }, c);
                 }
               } else {
               }
             } else {
-              await renderNode({ ...ctx, eager, slots: children }, v);
+              await renderNode({ ...rc, fcIndex, eager, fcSlots }, v);
             }
           } catch (err) {
             if (err instanceof Error) {
               if (typeof catchFC === "function") {
-                await renderNode({ ...ctx, eager: true }, catchFC(err));
+                await renderNode({ ...rc, fcIndex, eager: true }, catchFC(err));
               } else {
                 write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.stack ?? err.message) + "</code></pre>");
               }
@@ -427,22 +414,21 @@ async function renderNode(ctx, node, stripSlotProp) {
               continue;
             }
             if (isVNode(propValue) && (propValue[0] === $state || propValue[0] === $computed)) {
-              const { key, deps, fn, value } = propValue[1];
+              const { key, value, deps, fn, fc } = propValue[1];
               if (propName === "class") {
-                ctx.rtComponents.cx = true;
+                rc.runtimeUtils.cx = true;
               } else if (propName === "style") {
-                ctx.rtComponents.styleToCSS = true;
+                rc.runtimeUtils.styleToCSS = true;
               }
-              propEffects.push("<m-state mode=" + toAttrStringLit("[" + propName + "]") + ' fc="' + fcIndex + '" ');
+              propEffects.push("<m-state mode=" + toAttrStringLit("[" + propName + "]") + ' fc="' + fc + '" ');
               if (key) {
                 propEffects.push("key=" + toAttrStringLit(key) + ">");
-                stateStore.set(fcIndex + ":" + key, value);
+                stateStore.set(fc + ":" + key, value);
               } else {
                 propEffects.push('computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>");
                 for (const [key2, value2] of Object.entries(deps)) {
-                  const stateKey = fcIndex + ":" + key2;
-                  if (!stateStore.has(stateKey)) {
-                    stateStore.set(stateKey, value2);
+                  if (!stateStore.has(key2)) {
+                    stateStore.set(key2, value2);
                   }
                 }
               }
@@ -490,7 +476,7 @@ async function renderNode(ctx, node, stripSlotProp) {
                       raw += css + "|";
                     }
                     raw += [pseudoStyles, atRuleStyles, nestingStyles].flat(1).map(([k, v]) => k + ">" + v).join("|");
-                    styleIds = ctx.styleIds ?? (ctx.styleIds = /* @__PURE__ */ new Set());
+                    styleIds = rc.styleIds ?? (rc.styleIds = /* @__PURE__ */ new Set());
                     id = hashCode(raw).toString(36);
                     cssSelector = "[data-css-" + id + "]";
                     if (!styleIds.has(id)) {
@@ -522,9 +508,9 @@ async function renderNode(ctx, node, stripSlotProp) {
                 break;
               case "action":
                 if (typeof propValue === "function" && tag === "form") {
-                  const id = "$MF_" + (ctx.index.mf++).toString(36);
-                  write("<script>function " + id + "(fd){(" + propValue.toString() + ")(fd)}<\/script>");
-                  buffer += ' onsubmit="$onsubmit(event,this,' + id + ",'" + fcIndex + `')"`;
+                  const fn = "$MF_" + (rc.index.mf++).toString(36);
+                  write("<script>function " + fn + "(fd){(" + propValue.toString() + ")(fd)}<\/script>");
+                  buffer += ' onsubmit="$onsubmit(event,this,' + fn + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + ')"';
                 } else if (isString(propValue)) {
                   buffer += " action=" + toAttrStringLit(propValue);
                 }
@@ -538,16 +524,16 @@ async function renderNode(ctx, node, stripSlotProp) {
                 if (regexpHtmlTag.test(propName) && propValue !== void 0) {
                   if (propName.startsWith("on")) {
                     if (typeof propValue === "function") {
-                      const id = "$MF_" + (ctx.index.mf++).toString(36);
-                      write("<script>function " + id + "(e){(" + propValue.toString() + ")(e)}<\/script>");
-                      buffer += " " + propName.toLowerCase() + '="$emit(event,this,' + id + ",'" + fcIndex + `')"`;
+                      const fn = "$MF_" + (rc.index.mf++).toString(36);
+                      write("<script>function " + fn + "(e){(" + propValue.toString() + ")(e)}<\/script>");
+                      buffer += " " + propName.toLowerCase() + '="$emit(event,this,' + fn + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + ')"';
                     }
                   } else if (typeof propValue === "boolean") {
                     if (propValue) {
                       buffer += " " + propName;
                     }
                   } else {
-                    buffer += " " + (propValue === true ? escapeHTML(propName) : escapeHTML(propName) + "=" + toAttrStringLit("" + propValue));
+                    buffer += " " + escapeHTML(propName) + (propValue === true ? "" : "=" + toAttrStringLit("" + propValue));
                   }
                 }
             }
@@ -559,97 +545,111 @@ async function renderNode(ctx, node, stripSlotProp) {
             }
             if (props.innerHTML) {
               write(props.innerHTML);
-            } else if (children !== void 0) {
-              await renderChildren(ctx, children);
+            } else if (props.children !== void 0) {
+              await renderChildren(rc, props.children);
             }
             write("</" + tag + ">");
           } else if (propEffects.length > 0) {
-            write("<m-group>");
-            write(propEffects.join(""));
-            write("</m-group>");
+            write("<m-group>" + propEffects.join("") + "</m-group>");
           }
           if (onMountHandler) {
-            ctx.index.mf++;
+            rc.index.mf++;
             write(
-              '<script>{const target=document.currentScript.previousElementSibling;addEventListener("load",()=>$emit({type:"mount",currentTarget:target,target},target,' + onMountHandler.toString() + ',"' + fcIndex + '"))}<\/script>'
+              '<script>{const target=document.currentScript.previousElementSibling;addEventListener("load",()=>$emit({type:"mount",currentTarget:target,target},target,' + onMountHandler.toString() + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + "))}<\/script>"
             );
           }
         }
-      } else if (Array.isArray(node) || node && Symbol.iterator in node) {
-        for (const child of node) {
-          await renderNode(ctx, child);
-        }
       }
       break;
   }
 }
-async function renderChildren(ctx, children, stripSlotProp) {
+async function renderChildren(rc, children, stripSlotProp) {
   if (Array.isArray(children) && !isVNode(children)) {
     for (const child of children) {
-      await renderNode(ctx, child, stripSlotProp);
+      await renderNode(rc, child, stripSlotProp);
     }
   } else {
-    await renderNode(ctx, children, stripSlotProp);
+    await renderNode(rc, children, stripSlotProp);
   }
 }
 function render(node, renderOptions = {}) {
-  const { request, status, headers: headersRaw, rendering } = renderOptions;
-  const headers = /* @__PURE__ */ Object.create(null);
-  if (headersRaw) {
-    const { etag, lastModified } = headersRaw;
+  const { request, status, headers: headersInit } = renderOptions;
+  const headers = new Headers();
+  if (headersInit) {
+    for (const [key, value] of Object.entries(headersInit)) {
+      if (value) {
+        headers.set(toHyphenCase(key), value);
+      }
+    }
+    const etag = headers.get("etag");
     if (etag && request?.headers.get("if-none-match") === etag) {
       return new Response(null, { status: 304 });
     }
+    const lastModified = headers.get("last-modified");
     if (lastModified && request?.headers.get("if-modified-since") === lastModified) {
       return new Response(null, { status: 304 });
     }
-    for (const [key, value] of Object.entries(headersRaw)) {
-      if (value) {
-        headers[toHyphenCase(key)] = value;
-      }
-    }
   }
-  headers["transfer-encoding"] = "chunked";
-  headers["content-type"] = "text/html; charset=utf-8";
+  headers.set("transfer-encoding", "chunked");
+  headers.set("content-type", "text/html; charset=utf-8");
   return new Response(
     new ReadableStream({
       async start(controller) {
+        const { appState: appStateInit, context, rendering, htmx } = renderOptions;
         const write = (chunk) => controller.enqueue(encoder.encode(chunk));
+        const appState = createState(0, null, context, request);
         const stateStore = /* @__PURE__ */ new Map();
         const suspenses = [];
         const rtComponents = { cx: false, styleToCSS: false };
-        const ctx = {
+        const rc = {
           write,
+          context,
           request,
+          appState,
           stateStore,
           suspenses,
-          rtComponents,
+          runtimeUtils: rtComponents,
           index: { fc: 0, mf: 0 },
           eager: rendering === "eager"
         };
+        if (appStateInit) {
+          for (const [key, value] of Object.entries(appStateInit)) {
+            if (value !== void 0) {
+              appState[key] = value;
+            }
+          }
+        }
         try {
           write("<!DOCTYPE html>");
-          await renderNode(ctx, node);
+          await renderNode(rc, node);
           let js = "";
+          if (rc.index.mf > 0) {
+            js += UTILS_JS.event;
+          }
           if (stateStore.size > 0) {
             if (rtComponents.cx) {
-              js += RUNTIME_COMPONENTS_JS.cx;
+              js += UTILS_JS.cx;
             }
             if (rtComponents.styleToCSS) {
-              js += RUNTIME_COMPONENTS_JS.styleToCSS;
+              js += UTILS_JS.styleToCSS;
             }
-            js += RUNTIME_STATE_JS;
+            js += STATE_JS;
             js += "for(let[k,v]of" + JSON.stringify(Array.from(stateStore.entries()).map((e) => e[1] === void 0 ? [e[0]] : e)) + ")$defineState(k,v);";
           }
-          if (ctx.index.mf > 0) {
-            js += RUNTIME_COMPONENTS_JS.event;
-          }
           if (suspenses.length > 0) {
-            js += RUNTIME_SUSPENSE_JS;
+            js += SUSPENSE_JS;
           }
           if (js) {
             write("<script>(()=>{" + js + "})()<\/script>");
           }
+          if (htmx) {
+            write(`<script src="https://raw.esm.sh/htmx.org${htmx === true ? "" : "@" + htmx}/dist/htmx.min.js"><\/script>`);
+            for (const [name, version] of Object.entries(renderOptions)) {
+              if (name.startsWith("html-ext-")) {
+                write(`<script src="https://raw.esm.sh/${name}${version === true ? "" : "@" + version}"><\/script>`);
+              }
+            }
+          }
           if (suspenses.length > 0) {
             await Promise.all(suspenses);
           }
@@ -673,9 +673,10 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   if (tag === "html") {
     const renderOptions = /* @__PURE__ */ Object.create(null);
-    for (const key2 of ["request", "status", "headers", "rendering"]) {
-      if (Object.hasOwn(props, key2)) {
-        renderOptions[key2] = props[key2];
+    const optionsKeys = /* @__PURE__ */ new Set(["appState", "context", "request", "status", "headers", "rendering", "htmx"]);
+    for (const [key2, value] of Object.entries(props)) {
+      if (optionsKeys.has(key2) || key2.startsWith("html-ext-")) {
+        renderOptions[key2] = value;
         delete props[key2];
       }
     }
@@ -690,8 +691,8 @@ var html = (raw, ...values) => [
   $vnode
 ];
 Object.assign(globalThis, {
-  css: html,
   html,
+  css: html,
   js: html
 });
 export {