npm - mono-jsx - Versions diffs - 0.6.3 → 0.6.5 - Mend

mono-jsx 0.6.3 → 0.6.5

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 (9) hide show

package/README.md CHANGED Viewed

@@ -10,7 +10,7 @@ mono-jsx is a JSX runtime that renders `<html>` element to `Response` object in
 - ⚡️ Use web components, no virtual DOM
 - 💡 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
-- 🗂️ Built-in router
+- 🗂️ Built-in router(SPA mode)
 - 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
@@ -150,11 +150,13 @@ mono-jsx supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/
 ```tsx
 <a
   style={{
+    display: "inline-flex",
+    gap: "0.5em",
     color: "black",
     "::after": { content: "↩️" },
     ":hover": { textDecoration: "underline" },
     "@media (prefers-color-scheme: dark)": { color: "white" },
-    "& .icon": { width: "1em", height: "1em", marginRight: "0.5em" },
+    "& .icon": { width: "1em", height: "1em" },
   }}
 >
   <img class="icon" src="link.png" />
@@ -361,7 +363,7 @@ interface AppSignals {
 function Header(this: FC<{}, AppSignals>) {
   return (
     <header>
-      <h1 style={this.computed(() => ({ color: this.app.themeColor }))}>Welcome to mono-jsx!</h1>
+      <h1 style={{ color: this.app.themeColor }}>Welcome to mono-jsx!</h1>
     </header>
   )
 }
@@ -369,7 +371,7 @@ function Header(this: FC<{}, AppSignals>) {
 function Footer(this: FC<{}, AppSignals>) {
   return (
     <footer>
-      <p style={this.computed(() => ({ color: this.app.themeColor }))}>(c) 2025 mono-jsx.</p>
+      <p style={{ color: this.app.themeColor }}>(c) 2025 mono-jsx.</p>
     </footer>
   )
 }
@@ -836,9 +838,9 @@ export default {
 }
 ```
-## Using Router(SPA)
+## Using Router(SPA Mode)
-mono-jsx provides a built-in `<router>` element that allows your app to render components based on the current URL. On client side, it hijacks all `click` events on `<a>` elements and asynchronously fetches the route component without reloading the entire page.
+mono-jsx provides a built-in `<router>` element that allows your app to render components based on the current URL. On client side, it listens all `click` events on `<a>` elements and asynchronously fetches the route component without reloading the entire page.
 To use the router, you need to define your routes as a mapping of URL patterns to components and pass it to the `<html>` element as `routes` prop. The `request` prop is also required to match the current URL against the defined routes.
@@ -853,13 +855,11 @@ const routes = {
 export default {
   fetch: (req) => (
     <html request={req} routes={routes}>
-      <header>
-        <nav>
-          <a href="/">Home</a>
-          <a href="/about">About</a>
-          <a href="/blog">Blog</a>
-        </nav>
-      </header>
+      <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+      </nav>
       <router />
     </html>
   )
@@ -872,12 +872,10 @@ mono-jsx router requires [URLPattern](https://developer.mozilla.org/en-US/docs/W
 - ✅ Cloudflare Workers
 - ✅ Nodejs (>= 24)
-For Bun users, mono-jsx provides a `monoRoutes` function that uses Bun's builtin routing:
+For Bun users, mono-jsx provides a `buildRoutes` function that uses Bun's built-in server routing:
 ```tsx
-// bun app.tsx
-import { monoRoutes } from "mono-jsx"
+import { buildRoutes } from "mono-jsx"
 const routes = {
   "/": Home,
@@ -886,13 +884,18 @@ const routes = {
   "/post/:id": Post,
 }
-export default {
-  routes: monoRoutes(routes, (request) => (
-    <html request={request}>
+Bun.serve({
+  routes: buildRoutes((req) => (
+    <html request={req} routes={routes}>
+      <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+      </nav>
       <router />
     </html>
   ))
-}
+})
 ```
 ### Using Route `params`
@@ -909,46 +912,66 @@ function Post(this: FC) {
 }
 ```
-### Using DB/Storage in Route Components
+### Navigation between Pages
-Route components are always rendered on server-side, you can use any database or storage API to fetch data in your route components. For example, if you're using a SQL database, you can use the `sql` tag function to query the database:
+To navigate between pages, you can use `<a>` elements with `href` attributes that match the defined routes. The router will intercept the click events of these links and fetch the corresponding route component without reloading the page:
 ```tsx
-async function Post(this: FC) {
-  const post = await sql`SELECT * FROM posts WHERE id = ${ this.request.params!.id }`
-  return (
-    <article>
-      <h2>{post.title}<h2>
-      <div>html`${post.content}`</div>
-    </article>
+function App() {
+  export default {
+  fetch: (req) => (
+    <html request={req} routes={routes}>
+      <nav>
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+      </nav>
+      <router />
+    </html>
   )
 }
 ```
 ### Nav Links
-Links under a `<nav>` element will be treated as navigation links by the router. When the `href` of a link matches a route, A 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` attribute on the `<nav>` element. You can also add a custom style for the active link using nested CSS selectors in the `style` attribute of the `<nav>` element:
+Links under the `<nav>` element will be treated as navigation links by the router. When the `href` of a nav link matches a route, a 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` attribute on the `<nav>` element. You can add style for the active link using nested CSS selectors in the `style` attribute of the `<nav>` element.
 ```tsx
 export default {
   fetch: (req) => (
     <html request={req} routes={routes}>
-      <header>
-        <nav style={{ "& a.active": { fontWeight: "bold" } }} data-active-class="active">
-          <a href="/">Home</a>
-          <a href="/about">About</a>
-          <a href="/blog">Blog</a>
-        </nav>
-      </header>
+      <nav style={{ "& a.active": { fontWeight: "bold" } }} data-active-class="active">
+        <a href="/">Home</a>
+        <a href="/about">About</a>
+        <a href="/blog">Blog</a>
+      </nav>
       <router />
     </html>
   )
 }
 ```
+### Using DB/Storage in Route Components
+Route components are always rendered on server-side, you can use any database or storage API to fetch data in your route components.
+```tsx
+async function Post(this: FC) {
+  const post = await sql`SELECT * FROM posts WHERE id = ${ this.request.params!.id }`
+  return (
+    <article>
+      <h2>{post.title}<h2>
+      <section>
+        {html(post.content)}
+      </section>
+    </article>
+  )
+}
+```
 ### 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:
+You can add fallback(404) content to the `<router>` element as children, which will be displayed when no route matches the current URL.
 ```tsx
 export default {
@@ -1044,9 +1067,9 @@ export default {
 }
 ```
-#### Installing htmx Manually
+#### Setup htmx Manually
-By default, mono-jsx installs htmx from [esm.sh](https://esm.sh/) CDN when you set the `htmx` attribute. You can also install htmx manually with your own CDN or local copy:
+By default, mono-jsx imports htmx from [esm.sh](https://esm.sh/) CDN when you set the `htmx` attribute. You can also setup htmx manually with your own CDN or local copy:
 ```tsx
 export default {

package/index.mjs CHANGED Viewed

@@ -1,4 +1,8 @@
 // index.ts
+function buildRoutes(handler) {
+  const { routes = {} } = handler(Symbol.for("mono.peek"));
+  return monoRoutes(routes, handler);
+}
 function monoRoutes(routes, handler) {
   const handlers = {};
   for (const [path, fc] of Object.entries(routes)) {
@@ -10,5 +14,6 @@ function monoRoutes(routes, handler) {
   return handlers;
 }
 export {
+  buildRoutes,
   monoRoutes
 };

package/jsx-runtime.mjs CHANGED Viewed

@@ -1,11 +1,6 @@
-// runtime/index.ts
-var CX_JS = `{var i=new Set("animation-iteration-count,aspect-ratio,border-image-outset,border-image-slice,border-image-width,box-flex-group,box-flex,box-ordinal-group,column-count,columns,fill-opacity,flex-grow,flex-negative,flex-order,flex-positive,flex-shrink,flex,flood-opacity,font-weight,grid-area,grid-column-end,grid-column-span,grid-column-start,grid-column,grid-row-end,grid-row-span,grid-row-start,grid-row,line-clamp,line-height,opacity,order,orphans,stop-opacity,stroke-dasharray,stroke-dashoffset,stroke-miterlimit,stroke-opacity,stroke-width,tab-size,widows,z-index,zoom".split(",")),r=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;var n=e=>r(e)?e:o(e)?Array.isArray(e)?e.map(n).filter(Boolean).join(" "):Object.entries(e).filter(([,t])=>!!t).map(([t])=>t).join(" "):"";window.$cx=n;}`;
-var STYLE_JS = `{var c=new Set("animation-iteration-count,aspect-ratio,border-image-outset,border-image-slice,border-image-width,box-flex-group,box-flex,box-ordinal-group,column-count,columns,fill-opacity,flex-grow,flex-negative,flex-order,flex-positive,flex-shrink,flex,flood-opacity,font-weight,grid-area,grid-column-end,grid-column-span,grid-column-start,grid-column,grid-row-end,grid-row-span,grid-row-start,grid-row,line-clamp,line-height,opacity,order,orphans,stop-opacity,stroke-dasharray,stroke-dashoffset,stroke-miterlimit,stroke-opacity,stroke-width,tab-size,widows,z-index,zoom".split(",")),a=e=>typeof e=="string",l=e=>typeof e=="object"&&e!==null,u=e=>e.replace(/[a-z][A-Z]/g,o=>o.charAt(0)+"-"+o.charAt(1).toLowerCase());var p=e=>{let o=[],i=[],t=new g;for(let[n,r]of Object.entries(e))switch(n.charCodeAt(0)){case 58:i.push(null,n+"{"+s(r)+"}");break;case 64:i.push(n+"{",null,"{"+s(r)+"}}");break;case 38:i.push(null,n.slice(1)+"{"+s(r)+"}");break;default:o.push([n,r])}return o.length>0&&(t.inline=s(o)),i.length>0&&(t.css=i),t},f=(e,o)=>{let{inline:i,css:t}=p(o);if(t){let n="[data-css-"+Date.now().toString(36)+"]";document.head.appendChild(document.createElement("style")).textContent=(i?n+"{"+i+"}":"")+t.map(r=>r===null?n:r).join(""),e.getAttributeNames().forEach(r=>r.startsWith("data-css-")&&e.removeAttribute(r)),e.setAttribute(n.slice(1,-1),"")}else i&&e.setAttribute("style",i)},s=e=>{if(l(e)){let o="";for(let[i,t]of Array.isArray(e)?e:Object.entries(e))if(a(t)||typeof t=="number"){let n=u(i),r=typeof t=="number"?c.has(n)?""+t:t+"px":""+t;o+=(o?";":"")+n+":"+(n==="content"?JSON.stringify(r):r)}return o}return""},g=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=f;}`;
-var EVENT_JS = `{var w=window;w.$emit=(e,f,s)=>f.call(w.$signals?.(s)??e.target,e.type==="mount"?e.target:e);w.$onsubmit=(e,f,s)=>{e.preventDefault();f.call(w.$signals?.(s)??e.target,new FormData(e.target),e)};}`;
-var SIGNALS_JS = `{let p;const m=window,E=new Map,b=new Map,d=e=>b.get(e)??b.set(e,S(e)).get(e),u=(e,t)=>e.getAttribute(t),y=(e,t,r)=>e.setAttribute(t,r),M=(e,t)=>e.replaceChildren(...t),v=()=>Object.create(null),S=e=>{const t=v(),r=(c,l)=>{t[c]=l},n=new Map,i=(c,l)=>{let o=n.get(c);return o||(o=new Set,n.set(c,o)),o.add(l),()=>{o.delete(l),o.size===0&&n.delete(c)}},s=new Proxy(v(),{get:(c,l)=>document.querySelector("[data-ref='"+e+":"+l+"']")});return new Proxy(t,{get:(c,l,o)=>{switch(l){case"$init":return r;case"$watch":return i;case"app":return d(0);case"refs":return s;default:return p?.(e,l),Reflect.get(c,l,o)}},set:(c,l,o,a)=>{if(o!==Reflect.get(c,l,a)){const f=n.get(l);return f&&queueMicrotask(()=>f.forEach(g=>g())),Reflect.set(c,l,o,a)}return!1}})},k=(e,t,r)=>{if(t==="toggle"){let n;return()=>{if(!n){const i=e.firstElementChild;i&&i.tagName==="TEMPLATE"&&i.hasAttribute("m-slot")?n=[...i.content.childNodes]:n=[...e.childNodes]}M(e,r()?n:[])}}if(t==="switch"){let n,i=u(e,"match"),s,c,l=o=>s.get(o)??s.set(o,[]).get(o);return()=>{if(!s){s=new Map,c=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&o.hasAttribute("m-slot")){for(const a of o.content.childNodes)a.nodeType===1&&a.hasAttribute("slot")?l(u(a,"slot")).push(a):c.push(a);o.remove()}else i?l(i).push(o):c.push(o)}n=""+r(),M(e,s.has(n)?s.get(n):c)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),i=e.parentElement;return i.tagName==="M-GROUP"&&(i=i.previousElementSibling),()=>{const s=r();s===!1||s===null||s===void 0?i.removeAttribute(n):typeof s=="object"&&s!==null&&(n==="class"||n==="style"||n==="props")?n==="class"?y(i,n,$cx(s)):n==="style"?$applyStyle(i,s):y(i,n,JSON.stringify(s)):y(i,n,s===!0?"":s)}}return()=>e.textContent=""+r()},N=e=>{const t=e.indexOf(":");return t>0?[Number(e.slice(0,t)),e.slice(t+1)]:null},w=async e=>{const t=e();return t!==void 0?t:(await new Promise(r=>setTimeout(r,0)),w(e))},T=(e,t)=>customElements.define(e,class extends HTMLElement{disposes=[];connectedCallback(){t(this)}disconnectedCallback(){this.disposes.forEach(r=>r()),this.disposes.length=0}});T("m-signal",e=>{const t=d(Number(u(e,"scope"))),r=u(e,"key");if(r)e.disposes.push(t.$watch(r,k(e,u(e,"mode"),()=>t[r])));else{const n=Number(u(e,"computed"));w(()=>E.get(n)).then(([i,s])=>{const c=k(e,u(e,"mode"),i.bind(t));s.forEach(l=>{const[o,a]=N(l);e.disposes.push(d(o).$watch(a,c))})})}}),T("m-effect",e=>{const{disposes:t}=e,r=Number(u(e,"scope")),n=Number(u(e,"n")),i=new Array(n);t.push(()=>{i.forEach(s=>typeof s=="function"&&s()),i.length=0});for(let s=0;s<n;s++){const c="$ME_"+r+"_"+s;w(()=>m[c]).then(l=>{const o=[],a=d(r),f=()=>{i[s]=l.call(a)};p=(g,h)=>o.push([g,h]),f(),p=void 0;for(const[g,h]of o)t.push(d(g).$watch(h,f))},()=>{})}}),m.$signals=e=>e!==void 0?d(e):void 0,m.$MS=(e,t)=>{const[r,n]=N(e);d(r).$init(n,t)},m.$MC=(e,t,r)=>{E.set(e,[t,r])},m.$merge=(e,...t)=>{for(const[r,...n]of t){let i=e;const s=n.pop();for(const c of n)i=i[c];i[s]=r}return e};}`;
-var SUSPENSE_JS = `{const s=new Map,i=e=>e.getAttribute("chunk-id"),l=(e,t)=>customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}});l("m-portal",e=>{s.set(i(e),e)}),l("m-chunk",e=>{setTimeout(()=>{const t=e.firstChild?.content.childNodes,o=i(e),n=s.get(o);n&&(e.hasAttribute("next")?n.before(...t):(s.delete(o),e.hasAttribute("done")?n.remove():n.replaceWith(...t)),e.remove())})});}`;
-var LAZY_JS = `{const r=document,o=(t,e)=>t.getAttribute(e),i=(t,e=[])=>t.replaceChildren(...e);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#e;#i;#n;#t;#s;async#r(){const t={"x-component":this.#e,"x-props":this.#i??"{}","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq},e=new AbortController;this.#s?.abort(),this.#s=e,i(this,this.#n);const s=await fetch(location.href,{headers:t,signal:e.signal});if(!s.ok)throw i(this),new Error("Failed to fetch component '"+name+"'");const[l,n]=await s.json();this.innerHTML=l,n&&(r.body.appendChild(r.createElement("script")).textContent=n)}connectedCallback(){setTimeout(()=>{if(!this.#e){const t=o(this,"name"),e=o(this,"props");if(!t)throw new Error("Component name is required");this.#e=t,this.#i=e?.startsWith("base64,")?atob(e.slice(7)):null,this.#n=[...this.childNodes]}this.#r()})}disconnectedCallback(){i(this,this.#n),this.#s?.abort(),this.#t&&clearTimeout(this.#t),this.#s=void 0,this.#t=void 0}attributeChangedCallback(t,e,s){this.#e&&s&&e!==s&&(t==="name"?this.#e=s:t==="props"&&(this.#i=s),this.#t&&clearTimeout(this.#t),this.#t=setTimeout(()=>{this.#t=void 0,this.#r()},20))}});}`;
-var ROUTER_JS = `{const n=document,a=t=>t.split("#",1)[0];customElements.define("m-router",class extends HTMLElement{#t;#e;#s;#i;async#o(t){const i={"x-route":"true","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq},e=new AbortController;this.#i?.abort(),this.#i=e;const s=await fetch(t,{headers:i,signal:e.signal});if(s.status===404){this.replaceChildren(...this.#t);return}if(!s.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+s.status+" "+s.statusText);const[o,r]=await s.json();this.innerHTML=o,r&&(n.body.appendChild(n.createElement("script")).textContent=r)}#n(){n.querySelectorAll("nav a").forEach(t=>{const{href:i,classList:e}=t,s=t.closest("nav").getAttribute("data-active-class")??"active";a(i)===a(location.href)?e.add(s):e.remove(s)})}#a(t){this.#o(t),this.#n()}connectedCallback(){setTimeout(()=>{if(!this.#t)if(this.getAttribute("status")==="404")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.#e=t=>{if(t.defaultPrevented||t.altKey||t.ctrlKey||t.metaKey||t.shiftKey||!(t.target instanceof HTMLAnchorElement))return;const{download:i,href:e,rel:s,target:o}=t.target;i||s==="external"||o==="_blank"||!e||!e.startsWith(location.origin)||a(e)===a(location.href)||(t.preventDefault(),history.pushState({},"",e),this.#a(e))},this.#s=()=>this.#a(location.href),addEventListener("popstate",this.#s),n.addEventListener("click",this.#e),setTimeout(()=>this.#n())}disconnectedCallback(){removeEventListener("popstate",this.#s),n.removeEventListener("click",this.#e),this.#i?.abort(),this.#s=void 0,this.#e=void 0,this.#i=void 0}});}`;
+// render.ts
+import { F_CX, F_EVENT, F_LAZY, F_ROUTER, F_SIGNALS, F_STYLE, F_SUSPENSE } from "./runtime/index.mjs";
+import { CX_JS, EVENT_JS, LAZY_JS, ROUTER_JS, SIGNALS_JS, STYLE_JS, SUSPENSE_JS } from "./runtime/index.mjs";
 // runtime/utils.ts
 var regexpHtmlSafe = /["'&<>]/;
@@ -121,18 +116,12 @@ var $vnode = Symbol.for("jsx.vnode");
 var $fragment = Symbol.for("jsx.fragment");
 var $html = Symbol.for("jsx.html");
 var $signal = Symbol.for("mono.signal");
+var $peek = Symbol.for("mono.peek");
 // version.ts
-var VERSION = "0.6.3";
+var VERSION = "0.6.4";
 // render.ts
-var RUNTIME_CX = 1;
-var RUNTIME_STYLE = 2;
-var RUNTIME_EVENT = 4;
-var RUNTIME_SIGNALS = 8;
-var RUNTIME_SUSPENSE = 16;
-var RUNTIME_LAZY = 32;
-var RUNTIME_ROUTER = 64;
 var cdn = "https://raw.esm.sh";
 var encoder = new TextEncoder();
 var customElements = /* @__PURE__ */ new Map();
@@ -296,38 +285,38 @@ async function render(node, options, write, writeJS, componentMode) {
   };
   const finalize = async () => {
     let js = "";
-    if (rc.flags.runtime & RUNTIME_CX && !(runtimeFlag & RUNTIME_CX)) {
-      runtimeFlag |= RUNTIME_CX;
+    if (rc.flags.runtime & F_CX && !(runtimeFlag & F_CX)) {
+      runtimeFlag |= F_CX;
       js += CX_JS;
     }
-    if (rc.flags.runtime & RUNTIME_STYLE && !(runtimeFlag & RUNTIME_STYLE)) {
-      runtimeFlag |= RUNTIME_STYLE;
+    if (rc.flags.runtime & F_STYLE && !(runtimeFlag & F_STYLE)) {
+      runtimeFlag |= F_STYLE;
       js += STYLE_JS;
     }
-    if (rc.mfs.size > 0 && !(runtimeFlag & RUNTIME_EVENT)) {
-      runtimeFlag |= RUNTIME_EVENT;
+    if (rc.mfs.size > 0 && !(runtimeFlag & F_EVENT)) {
+      runtimeFlag |= F_EVENT;
       js += EVENT_JS;
     }
-    if (signals.store.size + rc.mcs.size + signals.effects.length > 0 && !(runtimeFlag & RUNTIME_SIGNALS)) {
-      runtimeFlag |= RUNTIME_SIGNALS;
+    if ((signals.store.size > 0 || rc.mcs.size > 0 || signals.effects.length > 0) && !(runtimeFlag & F_SIGNALS)) {
+      runtimeFlag |= F_SIGNALS;
       js += SIGNALS_JS;
     }
-    if (suspenses.length > 0 && !(runtimeFlag & RUNTIME_SUSPENSE)) {
-      runtimeFlag |= RUNTIME_SUSPENSE;
+    if (suspenses.length > 0 && !(runtimeFlag & F_SUSPENSE)) {
+      runtimeFlag |= F_SUSPENSE;
       js += SUSPENSE_JS;
     }
-    if (rc.flags.runtime & RUNTIME_LAZY && !(runtimeFlag & RUNTIME_LAZY)) {
-      runtimeFlag |= RUNTIME_LAZY;
+    if (rc.flags.runtime & F_LAZY && !(runtimeFlag & F_LAZY)) {
+      runtimeFlag |= F_LAZY;
       js += LAZY_JS;
     }
-    if (rc.flags.runtime & RUNTIME_ROUTER && !(runtimeFlag & RUNTIME_ROUTER)) {
-      runtimeFlag |= RUNTIME_ROUTER;
+    if (rc.flags.runtime & F_ROUTER && !(runtimeFlag & F_ROUTER)) {
+      runtimeFlag |= F_ROUTER;
       js += ROUTER_JS;
     }
     if (js.length > 0) {
       js = "(()=>{" + js + "})();/* --- */window.$runtimeFlag=" + runtimeFlag + ";";
     }
-    if (runtimeFlag & RUNTIME_LAZY || runtimeFlag & RUNTIME_ROUTER) {
+    if (runtimeFlag & F_LAZY || runtimeFlag & F_ROUTER) {
       js += "window.$scopeSeq=" + rc.flags.scope + ";";
     }
     if (rc.mfs.size > 0) {
@@ -436,8 +425,27 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // `<toggle>` element
           case "toggle": {
-            const { show, children } = props;
+            let { show, hidden, children } = props;
             if (children !== void 0) {
+              if (show === void 0 && hidden !== void 0) {
+                if (isSignal(hidden)) {
+                  let { scope, key, value } = hidden[$signal];
+                  if (typeof key === "string") {
+                    key = {
+                      compute: "()=>!this[" + JSON.stringify(key) + "]",
+                      deps: /* @__PURE__ */ new Set([scope + ":" + key])
+                    };
+                  } else {
+                    key = {
+                      compute: "()=>!(" + key.compute + ")()",
+                      deps: key.deps
+                    };
+                  }
+                  show = Signal(scope, key, !value);
+                } else {
+                  show = !hidden;
+                }
+              }
               if (isSignal(show)) {
                 const { scope, key, value } = show[$signal];
                 let buf = '<m-signal mode="toggle" scope="' + scope + '" ';
@@ -547,7 +555,7 @@ async function renderNode(rc, node, stripSlotProp) {
               buf += "<m-group>" + attrModifiers + "</m-group>";
             }
             write(buf);
-            rc.flags.runtime |= RUNTIME_LAZY;
+            rc.flags.runtime |= F_LAZY;
             break;
           }
           // `<router>` element
@@ -574,7 +582,7 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             buf += "</m-router>";
             write(buf);
-            rc.flags.runtime |= RUNTIME_ROUTER;
+            rc.flags.runtime |= F_ROUTER;
             break;
           }
           default: {
@@ -647,9 +655,9 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
     }
     if (signal) {
       if (attrName === "class") {
-        rc.flags.runtime |= RUNTIME_CX;
+        rc.flags.runtime |= F_CX;
       } else if (attrName === "style") {
-        rc.flags.runtime |= RUNTIME_STYLE;
+        rc.flags.runtime |= F_STYLE;
       }
       signalValue = signal;
       attrValue = signal[$signal].value;
@@ -881,6 +889,7 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
         case "refs":
           return refs;
         case "computed":
+        case "$":
           return computed;
         case "effect":
           return (effect) => {
@@ -937,7 +946,7 @@ function computedProps({ fcCtx }, props) {
     });
     if (patches.length > 0) {
       const { scopeId } = fcCtx;
-      const compute = "()=>$merge(" + JSON.stringify(staticProps) + ",[" + patches.join("],[") + "])";
+      const compute = "()=>$patch(" + JSON.stringify(staticProps) + ",[" + patches.join("],[") + "])";
       return Signal(scopeId, { compute, deps }, staticProps);
     }
   }
@@ -977,6 +986,9 @@ var jsx = (tag, props = new NullProtoObj(), key) => {
     props.key = key;
   }
   if (tag === "html") {
+    if (props.request === $peek) {
+      return props;
+    }
     const renderOptions = new NullProtoObj();
     const optionsKeys = /* @__PURE__ */ new Set(["app", "context", "components", "routes", "request", "status", "headers", "htmx"]);
     for (const [key2, value] of Object.entries(props)) {
@@ -1011,7 +1023,12 @@ Object.assign(globalThis, {
 });
 export {
   Fragment,
+  JSX,
+  html as css,
+  html,
+  html as js,
   jsx,
   jsx as jsxDEV,
+  jsxEscape,
   jsx as jsxs
 };

package/package.json CHANGED Viewed

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

package/types/html.d.ts CHANGED Viewed

@@ -374,6 +374,7 @@ export namespace HTML {
     imageSrcSet?: string;
     imageSizes?: string;
     referrerPolicy?: ReferrerPolicy;
+    rel?: string;
     sizes?: string;
     type?: string;
   }
@@ -425,6 +426,7 @@ export namespace HTML {
     charSet?: string;
     httpEquiv?: string;
     name?: string;
+    content?: string;
     media?: string;
   }

package/types/index.d.ts CHANGED Viewed

@@ -1,5 +1,16 @@
 import type { FC } from "./jsx.d.ts";
+/**
+ * `buildRoute` creates a routing map for bun server.
+ */
+export function buildRoute(
+  handler: (req: Request) => Response,
+): Record<string, (req: Request) => Response>;
+/**
+ * `monoRoutes` creates a routing map for bun server.
+ * @deprecated Use `buildRoute` instead.
+ */
 export function monoRoutes(
   routes: Record<string, FC<any> | Promise<{ default: FC<any> }>>,
   handler: (req: Request) => Response,

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

@@ -1,7 +1,8 @@
 import type { FC, VNode } from "./jsx.d.ts";
-export function jsx(tag: string | FC, props: Record<string, unknown>, key?: string | number): VNode;
+export const html: JSX.Raw;
+export const JSX: typeof globalThis.JSX;
+export const Fragment: (props: Record<string, unknown>) => VNode;
+export const jsx: (tag: string | FC, props: Record<string, unknown>, key?: string | number) => VNode;
-export function Fragment(props: Record<string, unknown>): VNode;
-export { jsx as jsxDEV, jsx as jsxs };
+export { html as css, html as js, jsx as jsxDEV, jsx as jsxs };

package/types/mono.d.ts CHANGED Viewed

@@ -91,20 +91,27 @@ export interface AsyncComponentAttributes {
 export interface Elements {
   /**
-   * The `toggle` element is a builtin element that toggles the visibility of its children.
+   * The `toggle` element is a built-in element that toggles the visibility of its children.
    */
   toggle: BaseAttributes & {
-    show?: boolean | 0 | 1;
+    show?: any;
+    hidden?: any;
   };
   /**
-   * The `switch` element is a builtin element that chooses one of its children based on the `slot` attribute to display.
+   * The `switch` element is a built-in element that chooses one of its children based on the `slot` attribute to display.
    * It is similar to a switch statement in programming languages.
    */
   switch: BaseAttributes & {
     value?: string | number | boolean | null;
   };
   /**
-   * The `component` element is a builtin element that is used to load components lazily,
+   * The `for` element is a built-in element for list rendering with signals.
+   */
+  for: BaseAttributes & {
+    items?: unknown[];
+  };
+  /**
+   * The `component` element is a built-in element that is used to load components lazily,
    * which can improve performance by reducing the initial load time of the application.
    */
   component: BaseAttributes & AsyncComponentAttributes & {
@@ -112,7 +119,7 @@ export interface Elements {
     props?: Record<string, unknown>;
   };
   /**
-   * The `router` element is a builtin element that implements client-side routing.
+   * The `router` element is a built-in element that implements client-side routing.
    */
   router: BaseAttributes & AsyncComponentAttributes & {};
 }
@@ -130,17 +137,17 @@ declare global {
    */
   type FC<Signals = {}, AppSignals = {}, Context = {}> = {
     /**
-     * Application signals.
+     * The global signals shared across the application.
      */
     readonly app: AppSignals;
     /**
-     * Rendering context.
+     * The rendering context.
      *
      * **⚠ This is a server-side only API.**
      */
     readonly context: Context;
     /**
-     * Current request object.
+     * The `request` object contains the current request information.
      *
      * **⚠ This is a server-side only API.**
      */
@@ -153,10 +160,14 @@ declare global {
      * The `computed` method is used to create a computed signal.
      */
     readonly computed: <T = unknown>(fn: () => T) => T;
+    /**
+     * `this.$(fn)` is just a shortcut for `this.computed(fn)`.
+     */
+    readonly $: <T = unknown>(fn: () => T) => T;
     /**
      * The `effect` method is used to create a side effect.
      * **The effect function is only called on client side.**
      */
     readonly effect: (fn: () => void | (() => void)) => void;
-  } & Omit<Signals, "app" | "context" | "request" | "computed" | "effect">;
+  } & Omit<Signals, "app" | "context" | "request" | "refs" | "computed" | "$" | "effect">;
 }

package/types/render.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ type HtmxExts = {
     | boolean;
 };
-export type FCModule = FC<any> | Promise<{ default: FC<any> }>;
+export type MaybeModule<T> = T | Promise<{ default: T }>;
 /**
  * Render options for the `render` function.
@@ -28,11 +28,11 @@ export interface RenderOptions extends Partial<HtmxExts> {
   /**
    * Components to be rendered by the `<lazy>` element.
    */
-  components?: Record<string, FCModule>;
+  components?: Record<string, MaybeModule<FC<any>>>;
   /**
    * Routes to be used by the `<router>` element.
    */
-  routes?: Record<string, FCModule>;
+  routes?: Record<string, MaybeModule<FC<any>>>;
   /**
    * Current `Request` object to be passed to components.
    */