npm - mono-jsx - Versions diffs - 0.10.0-beta.4 → 0.10.0-beta.6 - Mend

mono-jsx 0.10.0-beta.4 → 0.10.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (7) hide show

package/README.md CHANGED Viewed

@@ -964,8 +964,6 @@ The `<component>` element also supports the `ref` prop, which allows you to cont
 - `refresh`: A method to re-render the component with the current name and props.
 ```tsx
-import type { ComponentElement } from "mono-jsx";
 function App(this: WithRefs<FC, { component: ComponentElement }>) {
   this.effect(() => {
     // updating the component name and props will trigger a re-render of the component
@@ -1110,8 +1108,21 @@ You can access the `params` object in your route components to get the values of
 ```tsx
 // router pattern: "/post/:id"
 function Post(this: FC) {
-  this.request.url         // "http://localhost:3000/post/123"
-  this.request.params?.id  // "123"
+  console.log(this.request.url)         // "http://localhost:3000/post/123"
+  console.log(this.request.params?.id)  // "123"
+}
+```
+You can use `this.app.url` signal to get route URL and parameters:
+```tsx
+function Post(this: FC) {
+  return (
+    <div>
+      <p>Current URL: {this.$(() => this.app.url.href)}</p>
+      <p>Post id: {this.$(() => this.app.url.params?.id)}</p>
+    </div>
+  )
 }
 ```
@@ -1227,7 +1238,7 @@ The `hidden` prop can be used to hide the formslot payload from the form handler
 ### Using `this.app.url` Signal
-`this.app.url` is an app-level signal that contains the current route URL and parameters. The `this.app.url` signal is automatically updated when the route changes, so you can use it to display the current URL in your components or control the view with `<show>`, `<hidden>` or `<switch>` elements:
+The `this.app.url` in a component is an app-level signal that contains the current route URL and parameters. It is automatically updated when the route changes, so you can use it to display the current URL in your components or control the view with `<show>`, `<hidden>` or `<switch>` elements:
 ```tsx
 function App(this: FC) {
@@ -1258,6 +1269,23 @@ export default {
 }
 ```
+You can also use the `navigate` method of the `<router>` element to navigate to a new route programmatically.
+```tsx
+function App(this: FC<{}, { router: RouterElement }>) {
+  return (
+    <>
+      <header>
+        <button
+          onClick={() => this.refs.router.navigate("/about", { replace: false, refresh: false })}
+        >About</button>
+      </header>
+      <router ref={this.refs.router} />
+    </>
+  )
+}
+```
 ### Nav Links
 Links under the `<nav>` element will be treated as navigation links by the router. When the `href` of a nav link matches a route, an active class will be added to the link element. By default, the active class is `active`, but you can customize it by setting the `data-active-class` prop on the `<nav>` element. You can add styles for the active link using nested CSS selectors in the `style` prop of the `<nav>` element.
@@ -1277,6 +1305,63 @@ export default {
 }
 ```
+## Adding Page Metadata
+You can add metadata to the route component by setting the `metadata` property on the route component.
+```tsx
+function Home(this: FC) {
+  return <p>Home</p>
+}
+Home.metadata = {
+  title: "Home",
+  description: "Home page",
+}
+const routes = {
+  "/": Home,
+}
+```
+Or use `getMetadata` property on the route component to dynamically generate the metadata.
+```tsx
+async function Post(this: FC) {
+  const post = await getPost(this.request.params.slug)
+  return <div>
+    <h1>{post.title}</h1>
+    <h2>{post.description}</h2>
+    <div>{post.content}</div>
+  </div>
+}
+Post.getMetadata = async function(this: FC) {
+  const post = await getPost(this.request.params.slug)
+  return {
+    title: post.title,
+    description: post.description,
+  }
+}
+const routes = {
+  "/post/:slug": Post,
+}
+```
+You can also add metadata to the root `<html>` element by setting the `metadata` prop on the root `<html>` element. This will be added to all the pages in your app.
+```tsx
+export default {
+  fetch: (req) => (
+    <html request={req} routes={routes} metadata={{ title: "My App" }}>
+      <head>
+        <metadata />
+      </head>
+    </html>
+  )
+}
+```
 ### Fallback (404)
 You can add fallback(404) content to the `<router>` element as children, which will be displayed when no route matches the current URL.
@@ -1294,6 +1379,30 @@ export default {
 }
 ```
+### Route Caching
+By default, the router client caches the html content from the server. To disable the caching, you can add the `dynamic` option to the route component.
+```tsx
+// Home is a static route that can be cached on the client side
+function Home(this: FC) {
+  return <p>Home</p>
+}
+// Dash is a dynamic route that will not be cached on the client side
+// it will be fetched from the server on every navigation
+function Dash(this: FC) {
+  const user = this.session.get<{ name: string }>("user")
+  return <p>Welcome back, {user?.name}!</p>
+}
+Dash.dynamic = true;
+const routes = {
+  "/": Home,
+  "/dash": Dash,
+}
+```
 ## Using Session
 mono-jsx provides a built-in session storage that allows you to manage sessions. To use session storage, you need to set the `session` prop on the root `<html>` element with the `cookie.secret` option.

package/jsx-runtime.mjs CHANGED Viewed

@@ -8,6 +8,16 @@ var JSX = {
   }
 };
+// symbols.ts
+var $fragment = /* @__PURE__ */ Symbol.for("jsx.fragment");
+var $html = /* @__PURE__ */ Symbol.for("jsx.html");
+var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
+var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
+var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
+// version.ts
+var VERSION = "0.10.0-beta.6";
 // runtime/index.ts
 var EVENT = 1;
 var CX = 2;
@@ -19,19 +29,21 @@ var SIGNALS = 64;
 var SUSPENSE = 128;
 var COMPONENT = 256;
 var ROUTER = 512;
-var FORM = 1024;
-var RPC = 2048;
+var REDIRECT = 1024;
+var FORM = 2048;
+var RPC = 4096;
 var EVENT_JS = `{var w=window,m=new Map;w.$F=m.set.bind(m);w.$fmap=m;w.$emit=(e,i,s)=>m.get(i).call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,i,s)=>{e.preventDefault();m.get(i).call(w.$signals?.(s)??e.target,new FormData(e.target),e)};}`;
 var CX_JS = `{var n=t=>typeof t=="string"?t:typeof t=="object"&&t!==null?(Array.isArray(t)?t.map(n).filter(Boolean):Object.entries(t).filter(([,e])=>!!e).map(([e])=>e)).join(" "):"";window.$cx=n;}`;
-var STYLE_JS = `{var f=/^(-|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)/;var p=new Set;var g=t=>typeof t=="object"&&t!==null,u=t=>g(t)&&(t.constructor===Object||t.constructor===void 0),d=t=>t.replace(/[a-z][A-Z]/g,n=>n.charAt(0)+"-"+n.charAt(1).toLowerCase());var b=t=>{let n=0;for(let e=0;e<t.length;e++)n=(n<<5)-n+t.charCodeAt(e)|0;return n>>>0};var h=(t,n)=>{let{inline:e,css:o}=y(n);if(o){let r="data-css-",s=b((e??"")+o.join("")),i=r+s.toString(36),l="["+i+"]";p.has(s)||(p.add(s),document.head.appendChild(document.createElement("style")).textContent=(e?l+"{"+e+"}":"")+o.map(a=>a===null?l:a).join("")),t.getAttributeNames().forEach(a=>a.startsWith(r)&&t.removeAttribute(a)),t.setAttribute(i,"")}else e&&t.setAttribute("style",e)},y=t=>{let n,e=[],o=new x;for(let[r,s]of Object.entries(t))switch(r.charCodeAt(0)){case 58:u(s)&&e.push(r.startsWith("::view-")?"":null,r+c(s));break;case 64:u(s)&&(r.startsWith("@keyframes ")?e.push(r+"{"+Object.entries(s).map(([i,l])=>u(l)?i+c(l):"").join("")+"}"):r.startsWith("@view-")?e.push(r+c(s)):e.push(r+"{",null,c(s)+"}"));break;case 38:u(s)&&e.push(null,r.slice(1)+c(s));break;default:n??={},n[r]=s}return n&&(o.inline=c(n).slice(1,-1)),e.length>0&&(o.css=e),o},c=t=>{let n="";for(let[e,o]of Object.entries(t)){let r=typeof o;if(r==="string"||r==="number"){let s=d(e),i=r==="number"?f.test(e)?""+o:o+"px":""+o;n+=(n?";":"")+s+":"+(s==="content"?JSON.stringify(i):i)}}return"{"+n+"}"},x=(()=>{function t(){}return t.prototype=Object.create(null),t})();window.$applyStyle=h;}`;
+var STYLE_JS = `{var f=/^(-|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)/;var p=new Set;var d=t=>typeof t=="object"&&t!==null,u=t=>d(t)&&(t.constructor===Object||t.constructor===void 0),g=t=>t.replace(/[a-z][A-Z]/g,n=>n.charAt(0)+"-"+n.charAt(1).toLowerCase()),y=t=>{let n=0;for(let e=0;e<t.length;e++)n=(n<<5)-n+t.charCodeAt(e)|0;return n>>>0};var b=(t,n)=>{let{inline:e,css:s}=h(n);if(s){let r="data-css-",o=y((e??"")+s.join("")),i=r+o.toString(36),l="["+i+"]";p.has(o)||(p.add(o),document.head.appendChild(document.createElement("style")).textContent=(e?l+"{"+e+"}":"")+s.map(a=>a===null?l:a).join("")),t.getAttributeNames().forEach(a=>a.startsWith(r)&&t.removeAttribute(a)),t.setAttribute(i,"")}else e&&t.setAttribute("style",e)},h=t=>{let n,e=[],s=new x;for(let[r,o]of Object.entries(t))switch(r.charCodeAt(0)){case 58:u(o)&&e.push(r.startsWith("::view-")?"":null,r+c(o));break;case 64:u(o)&&(r.startsWith("@keyframes ")?e.push(r+"{"+Object.entries(o).map(([i,l])=>u(l)?i+c(l):"").join("")+"}"):r.startsWith("@view-")?e.push(r+c(o)):e.push(r+"{",null,c(o)+"}"));break;case 38:u(o)&&e.push(null,r.slice(1)+c(o));break;default:n??={},n[r]=o}return n&&(s.inline=c(n).slice(1,-1)),e.length>0&&(s.css=e),s},c=t=>{let n="";for(let[e,s]of Object.entries(t)){let r=typeof s;if(r==="string"||r==="number"){let o=g(e),i=r==="number"?f.test(e)?""+s:s+"px":""+s;n+=(n?";":"")+o+":"+(o==="content"?JSON.stringify(i):i)}}return"{"+n+"}"},x=(()=>{function t(){}return t.prototype=Object.create(null),t})();window.$applyStyle=b;}`;
 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 i=(e,s)=>{let t,l=()=>e.replaceChildren(...s()?t:[]);return()=>{if(!t){let n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&n.hasAttribute("m-slot")?t=[...n.content.childNodes]:t=[...e.childNodes]}e.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(l):l()}};window.$renderToggle=i;}`;
 var RENDER_SWITCH_JS = `{var a=(l,u)=>{let s,r=l.getAttribute("value"),t,i,o=e=>t.get(e)??t.set(e,[]).get(e),d=()=>l.replaceChildren(...t.has(s)?t.get(s):i);return()=>{if(!t){t=new Map,i=[];for(let e of l.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):i.push(n);e.remove()}else r?o(r).push(e):i.push(e)}s=""+u(),l.hasAttribute("vt")&&document.startViewTransition?document.startViewTransition(d):d()}};window.$renderSwitch=a;}`;
 var SIGNALS_JS = `{let h;const a=window,b=document,y=new Map,E=new Map,k=new Map,v=new Map,$=new Map,m=new Map,l=n=>y.get(n)??y.set(n,V(n)).get(n),F=()=>Object.create(null),p=(n,e)=>n.getAttribute(e),V=n=>{const e=F(),t=(o,c)=>{e[o]=c},s=new Map,r=(o,c)=>{let u=s.get(o);return u||(u=new Set,s.set(o,u)),u.add(c),()=>{u.delete(c),u.size===0&&s.delete(o)}},i=new Proxy(F(),{get:(o,c)=>b.querySelector("[data-ref='"+n+":"+c+"']")});return new Proxy(e,{get:(o,c,u)=>{switch(c){case"$init":return t;case"$watch":return r;case"app":return l(0);case"refs":return i;default:return h?.(n,c),Reflect.get(o,c,u)}},set:(o,c,u,g)=>{if(u!==Reflect.get(o,c,g)){const f=s.get(c);return f&&queueMicrotask(()=>f.forEach(d=>d())),Reflect.set(o,c,u,g)}return!1}})},M=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}if(e&&e.length>2&&e.startsWith("[")&&e.endsWith("]"))return $renderAttr(n,e.slice(1,-1),t);const s=n.parentElement,r=()=>n.textContent=""+t();if(b.startViewTransition&&s.hasAttribute("data-vt")){const i=s.getAttribute("data-vt");return i&&(s.style.viewTransitionName=i),()=>b.startViewTransition(r)}return r},S=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},q=(n,e,t,s)=>{const r=n.get(t);if(r!==void 0){s(r);return}const i=e.get(t);i?i.push(s):e.set(t,[s])},N=(n,e)=>{const t=a.$fmap?.get(n);if(t){e(t);return}const s=m.get(n);s?s.push(e):m.set(n,[e])};if(typeof a.$F=="function"){const n=a.$F;a.$F=(e,t)=>{n(e,t);const s=m.get(e);s&&(m.delete(e),s.forEach(r=>r(t)))}}const T=n=>typeof n=="function"&&n(),A=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});A("m-signal",n=>{const e=Number(p(n,"scope")),t=l(e),s=p(n,"key");if(s)n.disposes.push(t.$watch(s,M(n,p(n,"mode"),()=>t[s])));else{const r=Number(p(n,"computed")),i=e+":"+r;q(E,v,i,o=>{N(r,c=>{const u=M(n,p(n,"mode"),c.bind(t));o.forEach(g=>{const[f,d]=S(g);n.disposes.push(l(f).$watch(d,u))})})})}}),A("m-effect",n=>{const{disposes:e}=n,t=Number(p(n,"scope"));q(k,$,t,s=>{const r=s.length,i=new Array(r);e.push(()=>{i.forEach(T),i.length=0});for(let o=0;o<r;o++)N(s[o],c=>{const u=[],g=l(t),f=()=>{T(i[o]),i[o]=c.call(g)};h=(d,w)=>u.push([d,w]),f(),h=void 0;for(const[d,w]of u)e.push(l(d).$watch(w,f))})})}),a.$S=(n,e)=>{const[t,s]=S(n);l(t).$init(s,e)},a.$C=(n,e,t)=>{const s=n+":"+e;E.set(s,t);const r=v.get(s);r&&(v.delete(s),r.forEach(i=>i(t)))},a.$E=(n,...e)=>{k.set(n,e);const t=$.get(n);t&&($.delete(n),t.forEach(s=>s(e)))},a.$patch=(n,...e)=>{for(const[t,...s]of e){let r=s.pop(),i=n;for(const o of s)i=i[o];i[r]=t}return n},a.$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 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 l=window,a=document,n=location,h=t=>t.origin===n.origin&&r(t)===r(n),r=({pathname:t,search:s})=>t+s;customElements.define("m-router",class extends HTMLElement{#s;#t=new Map;#r=r(n);#e;#o=!0;#i;#n;async#h(t){const s=new AbortController,i={"x-route":"true","x-flags":$FLAGS};this.#s?.abort(),this.#s=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")&&a.startViewTransition&&!this.#o?a.startViewTransition(s):s(),this.#o=!1}#l(){a.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:i}=t,e=t.closest("nav")?.getAttribute("data-active-class")??"active";h(new URL(s))?i.add(e):i.remove(e)})}async#c(t,s){this.#r=r(new URL(t,n.href));const i=this.#h(t).then(e=>{if(e){const[o,c]=e;return this.#t.set(t,o),this.#a(o),c}else this.#t.delete(t),this.#a(this.#e??[]),typeof $signals<"u"&&($signals(0).url=new URL(t))});this.#t.has(t)?this.#a(this.#t.get(t)):await i,history[s?.replace?"replaceState":"pushState"]({},"",t),this.#l(),window.scrollTo(0,0),i.then(e=>{e&&(a.body.appendChild(a.createElement("script")).textContent=e)})}navigate(t,s){const i=new URL(t,n.href);if(i.origin!==n.origin||t.startsWith("#")){n.href=t;return}h(i)||this.#c(t,s)}connectedCallback(){setTimeout(()=>{if(!this.#e)if(this.hasAttribute("fallback"))this.removeAttribute("fallback"),this.#e=[...this.childNodes];else{this.#e=[];for(const t of this.childNodes)if(t.nodeType===1&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-fallback")){this.#e.push(...t.content.childNodes),t.remove();break}}}),this.#i=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const s=t.target.getAttribute("href");if(!s||s.startsWith("#"))return;const{download:i,href:e,rel:o,target:c}=t.target;i||o==="external"||c==="_blank"||!e.startsWith(n.origin)||(t.preventDefault(),this.navigate(e))},this.#n=()=>{r(n)!==this.#r&&this.#c(n.href)},l.addEventListener("popstate",this.#n),a.addEventListener("click",this.#i),setTimeout(()=>this.#l()),l.$router=this}disconnectedCallback(){l.removeEventListener("popstate",this.#n),a.removeEventListener("click",this.#i),delete l.$router,this.#s?.abort(),this.#s=void 0,this.#t.clear(),this.#i=void 0,this.#n=void 0}});}`;
-var FORM_JS = `{const d=window.document,c=(n,e)=>n.getAttribute(e),u=(n,e)=>n.appendChild(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=c(this,"for"),e=this.closest("form"),m=this.textContent;if(n&&e&&m)for(const i of n.split(",")){const s=e.elements.namedItem(i.trim());if(s){const l=()=>{s.removeEventListener("input",l),s.setCustomValidity("")};s.addEventListener("input",l),s.setCustomValidity(m),s.focus()}}this.remove()}}),window.$onrfs=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const m=new FormData(e),i=[...e.elements];for(const l of i)l._disabled=l.disabled,l.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:m});if(s.ok){const[l,p]=await s.json(),E=d.createElement("template"),b=new Map;e.querySelectorAll("m-formslot").forEach(t=>{t.innerHTML=""}),E.innerHTML=l;for(const t of i)t.disabled=t._disabled,delete t._disabled;for(const t of E.content.childNodes){if(t.nodeType===1){const o=t,r=c(o,"formslot"),a=r?'m-formslot[name="'+r+'"]':"m-formslot",f=r?e.querySelector(a)??d.querySelector(a):e.querySelector(a);if(f){f.innerHTML="",b.set(o,f);continue}}u(e,t)}for(const[t,o]of b){const r=c(o,"onupdate"),a=c(o,"scope");switch(c(o,"mode")){case"insertbefore":o.before(t);break;case"insertafter":o.after(t);break;default:u(o,t)}r&&$fmap.get(Number(r))?.call($signals?.(Number(a))??o,{type:"update",target:o})}setTimeout(()=>{i.some(t=>!t.validity.valid)||e.reset()},0),p&&(u(d.body,d.createElement("script")).textContent=p+";document.currentScript.remove();")}};}`;
+var ROUTER_JS = `{const o=window,r=document,s=location,d=e=>e.origin===s.origin&&l(e)===l(s),l=({pathname:e,search:t})=>e+t;customElements.define("m-router",class extends HTMLElement{#e;#i=new Map;#s=l(s);#t;#a=!0;#n;#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,n=e.closest("nav")?.getAttribute("data-active-class")??"active";d(new URL(t))?i.add(n):i.remove(n)})}async#h(e,t){this.#s=l(e);let i,n=this.#i.get(this.#s);if(n!==void 0&&!t?.refresh&&!this.hasAttribute("no-cache"))this.#o(n);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.#s,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,s.href);if(i.origin!==s.origin||e.startsWith("#")){s.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(s.href,[...this.childNodes])}),this.#n=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:n,rel:h,target:a}=e.target;i||h==="external"||a==="_blank"||!n.startsWith(s.origin)||(e.preventDefault(),this.navigate(n))},this.#r=()=>{l(s)!==this.#s&&this.#h(new URL(s.href))},o.addEventListener("popstate",this.#r),r.addEventListener("click",this.#n),setTimeout(()=>this.#l())}disconnectedCallback(){o.removeEventListener("popstate",this.#r),r.removeEventListener("click",this.#n),delete o.$router,this.#e?.abort(),this.#e=void 0,this.#i.clear(),this.#n=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 d=window.document,c=(n,e)=>n.getAttribute(e),u=(n,e)=>n.appendChild(e);customElements.define("m-invalid",class extends HTMLElement{connectedCallback(){const n=c(this,"for"),e=this.closest("form"),m=this.textContent;if(n&&e&&m)for(const i of n.split(",")){const s=e.elements.namedItem(i.trim());if(s){const l=()=>{s.removeEventListener("input",l),s.setCustomValidity("")};s.addEventListener("input",l),s.setCustomValidity(m),s.focus()}}this.remove()}}),window.$onRFS=async n=>{n.preventDefault();const e=n.target;if(!e.checkValidity())return;const m=new FormData(e),i=[...e.elements];for(const l of i)l._disabled=l.disabled,l.disabled=!0;const s=await fetch(location.href,{method:"POST",headers:{"x-route-form":"true","x-flags":$FLAGS},body:m});if(s.ok){const[l,p]=await s.json(),E=d.createElement("template"),b=new Map;e.querySelectorAll("m-formslot").forEach(t=>{t.innerHTML=""}),E.innerHTML=l;for(const t of i)t.disabled=t._disabled,delete t._disabled;for(const t of E.content.childNodes){if(t.nodeType===1){const o=t,r=c(o,"formslot"),a=r?'m-formslot[name="'+r+'"]':"m-formslot",f=r?e.querySelector(a)??d.querySelector(a):e.querySelector(a);if(f){f.innerHTML="",b.set(o,f);continue}}u(e,t)}for(const[t,o]of b){const r=c(o,"onupdate"),a=c(o,"scope");switch(c(o,"mode")){case"insertbefore":o.before(t);break;case"insertafter":o.after(t);break;default:u(o,t)}r&&$fmap.get(Number(r))?.call($signals?.(Number(a))??o,{type:"update",target:o})}setTimeout(()=>{i.some(t=>!t.validity.valid)||e.reset()},0),p&&(u(d.body,d.createElement("script")).textContent=p+";document.currentScript.remove();")}};}`;
 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
@@ -42,19 +54,6 @@ var isFunction = (v) => typeof v === "function";
 var isObject = (v) => typeof v === "object" && v !== null;
 var isPlainObject = (v) => isObject(v) && (v.constructor === Object || v.constructor === void 0);
 var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
-var IdGen = class extends Map {
-  #seq = 0;
-  gen(v) {
-    return this.get(v) ?? this.set(v, this.#seq++).get(v);
-  }
-  getById(id) {
-    for (const [v, i] of this.entries()) {
-      if (i === id) {
-        return v;
-      }
-    }
-  }
-};
 var hashCode = (str) => {
   let hash = 0;
   for (let i = 0; i < str.length; i++) {
@@ -171,16 +170,6 @@ var escapeHTML = (str) => {
   return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
 };
-// symbols.ts
-var $fragment = /* @__PURE__ */ Symbol.for("jsx.fragment");
-var $html = /* @__PURE__ */ Symbol.for("jsx.html");
-var $vnode = /* @__PURE__ */ Symbol.for("jsx.vnode");
-var $setup = /* @__PURE__ */ Symbol.for("mono.setup");
-var $rpc = /* @__PURE__ */ Symbol.for("mono.rpc");
-// version.ts
-var VERSION = "0.10.0-beta.4";
 // render.ts
 var FunctionIdGenerator = class extends Map {
   constructor(seq = 0) {
@@ -218,6 +207,19 @@ var Ref = class {
     this.name = name;
   }
 };
+var IdGen = class extends Map {
+  #seq = 0;
+  gen(v) {
+    return this.get(v) ?? this.set(v, this.#seq++).get(v);
+  }
+  getById(id) {
+    for (const [v, i] of this.entries()) {
+      if (i === id) {
+        return v;
+      }
+    }
+  }
+};
 var cdn = "https://raw.esm.sh";
 var encoder = new TextEncoder();
 var voidTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
@@ -227,8 +229,6 @@ var subtle = crypto.subtle;
 var stringify = JSON.stringify;
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var isReactive = (v) => v instanceof Signal || v instanceof Compute;
-var isFC = (v) => isFunction(v) && v.name.charCodeAt(0) <= /*Z*/
-90;
 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) + '"';
@@ -240,8 +240,7 @@ function renderToWebStream(root, options) {
   const reqHeaders = request?.headers;
   const componentName = reqHeaders?.get("x-component");
   const routeForm = reqHeaders?.has("x-route-form");
-  const rpc = reqHeaders?.has("x-rpc");
-  if (rpc) {
+  if (reqHeaders?.has("x-rpc")) {
     if (!request || request.method !== "POST") {
       return new Response(null, { status: 405 });
     }
@@ -277,7 +276,7 @@ function renderToWebStream(root, options) {
       }
       try {
         const rpcSession = session ? await createSession(request, session) : void 0;
-        const result = await rpcFunction.apply(createRPCThis(request, context, rpcSession), args);
+        const result = await rpcFunction.apply(createInvokeScope(request, context, rpcSession), args);
         return Response.json({ result });
       } catch (err) {
         return Response.json({ error: errorStringify(err) }, { status: 500 });
@@ -333,7 +332,7 @@ function renderToWebStream(root, options) {
   }
   if (reqHeaders?.has("x-route") || routeForm) {
     if (!routeFC) {
-      return Response.json({ error: { message: "Route not found" }, status }, { headers, status });
+      return Response.json({ error: "Route not found", status }, { headers, status });
     }
     component = routeFC;
   }
@@ -344,23 +343,24 @@ function renderToWebStream(root, options) {
         async start(controller) {
           try {
             if (component instanceof Promise) {
-              const module = await component;
-              component = module.default;
-              if (module.FormHandler && !component.FormHandler) {
-                component.FormHandler = module.FormHandler;
+              const { default: defaultExport, ...rest } = await component;
+              if (isFunction(defaultExport)) {
+                component = defaultExport;
+                Object.assign(component, rest);
               }
             }
             let propsHeader = reqHeaders?.get("x-props");
             let props = propsHeader ? JSON.parse(propsHeader) : {};
             let html2 = "";
             let js = "";
-            let json = "";
+            let buf = "";
             let vnode = [component, props, $vnode];
             if (routeForm && request?.method === "POST") {
-              if (typeof component.FormHandler !== "function") {
+              const FormHandler = component.FormHandler;
+              if (!FormHandler || !isFunction(FormHandler)) {
                 throw new Error(component.name + ".FormHandler is undefined or not a function");
               }
-              vnode = [component.FormHandler, await request.formData(), $vnode];
+              vnode = [FormHandler, await request.formData(), $vnode];
             }
             await render(
               vnode,
@@ -370,15 +370,16 @@ function renderToWebStream(root, options) {
               true,
               routeForm
             );
-            json = "[" + stringify(html2);
+            buf = "[" + stringify(html2);
             if (js) {
-              json += "," + stringify(js);
+              buf += "," + stringify(js);
             }
-            controller.enqueue(encoder.encode(json + "]"));
+            if (component.dynamic) {
+              buf += ",true";
+            }
+            controller.enqueue(encoder.encode(buf + "]"));
           } catch (err) {
-            controller.enqueue(encoder.encode(
-              '["",' + stringify('console.log("[mono-jsx]",' + stringify(err.stack)) + "]"
-            ));
+            controller.enqueue(encoder.encode(stringify({ error: errorStringify(err) })));
             console.error(err);
           } finally {
             controller.close();
@@ -417,7 +418,7 @@ function renderToWebStream(root, options) {
   );
 }
 async function render(node, options, write, writeJS, componentMode, routeForm) {
-  const { app, context, request, routeFC } = options;
+  const { app, context, request, routeFC, metadata } = options;
   const suspenses = [];
   const signals = {
     app: {},
@@ -432,14 +433,14 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
     request,
     signals,
     routeFC,
+    metadata,
     flags: { scope: 0, chunk: 0, runtime: 0 },
-    fidGenerator: new FunctionIdGenerator(),
-    extraJS: []
+    fidGenerator: new FunctionIdGenerator()
   };
   signals.app = Object.assign(createThisProxy(rc, 0), app);
   let runtimeFlag = 0;
   const finalize = async () => {
-    const { extraJS, fidGenerator, session, flags } = rc;
+    const { fidGenerator, session, flags } = rc;
     const computes = signals.computes;
     const hasEffect = signals.effects.length > 0;
     const treeshake = (flag, code, force) => {
@@ -461,16 +462,14 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
     treeshake(SUSPENSE, SUSPENSE_JS, suspenses.length > 0);
     treeshake(COMPONENT, COMPONENT_JS);
     treeshake(ROUTER, ROUTER_JS);
+    treeshake(REDIRECT, REDIRECT_JS);
     treeshake(FORM, FORM_JS);
-    if (js.length > 0) {
-      js = "(()=>{" + js + "})();/*!*/";
-    }
     if (runtimeFlag & ROUTER && runtimeFlag & SIGNALS && request) {
       const { params } = request;
       const url = "new URL(" + stringify(request.url) + ")";
       const urlWithParams = params ? "Object.assign(" + url + "," + stringify(params) + ")" : url;
       if (componentMode) {
-        if (!routeForm) {
+        if (!routeForm && params) {
           js += "$signals(0).url=" + urlWithParams + ";";
         }
       } else {
@@ -562,12 +561,9 @@ async function render(node, options, write, writeJS, componentMode, routeForm) {
         if (sameSite) {
           cookie += "; SameSite=" + sameSite;
         }
-        js += "document.cookie=" + toAttrStringLit(cookie) + ";";
+        js = "document.cookie=" + toAttrStringLit(cookie) + ";" + js;
       }
     }
-    if (extraJS.length > 0) {
-      js += extraJS.splice(0, extraJS.length).join("");
-    }
     if (js.length > 0) {
       writeJS(js);
     }
@@ -695,7 +691,11 @@ async function renderNode(rc, node, stripSlotProp) {
           // `<switch>` element
           case "switch": {
             const { value: valueProp, children } = props;
-            if (children !== void 0) {
+            if (rc.svg && valueProp === void 0) {
+              write("<switch>");
+              await renderChildren(rc, children);
+              write("</switch>");
+            } else if (children !== void 0) {
               let slots = Array.isArray(children) ? isVNode(children) ? [children] : children : [children];
               let matchedSlot;
               let namedSlots = [];
@@ -761,11 +761,11 @@ async function renderNode(rc, node, stripSlotProp) {
             };
             if (isVNode(as)) {
               const [fc, props2] = as;
-              if (isFC(fc)) {
+              if (isFunction(fc)) {
                 attrs += ' name="@comp_' + componentsMap.gen(fc) + '"';
                 writeAttr("props", props2);
               }
-            } else if (isFC(is)) {
+            } else if (isFunction(is)) {
               attrs += ' name="@comp_' + componentsMap.gen(is) + '"';
               writeAttr("props");
             } else if (props.name) {
@@ -803,7 +803,14 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             write("<m-router" + attrs + ">");
             if (routeFC) {
-              await renderFC(rc, routeFC instanceof Promise ? (await routeFC).default : routeFC, {}, true);
+              if (routeFC instanceof Promise) {
+                routeFC = (await routeFC).default;
+                if (!routeFC || !isFunction(routeFC)) {
+                  console.warn("[mono-jsx] <router> The `default` export is not a function component.");
+                  break;
+                }
+              }
+              await renderFC(rc, routeFC, {}, true);
             }
             if (children) {
               if (routeFC) {
@@ -822,6 +829,32 @@ async function renderNode(rc, node, stripSlotProp) {
             rc.flags.runtime |= ROUTER;
             break;
           }
+          case "metadata": {
+            if (rc.svg) {
+              write("<metadata>");
+              await renderChildren(rc, props.children);
+              write("</metadata>");
+            } else if (rc.routeFC) {
+              let { metadata, getMetadata } = await rc.routeFC;
+              if (isFunction(getMetadata)) {
+                const { request, context, session } = rc;
+                if (!request) {
+                  throw new TypeError("[mono-jsx] The `request` prop in the `<html>` element is required.");
+                }
+                metadata = await getMetadata.call(createInvokeScope(request, context, session));
+              }
+              let buf = "";
+              for (const [key, value] of Object.entries(Object.assign({}, rc.metadata, metadata))) {
+                if (key === "title") {
+                  buf += "<title>" + value + "</title>";
+                } else {
+                  buf += "<meta name=" + toAttrStringLit(key) + " content=" + toAttrStringLit(value) + ">";
+                }
+              }
+              write(buf);
+            }
+            break;
+          }
           case "cache":
           case "static": {
             const { $stack, key = $stack, maxAge, children } = props;
@@ -857,10 +890,15 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           case "redirect": {
             const { to, replace } = props;
-            if (to) {
-              rc.extraJS.push(
-                '{let u=decodeURI("' + encodeURI(String(to)) + '");if(window.$router){$router.navigate(u' + (replace ? ",!1" : "") + ")}else{location.href=u}}"
-              );
+            if (isString(to) || to instanceof URL) {
+              let buf = "<m-redirect";
+              buf += " to=" + toAttrStringLit(String(to));
+              if (replace) {
+                buf += " replace";
+              }
+              buf += "></m-redirect>";
+              write(buf);
+              rc.flags.runtime |= REDIRECT;
             }
             break;
           }
@@ -915,8 +953,8 @@ async function renderNode(rc, node, stripSlotProp) {
               }
               let buffer = "<" + tag;
               let attrModifiers = "";
-              let isSingleEl = props.children === void 0;
-              let isSvgSelfClosingElement = rc.svg && isSingleEl;
+              let noChildren = props.children === void 0;
+              let isSvgSelfClosingElement = rc.svg && noChildren;
               for (let [propName, propValue] of Object.entries(props)) {
                 switch (propName) {
                   case "children":
@@ -924,7 +962,7 @@ async function renderNode(rc, node, stripSlotProp) {
                     break;
                   case "route":
                     if (tag === "form") {
-                      buffer += ' onsubmit="$onrfs(event)"';
+                      buffer += ' onsubmit="$onRFS(event)"';
                       rc.flags.runtime |= FORM;
                       break;
                     }
@@ -947,7 +985,7 @@ async function renderNode(rc, node, stripSlotProp) {
                 if (attrModifiers) {
                   write(attrModifiers);
                 }
-                if (!isSingleEl) {
+                if (!noChildren) {
                   await renderChildren(tag === "svg" ? { ...rc, svg: true } : rc, props.children);
                 }
                 if (!isSvgSelfClosingElement) {
@@ -1061,7 +1099,7 @@ async function renderFC(rc, fcFn, props, eager) {
       });
     } else {
       console.error(err);
-      write("<script>console.error(" + stringify(err instanceof Error ? err.stack ?? err.message : String(err)) + ")<\/script>");
+      write("<script>console.error(" + stringify(err) + ")<\/script>");
     }
   }
 }
@@ -1357,7 +1395,7 @@ function createThisProxy(rc, scopeId) {
   });
   return thisProxy;
 }
-function createRPCThis(request, context, session) {
+function createInvokeScope(request, context, session) {
   const scope = new NullPrototypeObject();
   Object.assign(scope, { request, context: context ?? {} });
   Object.defineProperty(scope, "session", {
@@ -1469,7 +1507,19 @@ var jsx = (tag, props = new NullPrototypeObject(), key) => {
       return props;
     }
     const renderOptions = new NullPrototypeObject();
-    const optionsKeys = /* @__PURE__ */ new Set(["app", "context", "components", "expose", "routes", "request", "session", "status", "headers", "htmx"]);
+    const optionsKeys = /* @__PURE__ */ new Set([
+      "app",
+      "context",
+      "components",
+      "expose",
+      "routes",
+      "request",
+      "session",
+      "status",
+      "headers",
+      "htmx",
+      "metadata"
+    ]);
     for (const [key2, value] of Object.entries(props)) {
       if (optionsKeys.has(key2) || key2.startsWith("htmx-ext-")) {
         renderOptions[key2] = value;

package/package.json CHANGED Viewed

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

package/types/jsx-runtime.d.ts CHANGED Viewed

@@ -17,4 +17,6 @@ declare global {
     // extends the `<html>` element attributes
     interface HtmlCustomAttributes extends RenderOptions {}
   }
+  type ComponentElement = Mono.ComponentElement;
+  type RouterElement = Mono.RouterElement;
 }

package/types/jsx.d.ts CHANGED Viewed

@@ -4,6 +4,8 @@ export type ChildPrimitiveType = JSX.Element | string | number | bigint | boolea
 export type ChildType = MaybeArray<MaybeGetter<ChildPrimitiveType>>;
 export type MaybeArray<T> = T | T[];
 export type MaybeGetter<T> = T | { get: () => T };
+export type MaybePromise<T> = T | Promise<T>;
+export type MaybeModule<T> = T | Promise<{ default: T } & ComponentConfig>;
 export type MaybePromiseOrGenerator<T> = T | Promise<T> | Generator<T> | AsyncGenerator<T>;
 export interface BaseAttributes {
@@ -54,11 +56,18 @@ export type VNode = readonly [
   $vnode: symbol,
 ];
-export interface ComponentType<P = {}> {
-  (props: P): MaybePromiseOrGenerator<VNode | string | null>;
+export interface ComponentConfig {
+  FormHandler?: ComponentType<FormData>;
+  getMetadata?: () => MaybePromise<Record<string, string>>;
+  metadata?: Record<string, string>;
+  dynamic?: boolean;
   rendering?: string;
 }
+export interface ComponentType<P = {}> extends ComponentConfig {
+  (props: P): MaybePromiseOrGenerator<VNode | string | null>;
+}
 export interface MonoBuiltinElements {
   /**
    * A built-in element of mono-jsx that toggles the visibility of its children.

package/types/mono.d.ts CHANGED Viewed

@@ -4,7 +4,7 @@ export type WithParams<T> = T & { params?: Record<string, string> };
 export interface Elements {
   /**
-   * A built-in element of mono-jsx that is used to load components lazily,
+   * The `<component>` element is used to load components lazily,
    * which can improve performance by reducing the initial load time of the application.
    * @mono-jsx
    */
@@ -37,7 +37,7 @@ export interface Elements {
   };
   /**
-   * A built-in element of mono-jsx that provides SPA routing.
+   * The `<router>` element provides SPA routing.
    * @mono-jsx
    */
   router: BaseAttributes & AsyncComponentAttributes & {
@@ -57,7 +57,7 @@ export interface Elements {
   };
   /**
-   * A built-in element of mono-jsx that caches the rendered content of the child nodes
+   * The `<cache>` element caches the rendered content of the child nodes
    * with the given key and TTL.
    * @mono-jsx
    */
@@ -73,14 +73,14 @@ export interface Elements {
   };
   /**
-   * A built-in element of mono-jsx that treats the child nodes as static content,
+   * The `<static>` element treats the child nodes as static content,
    * When the child nodes are rendered once, they will be cached in memory and reused on subsequent renders.
    * @mono-jsx
    */
   static: BaseAttributes;
   /**
-   * A built-in element of mono-jsx that redirects to the given URL in the client side.
+   * The `<redirect>` element redirects to the given URL in the client side.
    * @mono-jsx
    */
   redirect: {
@@ -96,7 +96,7 @@ export interface Elements {
   };
   /**
-   * A built-in element of mono-jsx that sets custom validation
+   * The `<invalid>` element sets custom validation
    * state for the form elements.
    * @mono-jsx
    */
@@ -108,7 +108,7 @@ export interface Elements {
   };
   /**
-   * A built-in element of mono-jsx that is used to display the content of the route form
+   * The `<formslot>` element is used to display the content of the route form
    * in the `form` element.
    * @mono-jsx
    */
@@ -147,11 +147,29 @@ export type ComponentElement = {
   refresh: () => Promise<void>;
 };
+/**
+ * The options for the `navigate` method of the `<router>` element.
+ */
+export type RouterNavigateOptions = {
+  /**
+   * If true, `history.replaceState` will be called instead of `history.pushState`.
+   * This is useful when you want to replace the current navigation without adding a new entry to the history.
+   */
+  replace?: boolean;
+  /**
+   * If true, the router will ignore the cache and fetch the page HTML from the server.
+   */
+  refresh?: boolean;
+};
 /**
  * The `<router>` element.
  */
 export type RouterElement = {
-  navigate: (url: string | URL, options?: { replace?: boolean }) => Promise<void>;
+  /**
+   * Navigates to the given URL.
+   */
+  navigate: (url: string | URL, options?: RouterNavigateOptions) => Promise<void>;
 };
 /**

package/types/render.d.ts CHANGED Viewed

@@ -1,9 +1,6 @@
 /// <reference path="./htmx.d.ts" />
-import { inflate } from "node:zlib";
-import type { ComponentType } from "./jsx.d.ts";
-export type MaybeModule<T> = T | Promise<{ default: T; FormHandler?: Function }>;
+import type { ComponentType, MaybeModule } from "./jsx.d.ts";
 /**
  * Htmx extensions.
@@ -89,6 +86,10 @@ export interface RenderOptions extends Partial<HtmxExts> {
    * Routes to be used by the `<router>` element.
    */
   routes?: Record<string, MaybeModule<ComponentType<any>>>;
+  /**
+   * Global metadata.
+   */
+  metadata?: Record<string, string>;
   /**
    * Current `Request` object to be passed to components.
    */