mono-jsx 0.10.0-beta.4 → 0.10.0-beta.5

package/jsx-runtime.mjs

@@ -30,8 +30,8 @@ var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>
 var SIGNALS_JS = `{let h;const a=window,b=document,y=new Map,E=new Map,k=new Map,v=new Map,$=new Map,m=new Map,l=n=>y.get(n)??y.set(n,V(n)).get(n),F=()=>Object.create(null),p=(n,e)=>n.getAttribute(e),V=n=>{const e=F(),t=(o,c)=>{e[o]=c},s=new Map,r=(o,c)=>{let u=s.get(o);return u||(u=new Set,s.set(o,u)),u.add(c),()=>{u.delete(c),u.size===0&&s.delete(o)}},i=new Proxy(F(),{get:(o,c)=>b.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(o,c,u)=>{switch(c){case"$init":return t;case"$watch":return r;case"app":return l(0);case"refs":return i;default:return h?.(n,c),Reflect.get(o,c,u)}},set:(o,c,u,g)=>{if(u!==Reflect.get(o,c,g)){const f=s.get(c);return f&&queueMicrotask(()=>f.forEach(d=>d())),Reflect.set(o,c,u,g)}return!1}})},M=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,r=()=>n.textContent=""+t();if(b.startViewTransition&&s.hasAttribute("data-vt")){const i=s.getAttribute("data-vt");return i&&(s.style.viewTransitionName=i),()=>b.startViewTransition(r)}return r},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},q=(n,e,t,s)=>{const r=n.get(t);if(r!==void 0){s(r);return}const i=e.get(t);i?i.push(s):e.set(t,[s])},N=(n,e)=>{const t=a.$fmap?.get(n);if(t){e(t);return}const s=m.get(n);s?s.push(e):m.set(n,[e])};if(typeof a.$F=="function"){const n=a.$F;a.$F=(e,t)=>{n(e,t);const s=m.get(e);s&&(m.delete(e),s.forEach(r=>r(t)))}}const T=n=>typeof n=="function"&&n(),A=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});A("m-signal",n=>{const e=Number(p(n,"scope")),t=l(e),s=p(n,"key");if(s)n.disposes.push(t.$watch(s,M(n,p(n,"mode"),()=>t[s])));else{const r=Number(p(n,"computed")),i=e+":"+r;q(E,v,i,o=>{N(r,c=>{const u=M(n,p(n,"mode"),c.bind(t));o.forEach(g=>{const[f,d]=S(g);n.disposes.push(l(f).$watch(d,u))})})})}}),A("m-effect",n=>{const{disposes:e}=n,t=Number(p(n,"scope"));q(k,$,t,s=>{const r=s.length,i=new Array(r);e.push(()=>{i.forEach(T),i.length=0});for(let o=0;o<r;o++)N(s[o],c=>{const u=[],g=l(t),f=()=>{T(i[o]),i[o]=c.call(g)};h=(d,w)=>u.push([d,w]),f(),h=void 0;for(const[d,w]of u)e.push(l(d).$watch(w,f))})})}),a.$S=(n,e)=>{const[t,s]=S(n);l(t).$init(s,e)},a.$C=(n,e,t)=>{const s=n+":"+e;E.set(s,t);const r=v.get(s);r&&(v.delete(s),r.forEach(i=>i(t)))},a.$E=(n,...e)=>{k.set(n,e);const t=$.get(n);t&&($.delete(n),t.forEach(s=>s(e)))},a.$patch=(n,...e)=>{for(const[t,...s]of e){let r=s.pop(),i=n;for(const o of s)i=i[o];i[r]=t}return n},a.$signals=n=>n!==void 0?l(n):void 0;}`;
 var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{i.set(o(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=o(e),n=i.get(t),s=e.firstChild?.content.childNodes;n&&(e.hasAttribute("next")?s&&n.before(...s):(e.hasAttribute("done")?n.remove():s&&n.replaceWith(...s),i.delete(t)),e.remove())})});}`;
 var COMPONENT_JS = `{const e=document,a=(t,s)=>t.getAttribute(s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#s;#r;#h;#i;#e=new Map;#a=!0;async#l(){if(!this.#t){this.#n("");return}const t=this.#s||"{}",s=this.#t+t,i={"x-component":this.#t,"x-props":t,"x-flags":$FLAGS},n=new AbortController;if(this.#h?.abort(),this.#h=n,this.#e.has(s)){this.#n(this.#e.get(s));return}this.#r?.length&&this.#n(this.#r);const r=await fetch(location.href,{headers:i,signal:n.signal});if(!r.ok)throw this.#n(""),new Error("Failed to fetch component '"+this.#t+"'");const[h,o]=await r.json();this.#e.set(s,h),this.#n(h),o&&(e.body.appendChild(e.createElement("script")).textContent=o)}#n(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&e.startViewTransition&&!this.#a?e.startViewTransition(s):s(),this.#a=!1}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.#o())}get props(){return this.#s?JSON.parse(this.#s):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#s&&(this.#s=s,this.#o())}attributeChangedCallback(t,s,i){this.#t&&i&&(t==="name"?this.name=i:t==="props"&&(this.props=i))}connectedCallback(){setTimeout(()=>{if(!this.#r){const t=a(this,"props");this.#t=a(this,"name"),this.#s=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#r=[...this.childNodes]}this.#l()})}disconnectedCallback(){this.#e.clear(),this.#h?.abort(),this.#h=void 0,this.#i&&clearTimeout(this.#i),this.#i=void 0}#o(){this.#i&&clearTimeout(this.#i),this.#i=setTimeout(()=>{this.#i=void 0,this.#l()},50)}refresh(){this.#t&&this.#e.delete(this.#t+(this.#s||"{}")),this.#o()}});}`;
-var ROUTER_JS = `{const l=window,a=document,n=location,h=t=>t.origin===n.origin&&r(t)===r(n),r=({pathname:t,search:s})=>t+s;customElements.define("m-router",class extends HTMLElement{#s;#t=new Map;#r=r(n);#e;#o=!0;#i;#n;async#h(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#s?.abort(),this.#s=s;const e=await fetch(t,{headers:i,signal:s.signal});if(e.status===404)return null;if(!e.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+e.status+" "+e.statusText);return e.json()}#a(t){const s=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&a.startViewTransition&&!this.#o?a.startViewTransition(s):s(),this.#o=!1}#l(){a.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";h(new URL(s))?i.add(e):i.remove(e)})}async#c(t,s){this.#r=r(new URL(t,n.href));const i=this.#h(t).then(e=>{if(e){const[o,c]=e;return this.#t.set(t,o),this.#a(o),c}else this.#t.delete(t),this.#a(this.#e??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#t.has(t)?this.#a(this.#t.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#l(),window.scrollTo(0,0),i.then(e=>{e&&(a.body.appendChild(a.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,n.href);if(i.origin!==n.origin||t.startsWith("#")){n.href=t;return}h(i)||this.#c(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#e)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#e=[...this.childNodes];else{this.#e=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-fallback")){this.#e.push(...t.content.childNodes),t.remove();break}}}),this.#i=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const s=t.target.getAttribute("href");if(!s||s.startsWith("#"))return;const{download:i,href:e,rel:o,target:c}=t.target;i||o==="external"||c==="_blank"||!e.startsWith(n.origin)||(t.preventDefault(),this.navigate(e))},this.#n=()=>{r(n)!==this.#r&&this.#c(n.href)},l.addEventListener("popstate",this.#n),a.addEventListener("click",this.#i),setTimeout(()=>this.#l()),l.$router=this}disconnectedCallback(){l.removeEventListener("popstate",this.#n),a.removeEventListener("click",this.#i),delete l.$router,this.#s?.abort(),this.#s=void 0,this.#t.clear(),this.#i=void 0,this.#n=void 0}});}`;
-var FORM_JS = `{const d=window.document,c=(n,e)=>n.getAttribute(e),u=(n,e)=>n.appendChild(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=c(this,"for"),e=this.closest("form"),m=this.textContent;if(n&&e&&m)for(const i of n.split(",")){const s=e.elements.namedItem(i.trim());if(s){const l=()=>{s.removeEventListener("input",l),s.setCustomValidity("")};s.addEventListener("input",l),s.setCustomValidity(m),s.focus()}}this.remove()}}),window.$onrfs=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const m=new FormData(e),i=[...e.elements];for(const l of i)l._disabled=l.disabled,l.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:m});if(s.ok){const[l,p]=await s.json(),E=d.createElement("template"),b=new Map;e.querySelectorAll("m-formslot").forEach(t=>{t.innerHTML=""}),E.innerHTML=l;for(const t of i)t.disabled=t._disabled,delete t._disabled;for(const t of E.content.childNodes){if(t.nodeType===1){const o=t,r=c(o,"formslot"),a=r?'m-formslot[name="'+r+'"]':"m-formslot",f=r?e.querySelector(a)??d.querySelector(a):e.querySelector(a);if(f){f.innerHTML="",b.set(o,f);continue}}u(e,t)}for(const[t,o]of b){const r=c(o,"onupdate"),a=c(o,"scope");switch(c(o,"mode")){case"insertbefore":o.before(t);break;case"insertafter":o.after(t);break;default:u(o,t)}r&&$fmap.get(Number(r))?.call($signals?.(Number(a))??o,{type:"update",target:o})}setTimeout(()=>{i.some(t=>!t.validity.valid)||e.reset()},0),p&&(u(d.body,d.createElement("script")).textContent=p+";document.currentScript.remove();")}};}`;
+var ROUTER_JS = `{const c=window,a=document,n=location,h=t=>t.origin===n.origin&&r(t)===r(n),r=({pathname:t,search:e})=>t+e;customElements.define("m-router",class extends HTMLElement{#s;#t=new Map;#r=r(n);#e;#o=!0;#i;#n;async#h(t){const e=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#s?.abort(),this.#s=e;const s=await fetch(t,{headers:i,signal:e.signal});if(s.status===404)return null;if(!s.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+s.status+" "+s.statusText);return s.json()}#a(t){const e=()=>typeof t=="string"?this.innerHTML=t:this.replaceChildren(...t);this.hasAttribute("vt")&&a.startViewTransition&&!this.#o?a.startViewTransition(e):e(),this.#o=!1}#l(){a.querySelectorAll("nav a").forEach(t=>{const{href:e,classList:i}=t,s=t.closest("nav")?.getAttribute("data-active-class")??"active";h(new URL(e))?i.add(s):i.remove(s)})}async#c(t,e){const i=new URL(t,n.href);this.#r=r(i);let s;if(this.#t.has(t))this.#a(this.#t.get(t));else{const o=await this.#h(t);if(typeof $signals<"u"&&($signals(0).url=i),o){const[l,d]=o;this.#t.set(t,l),this.#a(l),s=d}else this.#t.delete(t),this.#a(this.#e??[])}history[e?.replace?"replaceState":"pushState"]({},"",t),this.#l(),window.scrollTo(0,0),s&&(a.body.appendChild(a.createElement("script")).textContent=s)}navigate(t,e){const i=new URL(t,n.href);if(i.origin!==n.origin||t.startsWith("#")){n.href=t;return}h(i)||this.#c(t,e)}connectedCallback(){setTimeout(()=>{if(!this.#e)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#e=[...this.childNodes];else{this.#e=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-fallback")){this.#e.push(...t.content.childNodes),t.remove();break}}}),this.#i=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const e=t.target.getAttribute("href");if(!e||e.startsWith("#"))return;const{download:i,href:s,rel:o,target:l}=t.target;i||o==="external"||l==="_blank"||!s.startsWith(n.origin)||(t.preventDefault(),this.navigate(s))},this.#n=()=>{r(n)!==this.#r&&this.#c(n.href)},c.addEventListener("popstate",this.#n),a.addEventListener("click",this.#i),setTimeout(()=>this.#l()),c.$router=this}disconnectedCallback(){c.removeEventListener("popstate",this.#n),a.removeEventListener("click",this.#i),delete c.$router,this.#s?.abort(),this.#s=void 0,this.#t.clear(),this.#i=void 0,this.#n=void 0}});}`;
+var FORM_JS = `{const d=window.document,c=(n,e)=>n.getAttribute(e),u=(n,e)=>n.appendChild(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=c(this,"for"),e=this.closest("form"),m=this.textContent;if(n&&e&&m)for(const i of n.split(",")){const s=e.elements.namedItem(i.trim());if(s){const l=()=>{s.removeEventListener("input",l),s.setCustomValidity("")};s.addEventListener("input",l),s.setCustomValidity(m),s.focus()}}this.remove()}}),window.$onRFS=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const m=new FormData(e),i=[...e.elements];for(const l of i)l._disabled=l.disabled,l.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:m});if(s.ok){const[l,p]=await s.json(),E=d.createElement("template"),b=new Map;e.querySelectorAll("m-formslot").forEach(t=>{t.innerHTML=""}),E.innerHTML=l;for(const t of i)t.disabled=t._disabled,delete t._disabled;for(const t of E.content.childNodes){if(t.nodeType===1){const o=t,r=c(o,"formslot"),a=r?'m-formslot[name="'+r+'"]':"m-formslot",f=r?e.querySelector(a)??d.querySelector(a):e.querySelector(a);if(f){f.innerHTML="",b.set(o,f);continue}}u(e,t)}for(const[t,o]of b){const r=c(o,"onupdate"),a=c(o,"scope");switch(c(o,"mode")){case"insertbefore":o.before(t);break;case"insertafter":o.after(t);break;default:u(o,t)}r&&$fmap.get(Number(r))?.call($signals?.(Number(a))??o,{type:"update",target:o})}setTimeout(()=>{i.some(t=>!t.validity.valid)||e.reset()},0),p&&(u(d.body,d.createElement("script")).textContent=p+";document.currentScript.remove();")}};}`;
 var RPC_JS = `{window.$RPC=(e,t)=>new Proxy(Object.create(null),{get(s,r){if(t.includes(r))return(...i)=>fetch(location.href,{method:"POST",body:JSON.stringify({fn:r,args:i}),headers:{"x-rpc":"true","x-rpc-id":e.toString()}}).then(async o=>{const{error:n,result:u}=await o.json();if(n)throw new Error(n);return u})}});}`;
 
 // runtime/utils.ts
@@ -179,7 +179,7 @@ var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
 
 // version.ts
-var VERSION = "0.10.0-beta.4";
+var VERSION = "0.10.0-beta.5";
 
 // render.ts
 var FunctionIdGenerator = class extends Map {
@@ -470,7 +470,7 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
       const url = "new URL(" + stringify(request.url) + ")";
       const urlWithParams = params ? "Object.assign(" + url + "," + stringify(params) + ")" : url;
       if (componentMode) {
-        if (!routeForm) {
+        if (!routeForm && params) {
           js += "$signals(0).url=" + urlWithParams + ";";
         }
       } else {
@@ -924,7 +924,7 @@ async function renderNode(rc, node, stripSlotProp) {
                     break;
                   case "route":
                     if (tag === "form") {
-                      buffer += ' onsubmit="$onrfs(event)"';
+                      buffer += ' onsubmit="$onRFS(event)"';
                       rc.flags.runtime |= FORM;
                       break;
                     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mono-jsx",
-  "version": "0.10.0-beta.4",
+  "version": "0.10.0-beta.5",
   "description": "`<html>` as a `Response` (Yet another JSX runtime for server-side rendering).",
   "type": "module",
   "module": "./index.mjs",

package/types/render.d.ts

@@ -1,6 +1,5 @@
 /// <reference path="./htmx.d.ts" />
 
-import { inflate } from "node:zlib";
 import type { ComponentType } from "./jsx.d.ts";
 
 export type MaybeModule<T> = T | Promise<{ default: T; FormHandler?: Function }>;