mono-jsx 0.6.0 → 0.6.1

package/jsx-runtime.mjs

@@ -1,60 +1,18 @@
 // runtime/index.ts
-var VERSION = "0.6.0";
-var CX_JS = `{var r=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;var n=e=>r(e)?e:o(e)?Array.isArray(e)?e.map(n).filter(Boolean).join(" "):Object.entries(e).filter(([,t])=>!!t).map(([t])=>t).join(" "):"";window.$cx=n;}`;
-var STYLE_TO_CSS_JS = `{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"]),a=e=>typeof e=="string",l=e=>typeof e=="object"&&e!==null,u=e=>e.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+"-"+t.charAt(1).toLowerCase());var p=e=>{let t=[],o=[],n=new f;for(let[r,i]of Object.entries(e))switch(r.charCodeAt(0)){case 58:o.push(null,r+"{"+s(i)+"}");break;case 64:o.push(r+"{",null,"{"+s(i)+"}}");break;case 38:o.push(null,r.slice(1)+"{"+s(i)+"}");break;default:t.push([r,i])}return t.length>0&&(n.inline=s(t)),o.length>0&&(n.css=o),n},s=e=>{if(l(e)){let t="";for(let[o,n]of Array.isArray(e)?e:Object.entries(e))if(a(n)||typeof n=="number"){let r=u(o),i=typeof n=="number"?c.has(r)?""+n:n+"px":""+n;t+=(t?";":"")+r+":"+(r==="content"?JSON.stringify(i):i)}return t}return""},f=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$styleToCSS=p;}`;
+var VERSION = "0.6.1";
+var CX_JS = `{var i=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".split(",")),r=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;var n=e=>r(e)?e:o(e)?Array.isArray(e)?e.map(n).filter(Boolean).join(" "):Object.entries(e).filter(([,t])=>!!t).map(([t])=>t).join(" "):"";window.$cx=n;}`;
+var STYLE_TO_CSS_JS = `{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".split(",")),a=e=>typeof e=="string",l=e=>typeof e=="object"&&e!==null,u=e=>e.replace(/[a-z][A-Z]/g,t=>t.charAt(0)+"-"+t.charAt(1).toLowerCase());var p=e=>{let t=[],o=[],n=new f;for(let[r,i]of Object.entries(e))switch(r.charCodeAt(0)){case 58:o.push(null,r+"{"+s(i)+"}");break;case 64:o.push(r+"{",null,"{"+s(i)+"}}");break;case 38:o.push(null,r.slice(1)+"{"+s(i)+"}");break;default:t.push([r,i])}return t.length>0&&(n.inline=s(t)),o.length>0&&(n.css=o),n},s=e=>{if(l(e)){let t="";for(let[o,n]of Array.isArray(e)?e:Object.entries(e))if(a(n)||typeof n=="number"){let r=u(o),i=typeof n=="number"?c.has(r)?""+n:n+"px":""+n;t+=(t?";":"")+r+":"+(r==="content"?JSON.stringify(i):i)}return t}return""},f=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$styleToCSS=p;}`;
 var EVENT_JS = `{var w=window;w.$emit=(e,f,s)=>f.call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,f,s)=>{e.preventDefault();f.call(w.$signals?.(s)??e.target,new FormData(e.target),e)};}`;
 var SIGNALS_JS = `{let p;const h=globalThis,b=new Map,w=new Map,f=e=>w.get(e)??w.set(e,N(e)).get(e),u=(e,t)=>e.getAttribute(t),E=(e,t)=>e.replaceChildren(...t),M=()=>Object.create(null),N=e=>{const t=M(),l=(r,c)=>{t[r]=c},n=new Map,o=(r,c)=>{let i=n.get(r);return i||(i=new Set,n.set(r,i)),i.add(c),()=>{i.delete(c),i.size===0&&n.delete(r)}},s=new Proxy(M(),{get:(r,c)=>document.querySelector("[data-ref='"+e+":"+c+"']")});return new Proxy(t,{get:(r,c,i)=>{switch(c){case"$init":return l;case"$watch":return o;case"app":return f(0);case"refs":return s;default:return p?.(e,c),Reflect.get(r,c,i)}},set:(r,c,i,a)=>{if(i!==Reflect.get(r,c,a)){const d=n.get(c);return d&&queueMicrotask(()=>d.forEach(g=>g())),Reflect.set(r,c,i,a)}return!1}})},T=(e,t,l)=>{if(t==="toggle"){let n;return()=>{if(!n){const o=e.firstElementChild;o&&o.tagName==="TEMPLATE"&&o.hasAttribute("m-slot")?n=[...o.content.childNodes]:n=[...e.childNodes]}E(e,l()?n:[])}}if(t==="switch"){let n,o=u(e,"match"),s,r,c=i=>s.get(i)??s.set(i,[]).get(i);return()=>{if(!s){s=new Map,r=[];for(const i of e.childNodes)if(i.nodeType===1&&i.tagName==="TEMPLATE"&&i.hasAttribute("m-slot")){for(const a of i.content.childNodes)a.nodeType===1&&a.hasAttribute("slot")?c(u(a,"slot")).push(a):r.push(a);i.remove()}else o?c(o).push(i):r.push(i)}n=""+l(),E(e,s.has(n)?s.get(n):r)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),o=e.parentElement;return o.tagName==="M-GROUP"&&(o=o.previousElementSibling),()=>{const s=l();if(s===!1)o.removeAttribute(n);else if(typeof s=="object"&&s!==null&&(n==="class"||n==="style"||n==="props")){let r;if(n==="class")r=$cx(s);else if(n==="style"){const{inline:c,css:i}=$styleToCSS(s);i||c&&(r=c)}else r=JSON.stringify(s);r&&o.setAttribute(n,r)}else s!=null&&o.setAttribute(n,s===!0?"":""+s)}}return()=>e.textContent=""+l()},k=e=>{const t=e.indexOf(":");return t>0?[Number(e.slice(0,t)),e.slice(t+1)]:null},y=async e=>{const t=e();return t!==void 0?t:(await new Promise(l=>setTimeout(l,0)),y(e))},v=(e,t)=>customElements.define(e,class extends HTMLElement{disposes=[];connectedCallback(){t(this)}disconnectedCallback(){this.disposes.forEach(l=>l()),this.disposes.length=0}});v("m-signal",e=>{const t=f(Number(u(e,"scope"))),l=u(e,"key");if(l)e.disposes.push(t.$watch(l,T(e,u(e,"mode"),()=>t[l])));else{const n=Number(u(e,"computed"));y(()=>b.get(n)).then(([o,s])=>{const r=T(e,u(e,"mode"),o.bind(t));s.forEach(c=>{const[i,a]=k(c);e.disposes.push(f(i).$watch(a,r))})})}}),v("m-effect",e=>{const{disposes:t}=e,l=Number(u(e,"scope")),n=Number(u(e,"n")),o=new Array(n);t.push(()=>{o.forEach(s=>typeof s=="function"&&s()),o.length=0});for(let s=0;s<n;s++){const r="$ME_"+l+"_"+s;y(()=>h[r]).then(c=>{const i=[],a=f(l),d=()=>{o[s]=c.call(a)};p=(g,m)=>i.push([g,m]),d(),p=void 0;for(const[g,m]of i)t.push(f(g).$watch(m,d))},()=>{})}}),h.$signals=e=>e!==void 0?f(e):void 0,h.$MS=(e,t)=>{const[l,n]=k(e);f(l).$init(n,t)},h.$MC=(e,t,l)=>{b.set(e,[t,l])},h.$merge=(e,...t)=>{for(const[l,...n]of t){let o=e;const s=n.pop();for(const r of n)o=o[r];o[s]=l}return e};}`;
 var SUSPENSE_JS = `{const s=new Map,i=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{s.set(i(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=e.firstChild?.content.childNodes,o=i(e),n=s.get(o);n&&(e.hasAttribute("next")?n.before(...t):(s.delete(o),e.hasAttribute("done")?n.remove():n.replaceWith(...t)),e.remove())})});}`;
 var LAZY_JS = `{const n=document,r=(t,e)=>t.getAttribute(e);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#e;#i;#n;#t;#s;async#r(){const t={"x-component":this.#e,"x-props":this.#i??"{}","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq},e=new AbortController;this.#s?.abort(),this.#s=e;const s=await fetch(location.href,{headers:t,signal:e.signal});if(!s.ok)throw new Error("Failed to fetch component '"+name+"'");const[o,i]=await s.json();this.innerHTML=o,i&&(n.body.appendChild(n.createElement("script")).textContent=i)}connectedCallback(){setTimeout(()=>{if(!this.#e){const t=r(this,"name"),e=r(this,"props");if(!t)throw new Error("Component name is required");this.#e=t,this.#i=e?.startsWith("base64,")?atob(e.slice(7)):null,this.#n=[...this.childNodes]}this.#r()})}disconnectedCallback(){this.replaceChildren(...this.#n),this.#s?.abort(),this.#t&&clearTimeout(this.#t),this.#s=void 0,this.#t=void 0}attributeChangedCallback(t,e,s){this.#e&&s&&e!==s&&(t==="name"?this.#e=s:t==="props"&&(this.#i=s),this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.#t=void 0,this.#r()},20))}});}`;
-var ROUTER_JS = `{const n=document,a=t=>t.split("#",1)[0];customElements.define("m-router",class extends HTMLElement{#t;#e;#s;async#n(t){const i={"x-route":"true","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq},e=new AbortController;this.#s?.abort(),this.#s=e;const s=await fetch(t,{headers:i,signal:e.signal});if(s.status===404){this.replaceChildren(...this.#t);return}if(!s.ok)throw new Error("Failed to fetch route: "+s.status+" "+s.statusText);const[r,o]=await s.json();this.innerHTML=r,o&&(n.body.appendChild(n.createElement("script")).textContent=o)}#i(){n.querySelectorAll("nav").forEach(t=>{const i=t.getAttribute("data-active-class")??"active";t.querySelectorAll("a").forEach(({href:e,classList:s})=>{a(e)===a(location.href)?s.add(i):s.remove(i)})})}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.getAttribute("status")==="404")this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#e=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:i,href:e,rel:s,target:r}=t.target;i||s==="external"||r==="_blank"||!e||!e.startsWith(location.origin)||a(e)===a(location.href)||(t.preventDefault(),history.pushState({},"",e),this.#n(e),this.#i())},n.addEventListener("click",this.#e),this.#i()}disconnectedCallback(){n.removeEventListener("click",this.#e),this.#s?.abort(),this.#e=void 0,this.#s=void 0}});}`;
+var ROUTER_JS = `{const n=document,a=t=>t.split("#",1)[0];customElements.define("m-router",class extends HTMLElement{#t;#e;#s;#i;async#o(t){const i={"x-route":"true","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq},e=new AbortController;this.#i?.abort(),this.#i=e;const s=await fetch(t,{headers:i,signal:e.signal});if(s.status===404){this.replaceChildren(...this.#t);return}if(!s.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+s.status+" "+s.statusText);const[o,r]=await s.json();this.innerHTML=o,r&&(n.body.appendChild(n.createElement("script")).textContent=r)}#n(){n.querySelectorAll("nav a").forEach(t=>{const{href:i,classList:e}=t,s=t.closest("nav").getAttribute("data-active-class")??"active";a(i)===a(location.href)?e.add(s):e.remove(s)})}#a(t){this.#o(t),this.#n()}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.getAttribute("status")==="404")this.#t=[...this.childNodes];else{this.#t=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")){this.#t.push(...t.content.childNodes),t.remove();break}}}),this.#e=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:i,href:e,rel:s,target:o}=t.target;i||s==="external"||o==="_blank"||!e||!e.startsWith(location.origin)||a(e)===a(location.href)||(t.preventDefault(),history.pushState({},"",e),this.#a(e))},this.#s=()=>this.#a(location.href),n.addEventListener("click",this.#e),addEventListener("popstate",this.#s),this.#n()}disconnectedCallback(){n.removeEventListener("click",this.#e),removeEventListener("popstate",this.#s),this.#i?.abort(),this.#e=void 0,this.#s=void 0,this.#i=void 0}});}`;
 
 // runtime/utils.ts
 var regexpHtmlSafe = /["'&<>]/;
-var cssBareUnitProps = /* @__PURE__ */ 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"
-]);
+var cssBareUnitProps = 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".split(",")
+);
 var isString = (v) => typeof v === "string";
 var isObject = (v) => typeof v === "object" && v !== null;
 var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());

package/package.json

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

package/types/html.d.ts

@@ -119,6 +119,11 @@ export namespace HTML {
     type?: string;
   }
 
+  interface NavAttributes<T extends EventTarget> extends GlobalAttributes<T> {
+    /** @mono-jsx: This attribute is used to specify the class name for the active link. */
+    "data-active-class"?: string;
+  }
+
   interface ImgAttributes<T extends EventTarget> extends GlobalAttributes<T>, LoaderElementAttributes<T> {
     alt?: string;
     crossOrigin?: CrossOrigin;
@@ -984,7 +989,7 @@ export namespace HTML {
     menu: MenuAttributes<HTMLElement>;
     meta: MetaAttributes<HTMLMetaElement>;
     meter: MeterAttributes<HTMLMeterElement>;
-    nav: GlobalAttributes<HTMLElement>;
+    nav: NavAttributes<HTMLElement>;
     noindex: GlobalAttributes<HTMLElement>;
     noscript: GlobalAttributes<HTMLElement>;
     object: ObjectAttributes<HTMLObjectElement>;