mono-jsx 0.6.10 → 0.6.11

package/jsx-runtime.mjs

@@ -12,7 +12,7 @@ var ROUTER = 512;
 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 CX_JS = `{var n=e=>typeof e=="string"?e:typeof e=="object"&&e!==null?Array.isArray(e)?e.map(n).filter(Boolean).join(" "):Object.entries(e).filter(([,t])=>!!t).map(([t])=>t).join(" "):"";window.$cx=n;}`;
 var STYLE_JS = `{var a=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;var l=e=>typeof e=="string";var u=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());var p=e=>{let r=[],t=[],n=new g;for(let[o,s]of Object.entries(e))switch(o.charCodeAt(0)){case 58:t.push(null,o+"{"+c(s)+"}");break;case 64:t.push(o+"{",null,"{"+c(s)+"}}");break;case 38:t.push(null,o.slice(1)+"{"+c(s)+"}");break;default:r.push([o,s])}return r.length>0&&(n.inline=c(r)),t.length>0&&(n.css=t),n},f=(e,r)=>{let{inline:t,css:n}=p(r);if(n){let o="data-css-",s="["+o+(Date.now()+Math.random()).toString(36).replace(".","")+"]";document.head.appendChild(document.createElement("style")).textContent=(t?s+"{"+t+"}":"")+n.map(i=>i===null?s:i).join(""),e.getAttributeNames().forEach(i=>i.startsWith(o)&&e.removeAttribute(i)),e.setAttribute(s.slice(1,-1),"")}else t&&e.setAttribute("style",t)},c=e=>{if(typeof e=="object"&&e!==null){let r="";for(let[t,n]of Array.isArray(e)?e:Object.entries(e))if(l(n)||typeof n=="number"){let o=u(t),s=typeof n=="number"?a.test(t)?""+n:n+"px":""+n;r+=(r?";":"")+o+":"+(o==="content"?JSON.stringify(s):s)}return r}return""},g=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=f;}`;
-var RENDER_ATTR_JS = `{var s=(l,n,r)=>{let t=l.parentElement;return t.tagName==="M-GROUP"&&(t=t.previousElementSibling),()=>{let e=r();e===!1||e===null||e===void 0?t.removeAttribute(n):typeof e=="object"&&e!==null?n==="class"?t.setAttribute(n,$cx(e)):n==="style"?$applyStyle(t,e):t.setAttribute(n,JSON.stringify(e)):n==="value"?t.value=String(e):t.setAttribute(n,e===!0?"":e)}};window.$renderAttr=s;}`;
+var RENDER_ATTR_JS = `{var s=(l,n,r)=>{let e=l.parentElement;return e.tagName==="M-GROUP"&&(e=e.previousElementSibling),()=>{let t=r();n==="value"?e.value=String(t):n==="checked"?e.checked=!!t:typeof t=="boolean"?e.toggleAttribute(n,t):t==null?e.removeAttribute(n):typeof t=="object"?n==="class"?e.setAttribute(n,$cx(t)):n==="style"?$applyStyle(e,t):e.setAttribute(n,JSON.stringify(t)):e.setAttribute(n,String(t))}};window.$renderAttr=s;}`;
 var RENDER_TOGGLE_JS = `{var r=(n,l)=>{let e;return()=>{if(!e){let t=n.firstElementChild;t&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")?e=[...t.content.childNodes]:e=[...n.childNodes]}n.replaceChildren(...l()?e:[])}};window.$renderToggle=r;}`;
 var RENDER_SWITCH_JS = `{var u=(r,d)=>{let s,i=r.getAttribute("value"),t,l,o=e=>t.get(e)??t.set(e,[]).get(e);return()=>{if(!t){t=new Map,l=[];for(let e of r.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-slot")){for(let n of e.content.childNodes)n.nodeType===1&&n.hasAttribute("slot")?o(n.getAttribute("slot")).push(n):l.push(n);e.remove()}else i?o(i).push(e):l.push(e)}s=""+d(),r.replaceChildren(...t.has(s)?t.get(s):l)}};window.$renderSwitch=u;}`;
 var SIGNALS_JS = `{let m;const h=window,b=new Map,k=new Map,l=n=>k.get(n)??k.set(n,M(n)).get(n),y=()=>Object.create(null),f=(n,e)=>n.getAttribute(e),M=n=>{const e=y(),t=(r,c)=>{e[r]=c},s=new Map,a=(r,c)=>{let o=s.get(r);return o||(o=new Set,s.set(r,o)),o.add(c),()=>{o.delete(c),o.size===0&&s.delete(r)}},i=new Proxy(y(),{get:(r,c)=>document.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(r,c,o)=>{switch(c){case"$init":return t;case"$watch":return a;case"app":return l(0);case"refs":return i;default:return m?.(n,c),Reflect.get(r,c,o)}},set:(r,c,o,d)=>{if(o!==Reflect.get(r,c,d)){const u=s.get(c);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(r,c,o,d)}return!1}})},$=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}return e&&e.length>2&&e.startsWith("[")&&e.endsWith("]")?$renderAttr(n,e.slice(1,-1),t):()=>n.textContent=""+t()},E=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},p=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),p(n))},S=n=>{typeof n=="function"&&n()},v=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});v("m-signal",n=>{const e=Number(f(n,"scope")),t=l(e),s=f(n,"key");if(s)n.disposes.push(t.$watch(s,$(n,f(n,"mode"),()=>t[s])));else{const a=Number(f(n,"computed"));p(()=>b.get(e*1e9+a)).then(([i,r])=>{const c=$(n,f(n,"mode"),i.bind(t));r.forEach(o=>{const[d,u]=E(o);n.disposes.push(l(d).$watch(u,c))})})}}),v("m-effect",n=>{const{disposes:e}=n,t=Number(f(n,"scope")),s=Number(f(n,"n")),a=new Array(s);e.push(()=>{a.forEach(S),a.length=0});for(let i=0;i<s;i++){const r="$ME_"+t+"_"+i;p(()=>h[r]).then(c=>{const o=[],d=l(t),u=()=>{S(a[i]),a[i]=c.call(d)};m=(g,w)=>o.push([g,w]),u(),m=void 0;for(const[g,w]of o)e.push(l(g).$watch(w,u))},()=>{})}}),h.$MS=(n,e)=>{const[t,s]=E(n);l(t).$init(s,e)},h.$MC=(n,e,t,s)=>{b.set(n*1e9+e,[t,s])},h.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let i=n;for(const r of s)i=i[r];i[a]=t}return n},h.$signals=n=>n!==void 0?l(n):void 0;}`;
@@ -135,7 +135,7 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 
 // version.ts
-var VERSION = "0.6.9";
+var VERSION = "0.6.10";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -651,7 +651,7 @@ async function renderNode(rc, node, stripSlotProp) {
                 if (propName === "children") {
                   continue;
                 }
-                const [attr, addonHtml, signalValue] = renderAttr(rc, propName, propValue, stripSlotProp);
+                const [attr, addonHtml, signalValue, binding] = renderAttr(rc, propName, propValue, stripSlotProp);
                 if (addonHtml) {
                   write(addonHtml);
                 }
@@ -659,7 +659,7 @@ async function renderNode(rc, node, stripSlotProp) {
                   const write2 = (chunk) => {
                     attrModifiers += chunk;
                   };
-                  renderSignal({ ...rc, write: write2 }, signalValue, [propName === "$value" ? "value" : propName]);
+                  renderSignal({ ...rc, write: write2 }, signalValue, [binding ? propName.slice(1) : propName]);
                   rc.flags.runtime |= RENDER_ATTR;
                 }
                 buffer += attr;
@@ -702,6 +702,7 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
   let attr = "";
   let addonHtml = "";
   let signalValue;
+  let binding = false;
   let scopeId = rc.fcCtx?.scopeId;
   if (isObject(attrValue)) {
     let signal;
@@ -793,16 +794,23 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
         attr = " slot=" + toAttrStringLit(attrValue);
       }
       break;
+    case "$checked":
     case "$value":
-      attr = " value=" + toAttrStringLit(String(attrValue));
+      if (!(attrValue === false || attrValue === null || attrValue === void 0)) {
+        attr = " " + attrName.slice(1);
+        if (attrValue !== true) {
+          attr += "=" + toAttrStringLit(String(attrValue));
+        }
+      }
       if (signalValue) {
         const { key } = signalValue[$signal];
         if (isString(key)) {
           const fn = () => {
           };
-          fn.str = "e=>this[" + toAttrStringLit(key) + "]=e.target.value";
+          fn.str = "e=>this[" + toAttrStringLit(key) + "]=e.target." + attrName.slice(1);
           attr += ' oninput="$emit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(fn, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
         }
+        binding = true;
       }
       break;
     default:
@@ -816,7 +824,7 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
         }
       }
   }
-  return [attr, addonHtml, signalValue];
+  return [attr, addonHtml, signalValue, binding];
 }
 async function renderFC(rc, fc, props, eager) {
   const { write } = rc;

package/package.json

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

package/types/html.d.ts

@@ -44,7 +44,9 @@ export namespace HTML {
 
   /** Global HTML attributes from https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes */
   interface GlobalAttributes<T extends EventTarget> extends EventAttributes<T>, Aria.Attributes, Mono.BaseAttributes, JSX.HtmlTag {
-    // @mono-jsx
+    /** @mono-jsx
+     *  A reference to the element.
+     */
     ref?: HTMLElement | ((el: T) => unknown);
     /** Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). */
     id?: string;
@@ -122,7 +124,8 @@ export namespace HTML {
   }
 
   interface NavAttributes<T extends EventTarget> extends GlobalAttributes<T> {
-    /** @mono-jsx: This attribute is used to specify the class name for the active link. */
+    /** @mono-jsx
+     * This attribute is used to specify the class name for the active link. */
     "data-active-class"?: string;
   }
 
@@ -185,7 +188,7 @@ export namespace HTML {
     src?: string;
     step?: number | string;
     type?: InputType;
-    value?: string | number | ReadonlyArray<string | number>;
+    value?: string | number;
     width?: number | string;
     /**
      * Turns a <button> or <input> element into a popover control button; takes the ID of the popover element to control as its value.
@@ -202,10 +205,15 @@ export namespace HTML {
      */
     onSearch?: EventHandler<Event, T>;
     /**
-     * @mono-jsx: Two-way binding prop that automatically creates value and oninput attributes for signal binding
-     * Similar to Vue's v-model
+     * @mono-jsx
+     * Two-way binding prop that automatically creates checked and oninput attributes for signal binding
      */
-    $value?: string | number | ReadonlyArray<string | number>;
+    $checked?: boolean;
+    /**
+     * @mono-jsx
+     * Two-way binding prop that automatically creates value and oninput attributes for signal binding
+     */
+    $value?: string | number;
   }
 
   interface OptionAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -223,12 +231,12 @@ export namespace HTML {
     name?: string;
     required?: boolean;
     size?: number;
-    value?: string | number | ReadonlyArray<string | number>;
+    value?: string | number;
     /**
-     * @mono-jsx: Two-way binding prop that automatically creates value and oninput attributes for signal binding
-     * Similar to Vue's v-model
+     * @mono-jsx
+     * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      */
-    $value?: string | number | ReadonlyArray<string | number>;
+    $value?: string | number;
   }
 
   interface TextareaAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -248,8 +256,8 @@ export namespace HTML {
     wrap?: string;
     onChange?: EventHandler<Event, T>;
     /**
-     * @mono-jsx: Two-way binding prop that automatically creates value and oninput attributes for signal binding
-     * Similar to Vue's v-model
+     * @mono-jsx
+     * Two-way binding prop that automatically creates value and oninput attributes for signal binding
      */
     $value?: string;
   }
@@ -319,7 +327,7 @@ export namespace HTML {
   }
 
   interface DataAttributes<T extends EventTarget> extends GlobalAttributes<T> {
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number;
   }
 
   interface DetailsAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -379,7 +387,7 @@ export namespace HTML {
   }
 
   interface LiAttributes<T extends EventTarget> extends GlobalAttributes<T> {
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number;
   }
 
   interface LinkAttributes<T extends EventTarget> extends GlobalAttributes<T>, LoaderElementAttributes<T> {
@@ -456,7 +464,7 @@ export namespace HTML {
     max?: number | string;
     min?: number | string;
     optimum?: number;
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number;
   }
 
   interface QuoteAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -494,7 +502,7 @@ export namespace HTML {
 
   interface ProgressAttributes<T extends EventTarget> extends GlobalAttributes<T> {
     max?: number | string;
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number;
   }
 
   interface SlotAttributes<T extends EventTarget> extends GlobalAttributes<T> {

package/types/jsx-runtime.d.ts

@@ -2,7 +2,7 @@ import type { FC, VNode } from "./jsx.d.ts";
 
 export const html: JSX.Raw;
 export const JSX: typeof globalThis.JSX;
-export const Fragment: (props: Record<string, unknown>) => VNode;
+export const Fragment: (props: {}) => VNode;
 export const jsx: (tag: string | FC, props: Record<string, unknown>, key?: string | number) => VNode;
 
 export { html as css, html as js, jsx as jsxDEV, jsx as jsxs };