npm - mono-jsx - Versions diffs - 0.3.2 → 0.3.4 - Mend

mono-jsx 0.3.2 → 0.3.4

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

@@ -9,6 +9,7 @@ mono-jsx is a JSX runtime that renders `<html>` element to `Response` object in
 - 🔫 Minimal state runtime
 - 🚨 Complete Web API TypeScript definitions
 - ⏳ Streaming rendering
+- 🥷 [htmx](#using-htmx) integration
 - 🌎 Universal, works in Node.js, Deno, Bun, Cloudflare Workers, etc.
 ## Installation
@@ -65,6 +66,7 @@ mono-jsx allows you to return an `<html>` JSX element as a `Response` object in
 ```tsx
 // app.tsx
 export default {
   fetch: (req) => (
     <html>
@@ -91,6 +93,7 @@ npx wrangler dev app.tsx
 ```tsx
 // app.tsx
 import { serve } from "srvx";
 serve({
@@ -157,7 +160,7 @@ mono-jsx supports [pseudo classes](https://developer.mozilla.org/en-US/docs/Web/
 </a>;
 ```
-### `<slot>` Element
+### Using `<slot>` Element
 mono-jsx uses [`<slot>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot) elements to render slotted content (equivalent to React's `children` property). You can also add the `name` attribute to define named slots:
@@ -185,7 +188,7 @@ function App() {
 }
 ```
-### `html` Tag Function
+### Using `html` Tag Function
 mono-jsx provides an `html` tag function to render raw HTML in JSX instead of React's `dangerouslySetInnerHTML`:
@@ -270,12 +273,7 @@ mono-jsx also accepts functions for the `action` property on `form` elements, wh
 ```tsx
 function App() {
   return (
-    <form
-      action={(data: FormData, event: SubmitEvent) => {
-        event.preventDefault(); // true
-        console.log(data.get("name"));
-      }}
-    >
+    <form action={(data: FormData, event: SubmitEvent) => console.log(data.get("name"))}>
       <input type="text" name="name" />
       <button type="submit">Submit</button>
     </form>
@@ -285,11 +283,11 @@ function App() {
 ## Reactive
-mono-jsx provides a minimal state runtime for updating the view based on client-side state changes:
+mono-jsx provides a minimal state runtime for updating the view based on client-side state changes.
-### Using State
+### Using Component State
-You can use `this` to define state in your components. The view will automatically update when the state changes:
+You can use the `this` keyword in your components to manage state. The state is bound to the component instance and can be updated directly, and will automatically re-render the view when the state changes:
 ```tsx
 function Counter(
@@ -377,9 +375,60 @@ function App(this: FC<{ input: string }>) {
 }
 ```
-### Limitation of States
+### Using `<toggle>` Element with State
+The `<toggle>` element conditionally renders content based on the value of a state.
+```tsx
+function App(this: FC<{ show: boolean }>) {
+  this.show = false;
+  function toggle() {
+    this.show = !this.show;
+  }
+  return (
+    <div>
+      <toggle value={this.show}>
+        <h1>Welcome to mono-jsx!</h1>
+      </toggle>
+      <button onClick={toggle}>
+        {this.computed(() => this.show ? "Hide" : "Show")}
+      </button>
+    </div>
+  );
+}
+```
+### Using `<switch>` Element with State
+The `<switch>` element renders different content based on the value of a state. Elements with matching `slot` attributes are displayed when their value matches, otherwise default content is shown:
+```tsx
+function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
+  this.lang = "en";
+  return (
+    <div>
+      <switch value={this.lang}>
+        <h1 slot="en">Hello, world!</h1>
+        <h1 slot="zh">你好，世界！</h1>
+        <h1>✋🌎❗️</h1>
+      </switch>
+      <p>
+        <button onClick={() => this.lang = "en"}>English</button>
+        <button onClick={() => this.lang = "zh"}>中文</button>
+        <button onClick={() => this.lang = "emoji"}>Emoji</button>
+      </p>
+    </div>
+  );
+}
+```
+### Limitation of State
-1\. States cannot be used in arrow function components.
+1\. Component state cannot be used in arrow function components.
 ```tsx
 // ❌ Won't work - state updates won't refresh the view
@@ -405,7 +454,7 @@ function App(this: FC) {
 }
 ```
-2\. States cannot be computed outside of the `this.computed` method.
+2\. Component state cannot be computed outside of the `this.computed` method.
 ```tsx
 // ❌ Won't work - state updates won't refresh the view
@@ -435,58 +484,82 @@ function App(this: FC) {
 }
 ```
-## Built-in Elements
+## Using `this` in Components
-mono-jsx provides built-in elements to help you build reactive UIs.
+mono-jsx binds a special `this` object to your components when they are rendered. This object contains properties and methods that you can use to manage state, context, and other features.
-### `<toggle>` element
+The `this` object contains the following properties:
-The `<toggle>` element conditionally renders content based on a boolean value:
+- `app`: The app state defined on the root `<html>` element.
+- `context`: The context defined on the root `<html>` element.
+- `request`: The request object from the `fetch` handler.
+- `computed`: A method to create computed properties based on state.
-```tsx
-function App(this: FC<{ show: boolean }>) {
-  this.show = false;
+```ts
+type FC<State = {}, AppState = {}, Context = {}> = {
+  readonly app: AppState;
+  readonly context: Context;
+  readonly request: Request;
+  readonly computed: <V = unknown>(computeFn: () => V) => V;
+} & Omit<State, "app" | "context" | "request" | "computed">;
+```
-  function toggle() {
-    this.show = !this.show;
-  }
+### Using State
+Check the [Using State](#using-state) section for more details on how to use state in your components.
+### 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 } }>) {
+  const { auth } = this.context;
   return (
     <div>
-      <toggle value={this.show}>
-        <h1>Welcome to mono-jsx!</h1>
-      </toggle>
-      <button onClick={toggle}>
-        {this.computed(() => this.show ? "Hide" : "Show")}
-      </button>
+      <h1>Welcome back, {auth.name}!</h1>
+      <p>Your UUID is {auth.uuid}</p>
     </div>
   );
 }
+export default {
+  fetch: async (req) => {
+    const auth = await doAuth(req);
+    return (
+      <html context={{ auth }} request={req}>
+        {!auth && <p>Please Login</p>}
+        {auth && <Dash />}
+      </html>
+    );
+  },
+};
 ```
-### `<switch>` element
+### Accessing Request Info
-The `<switch>` element renders different content based on a value. Elements with matching `slot` attributes are displayed when their value matches, otherwise default content is shown:
+You can access request information in components via the `request` property in `this` which is set on the root `<html>` element:
 ```tsx
-function App(this: FC<{ lang: "en" | "zh" | "emoji" }>) {
-  this.lang = "en";
+function RequestInfo(this: FC) {
+  const { request } = this;
   return (
     <div>
-      <switch value={this.lang}>
-        <h1 slot="en">Hello, world!</h1>
-        <h1 slot="zh">你好，世界！</h1>
-        <h1>✋🌎❗️</h1>
-      </switch>
-      <button onClick={() => this.lang = "en"}>English</button>
-      <button onClick={() => this.lang = "zh"}>中文</button>
-      <button onClick={() => this.lang = "emoji"}>Emoji</button>
+      <h1>Request Info</h1>
+      <p>{request.method}</p>
+      <p>{request.url}</p>
+      <p>{request.headers.get("user-agent")}</p>
     </div>
   );
 }
+export default {
+  fetch: (req) => (
+    <html request={req}>
+      <RequestInfo />
+    </html>
+  ),
+};
 ```
 ## Streaming Rendering
@@ -533,61 +606,24 @@ export default {
 };
 ```
-## Using Context
+You can add the `catch` attribute to handle errors in async components. The `catch` attribute should be a function that returns a JSX element:
-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 } }>) {
-  const { auth } = this.context;
-  return (
-    <div>
-      <h1>Welcome back, {auth.name}!</h1>
-      <p>Your UUID is {auth.uuid}</p>
-    </div>
-  );
-}
-export default {
-  fetch: async (req) => {
-    const auth = await doAuth(req);
-    return (
-      <html context={{ auth }} request={req}>
-        {!auth && <p>Please Login</p>}
-        {auth && <Dash />}
-      </html>
-    );
-  },
-};
-```
-## Accessing Request Info
-You can access request information in components via the `request` property in `this` which is set on the root `<html>` element:
-```tsx
-function RequestInfo(this: FC) {
-  const { request } = this;
-  return (
-    <div>
-      <h1>Request Info</h1>
-      <p>{request.method}</p>
-      <p>{request.url}</p>
-      <p>{request.headers.get("user-agent")}</p>
-    </div>
-  );
+```jsx
+async function Hello() {
+  throw new Error("Something went wrong!");
+  return <p>Hello world!</p>;
 }
 export default {
   fetch: (req) => (
-    <html request={req}>
-      <RequestInfo />
+    <html>
+      <Hello catch={err => <p>{err.messaage}</p>} />
     </html>
   ),
 };
 ```
-## Customizing Response
+## Customizing html Response
 Add `status` or `headers` attributes to the root `<html>` element to customize the response:
@@ -607,7 +643,7 @@ export default {
 };
 ```
-## Using htmx
+### Using htmx
 mono-jsx integrates with [htmx](https://htmx.org/) and [typed-htmx](https://github.com/Desdaemon/typed-htmx). To use htmx, add the `htmx` attribute to the root `<html>` element:
@@ -635,7 +671,7 @@ export default {
 };
 ```
-### Adding htmx Extensions
+#### Adding htmx Extensions
 You can add htmx [extensions](https://htmx.org/docs/#extensions) by adding the `htmx-ext-*` attribute to the root `<html>` element:
@@ -651,7 +687,7 @@ export default {
 };
 ```
-### Specifying htmx Version
+#### Specifying htmx Version
 You can specify the htmx version by setting the `htmx` attribute to a specific version:
@@ -667,7 +703,7 @@ export default {
 };
 ```
-### Installing htmx Manually
+#### Installing 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:

package/jsx-runtime.mjs CHANGED Viewed

@@ -5,61 +5,16 @@ var $html = Symbol.for("jsx.html");
 var $state = Symbol.for("mono.state");
 var $computed = Symbol.for("mono.computed");
-// state.ts
-var collectDeps;
-function createState(fc, appState, context, request) {
-  const computed = (fn) => {
-    const deps = /* @__PURE__ */ Object.create(null);
-    collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
-    const value = fn.call(proxy);
-    collectDeps = void 0;
-    if (value instanceof Promise || deps.size === 0) return value;
-    return [$computed, { value, deps, fn: fn.toString(), fc }, $vnode];
-  };
-  const proxy = new Proxy(/* @__PURE__ */ Object.create(null), {
-    get(target, key, receiver) {
-      switch (key) {
-        case "app":
-          return appState;
-        case "context":
-          return context ?? {};
-        case "request":
-          if (!request) {
-            throw new Error("request is not defined");
-          }
-          return request;
-        case "computed":
-          return computed;
-        default: {
-          const value = Reflect.get(target, key, receiver);
-          if (typeof key === "symbol") {
-            return value;
-          }
-          if (collectDeps) {
-            collectDeps(fc, key, value);
-            return value;
-          }
-          return [$state, { key, value, fc }, $vnode];
-        }
-      }
-    },
-    set(target, key, value, receiver) {
-      return Reflect.set(target, key, value, receiver);
-    }
-  });
-  return proxy;
-}
 // runtime/index.ts
-var STATE_JS = `const p=new Map,f=e=>p.get(e)??p.set(e,E(e)).get(e),u=(e,t)=>e.getAttribute(t),d=(e,t)=>e.hasAttribute(t),E=e=>{const t=Object.create(null),l=new Map,s=(i,c)=>{let r=c;Object.defineProperty(t,i,{get:()=>r,set:o=>{if(o!==r){const a=l.get(i);a&&queueMicrotask(()=>a.forEach(m=>m())),r=o}}})},n=(i,c)=>{let r=l.get(i);r||(r=[],l.set(i,r)),r.push(c)};return e>0&&Object.defineProperty(t,"app",{get:()=>f(0).store,enumerable:!1,configurable:!1}),{store:t,define:s,watch:n}},g=(e,t,l)=>{if(t==="toggle"){let s;return()=>{if(!s){const n=e.firstElementChild;n&&n.tagName==="TEMPLATE"&&d(n,"m-slot")?(s=n.content.childNodes,e.innerHTML=""):s=e.childNodes}l()?e.append(...s):e.innerHTML=""}}if(t==="switch"){let s=u(e,"match"),n,i,c=o=>n.get(o)??n.set(o,[]).get(o),r;return()=>{if(!n){n=new Map,i=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&d(o,"m-slot")){for(const a of o.content.childNodes)a.nodeType===1&&d(a,"slot")?c(u(a,"slot")).push(a):i.push(a);o.remove()}else s?c(s).push(o):i.push(o)}r=l(),e.innerHTML="",e.append(...n.has(r)?n.get(r):i)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let s=t.slice(1,-1),n=e.parentElement;return n.tagName==="M-GROUP"&&(n=n.previousElementSibling),()=>{const i=l();i===!1?n.removeAttribute(s):(s==="class"||s==="style")&&i&&typeof i=="object"?n.setAttribute(s,s==="class"?cx(i):styleToCSS(i)):n.setAttribute(s,i===!0?"":""+i)}}return()=>e.textContent=""+l()},h=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid state key")};customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,t=f(Number(u(e,"fc"))),l=u(e,"mode"),s=u(e,"key");s?t.watch(s,g(e,l,()=>t.store[s])):d(e,"computed")&&setTimeout(()=>{const n=e.firstChild;if(n&&n.nodeType===1&&n.type==="computed"){const i=n.textContent;i&&new Function("$",i).call(t.store,(c,r)=>{const o=g(e,l,c);for(const a of r){const[m,T]=h(a);f(m).watch(T,o)}})}})}}),Object.assign(globalThis,{$state:e=>e!==void 0?f(e).store:void 0,$defineState:(e,t)=>{const[l,s]=h(e);f(l).define(s,t)}});`;
-var SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{const t=o(e),s=n[t];s&&setTimeout(()=>{s.replaceWith(...e.firstChild.content.childNodes),delete n[t],e.remove()})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
+var STATE_JS = `const m=new Map,u=e=>m.get(e)??m.set(e,b(e)).get(e),f=(e,t)=>e.getAttribute(t),d=(e,t)=>e.hasAttribute(t),b=e=>{const t=Object.create(null),r=new Map,n=(i,c)=>{let a=c;Object.defineProperty(t,i,{get:()=>a,set:o=>{if(o!==a){const l=r.get(i);l&&queueMicrotask(()=>l.forEach(h=>h())),a=o}}})},s=(i,c)=>{let a=r.get(i);a||(a=[],r.set(i,a)),a.push(c)};return e>0&&Object.defineProperty(t,"app",{get:()=>u(0).store,enumerable:!1,configurable:!1}),{store:t,define:n,watch:s}},g=(e,t,r)=>{if(t==="toggle"){let n;return()=>{if(!n){const s=e.firstElementChild;s&&s.tagName==="TEMPLATE"&&d(s,"m-slot")?(n=s.content.childNodes,e.innerHTML=""):n=e.childNodes}r()?e.append(...n):e.innerHTML=""}}if(t==="switch"){let n=f(e,"match"),s,i,c=o=>s.get(o)??s.set(o,[]).get(o),a;return()=>{if(!s){s=new Map,i=[];for(const o of e.childNodes)if(o.nodeType===1&&o.tagName==="TEMPLATE"&&d(o,"m-slot")){for(const l of o.content.childNodes)l.nodeType===1&&d(l,"slot")?c(f(l,"slot")).push(l):i.push(l);o.remove()}else n?c(n).push(o):i.push(o)}a=r(),e.innerHTML="",e.append(...s.has(a)?s.get(a):i)}}if(t&&t.length>2&&t.startsWith("[")&&t.endsWith("]")){let n=t.slice(1,-1),s=e.parentElement;return s.tagName==="M-GROUP"&&(s=s.previousElementSibling),()=>{const i=r();i===!1?s.removeAttribute(n):(n==="class"||n==="style")&&i&&typeof i=="object"?s.setAttribute(n,n==="class"?$cx(i):$styleToCSS(i)):s.setAttribute(n,i===!0?"":""+i)}}return()=>e.textContent=""+r()},p=e=>{const t=e.indexOf(":");if(t>0)return[Number(e.slice(0,t)),e.slice(t+1)];throw new Error("Invalid state key")};customElements.define("m-state",class extends HTMLElement{connectedCallback(){const e=this,t=f(e,"key");if(t){const r=u(Number(f(e,"fc")));r.watch(t,g(e,f(e,"mode"),()=>r.store[t]));return}}}),Object.assign(window,{$state:e=>e!==void 0?u(e).store:void 0,$defineState:(e,t)=>{const[r,n]=p(e);u(r).define(n,t)},$defineComputed:(e,t,r)=>{const n=document.querySelector("m-state[computed='"+e+"']");if(n){const s=u(Number(f(n,"fc"))).store,i=g(n,f(n,"mode"),t.bind(s));for(const c of r){const[a,o]=p(c);u(a).watch(o,i)}}}});`;
+var SUSPENSE_JS = `const n={},o=e=>e.getAttribute("chunk-id");c("m-portal",e=>{n[o(e)]=e}),c("m-chunk",e=>{setTimeout(()=>{const t=o(e),s=n[t];s&&(s.replaceWith(...e.firstChild.content.childNodes),e.remove(),delete n[t])})});function c(e,t){customElements.define(e,class extends HTMLElement{connectedCallback(){t(this)}})}`;
 var UTILS_JS = {
-  /** cx.js (239 bytes) */
-  cx: `let cx=(()=>{var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}return t;})();`,
-  /** styleToCSS.js (1203 bytes) */
-  styleToCSS: `let styleToCSS=(()=>{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"]),s=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function l(e){if(s(e))return e;if(u(e)){let r="";for(let[o,t]of Array.isArray(e)?e:Object.entries(e)){if(t==null||t===!1||Number.isNaN(t)||!s(o))return"";let n=f(o),i=typeof t=="number"?c.has(n)?""+t:t+"px":a(""+t);r+=(r!==""?";":"")+a(n)+":"+(n==="content"?JSON.stringify(i):i)}return r}return""}function a(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}return l;})();`,
-  /** event.js (169 bytes) */
-  event: `let w=window;w.$emit=(evt,el,fn,fc)=>fn.call(w.$state?.(fc)??el,evt);w.$onsubmit=(evt,el,fn,fc)=>{evt.preventDefault();fn.call(w.$state?.(fc)??el,new FormData(el),evt)};`
+  /** cx.js (225 bytes) */
+  cx: `var n=e=>typeof e=="string",o=e=>typeof e=="object"&&e!==null;function t(e){return n(e)?e:o(e)?Array.isArray(e)?e.map(t).filter(Boolean).join(" "):Object.entries(e).filter(([,r])=>!!r).map(([r])=>r).join(" "):""}window.$cx=t;`,
+  /** styleToCSS.js (1168 bytes) */
+  styleToCSS: `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"]),o=e=>typeof e=="string",u=e=>typeof e=="object"&&e!==null,f=e=>e.replace(/[a-z][A-Z]/g,r=>r.charAt(0)+"-"+r.charAt(1).toLowerCase());function p(e){if(o(e))return e;if(u(e)){let r="";for(let[i,t]of Array.isArray(e)?e:Object.entries(e))if(o(i)&&(o(t)||typeof t=="number")){let n=f(i),c=typeof t=="number"?a.has(n)?""+t:t+"px":s(""+t);r+=(r?";":"")+s(n)+":"+(n==="content"?JSON.stringify(c):c)}return r}return""}function s(e){return e.replace(/["<>]/g,r=>r==="<"?"&lt;":r===">"?"&gt;":"'")}window.$styleToCSS=p;`,
+  /** event.js (347 bytes) */
+  event: `var w=window;w.$emit=(e,fn,fc)=>fn.call(w.$state?.(fc)??e.target,e);w.$onsubmit=(e,fn,fc)=>{e.preventDefault();fn.call(w.$state?.(fc)??e.target,new FormData(e.target),e)};w.$onstage=()=>document.querySelectorAll("[onmount]").forEach(t=>{const k="onmount",j=t.getAttribute(k);t.removeAttribute(k);new Function("event",j)({type:"mount",target:t})});`
 };
 // runtime/utils.ts
@@ -130,35 +85,36 @@ function styleToCSS(style) {
   if (isObject(style)) {
     let css = "";
     for (const [k, v] of Array.isArray(style) ? style : Object.entries(style)) {
-      if (v === null || v === void 0 || v === false || Number.isNaN(v) || !isString(k)) return "";
-      const cssKey = toHyphenCase(k);
-      const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : escapeCSSText("" + v);
-      css += (css !== "" ? ";" : "") + escapeCSSText(cssKey) + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+      if (isString(k) && (isString(v) || typeof v === "number")) {
+        const cssKey = toHyphenCase(k);
+        const cssValue = typeof v === "number" ? cssBareUnitProps.has(cssKey) ? "" + v : v + "px" : escapeCSSText("" + v);
+        css += (css ? ";" : "") + escapeCSSText(cssKey) + ":" + (cssKey === "content" ? JSON.stringify(cssValue) : cssValue);
+      }
     }
     return css;
   }
   return "";
 }
-function escapeCSSText(str) {
-  return str.replace(/["<>]/g, (m) => {
+function escapeCSSText(str2) {
+  return str2.replace(/["<>]/g, (m) => {
     if (m === "<") return "&lt;";
     if (m === ">") return "&gt;";
     return "'";
   });
 }
 var regexpHtmlSafe = /["'&<>]/;
-function escapeHTML(str) {
-  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str);
-  const match = regexpHtmlSafe.exec(str);
+function escapeHTML(str2) {
+  if (typeof Bun === "object" && "escapeHTML" in Bun) return Bun.escapeHTML(str2);
+  const match = regexpHtmlSafe.exec(str2);
   if (!match) {
-    return str;
+    return str2;
   }
   let escape;
   let index;
   let lastIndex = 0;
   let html2 = "";
-  for (index = match.index; index < str.length; index++) {
-    switch (str.charCodeAt(index)) {
+  for (index = match.index; index < str2.length; index++) {
+    switch (str2.charCodeAt(index)) {
       case 34:
         escape = "&quot;";
         break;
@@ -178,21 +134,66 @@ function escapeHTML(str) {
         continue;
     }
     if (lastIndex !== index) {
-      html2 += str.slice(lastIndex, index);
+      html2 += str2.slice(lastIndex, index);
     }
     lastIndex = index + 1;
     html2 += escape;
   }
-  return lastIndex !== index ? html2 + str.slice(lastIndex, index) : html2;
+  return lastIndex !== index ? html2 + str2.slice(lastIndex, index) : html2;
 }
 // render.ts
 var encoder = new TextEncoder();
 var regexpHtmlTag = /^[a-z][\w\-$]*$/;
 var selfClosingTags = new Set("area,base,br,col,embed,hr,img,input,keygen,link,meta,param,source,track,wbr".split(","));
+var cdn = "https://raw.esm.sh";
 var isVNode = (v) => Array.isArray(v) && v.length === 3 && v[2] === $vnode;
 var hashCode = (s) => [...s].reduce((hash, c) => Math.imul(31, hash) + c.charCodeAt(0) | 0, 0);
-var toAttrStringLit = (str) => '"' + escapeHTML(str) + '"';
+var toAttrStringLit = (str2) => '"' + escapeHTML(str2) + '"';
+var str = (v, str2) => v !== void 0 ? str2(v) : "";
+var collectDeps;
+function createThis(fc, appState, context, request) {
+  const computed = (fn) => {
+    const deps = /* @__PURE__ */ Object.create(null);
+    collectDeps = (fc2, key, value2) => deps[fc2 + ":" + key] = value2;
+    const value = fn.call(thisProxy);
+    collectDeps = void 0;
+    if (value instanceof Promise || Object.keys(deps).length === 0) return value;
+    return [$computed, { value, deps, fc, fn }, $vnode];
+  };
+  const thisProxy = new Proxy(/* @__PURE__ */ Object.create(null), {
+    get(target, key, receiver) {
+      switch (key) {
+        case "app":
+          return appState;
+        case "context":
+          return context ?? {};
+        case "request":
+          if (!request) {
+            throw new Error("request is not defined");
+          }
+          return request;
+        case "computed":
+          return computed;
+        default: {
+          const value = Reflect.get(target, key, receiver);
+          if (typeof key === "symbol") {
+            return value;
+          }
+          if (collectDeps) {
+            collectDeps(fc, key, value);
+            return value;
+          }
+          return [$state, { key, value, fc }, $vnode];
+        }
+      }
+    },
+    set(target, key, value, receiver) {
+      return Reflect.set(target, key, value, receiver);
+    }
+  });
+  return thisProxy;
+}
 async function renderNode(rc, node, stripSlotProp) {
   const { write } = rc;
   switch (typeof node) {
@@ -207,7 +208,7 @@ async function renderNode(rc, node, stripSlotProp) {
       if (isVNode(node)) {
         const [tag, props] = node;
         const { stateStore } = rc;
-        if (tag === $fragment || tag === "htmx") {
+        if (tag === $fragment) {
           if (props.children !== void 0) {
             await renderChildren(rc, props.children);
           }
@@ -230,10 +231,8 @@ async function renderNode(rc, node, stripSlotProp) {
           break;
         }
         if (tag === $computed) {
-          const { deps, value, fn, fc } = props;
-          write(
-            '<m-state fc="' + fc + '" computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>"
-          );
+          const { deps, value, fc } = props;
+          write('<m-state fc="' + fc + '" computed="' + rc.mcs.gen(node) + '">');
           if (value !== void 0) {
             write(escapeHTML("" + value));
           }
@@ -264,14 +263,14 @@ async function renderNode(rc, node, stripSlotProp) {
         if (tag === "toggle") {
           const { value: valueProp, children } = props;
           if (children !== void 0) {
-            if (isVNode(valueProp) && valueProp[0] === $state || valueProp[0] === $computed) {
-              const { key, deps, value, fn, fc } = valueProp[1];
+            if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
+              const { key, deps, value, fc } = valueProp[1];
               write('<m-state mode="toggle" fc="' + fc + '" ');
               if (key) {
                 write("key=" + toAttrStringLit(key) + ">");
                 stateStore.set(fc + ":" + key, !!value);
               } else {
-                write('computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>");
+                write('computed="' + rc.mcs.gen(valueProp) + '">');
                 for (const [key2, value2] of Object.entries(deps)) {
                   if (!stateStore.has(key2)) {
                     stateStore.set(key2, value2);
@@ -300,14 +299,14 @@ async function renderNode(rc, node, stripSlotProp) {
             let computed;
             let valueOrDefault;
             if (isVNode(valueProp) && (valueProp[0] === $state || valueProp[0] === $computed)) {
-              const { key, deps, value, fn, fc } = valueProp[1];
+              const { key, deps, value, fc } = valueProp[1];
               valueOrDefault = value ?? defaultValue;
               stateful = '<m-state mode="switch" fc="' + fc + '" ';
               if (key) {
                 stateful += "key=" + toAttrStringLit(key) + ">";
                 stateStore.set(fc + ":" + key, valueOrDefault);
               } else {
-                stateful += 'computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>";
+                stateful += 'computed="' + rc.mcs.gen(valueProp) + '">';
                 for (const [key2, value2] of Object.entries(deps)) {
                   if (!stateStore.has(key2)) {
                     stateStore.set(key2, value2);
@@ -358,49 +357,56 @@ async function renderNode(rc, node, stripSlotProp) {
           break;
         }
         if (typeof tag === "function") {
-          const fcIndex = ++rc.index.fc;
-          const { rendering, placeholder, catch: catchFC, ...fcProps } = props ?? /* @__PURE__ */ Object.create(null);
+          const fcIndex = ++rc.status.fcIndex;
+          const { children, rendering, placeholder, catch: catchFC } = props;
           try {
-            const v = tag.call(createState(fcIndex, rc.appState, rc.context, rc.request), fcProps);
-            const { children } = fcProps;
+            const v = tag.call(createThis(fcIndex, rc.appState, rc.context, rc.request), props);
             const fcSlots = children !== void 0 ? Array.isArray(children) ? isVNode(children) ? [children] : children : [children] : void 0;
-            const eager = (rendering ?? tag.rendering) === "eager" || rc.eager;
+            const eager = (rendering ?? tag.rendering) === "eager";
             if (v instanceof Promise) {
               if (eager) {
-                await renderNode({ ...rc, fcIndex, eager: true, fcSlots }, await v);
+                await renderNode({ ...rc, fcIndex, fcSlots }, await v);
               } else {
-                const chunkId = (rc.suspenses.length + 1).toString(36);
-                rc.suspenses.push(v.then(async (c) => {
-                  write('<m-chunk chunk-id="' + chunkId + '"><template>');
-                  await renderNode({ ...rc, fcIndex, eager, fcSlots }, c);
-                  write("</template></m-chunk>");
+                const chunkIdAttr = 'chunk-id="' + (rc.status.chunkIndex++).toString(36) + '"';
+                rc.suspenses.push(v.then(async (node2) => {
+                  let buf = "<m-chunk " + chunkIdAttr + "><template>";
+                  await renderNode({
+                    ...rc,
+                    fcIndex,
+                    fcSlots,
+                    write: (chunk) => {
+                      buf += chunk;
+                    }
+                  }, node2);
+                  return buf + "</template></m-chunk>";
                 }));
-                write('<m-portal chunk-id="' + chunkId + '">');
+                write("<m-portal " + chunkIdAttr + ">");
                 if (placeholder) {
-                  await renderNode({ ...rc, fcIndex, eager: true }, placeholder);
+                  await renderNode({ ...rc, fcIndex }, placeholder);
                 }
                 write("</m-portal>");
               }
-            } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
-              for (const c of v) {
-                await renderNode({ ...rc, fcIndex, eager, fcSlots }, c);
-              }
             } else if (isObject(v) && Symbol.asyncIterator in v) {
               if (eager) {
                 for await (const c of v) {
-                  await renderNode({ ...rc, fcIndex, eager: true, fcSlots }, c);
+                  await renderNode({ ...rc, fcIndex, fcSlots }, c);
                 }
               } else {
               }
+            } else if (isObject(v) && Symbol.iterator in v && !isVNode(v)) {
+              for (const node2 of v) {
+                await renderNode({ ...rc, fcIndex, fcSlots }, node2);
+              }
             } else {
-              await renderNode({ ...rc, fcIndex, eager, fcSlots }, v);
+              await renderNode({ ...rc, fcIndex, fcSlots }, v);
             }
           } catch (err) {
             if (err instanceof Error) {
               if (typeof catchFC === "function") {
-                await renderNode({ ...rc, fcIndex, eager: true }, catchFC(err));
+                await renderNode({ ...rc, fcIndex }, catchFC(err));
               } else {
-                write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.stack ?? err.message) + "</code></pre>");
+                write('<pre style="color:red;font-size:1rem"><code>' + escapeHTML(err.message) + "</code></pre>");
+                console.error(err);
               }
             }
           }
@@ -408,32 +414,31 @@ async function renderNode(rc, node, stripSlotProp) {
         }
         if (isString(tag) && regexpHtmlTag.test(tag)) {
           let buffer = "<" + tag;
-          let propEffects = [];
-          let onMountHandler;
+          let stateTags = "";
           for (let [propName, propValue] of Object.entries(props)) {
             if (propName === "children") {
               continue;
             }
             if (isVNode(propValue) && (propValue[0] === $state || propValue[0] === $computed)) {
-              const { key, value, deps, fn, fc } = propValue[1];
+              const { key, value, deps, fc } = propValue[1];
               if (propName === "class") {
-                rc.runtimeUtils.cx = true;
+                rc.status.cx = true;
               } else if (propName === "style") {
-                rc.runtimeUtils.styleToCSS = true;
+                rc.status.styleToCSS = true;
               }
-              propEffects.push("<m-state mode=" + toAttrStringLit("[" + propName + "]") + ' fc="' + fc + '" ');
+              stateTags += "<m-state mode=" + toAttrStringLit("[" + propName + "]") + ' fc="' + fc + '" ';
               if (key) {
-                propEffects.push("key=" + toAttrStringLit(key) + ">");
+                stateTags += "key=" + toAttrStringLit(key) + ">";
                 stateStore.set(fc + ":" + key, value);
               } else {
-                propEffects.push('computed><script type="computed">$(' + fn + ", " + JSON.stringify(Object.keys(deps)) + ")<\/script>");
+                stateTags += 'computed="' + rc.mcs.gen(propValue) + '">';
                 for (const [key2, value2] of Object.entries(deps)) {
                   if (!stateStore.has(key2)) {
                     stateStore.set(key2, value2);
                   }
                 }
               }
-              propEffects.push("</m-state>");
+              stateTags += "</m-state>";
               propValue = value;
             }
             switch (propName) {
@@ -469,19 +474,19 @@ async function renderNode(rc, node, stripSlotProp) {
                   if (pseudoStyles.length > 0 || atRuleStyles.length > 0 || nestingStyles.length > 0) {
                     let css = "";
                     let raw = "";
-                    let styleIds;
                     let id;
                     let cssSelector;
+                    let cssIds;
                     if (style.length > 0) {
                       css = styleToCSS(style);
                       raw += css + "|";
                     }
                     raw += [pseudoStyles, atRuleStyles, nestingStyles].flat(1).map(([k, v]) => k + ">" + v).join("|");
-                    styleIds = rc.styleIds ?? (rc.styleIds = /* @__PURE__ */ new Set());
                     id = hashCode(raw).toString(36);
                     cssSelector = "[data-css-" + id + "]";
-                    if (!styleIds.has(id)) {
-                      styleIds.add(id);
+                    cssIds = rc.cssIds ?? (rc.cssIds = /* @__PURE__ */ new Set());
+                    if (!cssIds.has(id)) {
+                      cssIds.add(id);
                       if (css) {
                         css = cssSelector + "{" + css + "}";
                       }
@@ -504,14 +509,13 @@ async function renderNode(rc, node, stripSlotProp) {
                 break;
               case "onMount":
                 if (typeof propValue === "function") {
-                  onMountHandler = propValue;
+                  rc.status.onmount++;
+                  buffer += ' onmount="$emit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
                 }
                 break;
               case "action":
                 if (typeof propValue === "function" && tag === "form") {
-                  const fn = "$MF_" + (rc.index.mf++).toString(36);
-                  write("<script>function " + fn + "(fd){(" + propValue.toString() + ")(fd)}<\/script>");
-                  buffer += ' onsubmit="$onsubmit(event,this,' + fn + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + ')"';
+                  buffer += ' onsubmit="$onsubmit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
                 } else if (isString(propValue)) {
                   buffer += " action=" + toAttrStringLit(propValue);
                 }
@@ -525,9 +529,7 @@ async function renderNode(rc, node, stripSlotProp) {
                 if (regexpHtmlTag.test(propName) && propValue !== void 0) {
                   if (propName.startsWith("on")) {
                     if (typeof propValue === "function") {
-                      const fn = "$MF_" + (rc.index.mf++).toString(36);
-                      write("<script>function " + fn + "(e){(" + propValue.toString() + ")(e)}<\/script>");
-                      buffer += " " + propName.toLowerCase() + '="$emit(event,this,' + fn + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + ')"';
+                      buffer += " " + propName.toLowerCase() + '="$emit(event,' + rc.mfs.gen(propValue) + str(rc.fcIndex, (i) => "," + i) + ')"';
                     }
                   } else if (typeof propValue === "boolean") {
                     if (propValue) {
@@ -541,8 +543,8 @@ async function renderNode(rc, node, stripSlotProp) {
           }
           write(buffer + ">");
           if (!selfClosingTags.has(tag)) {
-            if (propEffects.length > 0) {
-              write(propEffects.join(""));
+            if (stateTags) {
+              write(stateTags);
             }
             if (props.innerHTML) {
               write(props.innerHTML);
@@ -550,16 +552,12 @@ async function renderNode(rc, node, stripSlotProp) {
               await renderChildren(rc, props.children);
             }
             write("</" + tag + ">");
-          } else if (propEffects.length > 0) {
-            write("<m-group>" + propEffects.join("") + "</m-group>");
-          }
-          if (onMountHandler) {
-            rc.index.mf++;
-            write(
-              '<script>{const target=document.currentScript.previousElementSibling;addEventListener("load",()=>$emit({type:"mount",currentTarget:target,target},target,' + onMountHandler.toString() + (rc.fcIndex !== void 0 ? "," + rc.fcIndex : "") + "))}<\/script>"
-            );
+          } else if (stateTags) {
+            write("<m-group>" + stateTags + "</m-group>");
           }
         }
+      } else if (Array.isArray(node) && node.length > 0) {
+        renderChildren(rc, node, stripSlotProp);
       }
       break;
   }
@@ -573,6 +571,21 @@ async function renderChildren(rc, children, stripSlotProp) {
     await renderNode(rc, children, stripSlotProp);
   }
 }
+var IdGenImpl = class extends Map {
+  constructor(_prefix) {
+    super();
+    this._prefix = _prefix;
+  }
+  _id = 0;
+  gen(v) {
+    let id = this.get(v);
+    if (id === void 0) {
+      id = this._prefix + (this._id++).toString(36);
+      this.set(v, id);
+    }
+    return id;
+  }
+};
 function render(node, renderOptions = {}) {
   const { request, status, headers: headersInit } = renderOptions;
   const headers = new Headers();
@@ -596,64 +609,99 @@ function render(node, renderOptions = {}) {
   return new Response(
     new ReadableStream({
       async start(controller) {
-        const { appState: appStateInit, context, rendering, htmx } = renderOptions;
+        const { appState: appStateInit, context, htmx } = renderOptions;
         const write = (chunk) => controller.enqueue(encoder.encode(chunk));
-        const appState = createState(0, null, context, request);
+        const appState = createThis(0, null, context, request);
         const stateStore = /* @__PURE__ */ new Map();
         const suspenses = [];
-        const rtComponents = { cx: false, styleToCSS: false };
         const rc = {
           write,
+          suspenses,
           context,
           request,
           appState,
           stateStore,
-          suspenses,
-          runtimeUtils: rtComponents,
-          index: { fc: 0, mf: 0 },
-          eager: rendering === "eager"
+          mcs: new IdGenImpl("$MC_"),
+          mfs: new IdGenImpl("$MF_"),
+          status: { fcIndex: 0, chunkIndex: 0, onmount: 0 }
         };
-        if (appStateInit) {
-          for (const [key, value] of Object.entries(appStateInit)) {
-            if (value !== void 0) {
-              appState[key] = value;
-            }
-          }
-        }
-        try {
-          write("<!DOCTYPE html>");
-          await renderNode(rc, node);
+        const runtimeJS = {};
+        const finalize = async () => {
           let js = "";
-          if (rc.index.mf > 0) {
+          if (rc.status.cx && !runtimeJS.cx) {
+            runtimeJS.cx = true;
+            js += UTILS_JS.cx;
+          }
+          if (rc.status.styleToCSS && !runtimeJS.styleToCSS) {
+            runtimeJS.styleToCSS = true;
+            js += UTILS_JS.styleToCSS;
+          }
+          if (rc.mfs.size > 0 && !runtimeJS.event) {
+            runtimeJS.event = true;
             js += UTILS_JS.event;
           }
+          if (suspenses.length > 0 && !runtimeJS.suspense) {
+            runtimeJS.suspense = true;
+            js += SUSPENSE_JS;
+          }
+          if (stateStore.size > 0 && !runtimeJS.state) {
+            runtimeJS.state = true;
+            js += STATE_JS;
+          }
+          if (js) {
+            write("<script>/* runtime.js (generated by mono-jsx) */(()=>{" + js + "})()<\/script>");
+          }
+          js = "";
+          if (rc.mfs.size > 0) {
+            for (const [fn, fname] of rc.mfs.entries()) {
+              js += "function " + fname + "(){(" + fn.toString() + ").apply(this,arguments)};";
+            }
+            rc.mfs.clear();
+          }
           if (stateStore.size > 0) {
-            if (rtComponents.cx) {
-              js += UTILS_JS.cx;
+            for (const [key, value] of stateStore.entries()) {
+              js += "$defineState(" + JSON.stringify(key) + (value !== void 0 ? "," + JSON.stringify(value) : "") + ");";
             }
-            if (rtComponents.styleToCSS) {
-              js += UTILS_JS.styleToCSS;
+            stateStore.clear();
+          }
+          if (rc.mcs.size > 0) {
+            for (const [vnode, fname] of rc.mcs.entries()) {
+              const { fn, deps } = vnode[1];
+              js += '$defineComputed("' + fname + '",function(){return(' + fn.toString() + ").call(this)}," + JSON.stringify(Object.keys(deps)) + ");";
             }
-            js += STATE_JS;
-            js += "for(let[k,v]of" + JSON.stringify(Array.from(stateStore.entries()).map((e) => e[1] === void 0 ? [e[0]] : e)) + ")$defineState(k,v);";
+            rc.mcs.clear();
           }
-          if (suspenses.length > 0) {
-            js += SUSPENSE_JS;
+          if (rc.status.onmount > 0) {
+            rc.status.onmount = 0;
+            js += "$onstage();";
           }
           if (js) {
-            write("<script>(()=>{" + js + "})()<\/script>");
+            write("<script>/* app.js (generated by mono-jsx) */" + js + "<\/script>");
+          }
+          if (suspenses.length > 0) {
+            await Promise.all(suspenses.splice(0, suspenses.length).map((suspense) => suspense.then(write)));
+            await finalize();
+          }
+        };
+        if (appStateInit) {
+          for (const [key, value] of Object.entries(appStateInit)) {
+            if (value !== void 0) {
+              appState[key] = value;
+            }
           }
+        }
+        try {
+          write("<!DOCTYPE html>");
+          await renderNode(rc, node);
           if (htmx) {
-            write(`<script src="https://raw.esm.sh/htmx.org${htmx === true ? "" : escapeHTML("@" + htmx)}/dist/htmx.min.js"><\/script>`);
+            write(`<script src="${cdn}/htmx.org${htmx === true ? "" : escapeHTML("@" + htmx)}/dist/htmx.min.js"><\/script>`);
             for (const [key, value] of Object.entries(renderOptions)) {
               if (key.startsWith("htmx-ext-") && value) {
-                write(`<script src="https://raw.esm.sh/${key}${value === true ? "" : escapeHTML("@" + value)}"><\/script>`);
+                write(`<script src="${cdn}/${key}${value === true ? "" : escapeHTML("@" + value)}"><\/script>`);
               }
             }
           }
-          if (suspenses.length > 0) {
-            await Promise.all(suspenses);
-          }
+          await finalize();
         } finally {
           controller.close();
         }

package/package.json CHANGED Viewed

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

package/types/css.d.ts CHANGED Viewed

@@ -6107,7 +6107,8 @@ export interface StandardShorthandProperties<TLength = (string & {}) | 0, TTime
 }
 export interface StandardProperties<TLength = (string & {}) | 0, TTime = string & {}>
-  extends StandardLonghandProperties<TLength, TTime>, StandardShorthandProperties<TLength, TTime> {}
+  extends StandardLonghandProperties<TLength, TTime>, StandardShorthandProperties<TLength, TTime>
+{}
 export interface VendorLonghandProperties<TLength = (string & {}) | 0, TTime = string & {}> {
   /**
@@ -8018,7 +8019,8 @@ export interface VendorShorthandProperties<TLength = (string & {}) | 0, TTime =
 }
 export interface VendorProperties<TLength = (string & {}) | 0, TTime = string & {}>
-  extends VendorLonghandProperties<TLength, TTime>, VendorShorthandProperties<TLength, TTime> {}
+  extends VendorLonghandProperties<TLength, TTime>, VendorShorthandProperties<TLength, TTime>
+{}
 export interface ObsoleteProperties<TLength = (string & {}) | 0, TTime = string & {}> {
   /**
@@ -9143,7 +9145,8 @@ export interface Properties<TLength = (string & {}) | 0, TTime = string & {}>
     StandardProperties<TLength, TTime>,
     VendorProperties<TLength, TTime>,
     ObsoleteProperties<TLength, TTime>,
-    SvgProperties<TLength, TTime> {}
+    SvgProperties<TLength, TTime>
+{}
 export type AtRules =
   | "@charset"

package/types/html.d.ts CHANGED Viewed

@@ -822,7 +822,7 @@ export namespace HTML {
   interface EventAttributes<T extends EventTarget> {
     // mono-jsx specific
-    onMount?: (e: { type: "mount"; currentTarget: T; target: T }) => void | Promise<void>;
+    onMount?: (event: { type: "mount"; target: T }) => void | Promise<void>;
     // Input Events
     onBeforeInput?: EventHandler<Event, T>;

package/types/jsx.d.ts CHANGED Viewed

@@ -3,7 +3,7 @@
 import type * as Mono from "./mono.d.ts";
 import type { HTML } from "./html.d.ts";
-export type ChildType = VNode | string | number | bigint | boolean | null;
+export type ChildType = VNode | VNode[] | string | number | bigint | boolean | null;
 export type VNode = readonly [
   tag: string | symbol | FC<any>,
@@ -13,14 +13,9 @@ export type VNode = readonly [
 export interface FC<P = {}> {
   (props: P): ChildType | Promise<ChildType> | Generator<ChildType> | AsyncGenerator<ChildType>;
-  displayName?: string;
   rendering?: string;
 }
-export interface TC {
-  (strings: TemplateStringsArray, ...values: unknown[]): VNode;
-}
 declare global {
   namespace JSX {
     type ElementType<P = any> =
@@ -28,9 +23,9 @@ declare global {
         [K in keyof IntrinsicElements]: P extends IntrinsicElements[K] ? K : never;
       }[keyof IntrinsicElements]
       | FC<P>;
+    type Raw = (strings: TemplateStringsArray, ...values: unknown[]) => JSX.Element;
     interface Element extends VNode, Response {}
     interface IntrinsicAttributes extends Mono.BaseAttributes, Mono.AsyncComponentAttributes {}
     interface IntrinsicElements extends HTML.Elements, HTML.SVGElements, Mono.Elements {}
   }
-  var html: TC, css: TC, js: TC;
 }

package/types/mono.d.ts CHANGED Viewed

@@ -66,45 +66,73 @@ export interface CSSProperties extends BaseCSSProperties, AtRuleCSSProperties, P
   [key: `&${" " | "." | "["}${string}`]: CSSProperties;
 }
-export type ChildType = JSX.Element | string | number | bigint | boolean | null;
+export type ChildType = JSX.Element | (JSX.Element | string | null)[] | string | number | bigint | boolean | null;
 export interface BaseAttributes {
-  children?: ChildType | (ChildType)[];
+  children?: ChildType | ChildType[];
   key?: string | number;
   slot?: string;
 }
 export interface AsyncComponentAttributes {
-  rendering?: "eager";
-  placeholder?: JSX.Element | string;
+  /**
+   * Try to catch errors in the component.
+   */
   catch?: (err: any) => JSX.Element;
+  /**
+   * The loading spinner for the async component.
+   */
+  placeholder?: JSX.Element;
+  /**
+   * Rendering mode
+   * - `eager`: render async component eagerly
+   */
+  rendering?: "eager";
 }
 export interface Elements {
-  toggle: {
-    value: boolean;
+  /**
+   * The `<toggle>` element is a custom element that represents a toggle switch.
+   */
+  toggle: BaseAttributes & {
+    value?: boolean | string | number | null;
   };
-  switch: {
+  /**
+   * The `<switch>` element is a custom element that represents a switch.
+   */
+  switch: BaseAttributes & {
     value?: string;
     defaultValue?: string;
   };
-  cache: {
-    /** The cache key is used to identify the cache. */
-    key: string;
-    /** The `etag` (or **entity tag**) is an identifier for a specific version of a rendering cache. */
-    etag?: string;
-    /** The `max-age=N` prop indicates that the cache remains fresh until N seconds after the cache is generated. */
-    maxAge?: number;
-    /** The `stale-while-revalidate` prop indicates that the cache could reuse a stale rendering while it revalidates it to a cache. */
-    swr?: number;
-  };
 }
 declare global {
-  type FC<S = Record<string, unknown>, AppState = Record<string, unknown>, Context = Record<string, unknown>> = {
+  /**
+   * The `html` function is used to create XSS-unsafe HTML elements.
+   */
+  var html: JSX.Raw, css: JSX.Raw, js: JSX.Raw;
+  /**
+   * mono-jsx `this` object that is bound to the function component.
+   */
+  type FC<State = {}, AppState = {}, Context = {}> = {
+    /**
+     * Application state.
+     * This is the state that is shared across the entire application.
+     */
     readonly app: AppState;
+    /**
+     * Context object.
+     */
     readonly context: Context;
+    /**
+     * Current request object.
+     */
     readonly request: Request;
+    /**
+     * The `computed` function is used to create a computed property.
+     * It takes a function that returns a value and returns the value.
+     */
     readonly computed: <V = unknown>(computeFn: () => V) => V;
-  } & Omit<S, "app" | "context" | "request" | "computed">;
+  } & Omit<State, "app" | "context" | "request" | "computed">;
 }

package/types/render.d.ts CHANGED Viewed

@@ -41,11 +41,6 @@ export interface RenderOptions extends Partial<HtmxExts> {
     lastModified?: string;
     setCookie?: string;
   };
-  /**
-   * Rendering mode.
-   * - **eager**: Render the component immediately.
-   */
-  rendering?: "eager";
   /**
    * Install htmx script with the given version.
    * @see https://htmx.org/