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

mono-jsx 0.6.5 → 0.6.7

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

@@ -14,6 +14,8 @@ mono-jsx is a JSX runtime that renders `<html>` element to `Response` object in
 - 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
+Playground: https://val.town/x/ije/mono-jsx
 ## Installation
 mono-jsx supports all modern JavaScript runtimes including Node.js, Deno, Bun, and Cloudflare Workers.
@@ -30,7 +32,7 @@ deno add npm:mono-jsx
 bun add mono-jsx
 ```
-## Setup JSX Runtime
+### Setup JSX Runtime
 To use mono-jsx as your JSX runtime, add the following configuration to your `tsconfig.json` (or `deno.json` for Deno):
@@ -43,12 +45,6 @@ To use mono-jsx as your JSX runtime, add the following configuration to your `ts
 }
 ```
-Alternatively, you can use a pragma directive in your JSX file:
-```js
-/** @jsxImportSource mono-jsx */
-```
 You can also run `mono-jsx setup` to automatically add the configuration to your project:
 ```bash
@@ -62,6 +58,18 @@ deno run -A npm:mono-jsx setup
 bunx mono-jsx setup
 ```
+### Zero Configuration
+Alternatively, you can use `@jsxImportSource` pragma directive without installation mono-jsx(no package.json/tsconfig/node_modules), the runtime(deno/bun) automatically installs mono-jsx to your computer:
+```js
+// Deno, Valtown
+/** @jsxImportSource https://esm.sh/mono-jsx */
+// Bun
+/** @jsxImportSource mono-jsx */
+```
 ## Usage
 mono-jsx allows you to return an `<html>` JSX element as a `Response` object in the `fetch` handler:
@@ -82,7 +90,7 @@ For Deno/Bun users, you can run the `app.tsx` directly:
 ```bash
 deno serve app.tsx
-bun run app.tsx
+bun app.tsx
 ```
 If you're building a web app with [Cloudflare Workers](https://developers.cloudflare.com/workers/wrangler/commands/#dev), use `wrangler dev` to start your app in development mode:
@@ -194,7 +202,7 @@ function App() {
 ### Using `html` Tag Function
-mono-jsx provides an `html` tag function to render raw HTML in JSX instead of React's `dangerouslySetInnerHTML`:
+mono-jsx provides an `html` tag function to render raw HTML in JSX instead of React's `dangerouslySetInnerHTML` property.
 ```tsx
 function App() {
@@ -202,7 +210,7 @@ function App() {
 }
 ```
-The `html` tag function is globally available without importing. You can also use `css` and `js` tag functions for CSS and JavaScript:
+The `html` function is globally available without importing. You can also use `css` and `js` functions for CSS and JavaScript:
 ```tsx
 function App() {
@@ -232,8 +240,7 @@ function Button() {
 }
 ```
-> [!NOTE]
-> Event handlers are never called on the server-side. They're serialized to strings and sent to the client. **This means you should NOT use server-side variables or functions in event handlers.**
+Event handlers are never called on the server-side. They're serialized to strings and sent to the client. **This means you should NOT use server-side variables or functions in event handlers.**
 ```tsx
 import { doSomething } from "some-library";
@@ -418,6 +425,9 @@ function App(this: FC<{ input: string }>) {
 }
 ```
+> [!TIP]
+> You can use `this.$` as a shorthand for `this.computed` to create computed signals.
 ### Using Effects
 You can use `this.effect` to create side effects based on signals. The effect will run whenever the signal changes:
@@ -475,7 +485,7 @@ function App(this: FC<{ show: boolean }>) {
 ### Using `<toggle>` Element with Signals
-The `<toggle>` element conditionally renders content based on the `show` prop:
+The `<toggle>` element conditionally renders content based on the `show` prop. You can use signals to control the visibility of the content on the client side.
 ```tsx
 function App(this: FC<{ show: boolean }>) {
@@ -501,7 +511,7 @@ function App(this: FC<{ show: boolean }>) {
 ### Using `<switch>` Element with Signals
-The `<switch>` element renders different content based on the value of a signal. Elements with matching `slot` attributes are displayed when their value matches, otherwise default slots are shown:
+The `<switch>` element renders different content based on the `value` prop. Elements with matching `slot` attributes are displayed when their value matches, otherwise default slots are shown. Like `<toggle>`, you can use signals to control the value on the client side.
 ```tsx
 function App(this: FC<{ lang: "en" | "zh" | "🙂" }>) {
@@ -619,7 +629,7 @@ mono-jsx binds a scoped signals object to `this` of your component functions. Th
 The `this` object has the following built-in properties:
-- `app`: The app signals defined on the root `<html>` element.
+- `app`: The app global signals..
 - `context`: The context defined on the root `<html>` element.
 - `request`: The request object from the `fetch` handler.
 - `refs`: A map of refs defined in the component.
@@ -627,12 +637,13 @@ The `this` object has the following built-in properties:
 - `effect`: A method to create side effects.
 ```ts
-type FC<Signals = {}, AppSignals = {}, Context = {}> = {
-  readonly app: AppSignals;
+type FC<Signals = {}, AppSignals = {}, Context = {}, Refs = {}, AppRefs = {}> = {
+  readonly app: AppSignals & { refs: AppRefs; url: WithParams<URL> }
   readonly context: Context;
-  readonly request: Request & { params?: Record<string, string> };
-  readonly refs: Record<string, HTMLElement | null>;
+  readonly request: WithParams<Request>;
+  readonly refs: Refs;
   readonly computed: <T = unknown>(fn: () => T) => T;
+  readonly $: FC["computed"];
   readonly effect: (fn: () => void | (() => void)) => void;
 } & Omit<Signals, "app" | "context" | "request" | "computed" | "effect">;
 ```
@@ -643,10 +654,10 @@ See the [Using Signals](#using-signals) section for more details on how to use s
 ### Using Refs
-You can use `this.refs` to access refs in your components. Define refs in your component using the `ref` attribute:
+You can use `this.refs` to access refs in your components. Refs are defined using the `ref` attribute in JSX, and they allow you to access DOM elements directly. The `refs` object is a map of ref names to DOM elements.
 ```tsx
-function App(this: FC) {
+function App(this: Refs<FC, { input: HTMLInputElement }>) {
   this.effect(() => {
     this.refs.input?.addEventListener("input", (evt) => {
       console.log("Input changed:", evt.target.value);
@@ -662,12 +673,55 @@ function App(this: FC) {
 }
 ```
+You can also use `this.app.refs` to access app-level refs:
+```tsx
+function Layout(this: Refs<FC, {}, { h1: HTMLH1Element }>) {
+  return (
+    <>
+    <header>
+      <h1 ref={this.refs.h1}>Welcome to mono-jsx!</h1>
+    </header>
+    <main>
+      <slot />
+    </main>
+    </>
+  )
+}
+```
+Element `<componet>` also support `ref` attribute, which allows you to control the component rendering manually. The `ref` will be a `ComponentElement` that has the `name`, `props`, and `refresh` properties:
+- `name`: The name of the component to render.
+- `props`: The props to pass to the component.
+- `refresh`: A method to re-render the component with the current name and props.
+```tsx
+function App(this: Refs<FC, { component: ComponentElement }>) {
+  this.effect(() => {
+    // updating the component name and props will trigger a re-render of the component
+    this.refs.component.name = "Foo";
+    this.refs.component.props = {};
+    const timer = setInterval(() => {
+       // re-render the component
+      this.refs.component.refresh();
+    }, 1000);
+    return () => clearInterval(timer); // cleanup
+  });
+  return (
+    <div>
+      <component ref={this.refs.component} />
+    </div>
+  )
+}
 ### Using Context
 You can use the `context` property in `this` to access context values in your components. The context is defined on the root `<html>` element:
 ```tsx
-function Dash(this: FC<{}, {}, { auth: { uuid: string; name: string } }>) {
+function Dash(this: Context<FC, { auth: { uuid: string; name: string } }>) {
   const { auth } = this.context;
   return (
     <div>
@@ -790,7 +844,7 @@ async function Lazy(this: FC<{ show: boolean }>, props: { url: string }) {
   this.show = false;
   return (
     <div>
-      <toggle value={this.show}>
+      <toggle show={this.show}>
         <component name="Foo" props={{ /* props for the component */ }} placeholder={<p>Loading...</p>} />
       </toggle>
      <button onClick={() => this.show = true }>Load `Foo` Component</button>
@@ -912,6 +966,20 @@ function Post(this: FC) {
 }
 ```
+### 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 view with `<toggle>` or `<switch>` elements:
+```tsx
+function App(this: FC) {
+  return (
+    <div>
+      <h1>Current Pathname: {this.$(() => this.app.url.pathname)}</h1>
+    </div>
+  )
+}
+```
 ### Navigation between Pages
 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:

package/index.mjs CHANGED Viewed

@@ -1,6 +1,6 @@
 // index.ts
 function buildRoutes(handler) {
-  const { routes = {} } = handler(Symbol.for("mono.peek"));
+  const { routes = {} } = handler(Symbol.for("mono.setup"));
   return monoRoutes(routes, handler);
 }
 function monoRoutes(routes, handler) {

package/jsx-runtime.mjs CHANGED Viewed

@@ -1,20 +1,36 @@
-// 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 EVENT = 1;
+var CX = 2;
+var STYLE = 4;
+var RENDER_ATTR = 8;
+var RENDER_TOGGLE = 16;
+var RENDER_SWITCH = 32;
+var SIGNALS = 64;
+var SUSPENSE = 128;
+var LAZY = 256;
+var ROUTER = 512;
+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 CX_JS = `{var n=e=>typeof e=="string"?e:typeof e=="object"&&e!==null?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=/acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;var l=e=>typeof e=="string";var u=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());var p=e=>{let r=[],t=[],n=new g;for(let[o,s]of Object.entries(e))switch(o.charCodeAt(0)){case 58:t.push(null,o+"{"+c(s)+"}");break;case 64:t.push(o+"{",null,"{"+c(s)+"}}");break;case 38:t.push(null,o.slice(1)+"{"+c(s)+"}");break;default:r.push([o,s])}return r.length>0&&(n.inline=c(r)),t.length>0&&(n.css=t),n},f=(e,r)=>{let{inline:t,css:n}=p(r);if(n){let o="data-css-",s="["+o+(Date.now()+Math.random()).toString(36).replace(".","")+"]";document.head.appendChild(document.createElement("style")).textContent=(t?s+"{"+t+"}":"")+n.map(i=>i===null?s:i).join(""),e.getAttributeNames().forEach(i=>i.startsWith(o)&&e.removeAttribute(i)),e.setAttribute(s.slice(1,-1),"")}else t&&e.setAttribute("style",t)},c=e=>{if(typeof e=="object"&&e!==null){let r="";for(let[t,n]of Array.isArray(e)?e:Object.entries(e))if(l(n)||typeof n=="number"){let o=u(t),s=typeof n=="number"?a.test(t)?""+n:n+"px":""+n;r+=(r?";":"")+o+":"+(o==="content"?JSON.stringify(s):s)}return r}return""},g=(()=>{function e(){}return e.prototype=Object.freeze(Object.create(null)),e})();window.$applyStyle=f;}`;
+var RENDER_ATTR_JS = `{var s=(l,t,r)=>{let n=l.parentElement;return n.tagName==="M-GROUP"&&(n=n.previousElementSibling),()=>{let e=r();e===!1||e===null||e===void 0?n.removeAttribute(t):typeof e=="object"&&e!==null&&(t==="class"||t==="style"||t==="props")?t==="class"?n.setAttribute(t,$cx(e)):t==="style"?$applyStyle(n,e):n.setAttribute(t,JSON.stringify(e)):n.setAttribute(t,e===!0?"":e)}};window.$renderAttr=s;}`;
+var RENDER_TOGGLE_JS = `{var s=(n,l)=>{let e;return()=>{if(!e){let t=n.firstElementChild;t&&t.tagName==="TEMPLATE"&&t.hasAttribute("m-slot")?e=[...t.content.childNodes]:e=[...n.childNodes]}n.replaceChildren(...l()?e:[])}};window.$renderToggle=s;}`;
+var RENDER_SWITCH_JS = `{var u=(s,d)=>{let r,i=s.getAttribute("value"),t,l,o=e=>t.get(e)??t.set(e,[]).get(e);return()=>{if(!t){t=new Map,l=[];for(let e of s.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):l.push(n);e.remove()}else i?o(i).push(e):l.push(e)}r=""+d(),s.replaceChildren(...t.has(r)?t.get(r):l)}};window.$renderSwitch=u;}`;
+var SIGNALS_JS = `{let m;const h=window,b=new Map,y=new Map,f=n=>y.get(n)??y.set(n,S(n)).get(n),k=()=>Object.create(null),d=(n,e)=>n.getAttribute(e),S=n=>{const e=k(),t=(c,r)=>{e[c]=r},s=new Map,a=(c,r)=>{let i=s.get(c);return i||(i=new Set,s.set(c,i)),i.add(r),()=>{i.delete(r),i.size===0&&s.delete(c)}},o=new Proxy(k(),{get:(c,r)=>document.querySelector("[data-ref='"+n+":"+r+"']")});return new Proxy(e,{get:(c,r,i)=>{switch(r){case"$init":return t;case"$watch":return a;case"app":return f(0);case"refs":return o;default:return m?.(n,r),Reflect.get(c,r,i)}},set:(c,r,i,l)=>{if(i!==Reflect.get(c,r,l)){const u=s.get(r);return u&&queueMicrotask(()=>u.forEach(g=>g())),Reflect.set(c,r,i,l)}return!1}})},$=(n,e,t)=>{switch(e){case"toggle":return $renderToggle(n,t);case"switch":return $renderSwitch(n,t);case"html":return()=>n.innerHTML=""+t()}return e&&e.length>2&&e.startsWith("[")&&e.endsWith("]")?$renderAttr(n,e.slice(1,-1),t):()=>n.textContent=""+t()},v=n=>{const e=n.indexOf(":");return e>0?[Number(n.slice(0,e)),n.slice(e+1)]:null},p=async n=>{const e=n();return e!==void 0?e:(await new Promise(t=>setTimeout(t,0)),p(n))},E=(n,e)=>customElements.define(n,class extends HTMLElement{disposes=[];connectedCallback(){e(this)}disconnectedCallback(){this.disposes.forEach(t=>t()),this.disposes.length=0}});E("m-signal",n=>{const e=Number(d(n,"scope")),t=f(e),s=d(n,"key");if(s)n.disposes.push(t.$watch(s,$(n,d(n,"mode"),()=>t[s])));else{const a=Number(d(n,"computed"));p(()=>b.get(e*1e9+a)).then(([o,c])=>{const r=$(n,d(n,"mode"),o.bind(t));c.forEach(i=>{const[l,u]=v(i);n.disposes.push(f(l).$watch(u,r))})})}}),E("m-effect",n=>{const{disposes:e}=n,t=Number(d(n,"scope")),s=Number(d(n,"n")),a=new Array(s);e.push(()=>{a.forEach(o=>typeof o=="function"&&o()),a.length=0});for(let o=0;o<s;o++){const c="$ME_"+t+"_"+o;p(()=>h[c]).then(r=>{const i=[],l=f(t),u=()=>{a[o]=r.call(l)};m=(g,w)=>i.push([g,w]),u(),m=void 0;for(const[g,w]of i)e.push(f(g).$watch(w,u))},()=>{})}}),h.$MS=(n,e)=>{const[t,s]=v(n);f(t).$init(s,e)},h.$MC=(n,e,t,s)=>{b.set(n*1e9+e,[t,s])},h.$patch=(n,...e)=>{for(const[t,...s]of e){const a=s.pop();let o=n;for(const c of s)o=o[c];o[a]=t}return n},h.$signals=n=>n!==void 0?f(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 LAZY_JS = `{const r=document,o=(t,s)=>t.getAttribute(s),i=(t,s=[])=>t.replaceChildren(...s);customElements.define("m-component",class extends HTMLElement{static observedAttributes=["name","props"];#t;#e;#i;#n;#s;async#r(){if(!this.#t){i(this);return}const t={"x-component":this.#t,"x-props":this.#e||"{}","x-flags":$FLAGS},s=new AbortController;this.#n?.abort(),this.#n=s,i(this,this.#i);const e=await fetch(location.href,{headers:t,signal:s.signal});if(!e.ok)throw i(this),new Error("Failed to fetch component '"+this.#t+"'");const[h,n]=await e.json();this.innerHTML=h,n&&(r.body.appendChild(r.createElement("script")).textContent=n)}get name(){return this.#t??null}set name(t){t&&t!==this.#t&&(this.#t=t,this.refresh())}get props(){return this.#e?JSON.parse(this.#e):void 0}set props(t){const s=typeof t=="string"?t:JSON.stringify(t);s&&s!==this.#e&&(this.#e=s,this.refresh())}connectedCallback(){setTimeout(()=>{if(!this.#i){const t=o(this,"props");this.#t=o(this,"name"),this.#e=t?.startsWith("base64,")?atob(t.slice(7)):void 0,this.#i=[...this.childNodes]}this.#r()})}disconnectedCallback(){i(this,this.#i),this.#n?.abort(),this.#n=void 0,this.#s&&clearTimeout(this.#s),this.#s=void 0}attributeChangedCallback(t,s,e){this.#t&&e&&(t==="name"?this.name=e:t==="props"&&(this.props=e))}refresh(){this.#s&&clearTimeout(this.#s),this.#s=setTimeout(()=>{this.#s=void 0,this.#r()},50)}});}`;
+var ROUTER_JS = `{const a=document,n=location,l=t=>t.split("#",1)[0],c=t=>l(t)===l(n.href);customElements.define("m-router",class extends HTMLElement{#t;#e;#s;#i;async#o(t){const s=new AbortController,e={"x-route":"true","x-flags":$FLAGS};this.#i?.abort(),this.#i=s;const i=await fetch(t,{headers:e,signal:s.signal});if(i.status===404)return this.replaceChildren(...this.#t),!0;if(!i.ok)throw this.replaceChildren(),new Error("Failed to fetch route: "+i.status+" "+i.statusText);const[o,r]=await i.json();this.innerHTML=o,r&&(a.body.appendChild(a.createElement("script")).textContent=r)}#n(){a.querySelectorAll("nav a").forEach(t=>{const{href:s,classList:e}=t,i=t.closest("nav")?.getAttribute("data-active-class")??"active";c(s)?e.add(i):e.remove(i)})}navigate(t,s){const e=new URL(t,n.href);if(e.origin!==n.origin){n.href=t;return}c(e.href)||this.#a(t,s)}async#a(t,s){const e=await this.#o(t);s?.replace?history.replaceState({},"",t):history.pushState({},"",t),e&&typeof $signals<"u"&&($signals(0).url=new URL(t)),this.#n(),window.scrollTo(0,0)}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:s,href:e,rel:i,target:o}=t.target;s||i==="external"||o==="_blank"||!e.startsWith(n.origin)||(t.preventDefault(),this.navigate(e))},this.#s=()=>this.#a(n.href),addEventListener("popstate",this.#s),a.addEventListener("click",this.#e),setTimeout(()=>this.#n())}disconnectedCallback(){removeEventListener("popstate",this.#s),a.removeEventListener("click",this.#e),this.#i?.abort(),this.#i=void 0,this.#e=void 0,this.#s=void 0}});}`;
 // runtime/utils.ts
+var regexpCssBareUnitProps = /acit|ex(?:s|g|n|p|$)|rph|grid|ows|mnc|ntw|ine[ch]|zoo|^ord|itera/i;
 var regexpHtmlSafe = /["'&<>]/;
-var cssBareUnitProps = 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(",")
-);
 var isString = (v) => typeof v === "string";
 var isObject = (v) => typeof v === "object" && v !== null;
 var toHyphenCase = (k) => k.replace(/[a-z][A-Z]/g, (m) => m.charAt(0) + "-" + m.charAt(1).toLowerCase());
 var cx = (className) => {
-  if (isString(className)) {
+  if (typeof className === "string") {
     return className;
   }
-  if (isObject(className)) {
+  if (typeof className === "object" && className !== null) {
     if (Array.isArray(className)) {
       return className.map(cx).filter(Boolean).join(" ");
     }
@@ -53,12 +69,12 @@ var styleToCSS = (style) => {
   return ret;
 };
 var renderStyle = (style) => {
-  if (isObject(style)) {
+  if (typeof style === "object" && style !== null) {
     let css = "";
     for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
       if (isString(v) || typeof v === "number") {
         const cssKey = toHyphenCase(k);
-        const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : "" + v;
+        const cssValue = typeof v === "number" ? regexpCssBareUnitProps.test(k) ? "" + v : v + "px" : "" + v;
         css += (css ? ";" : "") + cssKey + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
       }
     }
@@ -112,14 +128,14 @@ var escapeHTML = (str) => {
 };
 // symbols.ts
-var $vnode = Symbol.for("jsx.vnode");
 var $fragment = Symbol.for("jsx.fragment");
 var $html = Symbol.for("jsx.html");
+var $setup = Symbol.for("mono.setup");
 var $signal = Symbol.for("mono.signal");
-var $peek = Symbol.for("mono.peek");
+var $vnode = Symbol.for("jsx.vnode");
 // version.ts
-var VERSION = "0.6.4";
+var VERSION = "0.6.6";
 // render.ts
 var cdn = "https://raw.esm.sh";
@@ -132,16 +148,43 @@ var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCod
 var escapeCSSText = (str) => str.replace(/[<>]/g, (m) => m.charCodeAt(0) === 60 ? "&lt;" : "&gt;");
 var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
 var toStr = (v, str) => v !== void 0 ? str(v) : "";
+var stringify = JSON.stringify;
 var Ref = class {
   constructor(scope, name) {
     this.scope = scope;
     this.name = name;
   }
 };
-var IdGenImpl = class extends Map {
-  _id = 0;
+var IdGen = class extends Map {
+  #seq = 0;
   gen(v) {
-    return this.get(v) ?? this.set(v, this._id++).get(v);
+    return this.get(v) ?? this.set(v, this.#seq++).get(v);
+  }
+};
+var IdGenManagerImpl = class {
+  #scopes = /* @__PURE__ */ new Map();
+  size = 0;
+  gen(key, scope = 0) {
+    let idGen = this.#scopes.get(scope);
+    if (!idGen) {
+      idGen = new IdGen();
+      this.#scopes.set(scope, idGen);
+    }
+    this.size++;
+    return idGen.gen(key);
+  }
+  toJS(callback) {
+    let js = "";
+    for (const [scope, gens] of this.#scopes) {
+      for (const [v, id] of gens.entries()) {
+        js += callback(scope, id, v);
+      }
+    }
+    return js;
+  }
+  clear() {
+    this.#scopes.clear();
+    this.size = 0;
   }
 };
 var JSX = {
@@ -152,13 +195,17 @@ var JSX = {
   }
 };
 function renderHtml(node, options) {
-  const { request, routes, components, headers: headersInit } = options;
+  const { routes, components } = options;
+  const request = options.request;
   const headers = new Headers();
   const reqHeaders = request?.headers;
   const componentHeader = reqHeaders?.get("x-component");
   let routeFC = request ? Reflect.get(request, "x-route") : void 0;
   let component = componentHeader ? components?.[componentHeader] : null;
   let status = options.status;
+  if (request) {
+    request.URL = new URL(request.url);
+  }
   if (routes && !routeFC) {
     if (request) {
       const patterns = Object.keys(routes);
@@ -166,7 +213,7 @@ function renderHtml(node, options) {
       for (const pattern of patterns) {
         if (pattern.includes(":") || pattern.includes("*")) {
           dynamicPatterns.push(pattern);
-        } else if (new URL(request.url).pathname === pattern) {
+        } else if (request.URL.pathname === pattern) {
           routeFC = routes[pattern];
           break;
         }
@@ -176,23 +223,23 @@ function renderHtml(node, options) {
           const match = new URLPattern({ pathname: path }).exec(request.url);
           if (match) {
             routeFC = routes[path];
-            Object.assign(request, { params: match.pathname.groups });
+            request.params = match.pathname.groups;
             break;
           }
         }
       }
     } else {
-      console.error("The `request` prop in the `<html>` element is required for routing.");
+      console.error("[mono-jsx] The `request` prop in the `<html>` element is required for routing.");
     }
     if (!routeFC) {
       status = 404;
     }
   }
   if (components && !request) {
-    console.warn("The `components` prop in the `<html>` element is ignored when `request` is not provided.");
+    console.warn("[mono-jsx] The `components` prop in the `<html>` element is ignored when `request` is not provided.");
   }
-  if (headersInit) {
-    for (const [key, value] of Object.entries(headersInit)) {
+  if (options.headers) {
+    for (const [key, value] of Object.entries(options.headers)) {
       if (value) {
         headers.set(toHyphenCase(key), value);
       }
@@ -221,9 +268,9 @@ function renderHtml(node, options) {
               (chunk) => js += chunk,
               true
             );
-            let json = "[" + JSON.stringify(html2);
+            let json = "[" + stringify(html2);
             if (js) {
-              json += "," + JSON.stringify(js);
+              json += "," + stringify(js);
             }
             controller.enqueue(encoder.encode(json + "]"));
           } finally {
@@ -279,66 +326,66 @@ async function render(node, options, write, writeJS, componentMode) {
     signals,
     routeFC,
     eager: componentMode,
-    flags: { scope: 0, chunk: 0, refs: 0, runtime: 0 },
-    mcs: new IdGenImpl(),
-    mfs: new IdGenImpl()
+    flags: { scope: 0, chunk: 0, runtime: 0 },
+    mcs: new IdGenManagerImpl(),
+    mfs: new IdGenManagerImpl()
   };
   const finalize = async () => {
+    const hasEffect = signals.effects.length > 0;
+    const treeshake = (flag, code, force) => {
+      if ((force || rc.flags.runtime & flag) && !(runtimeFlag & flag)) {
+        runtimeFlag |= flag;
+        js += code;
+      }
+    };
     let js = "";
-    if (rc.flags.runtime & F_CX && !(runtimeFlag & F_CX)) {
-      runtimeFlag |= F_CX;
-      js += CX_JS;
-    }
-    if (rc.flags.runtime & F_STYLE && !(runtimeFlag & F_STYLE)) {
-      runtimeFlag |= F_STYLE;
-      js += STYLE_JS;
-    }
-    if (rc.mfs.size > 0 && !(runtimeFlag & F_EVENT)) {
-      runtimeFlag |= F_EVENT;
-      js += EVENT_JS;
-    }
-    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 & F_SUSPENSE)) {
-      runtimeFlag |= F_SUSPENSE;
-      js += SUSPENSE_JS;
-    }
-    if (rc.flags.runtime & F_LAZY && !(runtimeFlag & F_LAZY)) {
-      runtimeFlag |= F_LAZY;
-      js += LAZY_JS;
-    }
-    if (rc.flags.runtime & F_ROUTER && !(runtimeFlag & F_ROUTER)) {
-      runtimeFlag |= F_ROUTER;
-      js += ROUTER_JS;
+    treeshake(CX, CX_JS);
+    treeshake(STYLE, STYLE_JS);
+    treeshake(EVENT, EVENT_JS, rc.mfs.size > 0);
+    if (signals.store.size > 0 || rc.mcs.size > 0 || hasEffect) {
+      treeshake(RENDER_ATTR, RENDER_ATTR_JS);
+      treeshake(RENDER_TOGGLE, RENDER_TOGGLE_JS);
+      treeshake(RENDER_SWITCH, RENDER_SWITCH_JS);
+      treeshake(SIGNALS, SIGNALS_JS, true);
     }
+    treeshake(SUSPENSE, SUSPENSE_JS, suspenses.length > 0);
+    treeshake(LAZY, LAZY_JS);
+    treeshake(ROUTER, ROUTER_JS);
     if (js.length > 0) {
-      js = "(()=>{" + js + "})();/* --- */window.$runtimeFlag=" + runtimeFlag + ";";
+      js = "(()=>{" + js + "})();/* --- */";
     }
-    if (runtimeFlag & F_LAZY || runtimeFlag & F_ROUTER) {
-      js += "window.$scopeSeq=" + rc.flags.scope + ";";
+    if (runtimeFlag & LAZY || runtimeFlag & ROUTER) {
+      const { scope, chunk } = rc.flags;
+      js += 'window.$FLAGS="' + scope + "|" + chunk + "|" + runtimeFlag + '";';
     }
     if (rc.mfs.size > 0) {
-      for (const [fn, i] of rc.mfs.entries()) {
-        js += "function $MF_" + i + "(){(" + fn.toString() + ").apply(this,arguments)};";
-      }
+      js += rc.mfs.toJS((scope, seq, fn) => "function $MF_" + scope + "_" + seq + "(){(" + fn.toString() + ").apply(this,arguments)};");
       rc.mfs.clear();
     }
-    if (signals.effects.length > 0) {
+    if (hasEffect) {
       js += signals.effects.splice(0, signals.effects.length).join("");
     }
+    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) {
+        js += "$signals(0).url=" + urlWithParams + ";";
+      } else {
+        js += '$MS("0:url",' + urlWithParams + ");";
+      }
+    }
     if (signals.store.size > 0) {
       for (const [key, value] of signals.store.entries()) {
-        js += "$MS(" + JSON.stringify(key) + (value !== void 0 ? "," + JSON.stringify(value) : "") + ");";
+        js += "$MS(" + stringify(key) + (value !== void 0 ? "," + stringify(value) : "") + ");";
       }
       signals.store.clear();
     }
     if (rc.mcs.size > 0) {
-      for (const [mc, i] of rc.mcs.entries()) {
-        const { compute, deps } = mc[$signal].key;
-        js += "$MC(" + i + ",function(){return(" + compute.toString() + ").call(this)}," + JSON.stringify([...deps.values()]) + ");";
-      }
+      js += rc.mcs.toJS((scope, seq, signal) => {
+        const { compute, deps } = signal[$signal].key;
+        return "$MC(" + scope + "," + seq + ",function(){return(" + compute.toString() + ").call(this)}," + stringify([...deps.values()]) + ");";
+      });
       rc.mcs.clear();
     }
     if (js.length > 0) {
@@ -351,8 +398,13 @@ async function render(node, options, write, writeJS, componentMode) {
   };
   let runtimeFlag = 0;
   if (componentMode && request) {
-    rc.flags.scope = Number(request.headers.get("x-scope-seq")) || 0;
-    runtimeFlag = Number(request.headers.get("x-runtime-flag")) || 0;
+    const headers = request.headers;
+    const flagsHeader = headers.get("x-flags")?.split("|");
+    if (flagsHeader?.length === 3) {
+      const [scope, chunk, runtime] = flagsHeader.map(Number);
+      Object.assign(rc.flags, { scope, chunk });
+      runtimeFlag = runtime;
+    }
   }
   await renderNode(rc, node);
   if (rc.flags.scope > 0 && !componentMode) {
@@ -373,22 +425,7 @@ async function renderNode(rc, node, stripSlotProp) {
     case "object":
       if (node === null) {
       } else if (isSignal(node)) {
-        const { scope, key, value } = node[$signal];
-        if (isString(key)) {
-          let buf = '<m-signal scope="' + scope + '" key=' + toAttrStringLit(key) + ">";
-          if (value !== void 0 && value !== null) {
-            buf += escapeHTML(String(value));
-          }
-          buf += "</m-signal>";
-          write(buf);
-        } else {
-          let buf = '<m-signal scope="' + scope + '" computed="' + rc.mcs.gen(node) + '">';
-          if (value !== void 0) {
-            buf += escapeHTML(String(value));
-          }
-          buf += "</m-signal>";
-          write(buf);
-        }
+        renderSignal(rc, node, void 0, node[$signal].value);
       } else if (isVNode(node)) {
         const [tag, props] = node;
         switch (tag) {
@@ -401,8 +438,13 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // XSS!
           case $html: {
-            if (props.innerHTML) {
-              write(props.innerHTML);
+            const { innerHTML } = props;
+            if (innerHTML) {
+              if (isSignal(innerHTML)) {
+                renderSignal(rc, innerHTML, "html", String(innerHTML[$signal].value), true);
+              } else {
+                write(innerHTML);
+              }
             }
             break;
           }
@@ -432,7 +474,7 @@ async function renderNode(rc, node, stripSlotProp) {
                   let { scope, key, value } = hidden[$signal];
                   if (typeof key === "string") {
                     key = {
-                      compute: "()=>!this[" + JSON.stringify(key) + "]",
+                      compute: "()=>!this[" + stringify(key) + "]",
                       deps: /* @__PURE__ */ new Set([scope + ":" + key])
                     };
                   } else {
@@ -452,11 +494,12 @@ async function renderNode(rc, node, stripSlotProp) {
                 if (isString(key)) {
                   buf += "key=" + toAttrStringLit(key) + ">";
                 } else {
-                  buf += 'computed="' + rc.mcs.gen(show) + '">';
+                  buf += 'computed="' + rc.mcs.gen(show, rc.fcCtx?.scopeId) + '">';
                 }
                 if (!value) {
                   buf += "<template m-slot>";
                 }
+                rc.flags.runtime |= RENDER_TOGGLE;
                 write(buf);
                 await renderChildren(rc, children);
                 write((!value ? "</template>" : "") + "</m-signal>");
@@ -479,8 +522,9 @@ async function renderNode(rc, node, stripSlotProp) {
                 if (isString(key)) {
                   stateful += "key=" + toAttrStringLit(key) + ">";
                 } else {
-                  stateful += 'computed="' + rc.mcs.gen(valueProp) + '">';
+                  stateful += 'computed="' + rc.mcs.gen(valueProp, rc.fcCtx?.scopeId) + '">';
                 }
+                rc.flags.runtime |= RENDER_SWITCH;
                 toSlotName = String(value);
               } else {
                 toSlotName = String(valueProp);
@@ -524,22 +568,19 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           // `<component>` element
           case "component": {
-            const { placeholder } = props;
+            let { placeholder } = props;
             let attrs = "";
             let attrModifiers = "";
-            for (const p of ["name", "props"]) {
+            for (const p of ["name", "props", "ref"]) {
               let propValue = props[p];
-              const [attr, , attrSignal] = renderAttr(rc, p, propValue);
+              let [attr, , attrSignal] = renderAttr(rc, p, propValue);
               if (attrSignal) {
-                const { scope, key, value } = attrSignal[$signal];
-                attrModifiers += '<m-signal mode="[' + p + ']" scope="' + scope + '" ';
-                if (isString(key)) {
-                  attrModifiers += "key=" + toAttrStringLit(key);
-                } else {
-                  attrModifiers += 'computed="' + rc.mcs.gen(attrSignal) + '"';
-                }
-                attrModifiers += "></m-signal>";
-                propValue = value;
+                const write2 = (chunk) => {
+                  attrModifiers += chunk;
+                };
+                renderSignal({ ...rc, write: write2 }, attrSignal, [p]);
+                rc.flags.runtime |= RENDER_ATTR;
+                propValue = attrSignal[$signal].value;
               }
               attrs += attr;
             }
@@ -555,7 +596,7 @@ async function renderNode(rc, node, stripSlotProp) {
               buf += "<m-group>" + attrModifiers + "</m-group>";
             }
             write(buf);
-            rc.flags.runtime |= F_LAZY;
+            rc.flags.runtime |= LAZY;
             break;
           }
           // `<router>` element
@@ -582,7 +623,7 @@ async function renderNode(rc, node, stripSlotProp) {
             }
             buf += "</m-router>";
             write(buf);
-            rc.flags.runtime |= F_ROUTER;
+            rc.flags.runtime |= ROUTER;
             break;
           }
           default: {
@@ -606,14 +647,11 @@ async function renderNode(rc, node, stripSlotProp) {
                   write(addonHtml);
                 }
                 if (signalValue) {
-                  const { scope, key } = signalValue[$signal];
-                  attrModifiers += "<m-signal mode=" + toAttrStringLit("[" + propName + "]") + ' scope="' + scope + '" ';
-                  if (isString(key)) {
-                    attrModifiers += "key=" + toAttrStringLit(key);
-                  } else {
-                    attrModifiers += 'computed="' + rc.mcs.gen(signalValue) + '"';
-                  }
-                  attrModifiers += "></m-signal>";
+                  const write2 = (chunk) => {
+                    attrModifiers += chunk;
+                  };
+                  renderSignal({ ...rc, write: write2 }, signalValue, [propName]);
+                  rc.flags.runtime |= RENDER_ATTR;
                 }
                 buffer += attr;
               }
@@ -642,6 +680,15 @@ async function renderNode(rc, node, stripSlotProp) {
       break;
   }
 }
+async function renderChildren(rc, children, stripSlotProp) {
+  if (Array.isArray(children) && !isVNode(children)) {
+    for (const child of children) {
+      await renderNode(rc, child, stripSlotProp);
+    }
+  } else {
+    await renderNode(rc, children, stripSlotProp);
+  }
+}
 function renderAttr(rc, attrName, attrValue, stripSlotProp) {
   let attr = "";
   let addonHtml = "";
@@ -651,13 +698,37 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
     if (isSignal(attrValue)) {
       signal = attrValue;
     } else {
-      signal = computedProps(rc, attrValue);
+      const { fcCtx } = rc;
+      if (fcCtx) {
+        const deps = /* @__PURE__ */ new Set();
+        const patches = [];
+        const staticProps = traverseProps(attrValue, (path, value) => {
+          const { scope, key } = value[$signal];
+          if (isString(key)) {
+            patches.push([
+              (scope !== fcCtx.scopeId ? "$signals(" + scope + ")" : "this") + "[" + stringify(key) + "]",
+              ...path
+            ].join(","));
+            deps.add(scope + ":" + key);
+          } else {
+            patches.push(["(" + key.compute.toString() + ")(),", ...path].join(","));
+            for (const dep of key.deps) {
+              deps.add(dep);
+            }
+          }
+        });
+        if (patches.length > 0) {
+          const { scopeId } = fcCtx;
+          const compute = "()=>$patch(" + stringify(staticProps) + ",[" + patches.join("],[") + "])";
+          signal = Signal(scopeId, { compute, deps }, staticProps);
+        }
+      }
     }
     if (signal) {
       if (attrName === "class") {
-        rc.flags.runtime |= F_CX;
+        rc.flags.runtime |= CX;
       } else if (attrName === "style") {
-        rc.flags.runtime |= F_STYLE;
+        rc.flags.runtime |= STYLE;
       }
       signalValue = signal;
       attrValue = signal[$signal].value;
@@ -683,16 +754,16 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
       break;
     case "props":
       if (isObject(attrValue) && !Array.isArray(attrValue)) {
-        attr = ' props="base64,' + btoa(JSON.stringify(attrValue)) + '"';
+        attr = ' props="base64,' + btoa(stringify(attrValue)) + '"';
       }
       break;
     case "ref":
       if (typeof attrValue === "function") {
         const signals = rc.fcCtx?.signals;
         if (!signals) {
-          console.error("Use `ref` outside of a component function");
+          console.error("[mono-jsx] Use `ref` outside of a component function");
         } else {
-          const refId = rc.flags.refs++;
+          const refId = rc.fcCtx.refs++;
           const effects = signals[Symbol.for("effects")];
           effects.push("()=>(" + attrValue.toString() + ')(this.refs["' + refId + '"])');
           attr = " data-ref=" + toAttrStringLit(rc.fcCtx.scopeId + ":" + refId);
@@ -703,7 +774,8 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
       break;
     case "action":
       if (typeof attrValue === "function") {
-        attr = ' onsubmit="$onsubmit(event,$MF_' + rc.mfs.gen(attrValue) + toStr(rc.fcCtx?.scopeId, (i) => "," + i) + ')"';
+        const scopeId = rc.fcCtx?.scopeId;
+        attr = ' onsubmit="$onsubmit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
       } else if (isString(attrValue)) {
         attr = " action=" + toAttrStringLit(attrValue);
       }
@@ -715,7 +787,8 @@ function renderAttr(rc, attrName, attrValue, stripSlotProp) {
       break;
     default:
       if (attrName.startsWith("on") && typeof attrValue === "function") {
-        attr = " " + escapeHTML(attrName.toLowerCase()) + '="$emit(event,$MF_' + rc.mfs.gen(attrValue) + toStr(rc.fcCtx?.scopeId, (i) => "," + i) + ')"';
+        const scopeId = rc.fcCtx?.scopeId;
+        attr = " " + escapeHTML(attrName.toLowerCase()) + '="$emit(event,$MF_' + (scopeId ?? 0) + "_" + rc.mfs.gen(attrValue, scopeId) + toStr(scopeId, (i) => "," + i) + ')"';
       } else if (attrValue === false || attrValue === null || attrValue === void 0) {
       } else {
         attr = " " + escapeHTML(attrName);
@@ -732,7 +805,7 @@ async function renderFC(rc, fc, props) {
   const scopeId = ++rc.flags.scope;
   const signals = createSignals(scopeId, rc.signals.app, rc.context, rc.request);
   const slots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
-  const fcCtx = { scopeId, signals, slots };
+  const fcCtx = { scopeId, signals, slots, refs: 0 };
   try {
     const v = fc.call(signals, props);
     if (isObject(v) && !isVNode(v)) {
@@ -803,22 +876,34 @@ async function renderFC(rc, fc, props) {
   } catch (err) {
     if (err instanceof Error) {
       if (props.catch) {
-        await renderNode(rc, props.catch(err));
+        await renderNode(rc, props.catch(err)).catch(() => {
+        });
       } else {
         console.error(err);
-        write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.message) + "</code></pre>");
+        write("<script>console.error(" + stringify(err.stack ?? err.message) + ")<\/script>");
       }
     }
   }
 }
-async function renderChildren(rc, children, stripSlotProp) {
-  if (Array.isArray(children) && !isVNode(children)) {
-    for (const child of children) {
-      await renderNode(rc, child, stripSlotProp);
+function renderSignal(rc, signal, mode, content, html2) {
+  const { scope, key } = signal[$signal];
+  let buffer = "<m-signal";
+  if (mode) {
+    buffer += ' mode="';
+    if (isString(mode)) {
+      buffer += mode;
+    } else {
+      buffer += "[" + mode[0] + "]";
     }
+    buffer += '"';
+  }
+  buffer += ' scope="' + scope + '"';
+  if (isString(key)) {
+    buffer += " key=" + toAttrStringLit(key);
   } else {
-    await renderNode(rc, children, stripSlotProp);
+    buffer += ' computed="' + rc.mcs.gen(signal, rc.fcCtx?.scopeId) + '"';
   }
+  rc.write(buffer + ">" + (html2 ? content : escapeHTML(String(content ?? ""))) + "</m-signal>");
 }
 var collectDeps;
 function Signal(scope, key, value) {
@@ -849,6 +934,14 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
   const store = new NullProtoObj();
   const signals = /* @__PURE__ */ new Map();
   const effects = [];
+  const refs = new Proxy(/* @__PURE__ */ Object.create(null), {
+    get(_, key) {
+      return new Ref(scopeId, key);
+    },
+    set() {
+      throw new Error("[mono-jsx] The `refs` object is read-only at SSR time.");
+    }
+  });
   const computed = (compute) => {
     const deps = /* @__PURE__ */ new Set();
     collectDeps = (scopeId2, key) => deps.add(scopeId2 + ":" + key);
@@ -856,11 +949,9 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
     collectDeps = void 0;
     return Signal(scopeId, { compute, deps }, value);
   };
-  const refs = new Proxy(new NullProtoObj(), {
-    get(_, key) {
-      return new Ref(scopeId, key);
-    }
-  });
+  const markEffect = (effect) => {
+    effects.push(effect.toString());
+  };
   const mark = ({ signals: signals2, write }) => {
     if (effects.length > 0) {
       const n = effects.length;
@@ -892,71 +983,55 @@ function createSignals(scopeId, appSignals, context = new NullProtoObj(), reques
         case "$":
           return computed;
         case "effect":
-          return (effect) => {
-            effects.push(effect.toString());
-          };
+          return markEffect;
         case Symbol.for("effects"):
           return effects;
         case Symbol.for("mark"):
           return mark;
-        default:
-          if (isString(key)) {
-            const value = Reflect.get(target, key, receiver);
-            if (value === void 0 && !Reflect.has(target, key)) {
-              Reflect.set(target, key, void 0, receiver);
-            }
-            if (isSignal(value)) {
-              return value;
-            }
-            if (collectDeps) {
-              collectDeps(scopeId, key);
-              return value;
-            }
-            let signal = signals.get(key);
-            if (!signal) {
-              signal = Signal(scopeId, key, value);
-              signals.set(key, signal);
-            }
-            return signal;
+        case "url":
+          if (scopeId === 0) {
+            collectDeps?.(0, key);
+            return request ? request.URL ?? (request.URL = new URL(request.url)) : void 0;
+          }
+        // fallthrough
+        default: {
+          const value = Reflect.get(target, key, receiver);
+          if (typeof key === "symbol" || isSignal(value)) {
+            return value;
+          }
+          if (value === void 0 && !Reflect.has(target, key)) {
+            Reflect.set(target, key, void 0, receiver);
+          }
+          if (collectDeps) {
+            collectDeps(scopeId, key);
+            return value;
           }
+          let signal = signals.get(key);
+          if (!signal) {
+            signal = Signal(scopeId, key, value);
+            signals.set(key, signal);
+          }
+          return signal;
+        }
       }
     },
     set(target, key, value, receiver) {
-      signals.delete(key);
+      if (isString(key)) {
+        signals.delete(key);
+      }
       return Reflect.set(target, key, value, receiver);
     }
   });
   return thisProxy;
 }
-function computedProps({ fcCtx }, props) {
-  if (fcCtx) {
-    const deps = /* @__PURE__ */ new Set();
-    const patches = [];
-    const staticProps = traverseProps(props, (path, value) => {
-      const { scope, key } = value[$signal];
-      if (isString(key)) {
-        patches.push([(scope !== fcCtx.scopeId ? "$signals(" + scope + ")" : "this") + "[" + JSON.stringify(key) + "]", ...path].join(","));
-        deps.add(scope + ":" + key);
-      } else {
-        patches.push(["(" + key.compute.toString() + ")(),", ...path].join(","));
-        for (const dep of key.deps) {
-          deps.add(dep);
-        }
-      }
-    });
-    if (patches.length > 0) {
-      const { scopeId } = fcCtx;
-      const compute = "()=>$patch(" + JSON.stringify(staticProps) + ",[" + patches.join("],[") + "])";
-      return Signal(scopeId, { compute, deps }, staticProps);
-    }
-  }
-  return void 0;
+function markSignals(rc, signals) {
+  signals[Symbol.for("mark")](rc);
 }
 function traverseProps(obj, callback, path = []) {
   const isArray = Array.isArray(obj);
   const copy = isArray ? new Array(obj.length) : new NullProtoObj();
   for (const [k, value] of Object.entries(obj)) {
-    const newPath = path.concat(isArray ? k : JSON.stringify(k));
+    const newPath = path.concat(isArray ? k : stringify(k));
     const key = isArray ? Number(k) : k;
     if (isObject(value)) {
       if (isSignal(value)) {
@@ -971,9 +1046,6 @@ function traverseProps(obj, callback, path = []) {
   }
   return copy;
 }
-function markSignals(rc, signals) {
-  signals[Symbol.for("mark")](rc);
-}
 // jsx-runtime.ts
 var Fragment = $fragment;
@@ -986,7 +1058,7 @@ var jsx = (tag, props = new NullProtoObj(), key) => {
     props.key = key;
   }
   if (tag === "html") {
-    if (props.request === $peek) {
+    if (props.request === $setup) {
       return props;
     }
     const renderOptions = new NullProtoObj();
@@ -1012,7 +1084,7 @@ var jsxEscape = (value) => {
 };
 var html = (template, ...values) => [
   $html,
-  { innerHTML: isString(template) ? template : String.raw(template, ...values.map(jsxEscape)) },
+  { innerHTML: isString(template) || isSignal(template) ? template : String.raw(template, ...values.map(jsxEscape)) },
   $vnode
 ];
 Object.assign(globalThis, {

package/package.json CHANGED Viewed

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

package/setup.mjs CHANGED Viewed

@@ -34,6 +34,8 @@ async function setup() {
     compilerOptions.lib ??= ["dom", "es2022"];
     compilerOptions.module ??= "es2022";
     compilerOptions.moduleResolution ??= "bundler";
+    compilerOptions.allowImportingTsExtensions ??= true;
+    compilerOptions.noEmit ??= true;
   }
   compilerOptions.jsx = "react-jsx";
   compilerOptions.jsxImportSource = "mono-jsx";

package/types/html.d.ts CHANGED Viewed

@@ -44,11 +44,13 @@ export namespace HTML {
   /** Global HTML attributes from https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes */
   interface GlobalAttributes<T extends EventTarget> extends EventAttributes<T>, Aria.Attributes, Mono.BaseAttributes, JSX.HtmlTag {
+    // @mono-jsx
+    ref?: HTMLElement | ((el: T) => unknown);
     /** Defines a unique identifier (ID) which must be unique in the whole document. Its purpose is to identify the element when linking (using a fragment identifier), scripting, or styling (with CSS). */
     id?: string;
-    /** A space-separated list of the classes of the element. Classes allow CSS and JavaScript to select and access specific elements via the [class selectors](https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors) or functions like the method [`Document.getElementsByClassName()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByClassName). */
+    /** Contains a space-separated list of the classes of the element. Classes are used by CSS and JavaScript to select and access specific elements. */
     class?: HTMLClass | HTMLClass[];
-    /** Contains [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling declarations to be applied to the element. Note that it is recommended for styles to be defined in a separate file or files. This attribute and the [`<style>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/style) element have mainly the purpose of allowing for quick styling, for example for testing purposes. */
+    /** Contains [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS) styling declarations to be applied to the element. */
     style?: string | Mono.CSSProperties;
     /** An enumerated attribute indicating that the element is not yet, or is no longer, relevant. For example, it can be used to hide elements of the page that can't be used until the login process has been completed. The browser won't render such elements. This attribute must not be used to hide content that could legitimately be shown. */
     hidden?: boolean | "hidden" | "until-found";
@@ -828,9 +830,6 @@ export namespace HTML {
   }
   interface EventAttributes<T extends EventTarget> {
-    // @mono-jsx
-    ref?: ((el: T) => unknown) | HTMLElement | null;
     // Input Events
     onBeforeInput?: EventHandler<Event, T>;
     onInput?: EventHandler<Event, T>;

package/types/mono.d.ts CHANGED Viewed

@@ -104,42 +104,62 @@ export interface Elements {
   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,
    * which can improve performance by reducing the initial load time of the application.
    */
   component: BaseAttributes & AsyncComponentAttributes & {
-    name: string;
+    name?: string;
     props?: Record<string, unknown>;
+    ref?: ComponentElement | ((el: ComponentElement) => void);
   };
   /**
    * The `router` element is a built-in element that implements client-side routing.
    */
-  router: BaseAttributes & AsyncComponentAttributes & {};
+  router: BaseAttributes & AsyncComponentAttributes & {
+    /**
+     * The `base` attribute is used to set the base URL for the router.
+     */
+    base?: string;
+    ref?: RouterElement | ((el: RouterElement) => void);
+  };
 }
+export type WithParams<T> = T & { params?: Record<string, string> };
 declare global {
   /**
-   * The `html` function is used to create XSS-unsafe HTML elements.
+   * The `html` function is used to create XSS-unsafed HTML content.
    */
   var html: JSX.Raw;
+  /**
+   * The `css` function is an alias to `html`.
+   */
   var css: JSX.Raw;
+  /**
+   * The `js` function is an alias to `html`.
+   */
   var js: JSX.Raw;
   /**
-   * mono-jsx `this` object that is bound to the function component.
+   *  The `FC` type defines Signals/Context/Refs API.
    */
-  type FC<Signals = {}, AppSignals = {}, Context = {}> = {
+  type FC<Signals = {}, AppSignals = {}, Context = {}, Refs = {}, AppRefs = {}> = {
     /**
      * The global signals shared across the application.
      */
-    readonly app: AppSignals;
+    readonly app: {
+      /**
+       * The `app.refs` object is used to store variables in the application scope.
+       * It is similar to `refs`, but it is shared across all components in the application.
+       *
+       * **⚠ This is a client-side only API.**
+       */
+      readonly refs: AppRefs;
+      /**
+       * The `app.url` object contains the current URL information.
+       */
+      readonly url: WithParams<URL>;
+    } & Omit<AppSignals, "refs" | "url">;
     /**
      * The rendering context.
      *
@@ -151,23 +171,47 @@ declare global {
      *
      * **⚠ This is a server-side only API.**
      */
-    readonly request: Request & { params?: Record<string, string> };
+    readonly request: WithParams<Request & { URL: URL }>;
     /**
-     * The `refs` object is used to store references to DOM elements.
+     * The `refs` object is used to store variables in clide side.
+     *
+     * **⚠ This is a client-side only API.**
      */
-    readonly refs: Record<string, HTMLElement | null>;
+    readonly refs: Refs;
     /**
      * 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)`.
+     * `this.$(fn)` is a shortcut for `this.computed(fn)`.
      */
-    readonly $: <T = unknown>(fn: () => T) => T;
+    readonly $: FC["computed"];
     /**
      * 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" | "refs" | "forIndex" | "forItem" | "computed" | "$" | "effect">;
+  /**
+   *  The `Refs` defines the `refs` types.
+   */
+  type Refs<T, R = {}, RR = {}> = T extends FC<infer S, infer A, infer C> ? FC<S, A, C, R, RR> : never;
+  /**
+   * The `Context` defines the `context` types.
+   */
+  type Context<T, C = {}> = T extends FC<infer S, infer A, infer _, infer R, infer RR> ? FC<S, A, C, R, RR> : never;
+  /**
+   * The `ComponentElement` type defines the component element.
+   */
+  type ComponentElement = {
+    name: string;
+    props: Record<string, unknown> | undefined;
+    refresh: () => Promise<void>;
+  };
+  /**
+   * The `RouterElement` type defines the router element.
+   */
+  type RouterElement = {
+    navigate: (url: string | URL, options?: { replace?: boolean }) => Promise<void>;
+  };
 }