mono-jsx 0.10.0-beta.13 → 0.10.0-beta.14

package/README.md

@@ -1340,11 +1340,6 @@ const routes = {
 }
 ```
 
-> [!TIP]
-> You can use `:invalid` CSS selector to style the form elements with invalid state.
-
-### Handling Route Form Submissions
-
 You can return regular HTML elements in the form handler function, by default it will be appended to the form element. You can add the `mode` attribute on the `<form route>` element to decide where the content should be inserted.
 
 - **"append"** (default): Append the handler output into the form element.
@@ -1366,7 +1361,12 @@ MyRoute.FormHandler = function(this: FC, data: FormData) {
 }
 ```
 
-mono-jsx also provides a built-in `<formslot>` element that is used to control where the form handler content should be inserted. If any `<formslot>` element exists the `mode` attribute on the `<form route>` element will be ignored. It accepts the following modes:
+> [!TIP]
+> You can use `:invalid` CSS selector to style the form elements with invalid state.
+
+### Using `<formslot>` element
+
+mono-jsx provides a built-in `<formslot>` element that is used to control where the form handler content should be inserted. If any `<formslot>` element exists the `mode` attribute on the `<form route>` element will be ignored. It accepts the following modes:
 
 - **"replaceChildren"** (default): Replace children of the `<formslot>` element with the returned HTML.
 - **"insertafter"**: Insert HTML after the `<formslot>` element.
@@ -1393,26 +1393,28 @@ MyRoute.FormHandler = function(this: FC, data: FormData) {
 }
 ```
 
-You can add the `name` prop to specify the name of the formslot element. And `formslot` prop to specify the name of the slot to insert the HTML into.
+You can add the `name` prop to specify the name of the formslot element. And use `formslot` prop in the form handler function to specify the name of the slot to insert the HTML into.
 
 ```tsx
 function MyRoute(this: FC) {
   return (
     <div>
-      <formslot name="info" /> { /* <- "This is info message" will be inserted into the formslot element after submitting the form */ }
       <form route>
         <button type="submit">Send</button>
-        <formslot name="error" /> { /* <- "This is error message" will be inserted into the formslot element after submitting the form */ }
+        <formslot name="info" /> { /* <- "This is info message" will be inserted here */ }
+        <formslot name="error" /> { /* <- "This is error message" will be inserted here */ }
       </form>
     </div>
   )
 }
 
 MyRoute.FormHandler = function(this: FC, data: FormData) {
-  return <>
-    <p formslot="info">This is info message</p>
-    <p formslot="error">This is error message</p>
-  </>
+  return (
+    <>
+      <p formslot="info">This is info message</p>
+      <p formslot="error">This is error message</p>
+    </>
+  )
 }
 ```
 
@@ -1424,7 +1426,7 @@ function MyRoute(this: FC) {
     <form>
       <input type="text" name="message" placeholder="Type Message..." />
       <button type="submit">Send</button>
-      <formslot hiddenonUpdate={(evt) => console.log("message updated:", evt.target.textContent)} />
+      <formslot hidden onUpdate={(evt) => console.log("message updated:", evt.target.textContent)} />
     </form>
   )
 }

package/jsx-runtime.mjs

@@ -16,7 +16,7 @@ var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
 var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
 
 // version.ts
-var VERSION = "0.10.0-beta.13";
+var VERSION = "0.10.0-beta.14";
 
 // runtime/index.ts
 var EVENT = 1;
@@ -43,7 +43,7 @@ var SUSPENSE_JS = `{const i=new Map,o=e=>e.getAttribute("chunk-id"),l=(e,t)=>cus
 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 o=window,r=document,n=location,d=e=>e.origin===n.origin&&l(e)===l(n),l=({pathname:e,search:t})=>e+t;customElements.define("m-router",class extends HTMLElement{#e;#i=new Map;#n=l(n);#t;#a=!0;#s;#r;async#c(e){this.#e?.abort(),this.#e=new AbortController;const t=await fetch(e,{headers:{"x-route":"true","x-flags":$FLAGS},signal:this.#e.signal});if(t.status===404)return null;if(!t.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+t.status+" "+t.statusText);const i=await t.json();if(!Array.isArray(i))throw new Error(i?.error?i.error:"Invalid response from server");return i}#o(e){const t=()=>typeof e=="string"?this.innerHTML=e:this.replaceChildren(...e);this.hasAttribute("vt")&&r.startViewTransition&&!this.#a?r.startViewTransition(t):t(),this.#a=!1}#l(){r.querySelectorAll("nav a").forEach(e=>{const{href:t,classList:i}=e,s=e.closest("nav")?.getAttribute("data-active-class")??"active";d(new URL(t))?i.add(s):i.remove(s)})}async#h(e,t){this.#n=l(e);let i,s=this.#i.get(this.#n);if(s!==void 0&&!t?.refresh&&!this.hasAttribute("no-cache"))this.#o(s);else{const h=await this.#c(e);typeof $signals<"u"&&($signals(0).url=e);let a,c;h?[a,i,c]=h:a=this.#t??[],c||this.#i.set(this.#n,a),this.#o(a)}history[t?.replace?"replaceState":"pushState"]({},"",e),this.#l(),window.scrollTo(0,0),i&&(r.body.appendChild(r.createElement("script")).textContent=i)}navigate(e,t){const i=new URL(e,n.href);if(i.origin!==n.origin||e.startsWith("#")){n.href=e;return}d(i)||this.#h(i,t)}connectedCallback(){if(o.$router)throw new Error("Only one <m-router> element is allowed on the page");o.$router=this,setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#t=[...this.childNodes];else{this.#t=[];for(const e of this.childNodes)if(e.nodeType===1&&e.tagName==="TEMPLATE"&&e.hasAttribute("m-fallback")){this.#t.push(...e.content.childNodes),e.remove();break}}this.#i.set(n.href,[...this.childNodes])}),this.#s=e=>{if(e.defaultPrevented||e.altKey||e.ctrlKey||e.metaKey||e.shiftKey||!(e.target instanceof HTMLAnchorElement))return;const t=e.target.getAttribute("href");if(!t||t.startsWith("#"))return;const{download:i,href:s,rel:h,target:a}=e.target;i||h==="external"||a==="_blank"||!s.startsWith(n.origin)||(e.preventDefault(),this.navigate(s))},this.#r=()=>{l(n)!==this.#n&&this.#h(new URL(n.href))},o.addEventListener("popstate",this.#r),r.addEventListener("click",this.#s),setTimeout(()=>this.#l())}disconnectedCallback(){o.removeEventListener("popstate",this.#r),r.removeEventListener("click",this.#s),delete o.$router,this.#e?.abort(),this.#e=void 0,this.#i.clear(),this.#s=void 0,this.#r=void 0}});}`;
 var REDIRECT_JS = `{customElements.define("m-redirect",class extends HTMLElement{connectedCallback(){const e=this.getAttribute("to"),t=this.hasAttribute("replace");e&&($router?$router.navigate(e,{replace:t}):location.href=e)}});}`;
-var FORM_JS = `{const{document:c}=window,r=(n,e)=>n.getAttribute(e),y=(n,e="m-formslot")=>n.querySelector(e)??c.querySelector(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=r(this,"for"),e=this.closest("form"),i=this.textContent;if(n&&e&&i)for(const d of n.split(",")){const l=e.elements.namedItem(d.trim());if(l){const t=()=>{l.removeEventListener("input",t),l.setCustomValidity("")};l.addEventListener("input",t),l.setCustomValidity(i),l.focus()}}this.remove()}}),window.$onRFS=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const i=r(e,"data-submitting-class")??"submitting",d=new FormData(e),l=[...e.elements];for(const t of l)t._disabled=t.disabled,t.disabled=!0;e.querySelectorAll("formslot").forEach(t=>t.innerHTML=""),e.classList.add(i);try{const t=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:d});if(t.ok){const[g,u]=await t.json(),f=new Map,p=c.createElement("template");p.innerHTML=g;const{content:a}=p;a.querySelectorAll("[formslot]").forEach(s=>{const o=r(s,"formslot");if(o){const m=y(e,'m-formslot[name="'+o+'"]');m&&(s.remove(),f.set(s,m))}});const E=y(e);if(E)f.set(a,E);else{const s=r(e,"mode");s==="replace"?e.replaceWith(a):s==="prepend"?e.prepend(a):e.append(a)}for(const[s,o]of f){const m=r(o,"scope"),b=r(o,"mode"),h=r(o,"onupdate");b==="insertbefore"?o.before(s):b==="insertafter"?o.after(s):o.replaceChildren(s),h&&$fmap.get(Number(h))?.call($signals?.(Number(m))??o,{type:"update",target:o})}setTimeout(()=>e.checkValidity()&&e.reset()),u&&(c.body.appendChild(c.createElement("script")).textContent=u+";document.currentScript.remove();")}}finally{e.classList.remove(i);for(const t of l)t.disabled=t._disabled,delete t._disabled}};}`;
+var FORM_JS = `{const{document:d}=window,r=(l,e)=>l.getAttribute(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const l=r(this,"for"),e=this.closest("form"),i=this.textContent;if(l&&e&&i)for(const f of l.split(",")){const n=e.elements.namedItem(f.trim());if(n){const t=()=>{n.removeEventListener("input",t),n.setCustomValidity("")};n.addEventListener("input",t),n.setCustomValidity(i),n.focus()}}this.remove()}}),window.$onRFS=async l=>{l.preventDefault();const e=l.target;if(!e.checkValidity())return;const i=r(e,"data-submitting-class")??"submitting",f=new FormData(e),n=[...e.elements];for(const t of n)t._disabled=t.disabled,t.disabled=!0;e.querySelectorAll("formslot").forEach(t=>t.innerHTML=""),e.classList.add(i);try{const t=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:f});if(t.ok){const[y,p]=await t.json(),u=new Map,E=d.createElement("template");E.innerHTML=y;const{content:a}=E;a.querySelectorAll("[formslot]").forEach(s=>{const o=r(s,"formslot");if(o){const m='m-formslot[name="'+o+'"]',c=e.querySelector(m)??d.querySelector(m);c&&(s.remove(),u.set(s,c))}});const b=e.querySelector("m-formslot:not([name])");if(b)u.set(a,b);else{const s=r(e,"mode");s==="replace"?e.replaceWith(a):s==="prepend"?e.prepend(a):e.append(a)}for(const[s,o]of u){const m=r(o,"scope"),c=r(o,"mode"),h=r(o,"onupdate");c==="insertbefore"?o.before(s):c==="insertafter"?o.after(s):o.replaceChildren(s),h&&$fmap.get(Number(h))?.call($signals?.(Number(m))??o,{type:"update",target:o})}setTimeout(()=>e.checkValidity()&&e.reset()),p&&(d.body.appendChild(d.createElement("script")).textContent=p+";document.currentScript.remove();")}}finally{e.classList.remove(i);for(const t of n)t.disabled=t._disabled,delete t._disabled}};}`;
 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

package/package.json

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