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

mono-jsx 0.6.5 → 0.6.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 (8) hide show

package/README.md CHANGED Viewed

@@ -150,13 +150,11 @@ 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" },
+    "& .icon": { width: "1em", height: "1em", marginRight: "0.5em" },
   }}
 >
   <img class="icon" src="link.png" />
@@ -363,7 +361,7 @@ interface AppSignals {
 function Header(this: FC<{}, AppSignals>) {
   return (
     <header>
-      <h1 style={{ color: this.app.themeColor }}>Welcome to mono-jsx!</h1>
+      <h1 style={this.computed(() => ({ color: this.app.themeColor }))}>Welcome to mono-jsx!</h1>
     </header>
   )
 }
@@ -371,7 +369,7 @@ function Header(this: FC<{}, AppSignals>) {
 function Footer(this: FC<{}, AppSignals>) {
   return (
     <footer>
-      <p style={{ color: this.app.themeColor }}>(c) 2025 mono-jsx.</p>
+      <p style={this.computed(() => ({ color: this.app.themeColor }))}>(c) 2025 mono-jsx.</p>
     </footer>
   )
 }
@@ -838,7 +836,7 @@ export default {
 }
 ```
-## Using Router(SPA Mode)
+## Using Router(SPA)
 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.
@@ -855,11 +853,13 @@ const routes = {
 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>
+      <header>
+        <nav>
+          <a href="/">Home</a>
+          <a href="/about">About</a>
+          <a href="/blog">Blog</a>
+        </nav>
+      </header>
       <router />
     </html>
   )
@@ -872,10 +872,12 @@ mono-jsx router requires [URLPattern](https://developer.mozilla.org/en-US/docs/W
 - ✅ Cloudflare Workers
 - ✅ Nodejs (>= 24)
-For Bun users, mono-jsx provides a `buildRoutes` function that uses Bun's built-in server routing:
+For Bun users, mono-jsx provides a `monoRoutes` function that uses Bun's built-in routing:
 ```tsx
-import { buildRoutes } from "mono-jsx"
+// bun app.tsx
+import { monoRoutes } from "mono-jsx"
 const routes = {
   "/": Home,
@@ -884,18 +886,13 @@ const routes = {
   "/post/:id": Post,
 }
-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>
+export default {
+  routes: monoRoutes(routes, (request) => (
+    <html request={request}>
       <router />
     </html>
   ))
-})
+}
 ```
 ### Using Route `params`
@@ -912,22 +909,18 @@ function Post(this: FC) {
 }
 ```
-### Navigation between Pages
+### Using DB/Storage in Route Components
-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:
+Route components are always rendered on server-side, you can use any database or storage API to fetch data in your route components.
 ```tsx
-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>
+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>
   )
 }
 ```
@@ -940,35 +933,19 @@ Links under the `<nav>` element will be treated as navigation links by the route
 export default {
   fetch: (req) => (
     <html request={req} routes={routes}>
-      <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>
+      </header>
       <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.

package/index.mjs CHANGED Viewed

@@ -1,8 +1,4 @@
 // 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)) {
@@ -14,6 +10,5 @@ function monoRoutes(routes, handler) {
   return handlers;
 }
 export {
-  buildRoutes,
   monoRoutes
 };

package/jsx-runtime.mjs CHANGED Viewed

@@ -1,6 +1,11 @@
-// 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/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 a=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(",")),l=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,p=e=>e.replace(/[a-z][A-Z]/g,n=>n.charAt(0)+"-"+n.charAt(1).toLowerCase());var f=e=>{let n=[],r=[],t=new d;for(let[o,i]of Object.entries(e))switch(o.charCodeAt(0)){case 58:r.push(null,o+"{"+c(i)+"}");break;case 64:r.push(o+"{",null,"{"+c(i)+"}}");break;case 38:r.push(null,o.slice(1)+"{"+c(i)+"}");break;default:n.push([o,i])}return n.length>0&&(t.inline=c(n)),r.length>0&&(t.css=r),t},g=(e,n)=>{let{inline:r,css:t}=f(n);if(t){let o="data-css-",i="["+o+(Date.now()+Math.random()).toString(36).replace(".","")+"]";document.head.appendChild(document.createElement("style")).textContent=(r?i+"{"+r+"}":"")+t.map(s=>s===null?i:s).join(""),e.getAttributeNames().forEach(s=>s.startsWith(o)&&e.removeAttribute(s)),e.setAttribute(i.slice(1,-1),"")}else r&&e.setAttribute("style",r)},c=e=>{if(u(e)){let n="";for(let[r,t]of Array.isArray(e)?e:Object.entries(e))if(l(t)||typeof t=="number"){let o=p(r),i=typeof t=="number"?a.has(o)?""+t:t+"px":""+t;n+=(n?";":"")+o+":"+(o==="content"?JSON.stringify(i):i)}return n}return""},d=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=g;}`;
+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 h=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,o=(c,l)=>{let i=n.get(c);return i||(i=new Set,n.set(c,i)),i.add(l),()=>{i.delete(l),i.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,i)=>{switch(l){case"$init":return r;case"$watch":return o;case"app":return d(0);case"refs":return s;default:return p?.(e,l),Reflect.get(c,l,i)}},set:(c,l,i,a)=>{if(i!==Reflect.get(c,l,a)){const f=n.get(l);return f&&queueMicrotask(()=>f.forEach(g=>g())),Reflect.set(c,l,i,a)}return!1}})},k=(e,t,r)=>{if(t==="toggle"){let n;return()=>{if(!n){const o=e.firstElementChild;o&&o.tagName==="TEMPLATE"&&o.hasAttribute("m-slot")?n=[...o.content.childNodes]:n=[...e.childNodes]}M(e,r()?n:[])}}if(t==="switch"){let n,o=u(e,"match"),s,c,l=i=>s.get(i)??s.set(i,[]).get(i);return()=>{if(!s){s=new Map,c=[];for(const i of e.childNodes)if(i.nodeType===1&&i.tagName==="TEMPLATE"&&i.hasAttribute("m-slot")){for(const a of i.content.childNodes)a.nodeType===1&&a.hasAttribute("slot")?l(u(a,"slot")).push(a):c.push(a);i.remove()}else o?l(o).push(i):c.push(i)}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),o=e.parentElement;return o.tagName==="M-GROUP"&&(o=o.previousElementSibling),()=>{const s=r();s===!1||s===null||s===void 0?o.removeAttribute(n):typeof s=="object"&&s!==null&&(n==="class"||n==="style"||n==="props")?n==="class"?y(o,n,$cx(s)):n==="style"?$applyStyle(o,s):y(o,n,JSON.stringify(s)):y(o,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(([o,s])=>{const c=k(e,u(e,"mode"),o.bind(t));s.forEach(l=>{const[i,a]=N(l);e.disposes.push(d(i).$watch(a,c))})})}}),T("m-effect",e=>{const{disposes:t}=e,r=Number(u(e,"scope")),n=Number(u(e,"n")),o=new Array(n);t.push(()=>{o.forEach(s=>typeof s=="function"&&s()),o.length=0});for(let s=0;s<n;s++){const c="$ME_"+r+"_"+s;w(()=>h[c]).then(l=>{const i=[],a=d(r),f=()=>{o[s]=l.call(a)};p=(g,m)=>i.push([g,m]),f(),p=void 0;for(const[g,m]of i)t.push(d(g).$watch(m,f))},()=>{})}}),h.$signals=e=>e!==void 0?d(e):void 0,h.$MS=(e,t)=>{const[r,n]=N(e);d(r).$init(n,t)},h.$MC=(e,t,r)=>{E.set(e,[t,r])},h.$patch=(e,...t)=>{for(const[r,...n]of t){const o=n.pop();let s=e;for(const c of n)s=s[c];s[o]=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=new AbortController,e={"x-route":"true","x-runtime-flag":""+$runtimeFlag,"x-scope-seq":""+$scopeSeq};this.#i?.abort(),this.#i=i;const s=await fetch(t,{headers:e,signal:i.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}});}`;
 // runtime/utils.ts
 var regexpHtmlSafe = /["'&<>]/;
@@ -116,12 +121,18 @@ 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.4";
+var VERSION = "0.6.6";
 // 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();
@@ -285,38 +296,38 @@ async function render(node, options, write, writeJS, componentMode) {
   };
   const finalize = async () => {
     let js = "";
-    if (rc.flags.runtime & F_CX && !(runtimeFlag & F_CX)) {
-      runtimeFlag |= F_CX;
+    if (rc.flags.runtime & RUNTIME_CX && !(runtimeFlag & RUNTIME_CX)) {
+      runtimeFlag |= RUNTIME_CX;
       js += CX_JS;
     }
-    if (rc.flags.runtime & F_STYLE && !(runtimeFlag & F_STYLE)) {
-      runtimeFlag |= F_STYLE;
+    if (rc.flags.runtime & RUNTIME_STYLE && !(runtimeFlag & RUNTIME_STYLE)) {
+      runtimeFlag |= RUNTIME_STYLE;
       js += STYLE_JS;
     }
-    if (rc.mfs.size > 0 && !(runtimeFlag & F_EVENT)) {
-      runtimeFlag |= F_EVENT;
+    if (rc.mfs.size > 0 && !(runtimeFlag & RUNTIME_EVENT)) {
+      runtimeFlag |= RUNTIME_EVENT;
       js += EVENT_JS;
     }
-    if ((signals.store.size > 0 || rc.mcs.size > 0 || signals.effects.length > 0) && !(runtimeFlag & F_SIGNALS)) {
-      runtimeFlag |= F_SIGNALS;
+    if ((signals.store.size > 0 || rc.mcs.size > 0 || signals.effects.length > 0) && !(runtimeFlag & RUNTIME_SIGNALS)) {
+      runtimeFlag |= RUNTIME_SIGNALS;
       js += SIGNALS_JS;
     }
-    if (suspenses.length > 0 && !(runtimeFlag & F_SUSPENSE)) {
-      runtimeFlag |= F_SUSPENSE;
+    if (suspenses.length > 0 && !(runtimeFlag & RUNTIME_SUSPENSE)) {
+      runtimeFlag |= RUNTIME_SUSPENSE;
       js += SUSPENSE_JS;
     }
-    if (rc.flags.runtime & F_LAZY && !(runtimeFlag & F_LAZY)) {
-      runtimeFlag |= F_LAZY;
+    if (rc.flags.runtime & RUNTIME_LAZY && !(runtimeFlag & RUNTIME_LAZY)) {
+      runtimeFlag |= RUNTIME_LAZY;
       js += LAZY_JS;
     }
-    if (rc.flags.runtime & F_ROUTER && !(runtimeFlag & F_ROUTER)) {
-      runtimeFlag |= F_ROUTER;
+    if (rc.flags.runtime & RUNTIME_ROUTER && !(runtimeFlag & RUNTIME_ROUTER)) {
+      runtimeFlag |= RUNTIME_ROUTER;
       js += ROUTER_JS;
     }
     if (js.length > 0) {
       js = "(()=>{" + js + "})();/* --- */window.$runtimeFlag=" + runtimeFlag + ";";
     }
-    if (runtimeFlag & F_LAZY || runtimeFlag & F_ROUTER) {
+    if (runtimeFlag & RUNTIME_LAZY || runtimeFlag & RUNTIME_ROUTER) {
       js += "window.$scopeSeq=" + rc.flags.scope + ";";
     }
     if (rc.mfs.size > 0) {
@@ -425,27 +436,8 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // `<toggle>` element
           case "toggle": {
-            let { show, hidden, children } = props;
+            const { show, 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 + '" ';
@@ -555,7 +547,7 @@ async function renderNode(rc, node, stripSlotProp) {
               buf += "<m-group>" + attrModifiers + "</m-group>";
             }
             write(buf);
-            rc.flags.runtime |= F_LAZY;
+            rc.flags.runtime |= RUNTIME_LAZY;
             break;
           }
           // `<router>` element
@@ -582,7 +574,7 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             buf += "</m-router>";
             write(buf);
-            rc.flags.runtime |= F_ROUTER;
+            rc.flags.runtime |= RUNTIME_ROUTER;
             break;
           }
           default: {
@@ -655,9 +647,9 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
     }
     if (signal) {
       if (attrName === "class") {
-        rc.flags.runtime |= F_CX;
+        rc.flags.runtime |= RUNTIME_CX;
       } else if (attrName === "style") {
-        rc.flags.runtime |= F_STYLE;
+        rc.flags.runtime |= RUNTIME_STYLE;
       }
       signalValue = signal;
       attrValue = signal[$signal].value;
@@ -889,7 +881,6 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
         case "refs":
           return refs;
         case "computed":
-        case "$":
           return computed;
         case "effect":
           return (effect) => {
@@ -986,9 +977,6 @@ 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)) {
@@ -1023,12 +1011,7 @@ 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.5",
+  "version": "0.6.6",
   "description": "`<html>` as a `Response`.",
   "type": "module",
   "module": "./index.mjs",

package/types/index.d.ts CHANGED Viewed

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

package/types/mono.d.ts CHANGED Viewed

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

package/types/render.d.ts CHANGED Viewed

@@ -11,7 +11,7 @@ type HtmxExts = {
     | boolean;
 };
-export type MaybeModule<T> = T | Promise<{ default: T }>;
+export type FCModule = FC<any> | Promise<{ default: FC<any> }>;
 /**
  * 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, MaybeModule<FC<any>>>;
+  components?: Record<string, FCModule>;
   /**
    * Routes to be used by the `<router>` element.
    */
-  routes?: Record<string, MaybeModule<FC<any>>>;
+  routes?: Record<string, FCModule>;
   /**
    * Current `Request` object to be passed to components.
    */