mono-jsx 0.8.0-beta.13 → 0.8.0-beta.15

package/README.md

@@ -1103,12 +1103,12 @@ async function Login(this: FC) {
 You can also return regular HTML elements from the route form post response. The `formslot` element is used to
 mark the position where the returned HTML elements will be inserted.
 
-- `<formslot mode="insertbefore" />`: Insert HTML before the `formslot` element.
+- `<formslot mode="replaceChildren" />`: Replace the `formslot` element's children with the HTML. This is the default mode.
 - `<formslot mode="insertafter" />`: Insert HTML after the `formslot` element.
-- `<formslot mode="replace" />`: Replace the `formslot` children. This is the default mode.
+- `<formslot mode="insertbefore" />`: Insert HTML before the `formslot` element.
 
 ```tsx
-function FormSlot(this: FC) {
+function MyFormPage(this: FC) {
   if (this.form) {
     const message = this.form.get("message") as string | null;
     if (!message) {
@@ -1117,12 +1117,30 @@ function FormSlot(this: FC) {
     return <p>{message}</p>
   }
   return (
-   <form route>
-    {/* <- new message will be inserted here */}
-    <formslot mode="insertbefore" />
-    <input type="text" name="message" placeholder="Type Message..." style={{ ":invalid": { borderColor: "red" } }} />
-    <button type="submit">Send</button>
-   </form>
+    <form route>
+      {/* <- new message will be inserted here */}
+      <formslot mode="insertbefore" />
+      <input type="text" name="message" placeholder="Type Message..." style={{ ":invalid": { borderColor: "red" } }} />
+      <button type="submit">Send</button>
+    </form>
+  )
+}
+```
+
+You can also use the `name` attribute to specify the name of the formslot element. And you can use the `slot` attribute to specify the name of the slot to insert the HTML into.
+
+```tsx
+function MyFormPage(this: FC) {
+  if (this.form) {
+    return <p slot="message">Hello, world!</p>
+  }
+  return (
+    <div>
+      <formslot name="message" />
+      <form route>
+        <button type="submit">Send</button>
+      </form>
+    </div>
   )
 }
 ```

package/jsx-runtime.mjs

@@ -30,7 +30,7 @@ var SIGNALS_JS = `{let m;const w=window,p=document,y=new Map,k=new Map,l=n=>k.ge
 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 n=document,a=location,o=t=>t.split("#",1)[0],l=t=>o(t)===o(a.href);customElements.define("m-router",class extends HTMLElement{#t;#s;#i;#n;#e=new Map;#r=!0;async#c(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#n?.abort(),this.#n=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")&&n.startViewTransition&&!this.#r?n.startViewTransition(s):s(),this.#r=!1}#o(){n.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";l(s)?i.add(e):i.remove(e)})}async#l(t,s){const i=this.#c(t).then(e=>{if(e){const[r,c]=e;return this.#e.set(t,r),this.#a(r),c}else this.#e.delete(t),this.#a(this.#t??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#e.has(t)?this.#a(this.#e.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#o(),window.scrollTo(0,0),i.then(e=>{e&&(n.body.appendChild(n.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,a.href);if(i.origin!==a.origin){a.href=t;return}l(i.href)||this.#l(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),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.#s=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:s,href:i,rel:e,target:r}=t.target;s||e==="external"||r==="_blank"||!i.startsWith(a.origin)||(t.preventDefault(),this.navigate(i))},this.#i=()=>this.#l(a.href),addEventListener("popstate",this.#i),n.addEventListener("click",this.#s),setTimeout(()=>this.#o()),globalThis.$router=this}disconnectedCallback(){removeEventListener("popstate",this.#i),n.removeEventListener("click",this.#s),delete globalThis.$router,this.#n?.abort(),this.#n=void 0,this.#e.clear(),this.#s=void 0,this.#i=void 0}});}`;
-var FORM_JS = `{const m=(t,e)=>t.setCustomValidity(e),l=(t,e,i)=>t.insertAdjacentHTML(e,i);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const t=this.getAttribute("for"),e=this.closest("form"),i=this.textContent;if(t&&e&&i)for(const r of t.split(",")){const s=e.elements.namedItem(r.trim());if(s){const o=()=>{s.removeEventListener("input",o),m(s,"")};s.addEventListener("input",o),m(s,i),s.focus()}}this.remove()}}),window.$onrfs=async t=>{t.preventDefault();const e=t.target;if(!e.checkValidity())return;const i=new FormData(e),r=[...e.elements];for(const n of r)n._disabled=n.disabled,n.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:i}),[o,d]=await s.json(),a=e.querySelector("m-formslot");for(const n of r)n.disabled=n._disabled,delete n._disabled;if(a)switch(a.getAttribute("mode")){case"insertbefore":l(a,"beforebegin",o);break;case"insertafter":l(a,"afterend",o);break;default:a.innerHTML=o}else l(e,"beforeend",o);setTimeout(()=>{r.some(n=>!n.validity.valid)||e.reset()},0),d&&(document.body.appendChild(document.createElement("script")).textContent=d)};}`;
+var FORM_JS = `{customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const s=this.getAttribute("for"),t=this.closest("form"),i=this.textContent;if(s&&t&&i)for(const l of s.split(",")){const o=t.elements.namedItem(l.trim());if(o){const r=()=>{o.removeEventListener("input",r),o.setCustomValidity("")};o.addEventListener("input",r),o.setCustomValidity(i),o.focus()}}this.remove()}}),window.$onrfs=async s=>{s.preventDefault();const t=s.target;if(!t.checkValidity())return;const i=new FormData(t),l=[...t.elements];for(const e of l)e._disabled=e.disabled,e.disabled=!0;const o=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:i}),[r,m]=await o.json(),f=document.createElement("template"),u=new Map;f.innerHTML=r;for(const e of l)e.disabled=e._disabled,delete e._disabled;for(const e of f.content.childNodes){if(e.nodeType===1){const n=e,a=n.getAttribute("formslot"),d=a?'m-formslot[name="'+a+'"]':"m-formslot",c=a?t.querySelector(d)??document.querySelector(d):t.querySelector(d);if(c){c.innerHTML="",u.set(n,c);continue}}t.appendChild(e)}for(const[e,n]of u)switch(n.getAttribute("mode")){case"insertbefore":n.before(e);break;case"insertafter":n.after(e);break;default:n.appendChild(e)}setTimeout(()=>{l.some(e=>!e.validity.valid)||t.reset()},0),m&&(document.body.appendChild(document.createElement("script")).textContent=m)};}`;
 
 // runtime/utils.ts
 var regexpIsNonDimensional = /^(-|f[lo].*[^se]$|g.{5,}[^ps]$|z|o[pr]|(W.{5})?[lL]i.*(t|mp)$|an|(bo|s).{4}Im|sca|m.{6}[ds]|ta|c.*[st]$|wido|ini)/;
@@ -176,7 +176,7 @@ var $vnode = Symbol.for("jsx.vnode");
 var $setup = Symbol.for("mono.setup");
 
 // version.ts
-var VERSION = "0.8.0-beta.13";
+var VERSION = "0.8.0-beta.15";
 
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -745,7 +745,9 @@ async function renderNode(rc, node, stripSlotProp) {
                 const now = Date.now();
                 const value = cache.get(key);
                 if (value && (!value.expires || value.expires > now)) {
+                  write("<!-- cached -->");
                   write(value.html);
+                  write("<!-- /cached -->");
                 } else {
                   let buf = "";
                   await renderChildren(
@@ -778,16 +780,19 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           case "invalid":
           case "formslot": {
-            const { children, for: forProp, mode } = props;
+            const { children, name, mode, for: forProp } = props;
             let buf = "<m-" + tag;
+            if (isString(name)) {
+              buf += " name=" + toAttrStringLit(name);
+            }
+            if (isString(mode)) {
+              buf += " mode=" + toAttrStringLit(mode);
+            }
             if (isString(forProp)) {
               buf += " for=" + toAttrStringLit(forProp) + " hidden";
             } else if (tag === "invalid") {
               break;
             }
-            if (isString(mode)) {
-              buf += " mode=" + toAttrStringLit(mode);
-            }
             buf += ">";
             if (children) {
               await renderChildren({

package/package.json

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

package/types/jsx.d.ts

@@ -18,6 +18,11 @@ export interface BaseAttributes {
    * The `slot` attribute assigns a slot in a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_shadow_DOM) shadow tree to an element: An element with a `slot` attribute is assigned to the slot created by the `<slot>` element whose name attribute's value matches that slot attribute's value.
    */
   slot?: string;
+  /**
+   * The `formslot` attribute assigns a named formslot element to an element.
+   * @mono-jsx
+   */
+  formslot?: string;
   /**
    * The `portal` attribute is used to mount the component to a specified DOM element.
    * @mono-jsx

package/types/mono.d.ts

@@ -151,9 +151,17 @@ export interface Elements {
    */
   formslot: BaseAttributes & {
     /**
-     * The insert position of the formslot.
+     * The name of the formslot element.
      */
-    mode?: "insertbefore" | "insertafter" | "replace";
+    name?: string;
+    /**
+     * The insert mode of the formslot.
+     * - "insertbefore": Insert HTML before the formslot element.
+     * - "insertafter": Insert HTML after the formslot element.
+     * - "replaceChildren": Replace the formslot element's children with the HTML.
+     * @default "replaceChildren"
+     */
+    mode?: "insertbefore" | "insertafter" | "replaceChildren";
   };
 }