mono-jsx 0.6.9 → 0.6.10

package/README.md

@@ -268,9 +268,7 @@ function Button(this: FC<{ count: 0 }>, props: { role: string }) {
 }
 ```
 
-### Using `<form>` Element
-
-mono-jsx supports `<form>` elements with the `action` attribute. The `action` attribute can be a string URL or a function that accepts a `FormData` object. The function will be called on form submission, and the `FormData` object will contain the form data.
+mono-jsx allows you to use a function as the value of the `action` attribute of the `<form>` element. The function will be called on form submission, and the `FormData` object will contain the form data.
 
 ```tsx
 function App() {
@@ -415,11 +413,7 @@ function App(this: FC<{ input: string }>) {
   return (
     <div>
       <h1>{this.computed(() => this.input + "!")}</h1>
-
-      <form action={(fd) => this.input = fd.get("input") as string}>
-        <input type="text" name="input" value={"" + this.input} />
-        <button type="submit">Submit</button>
-      </form>
+      <input type="text" $value={this.input} />
     </div>
   )
 }
@@ -534,6 +528,21 @@ function App(this: FC<{ lang: "en" | "zh" | "🙂" }>) {
 }
 ```
 
+### Form Input Bindings with `$value` Attribute
+
+You can use the `$value` attribute to bind a signal to the value of a form input element. The `$value` attribute is a two-way data binding, which means that when the input value changes, the signal will be updated, and when the signal changes, the input value will be updated.
+
+```tsx
+function App(this: FC<{ value: string }>) {
+  this.value = "Welcome to mono-jsx";
+  this.effect(() => {
+    console.log("value changed:", this.value);
+  });
+  // return <input value={this.value} oninput={e => this.value = e.target.value} />;
+  return <input $value={this.value} />;
+}
+```
+
 ### Limitation of Signals
 
 1\. Arrow function are non-stateful components.

package/jsx-runtime.mjs

@@ -12,9 +12,9 @@ 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,t,r)=>{let n=l.parentElement;return n.tagName==="M-GROUP"&&(n=n.previousElementSibling),()=>{let e=r();e===!1||e===null||e===void 0?n.removeAttribute(t):typeof e=="object"&&e!==null&&(t==="class"||t==="style"||t==="props")?t==="class"?n.setAttribute(t,$cx(e)):t==="style"?$applyStyle(n,e):n.setAttribute(t,JSON.stringify(e)):n.setAttribute(t,e===!0?"":e)}};window.$renderAttr=s;}`;
-var RENDER_TOGGLE_JS = `{var s=(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=s;}`;
-var RENDER_SWITCH_JS = `{var u=(s,d)=>{let r,i=s.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 s.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)}r=""+d(),s.replaceChildren(...t.has(r)?t.get(r):l)}};window.$renderSwitch=u;}`;
+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_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;}`;
 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 LAZY_JS = `{const r=document,o=(t,s)=>t.getAttribute(s),i=(t,s=[])=>t.replaceChildren(...s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#e;#i;#n;#s;async#r(){if(!this.#t){i(this);return}const t={"x-component":this.#t,"x-props":this.#e||"{}","x-flags":$FLAGS},s=new AbortController;this.#n?.abort(),this.#n=s,i(this,this.#i);const e=await fetch(location.href,{headers:t,signal:s.signal});if(!e.ok)throw i(this),new Error("Failed to fetch component '"+this.#t+"'");const[h,n]=await e.json();this.innerHTML=h,n&&(r.body.appendChild(r.createElement("script")).textContent=n)}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.refresh())}get props(){return this.#e?JSON.parse(this.#e):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#e&&(this.#e=s,this.refresh())}connectedCallback(){setTimeout(()=>{if(!this.#i){const t=o(this,"props");this.#t=o(this,"name"),this.#e=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#i=[...this.childNodes]}this.#r()})}disconnectedCallback(){i(this,this.#i),this.#n?.abort(),this.#n=void 0,this.#s&&clearTimeout(this.#s),this.#s=void 0}attributeChangedCallback(t,s,e){this.#t&&e&&(t==="name"?this.name=e:t==="props"&&(this.props=e))}refresh(){this.#s&&clearTimeout(this.#s),this.#s=setTimeout(()=>{this.#s=void 0,this.#r()},50)}});}`;
@@ -135,7 +135,7 @@ var $signal = Symbol.for("mono.signal");
 var $vnode = Symbol.for("jsx.vnode");
 
 // version.ts
-var VERSION = "0.6.8";
+var VERSION = "0.6.9";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -358,7 +358,9 @@ async function render(node, options, write, writeJS, componentMode) {
       js += 'window.$FLAGS="' + scope + "|" + chunk + "|" + runtimeFlag + '";';
     }
     if (rc.mfs.size > 0) {
-      js += rc.mfs.toJS((scope, seq, fn) => "function $MF_" + scope + "_" + seq + "(){(" + fn.toString() + ").apply(this,arguments)};");
+      js += rc.mfs.toJS(
+        (scope, seq, fn) => "function $MF_" + scope + "_" + seq + "(){(" + (fn.str ?? String(fn)) + ").apply(this,arguments)};"
+      );
       rc.mfs.clear();
     }
     if (hasEffect) {
@@ -383,7 +385,7 @@ async function render(node, options, write, writeJS, componentMode) {
     if (rc.mcs.size > 0) {
       js += rc.mcs.toJS((scope, seq, signal) => {
         const { compute, deps } = signal[$signal].key;
-        return "$MC(" + scope + "," + seq + ",function(){return(" + compute.toString() + ").call(this)}," + stringify([...deps.values()]) + ");";
+        return "$MC(" + scope + "," + seq + ",function(){return(" + String(compute) + ").call(this)}," + stringify([...deps.values()]) + ");";
       });
       rc.mcs.clear();
     }
@@ -657,7 +659,7 @@ async function renderNode(rc, node, stripSlotProp) {
                   const write2 = (chunk) => {
                     attrModifiers += chunk;
                   };
-                  renderSignal({ ...rc, write: write2 }, signalValue, [propName]);
+                  renderSignal({ ...rc, write: write2 }, signalValue, [propName === "$value" ? "value" : propName]);
                   rc.flags.runtime |= RENDER_ATTR;
                 }
                 buffer += attr;
@@ -700,32 +702,31 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
   let attr = "";
   let addonHtml = "";
   let signalValue;
+  let scopeId = rc.fcCtx?.scopeId;
   if (isObject(attrValue)) {
     let signal;
     if (isSignal(attrValue)) {
       signal = attrValue;
     } else {
-      const { fcCtx } = rc;
-      if (fcCtx) {
+      if (scopeId) {
         const deps = /* @__PURE__ */ new Set();
         const patches = [];
         const staticProps = traverseProps(attrValue, (path, value) => {
           const { scope, key } = value[$signal];
           if (isString(key)) {
             patches.push([
-              (scope !== fcCtx.scopeId ? "$signals(" + scope + ")" : "this") + "[" + stringify(key) + "]",
+              (scope !== scopeId ? "$signals(" + scope + ")" : "this") + "[" + stringify(key) + "]",
               ...path
             ].join(","));
             deps.add(scope + ":" + key);
           } else {
-            patches.push(["(" + key.compute.toString() + ")(),", ...path].join(","));
+            patches.push(["(" + String(key.compute) + ")(),", ...path].join(","));
             for (const dep of key.deps) {
               deps.add(dep);
             }
           }
         });
         if (patches.length > 0) {
-          const { scopeId } = fcCtx;
           const compute = "()=>$patch(" + stringify(staticProps) + ",[" + patches.join("],[") + "])";
           signal = Signal(scopeId, { compute, deps }, staticProps);
         }
@@ -772,7 +773,7 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
         } else {
           const refId = rc.fcCtx.refs++;
           const effects = signals[Symbol.for("effects")];
-          effects.push("()=>(" + attrValue.toString() + ')(this.refs["' + refId + '"])');
+          effects.push("()=>(" + String(attrValue) + ')(this.refs["' + refId + '"])');
           attr = " data-ref=" + toAttrStringLit(rc.fcCtx.scopeId + ":" + refId);
         }
       } else if (attrValue instanceof Ref) {
@@ -781,8 +782,8 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
       break;
     case "action":
       if (typeof attrValue === "function") {
-        const scopeId = rc.fcCtx?.scopeId;
-        attr = ' onsubmit="$onsubmit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
+        const scopeId2 = rc.fcCtx?.scopeId;
+        attr = ' onsubmit="$onsubmit(event,$MF_' + (scopeId2 ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId2) + toStr(scopeId2, (i) => "," + i) + ')"';
       } else if (isString(attrValue)) {
         attr = " action=" + toAttrStringLit(attrValue);
       }
@@ -792,9 +793,20 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
         attr = " slot=" + toAttrStringLit(attrValue);
       }
       break;
+    case "$value":
+      attr = " value=" + toAttrStringLit(String(attrValue));
+      if (signalValue) {
+        const { key } = signalValue[$signal];
+        if (isString(key)) {
+          const fn = () => {
+          };
+          fn.str = "e=>this[" + toAttrStringLit(key) + "]=e.target.value";
+          attr += ' oninput="$emit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(fn, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
+        }
+      }
+      break;
     default:
       if (attrName.startsWith("on") && typeof attrValue === "function") {
-        const scopeId = rc.fcCtx?.scopeId;
         attr = " " + escapeHTML(attrName.toLowerCase()) + '="$emit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
       } else if (attrValue === false || attrValue === null || attrValue === void 0) {
       } else {
@@ -957,7 +969,7 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
     return Signal(scopeId, { compute, deps }, value);
   };
   const markEffect = (effect) => {
-    effects.push(effect.toString());
+    effects.push(String(effect));
   };
   const mark = ({ signals: signals2, write }) => {
     if (effects.length > 0) {

package/package.json

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

package/types/html.d.ts

@@ -185,7 +185,7 @@ export namespace HTML {
     src?: string;
     step?: number | string;
     type?: InputType;
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number | ReadonlyArray<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.
@@ -197,8 +197,15 @@ export namespace HTML {
      * @see https://developer.mozilla.org/en-US/docs/Web/API/Popover_API
      */
     popovertargetaction?: "hide" | "show" | "toggle";
-    // for type="search"
+    /**
+     * For type="search"
+     */
     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
+     */
+    $value?: string | number | ReadonlyArray<string | number>;
   }
 
   interface OptionAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -216,7 +223,12 @@ export namespace HTML {
     name?: string;
     required?: boolean;
     size?: number;
-    value?: string | ReadonlyArray<string> | number;
+    value?: string | number | ReadonlyArray<string | number>;
+    /**
+     * @mono-jsx: Two-way binding prop that automatically creates value and oninput attributes for signal binding
+     * Similar to Vue's v-model
+     */
+    $value?: string | number | ReadonlyArray<string | number>;
   }
 
   interface TextareaAttributes<T extends EventTarget> extends GlobalAttributes<T> {
@@ -235,6 +247,11 @@ export namespace HTML {
     value?: string;
     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
+     */
+    $value?: string;
   }
 
   interface ButtonAttributes<T extends EventTarget> extends GlobalAttributes<T> {

package/types/mono.d.ts

@@ -3,15 +3,37 @@ import type * as CSS from "./css.d.ts";
 type D9 = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
 type D100 = 0 | D9 | `${D9}${0 | D9}` | 100;
 
-export interface BaseCSSProperties extends CSS.Properties<string | number> {}
+export interface BaseCSSProperties extends CSS.Properties<string | number> {
+  /**
+   * The field-sizing CSS property enables you to control the sizing behavior of elements that are given a default preferred size, such as form control elements. This property enables you to override the default sizing behavior, allowing form controls to adjust in size to fit their contents.
+   * @see https://developer.mozilla.org/docs/Web/CSS/field-sizing
+   */
+  fieldSizing?: "fixed" | "content";
+  /**
+   * The view-transition-class CSS property provides the selected elements with an identifying class (a <custom-ident>), providing an additional method of styling the view transitions for those elements.
+   * @see https://developer.mozilla.org/docs/Web/CSS/view-transition-class
+   */
+  "view-transition-class"?: string;
+  /**
+   * The view-transition-name CSS property specifies the view transition snapshot that selected elements will participate in, which enables an element to be animated separately from the rest of the page during a view transition.
+   * @see https://developer.mozilla.org/docs/Web/CSS/view-transition-name
+   */
+  "view-transition-name"?: string;
+}
 
 export interface AtRuleCSSProperties {
   [key: `@container${" " | "("}${string}`]: BaseCSSProperties;
   [key: `@media${" " | "("}${string}`]: BaseCSSProperties;
-  [key: `@supports${" " | "("}${string}`]: BaseCSSProperties;
   [key: `@keyframes ${string}`]: {
     [key in "from" | "to" | `${D100}%`]?: BaseCSSProperties;
   };
+  [key: `@supports${" " | "("}${string}`]: BaseCSSProperties;
+  "@view-transition"?: {
+    /**
+     * Specifies the effect this at-rule will have on the document's view transition behavior.
+     */
+    navigation?: "auto" | "none";
+  };
 }
 
 export interface PseudoCSSProperties {