mono-jsx 0.2.0 → 0.3.1

package/jsx-runtime.mjs

@@ -6,19 +6,21 @@ var $state = Symbol.for("mono.state");
 var $computed = Symbol.for("mono.computed");
 
 // state.ts
-function createState(context, 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;
-    const value = fn();
+    collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
+    const value = fn.call(proxy);
     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), {
+  const proxy = new Proxy(/* @__PURE__ */ Object.create(null), {
     get(target, key, receiver) {
       switch (key) {
+        case "app":
+          return appState;
         case "context":
           return context ?? {};
         case "request":
@@ -34,31 +36,30 @@ function createState(context, request) {
             return value;
           }
           if (collectDeps) {
-            collectDeps(key, value);
+            collectDeps(fc, key, value);
             return value;
           }
-          return [$state, { key, value }, $vnode];
+          return [$state, { key, value, fc }, $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);
     }
   });
+  return proxy;
 }
 
 // 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
@@ -191,9 +192,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));
@@ -204,11 +205,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;
         }
@@ -218,114 +219,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);
                   }
                 }
               }
@@ -354,16 +339,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>");
               }
@@ -373,48 +358,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.context, 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>");
               }
@@ -431,22 +415,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);
                   }
                 }
               }
@@ -494,7 +477,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)) {
@@ -526,9 +509,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);
                 }
@@ -542,16 +525,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));
                   }
                 }
             }
@@ -563,19 +546,17 @@ 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>"
             );
           }
         }
@@ -583,17 +564,17 @@ async function renderNode(ctx, node, stripSlotProp) {
       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 { context, request, status, headers: headersInit, rendering } = renderOptions;
+  const { request, status, headers: headersInit } = renderOptions;
   const headers = new Headers();
   if (headersInit) {
     for (const [key, value] of Object.entries(headersInit)) {
@@ -615,43 +596,61 @@ function render(node, renderOptions = {}) {
   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);
           }
@@ -675,9 +674,10 @@ var jsx = (tag, props = /* @__PURE__ */ Object.create(null), key) => {
   }
   if (tag === "html") {
     const renderOptions = /* @__PURE__ */ Object.create(null);
-    for (const key2 of ["context", "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];
       }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.2.0",
+  "version": "0.3.1",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

package/setup.mjs

@@ -0,0 +1,44 @@
+// setup.ts
+import { existsSync } from "node:fs";
+import { readFile, writeFile } from "node:fs/promises";
+async function setup() {
+  if (globalThis.Deno && existsSync("deno.jsonc")) {
+    console.log("Please add the following options to your deno.jsonc file:");
+    console.log(
+      [
+        `{`,
+        `  "compilerOptions": {`,
+        `    %c"jsx": "react-jsx",`,
+        `    "jsxImportSource": "mono-jsx",%c`,
+        `  }`,
+        `}`
+      ].join("\n"),
+      "color:green",
+      ""
+    );
+    return;
+  }
+  let tsConfigFilename = globalThis.Deno ? "deno.json" : "tsconfig.json";
+  let tsConfig = /* @__PURE__ */ Object.create(null);
+  try {
+    const data = await readFile(tsConfigFilename, "utf8");
+    tsConfig = JSON.parse(data);
+  } catch {
+  }
+  const compilerOptions = tsConfig.compilerOptions ?? (tsConfig.compilerOptions = {});
+  if (compilerOptions.jsx === "react-jsx" && compilerOptions.jsxImportSource === "mono-jsx") {
+    console.log("%cmono-jsx already setup.", "color:grey");
+    return;
+  }
+  if (!globalThis.Deno) {
+    compilerOptions.module ??= "es2022";
+    compilerOptions.moduleResolution ??= "bundler";
+  }
+  compilerOptions.jsx = "react-jsx";
+  compilerOptions.jsxImportSource = "mono-jsx";
+  await writeFile(tsConfigFilename, JSON.stringify(tsConfig, null, 2));
+  console.log("\u2705 mono-jsx setup complete.");
+}
+export {
+  setup
+};

package/types/css.d.ts

@@ -6671,7 +6671,7 @@ export interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = s
    */
   msHyphens?: Property.Hyphens | undefined;
   /**
-   * The **`-ms-ime-align`** CSS property is a Microsoft extension aligning the Input Method Editor (IME) candidate window box relative to the element on which the IME composition is active. The extension is implemented in Microsoft Edge and Internet Explorer 11.
+   * The **`-ms-ime-align`** CSS property is a Microsoft extension aligning the Input Method Editor (IME) candidate window box relative to the element on which the IME composition is active. The extension is implemented in Microsoft Edge and Internet Explorer 11.
    *
    * **Syntax**: `auto | after`
    *