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

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.15";
 
 // 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
@@ -172,19 +172,34 @@ var escapeHTML = (str) => {
 
 // render.ts
 var FunctionIdGenerator = class extends Map {
-  constructor(seq = 0) {
-    super();
-    this.seq = seq;
-  }
+  seq = 0;
+  #fnRef = /* @__PURE__ */ new Map();
   genId(fn) {
+    if (typeof fn === "string") {
+      let id2 = this.get(fn);
+      if (id2 === void 0) {
+        id2 = this.seq++;
+        this.set(fn, id2);
+      }
+      return id2;
+    }
+    const cached = this.#fnRef.get(fn);
+    if (cached !== void 0) {
+      return cached;
+    }
     const fnStr = String(fn);
     let id = this.get(fnStr);
     if (id === void 0) {
       id = this.seq++;
       this.set(fnStr, id);
     }
+    this.#fnRef.set(fn, id);
     return id;
   }
+  clear() {
+    super.clear();
+    this.#fnRef.clear();
+  }
 };
 var Signal = class {
   constructor(scope, key, value) {
@@ -209,28 +224,34 @@ var Ref = class {
 };
 var IdGen = class extends Map {
   #seq = 0;
+  #byId = /* @__PURE__ */ new Map();
   gen(v) {
-    return this.get(v) ?? this.set(v, this.#seq++).get(v);
+    const existing = this.get(v);
+    if (existing !== void 0) {
+      return existing;
+    }
+    const id = this.#seq++;
+    this.set(v, id);
+    this.#byId.set(id, v);
+    return id;
   }
   getById(id) {
-    for (const [v, i] of this.entries()) {
-      if (i === id) {
-        return v;
-      }
-    }
+    return this.#byId.get(id);
   }
 };
-var cdn = "https://raw.esm.sh";
+var stringify = JSON.stringify;
+var subtle = crypto.subtle;
 var encoder = new TextEncoder();
+var identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
+var cdn = "https://raw.esm.sh";
 var voidTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
 var defaultMetadata = { viewport: "width=device-width, initial-scale=1.0" };
-var cache = /* @__PURE__ */ new Map();
 var componentsMap = new IdGen();
-var subtle = crypto.subtle;
-var stringify = JSON.stringify;
+var cache = /* @__PURE__ */ new Map();
+var urlPatternCache = /* @__PURE__ */ new Map();
+var hmacKeyCache = /* @__PURE__ */ new Map();
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var isReactive = (v) => v instanceof Signal || v instanceof Compute;
-var identifierRegex = /^[A-Za-z_$][0-9A-Za-z_$]*$/;
 var escapeCSSText = (str) => str.replace(/[><]/g, (m) => m.charCodeAt(0) === 60 ? "&lt;" : "&gt;");
 var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
 var errorStringify = (err) => err instanceof Error ? err.message : String(err);
@@ -241,6 +262,15 @@ function renderToWebStream(root, options) {
   const reqHeaders = request?.headers;
   const componentName = reqHeaders?.get("x-component");
   const routeForm = reqHeaders?.has("x-route-form");
+  if (request) {
+    request.URL = new URL(request.url);
+    if (options.onFetch) {
+      const res = options.onFetch(request, options.context);
+      if (res !== void 0) {
+        return res;
+      }
+    }
+  }
   if (reqHeaders?.has("x-rpc")) {
     if (!request || request.method !== "POST") {
       return new Response(null, { status: 405 });
@@ -289,28 +319,24 @@ function renderToWebStream(root, options) {
   let status = options.status;
   let routeFC = request ? Reflect.get(request, "routeFC") : void 0;
   let component = componentName ? componentName.startsWith("@comp_") ? componentsMap.getById(Number(componentName.slice(6))) : components?.[componentName] : null;
-  if (request) {
-    request.URL = new URL(request.url);
-  }
   if (routes && !routeFC) {
     if (request) {
-      const patterns = Object.keys(routes);
-      const dynamicPatterns = [];
-      for (const pattern of patterns) {
-        if (pattern.includes(":") || pattern.includes("*")) {
-          dynamicPatterns.push(pattern);
-        } else if (request.URL.pathname === pattern) {
-          routeFC = routes[pattern];
-          break;
-        }
-      }
+      routeFC = routes[request.URL.pathname];
       if (!routeFC) {
-        for (const path of dynamicPatterns) {
-          const match = new URLPattern({ pathname: path }).exec(request.url);
-          if (match) {
-            routeFC = routes[path];
-            request.params = match.pathname.groups;
-            break;
+        for (const pattern of Object.keys(routes)) {
+          if (pattern.includes(":") || pattern.includes("*")) {
+            let urlPattern = urlPatternCache.get(pattern);
+            let match;
+            if (!urlPattern) {
+              urlPattern = new URLPattern({ pathname: pattern });
+              urlPatternCache.set(pattern, urlPattern);
+            }
+            match = urlPattern.exec(request.URL);
+            if (match) {
+              routeFC = routes[pattern];
+              request.params = match.pathname.groups;
+              break;
+            }
           }
         }
       }
@@ -352,8 +378,8 @@ function renderToWebStream(root, options) {
             }
             let propsHeader = reqHeaders?.get("x-props");
             let props = propsHeader ? JSON.parse(propsHeader) : {};
-            let html2 = "";
-            let js = "";
+            const htmlChunks = [];
+            const jsChunks = [];
             let buf = "";
             let vnode = [component, props, $vnode];
             if (routeForm && request?.method === "POST") {
@@ -366,11 +392,17 @@ function renderToWebStream(root, options) {
             await render(
               vnode,
               options,
-              (chunk) => html2 += chunk,
-              (chunk) => js += chunk,
+              (chunk) => {
+                htmlChunks.push(chunk);
+              },
+              (chunk) => {
+                jsChunks.push(chunk);
+              },
               true,
               routeForm
             );
+            const html2 = htmlChunks.join("");
+            const js = jsChunks.join("");
             buf = "[" + stringify(html2);
             if (js) {
               buf += "," + stringify(js);
@@ -397,7 +429,19 @@ function renderToWebStream(root, options) {
   return new Response(
     new ReadableStream({
       async start(controller) {
-        const write = (chunk) => controller.enqueue(encoder.encode(chunk));
+        let buffer = "";
+        const flush = () => {
+          if (buffer.length) {
+            controller.enqueue(encoder.encode(buffer));
+            buffer = "";
+          }
+        };
+        const write = (chunk) => {
+          buffer += chunk;
+          if (buffer.length >= 64 * 1024) {
+            flush();
+          }
+        };
         Reflect.set(options, "routeFC", routeFC);
         try {
           write("<!DOCTYPE html>");
@@ -414,6 +458,7 @@ function renderToWebStream(root, options) {
           console.error(err);
           write("<script>console.error(" + stringify(errorStringify(err)) + ")<\/script>");
         } finally {
+          flush();
           controller.close();
         }
       }
@@ -541,7 +586,7 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
           ]);
           const signature = await subtle.sign(
             "HMAC",
-            await subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign"]),
+            await importHmacKey(secret),
             encoder.encode(data)
           );
           cookie += btoa(data) + "." + btoa(String.fromCharCode(...new Uint8Array(signature)));
@@ -643,16 +688,23 @@ async function renderNode(rc, node, stripSlotProp) {
           case "slot": {
             const fcSlots = rc.fc?.slots;
             if (fcSlots) {
-              let slots;
+              const slots = [];
               if (props.name) {
-                slots = fcSlots.filter((v) => isVNode(v) && v[1].slot === props.name);
+                for (let i = 0, n = fcSlots.length; i < n; i++) {
+                  const v = fcSlots[i];
+                  if (isVNode(v) && v[1].slot === props.name) {
+                    slots.push(v);
+                  }
+                }
               } else {
-                slots = fcSlots.filter((v) => !isVNode(v) || !v[1].slot);
-              }
-              if (slots.length === 0) {
-                slots = props.children;
+                for (let i = 0, n = fcSlots.length; i < n; i++) {
+                  const v = fcSlots[i];
+                  if (!isVNode(v) || !v[1].slot) {
+                    slots.push(v);
+                  }
+                }
               }
-              await renderChildren(rc, slots, true);
+              await renderChildren(rc, slots.length === 0 ? props.children : slots, true);
             }
             break;
           }
@@ -780,10 +832,16 @@ async function renderNode(rc, node, stripSlotProp) {
             attrs += renderViewTransitionAttr(props);
             let buf = "<m-component" + attrs + ">";
             if (pending) {
-              const write2 = (chunk) => {
-                buf += chunk;
-              };
-              await renderChildren({ ...rc, write: write2 }, pending);
+              const chunks = [];
+              await renderChildren(
+                forkRenderContext(rc, {
+                  write: (chunk) => {
+                    chunks.push(chunk);
+                  }
+                }),
+                pending
+              );
+              buf += chunks.join("");
             }
             buf += "</m-component>";
             if (attrModifiers) {
@@ -820,10 +878,16 @@ async function renderNode(rc, node, stripSlotProp) {
               if (routeFC) {
                 buf += "<template m-fallback>";
               }
-              const write2 = (chunk) => {
-                buf += chunk;
-              };
-              await renderChildren({ ...rc, write: write2 }, children);
+              const chunks = [];
+              await renderChildren(
+                forkRenderContext(rc, {
+                  write: (chunk) => {
+                    chunks.push(chunk);
+                  }
+                }),
+                children
+              );
+              buf += chunks.join("");
               if (routeFC) {
                 buf += "</template>";
               }
@@ -848,7 +912,8 @@ async function renderNode(rc, node, stripSlotProp) {
                 metadata = await getMetadata.call(createInvokeScope(request, context, session));
               }
               let buf = '<meta charset="utf-8">';
-              for (const [key, value] of Object.entries(Object.assign(defaultMetadata, rc.metadata, metadata))) {
+              const mergedMeta = Object.assign({}, defaultMetadata, rc.metadata, metadata);
+              for (const [key, value] of Object.entries(mergedMeta)) {
                 if (value) {
                   if (key === "title") {
                     buf += "<title>" + escapeHTML(value) + "</title>";
@@ -873,17 +938,17 @@ async function renderNode(rc, node, stripSlotProp) {
                   write(value.html);
                   write("<!-- /" + tag + " -->");
                 } else {
-                  let buf = "";
+                  const chunks = [];
                   await renderChildren(
-                    {
-                      ...rc,
+                    forkRenderContext(rc, {
                       write: (chunk) => {
-                        buf += chunk;
+                        chunks.push(chunk);
                       }
-                    },
+                    }),
                     children,
                     true
                   );
+                  const buf = chunks.join("");
                   cache.set(key, { html: buf, expiresAt: typeof maxAge === "number" && maxAge > 0 ? now + maxAge * 1e3 : void 0 });
                   rc.write(buf);
                 }
@@ -936,12 +1001,16 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             buf += ">";
             if (children) {
-              await renderChildren({
-                ...rc,
-                write: (chunk) => {
-                  buf += chunk;
-                }
-              }, children);
+              const chunks = [];
+              await renderChildren(
+                forkRenderContext(rc, {
+                  write: (chunk) => {
+                    chunks.push(chunk);
+                  }
+                }),
+                children
+              );
+              buf += chunks.join("");
             }
             write(buf + "</m-" + tag + ">");
             rc.flags.runtime |= FORM;
@@ -992,7 +1061,11 @@ async function renderNode(rc, node, stripSlotProp) {
                   write(attrModifiers);
                 }
                 if (!noChildren) {
-                  await renderChildren(tag === "svg" ? { ...rc, svg: true } : rc, props.children);
+                  if (tag === "svg") {
+                    await renderChildren(forkRenderContext(rc, { svg: true }), props.children);
+                  } else {
+                    await renderChildren(rc, props.children);
+                  }
                 }
                 if (!isSvgSelfClosingElement) {
                   write("</" + tag + ">");
@@ -1020,6 +1093,9 @@ async function renderChildren(rc, children, stripSlotProp) {
     await renderNode(rc, children, stripSlotProp);
   }
 }
+function forkRenderContext(rc, overrides) {
+  return Object.assign(Object.create(rc), overrides);
+}
 async function renderFC(rc, fcFn, props, eager) {
   const { write } = rc;
   const { children } = props;
@@ -1037,8 +1113,9 @@ async function renderFC(rc, fcFn, props, eager) {
           promise = promise.catch(catchFn);
         }
         if (eager || (props.rendering ?? fcFn.rendering) === "eager") {
-          await renderNode({ ...rc, fc }, await promise);
-          markSignals(rc, signals);
+          const fcRc = forkRenderContext(rc, { fc });
+          await renderNode(fcRc, await promise);
+          markSignals(fcRc, signals);
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
           write("<m-portal " + chunkIdAttr + ">");
@@ -1047,22 +1124,26 @@ async function renderFC(rc, fcFn, props, eager) {
           }
           write("</m-portal>");
           rc.suspenses.push(promise.then(async (node) => {
-            let buf = "";
-            let write2 = (chunk) => {
-              buf += chunk;
-            };
-            buf += "<m-chunk " + chunkIdAttr + "><template>";
-            await renderNode({ ...rc, fc, write: write2 }, node);
-            markSignals({ ...rc, write: write2 }, signals);
-            return buf + "</template></m-chunk>";
+            const chunks = [];
+            const chunkRc = forkRenderContext(rc, {
+              fc,
+              write: (chunk) => {
+                chunks.push(chunk);
+              }
+            });
+            chunks.push("<m-chunk " + chunkIdAttr + "><template>");
+            await renderNode(chunkRc, node);
+            markSignals(chunkRc, signals);
+            return chunks.join("") + "</template></m-chunk>";
           }));
         }
       } else if (Symbol.asyncIterator in v) {
         if (eager || (props.rendering ?? fcFn.rendering) === "eager") {
+          const fcRc = forkRenderContext(rc, { fc });
           for await (const c of v) {
-            await renderNode({ ...rc, fc }, c);
+            await renderNode(fcRc, c);
           }
-          markSignals(rc, signals);
+          markSignals(fcRc, signals);
         } else {
           const chunkIdAttr = 'chunk-id="' + (rc.flags.chunk++).toString(36) + '"';
           write("<m-portal " + chunkIdAttr + ">");
@@ -1072,32 +1153,37 @@ async function renderFC(rc, fcFn, props, eager) {
           write("</m-portal>");
           const iter = () => rc.suspenses.push(
             v.next().then(async ({ done, value }) => {
-              let buf = "<m-chunk " + chunkIdAttr;
-              let write2 = (chunk) => {
-                buf += chunk;
-              };
+              const chunks = [];
+              const chunkRc = forkRenderContext(rc, {
+                fc,
+                write: (chunk) => {
+                  chunks.push(chunk);
+                }
+              });
               if (done) {
-                buf += " done>";
-                markSignals({ ...rc, write: write2 }, signals);
-                return buf + "</m-chunk>";
+                chunks.push("<m-chunk " + chunkIdAttr + " done>");
+                markSignals(chunkRc, signals);
+                return chunks.join("") + "</m-chunk>";
               }
-              buf += " next><template>";
-              await renderNode({ ...rc, fc, write: write2 }, value);
+              chunks.push("<m-chunk " + chunkIdAttr + " next><template>");
+              await renderNode(chunkRc, value);
               iter();
-              return buf + "</template></m-chunk>";
+              return chunks.join("") + "</template></m-chunk>";
             })
           );
           iter();
         }
       } else if (Symbol.iterator in v) {
+        const fcRc = forkRenderContext(rc, { fc });
         for (const node of v) {
-          await renderNode({ ...rc, fc }, node);
+          await renderNode(fcRc, node);
         }
-        markSignals(rc, signals);
+        markSignals(fcRc, signals);
       }
     } else if (v) {
-      await renderNode({ ...rc, fc }, v);
-      markSignals(rc, signals);
+      const fcRc = forkRenderContext(rc, { fc });
+      await renderNode(fcRc, v);
+      markSignals(fcRc, signals);
     }
   } catch (err) {
     if (catchFn) {
@@ -1457,7 +1543,7 @@ async function createSession(request, options) {
         signature = atob(signature);
         const verified = await subtle.verify(
           "HMAC",
-          await subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["verify"]),
+          await importHmacKey(secret),
           Uint8Array.from(signature, (char) => char.charCodeAt(0)),
           encoder.encode(data)
         );
@@ -1500,6 +1586,14 @@ function traverseProps(obj, callback, path = []) {
   }
   return copy;
 }
+function importHmacKey(secret) {
+  let key = hmacKeyCache.get(secret);
+  if (!key) {
+    key = subtle.importKey("raw", encoder.encode(secret), { name: "HMAC", hash: "SHA-256" }, false, ["sign", "verify"]);
+    hmacKeyCache.set(secret, key);
+  }
+  return key;
+}
 
 // jsx-runtime.ts
 var Fragment = $fragment;
@@ -1524,7 +1618,8 @@ var jsx = (tag, props = new NullPrototypeObject(), key) => {
       "status",
       "headers",
       "htmx",
-      "metadata"
+      "metadata",
+      "onFetch"
     ]);
     for (const [key2, value] of Object.entries(props)) {
       if (optionsKeys.has(key2) || key2.startsWith("htmx-ext-")) {

package/package.json

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

package/types/index.d.ts

@@ -5,6 +5,9 @@ export function buildRoutes(
   handler: (req: Request) => Response,
 ): Record<string, (req: Request) => Response>;
 
+/**
+ * `createRPC` creates a RPC for the given functions.
+ */
 export function createRPC<V extends Record<string, (...args: any[]) => any>>(
   rpcFunctions: V,
 ): { [K in keyof V]: (...args: Parameters<V[K]>) => Promise<Awaited<ReturnType<V[K]>>> };

package/types/render.d.ts

@@ -1,6 +1,6 @@
 /// <reference path="./htmx.d.ts" />
 
-import type { ComponentType, MaybeModule, Metadata } from "./jsx.d.ts";
+import type { ComponentType, MaybeModule, MaybePromise, Metadata } from "./jsx.d.ts";
 
 /**
  * Htmx extensions.
@@ -120,4 +120,15 @@ export interface RenderOptions extends Partial<HtmxExts> {
    * @defaultValue `false`
    */
   htmx?: number | string | boolean;
+  /**
+   * Runs once per render when {@link RenderOptions.request | `request`} is provided, immediately
+   * after `request.URL` is set and before RPC handling, routing, and HTML streaming.
+   *
+   * Return a `Response` or `Promise<Response>` to send that response and skip the rest of the
+   * pipeline. Return `undefined` or omit a return value to continue with normal rendering.
+   *
+   * @param request - The current request; `URL` is a parsed {@link URL} for `request.url`.
+   * @param context - The same object as the {@link RenderOptions.context | `context`} option, if any.
+   */
+  onFetch?: (request: Request & { URL?: URL }, context: RenderOptions["context"]) => MaybePromise<Response> | void;
 }