ajo 0.1.30 → 0.1.31

package/LLMs.md

@@ -0,0 +1,329 @@
+# Ajo LLM Instructions
+
+Ajo is a micro UI library using JSX and generators. **No React imports**: JSX compiles to Ajo via build config.
+
+## Stateless Component
+
+```tsx
+import type { Stateless, WithChildren } from 'ajo'
+import clsx from 'clsx' // optional, for conditional classes
+
+type Args = WithChildren<{ title: string; active?: boolean }>
+
+const Card: Stateless<Args> = ({ title, active, children }) => ( // can destructure args here
+  <div class={clsx('card', { active })}>
+    <h3>{title}</h3>
+    {children}
+  </div>
+)
+
+// Example usage - everything goes to args:
+<Card title="Hello" active>
+  <p>This is a card.</p>
+</Card>
+```
+
+## Stateful Component
+
+```tsx
+import type { Stateful } from 'ajo'
+
+type Args = { initial: number; step?: number }
+
+const Counter: Stateful<Args, 'section'> = function* (args) { // do NOT destructure args here
+
+  // before loop: persistent state & handlers
+
+  let count = args.initial
+  let inputRef: HTMLInputElement | null = null
+
+  const inc = () => this.next(({ step = 1 }) => count += step)
+  const dec = () => this.next(() => count--)
+
+  const handleKeydown = (e: KeyboardEvent) => {
+    if (e.key === 'ArrowUp') inc()
+    else if (e.key === 'ArrowDown' && count > 0) dec()
+  }
+
+  this.addEventListener('keydown', handleKeydown, { signal: this.signal }) // auto-cleanup on unmount
+
+  while (true) { // main render loop
+
+    try { // optional: error boundary
+
+      // fresh destructure each render
+      const { step = 1 } = args
+
+      // derived values
+      const isEven = count % 2 === 0
+
+      yield (
+        <>
+          <input
+            ref={el => inputRef = el}
+            value={count}
+            set:oninput={e => this.next(() => count = +(e.target as HTMLInputElement).value)}
+          />
+          <button set:onclick={inc}>+{step}</button>
+          <button set:onclick={dec} disabled={count <= 0}>-</button>
+          <p memo={isEven}>Even: {isEven ? 'yes' : 'no'}</p>
+          <footer memo>Static content - rendered once</footer>
+          <div skip>{/* third-party managed DOM here */}</div>
+        </>
+      )
+    } catch (err: unknown) {
+      yield <p class="error">{err instanceof Error ? err.message : String(err)}</p>
+    }
+  }
+}
+
+Counter.is = 'section'                    // wrapper element (default: div)
+Counter.attrs = { class: 'counter-wrap' } // default wrapper attributes
+Counter.args = { step: 1 }                // default args
+
+// Example usage - special attrs apply to wrapper, rest goes to args:
+
+let ref: ThisParameterType<typeof Counter> | null = null
+
+<Counter
+  initial={0} step={5}                    // → args
+  attr:id="main" attr:class="my-counter"  // → wrapper attributes (HTML attrs)
+  set:onclick={fn}                        // → wrapper properties (DOM props)
+  key={id}                                // → wrapper key
+  memo={[id]}                             // → wrapper memo (array)
+  memo={id}                               // → wrapper memo (single value)
+  memo                                    // → wrapper memo (render once)
+  ref={el => ref = el}                    // → wrapper ref (el is <section> + .next()/.throw()/.return())
+/>
+
+ref?.next()  // trigger re-render from outside
+```
+
+## Rules
+
+| Topic | Rule |
+|-------|------|
+| **Elements** | Everything becomes HTML attributes. `set:prop` assigns DOM properties instead (`node[prop] = value`) |
+| **Stateless** | Everything goes to `args`. Special attrs like `memo` must be applied to elements inside |
+| **Stateful** | `key`, `memo`, `skip`, `ref`, `set:*` apply to implicit wrapper element. `attr:*` sets wrapper attributes. Rest goes to `args` |
+| **Events** | `set:onclick`, `set:oninput`, etc. Never `onClick` |
+| **Classes** | `class`, never `className`. Must be string, no object/array syntax. Use `clsx()` or template literals |
+| **Styles** | `style` must be string (`style="color: red"`), not object. No special handling |
+| **Args** | Never destructure in generator signature. Use `args` param |
+| **Root JSX** | Use `<>...</>` in stateful to avoid double wrapper |
+| **Re-render** | `this.next(fn?)` — returns `fn`'s result. Use `this.throw(e)` for explicit error routing |
+| **Context** | `context<T>(fallback)` creates context. Stateless: read only. Stateful: read/write inside `while` loop |
+| **Lists** | Always provide unique `key` on elements |
+| **Refs** | `ref={el => ...}` on elements. Receives `null` on unmount. Stateful ref type: `ThisParameterType<typeof Component>` |
+| **Memo** | `memo={[deps]}` array, `memo={value}` single, or just `memo` (never re-render). Skips subtree if unchanged |
+| **Skip** | `skip` excludes children from reconciliation. Use for `set:textContent`/`set:innerHTML` or third-party maneged DOM |
+| **Custom wrapper** | Set `.is = 'tagname'` AND TypeScript generic `Stateful<Args, 'tagname'>` for stateful components. Default is `div` (no need to set) |
+| **Default attrs** | `.attrs = { class: '...' }` on stateful component generator function |
+| **Default args** | `.args = { prop: value }` on stateful component generator function |
+| **Cleanup** | `this.signal` for APIs that accept AbortSignal (fetch, addEventListener). `try/finally` for the rest |
+| **Error recovery** | `try { ... } catch { yield error UI }` inside loop |
+| **this** | Stateful wrapper element with `.signal`, `.next(fn?)` (returns `fn`'s result), `.throw()`, `.return()`. Type: `ThisParameterType<typeof Component>` |
+
+## Common Patterns
+
+```tsx
+import type { Stateful, Stateless, WithChildren } from 'ajo'
+import { context } from 'ajo/context'
+
+// Async data loading
+type LoaderArgs = { url: string }
+
+const DataLoader: Stateful<LoaderArgs> = function* (args) {
+
+  let data: unknown = null
+  let error: Error | null = null
+
+  fetch(args.url, { signal: this.signal })
+    .then(r => r.json())
+    .then(d => this.next(() => data = d))
+    .catch(e => this.next(() => error = e))
+
+  while (true) yield (
+    <>
+      {error ? <p>Error: {error.message}</p>
+       : data ? <div>{JSON.stringify(data)}</div>
+       : <p>Loading...</p>}
+    </>
+  )
+}
+
+// List with keys
+type Item = { id: string; text: string }
+
+const List: Stateless<{ items: Item[] }> = ({ items }) => (
+  <ul>
+    {items.map(item => <li key={item.id}>{item.text}</li>)}
+  </ul>
+)
+
+// Conditional rendering
+type ShowArgs = WithChildren<{ when: boolean }>
+
+const Show: Stateless<ShowArgs> = ({ when, children }) => when ? children : null
+
+// Context - create with fallback value
+const ThemeContext = context<'light' | 'dark'>('light')
+const UserContext = context<{ name: string } | null>(null)
+
+// Stateless - read only (call without args)
+const ThemedCard: Stateless<{ title: string }> = ({ title }) => {
+  const theme = ThemeContext()  // reads current value
+  return <div class={`card theme-${theme}`}>{title}</div>
+}
+
+// Stateful - read/write inside while loop
+const ThemeProvider: Stateful<WithChildren> = function* (args) {
+
+  let theme: 'light' | 'dark' = 'light'
+
+  const toggle = () => this.next(() => theme = theme === 'light' ? 'dark' : 'light')
+
+  while (true) {
+
+    ThemeContext(theme)  // write: sets value for descendants
+    const user = UserContext()  // read: gets value from ancestor
+
+    yield (
+      <>
+        <button set:onclick={toggle}>Theme: {theme}</button>
+        {user && <span>User: {user.name}</span>}
+        {args.children}
+      </>
+    )
+  }
+}
+
+// Ref typing for stateful components
+let counterRef: ThisParameterType<typeof Counter> | null = null
+<Counter ref={el => counterRef = el} initial={0} />
+// counterRef is <section> element + .next(), .throw(), .return() methods
+counterRef?.next()  // trigger re-render from outside
+
+// memo variations
+<div memo={[a, b]}>{/* re-render when a or b changes */}</div>
+<div memo={count}>{/* re-render when count changes (single value) */}</div>
+<div memo>{/* render once, never update - good for static content */}</div>
+
+// Boolean attributes
+<input type="checkbox" checked disabled />  // checked="" disabled=""
+<button disabled={false} />                 // removes disabled attr
+
+// Attributes vs Properties (HTML-first)
+<input value="text" />                       // HTML attribute: initial value only
+<input set:value={text} />                   // DOM property: syncs with state
+<input type="checkbox" checked />            // HTML attribute: initial state
+<input type="checkbox" set:checked={bool} /> // DOM property: syncs with state
+<video set:currentTime={0} set:muted />      // DOM properties
+<div set:textContent={str} skip />           // DOM property + skip (required!)
+<div set:innerHTML={html} skip />            // DOM property + skip (required!)
+
+// Post-render work (DOM is updated by the time the microtask runs)
+const ScrollList: Stateful<{ items: Item[] }> = function* (args) {
+  let container: HTMLUListElement | null = null
+  while (true) {
+    queueMicrotask(() => container!.scrollTop = container!.scrollHeight)
+    yield (
+      <ul ref={el => container = el}>
+        {args.items.map(item => <li key={item.id}>{item.text}</li>)}
+      </ul>
+    )
+  }
+}
+
+// Third-party managed DOM
+let map: MapLibrary | null = null
+<div skip ref={el => el ? (map ??= new MapLibrary(el)) : map?.destroy()} />  // skip lets library control children
+```
+
+## Anti-patterns
+
+```tsx
+// ❌ React patterns: NEVER use
+import React from 'react'
+className="..."
+onClick={...}
+useState, useEffect, useCallback
+
+// ❌ class/style as object or array: no special handling in Ajo
+<div class={{ active: isActive }} />        // won't work
+<div class={['btn', 'primary']} />          // won't work
+<div style={{ color: 'red' }} />            // won't work
+
+// ✅ class/style must be strings
+<div class={`btn ${isActive ? 'active' : ''}`} />
+<div class={clsx('btn', { active: isActive })} />  // use clsx library
+<div style="color: red; font-size: 14px" />
+<div style={`color: ${color}`} />
+
+// ❌ memo in args but not applied to element - does nothing
+const Bad: Stateless<{ memo: unknown }> = ({ memo }) => (
+  <div>content</div>  // memo arg ignored, no memoization
+)
+
+// ✅ Pass deps in args, apply to root element  
+const Good: Stateless<{ deps?: unknown }> = ({ deps }) => (
+  <div memo={deps}>content</div>  // memoized when deps provided
+)
+// <Good deps={[id]} /> or <Good deps={data} />
+
+// ❌ Destructure in signature - locks to initial values
+function* Bad({ count }) { ... }
+
+// ❌ Context read/write outside loop in stateful - stale values
+function* Bad(args) {
+  const theme = ThemeContext()  // frozen at mount
+  ThemeContext('dark')          // only set once, not updated
+  while (true) yield ...
+}
+
+// ✅ Context read/write inside loop in stateful
+function* Good(args) {
+  let theme = 'light'
+  while (true) {
+    ThemeContext(theme)           // write: updated each render
+    const user = UserContext()    // read: fresh value each render
+    yield ...
+  }
+}
+
+// ❌ Missing key in lists
+{items.map(item => <li>{item}</li>)}
+
+// ❌ Direct state mutation without next()
+const inc = () => count++  // won't re-render
+
+// ❌ set:textContent/innerHTML without skip: content gets cleared
+<div set:innerHTML={html} />
+
+// ✅ Correct
+const inc = () => this.next(() => count++)
+<div set:innerHTML={html} skip />
+```
+
+## Setup
+
+```bash
+npm install ajo
+pnpm add ajo
+yarn add ajo
+```
+
+Configure JSX factory (Vite example):
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  esbuild: {
+    jsxFactory: 'h',
+    jsxFragment: 'Fragment',
+    jsxInject: `import { h, Fragment } from 'ajo'`,
+  },
+})
+```
+
+For other build systems: `jsxFactory: 'h'`, `jsxFragment: 'Fragment'`, auto-import `{ h, Fragment }` from `'ajo'`.

package/context.js

@@ -0,0 +1,18 @@
+export const Context = Symbol.for('ajo.context')
+
+export const context = (fallback, key = Symbol()) => function (...args) {
+
+	const self = this ?? component
+
+	return self
+		? args.length
+			? self[Context][key] = args[0]
+			: key in self[Context]
+				? self[Context][key]
+				: fallback
+		: fallback
+}
+
+let component = null
+
+export const current = (...args) => args.length ? (component = args[0]) : component

package/dist/html.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./context.cjs"),m=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),b=Symbol.for("ajo.args"),y=e=>e.replace(/[&<>"']/g,r=>`&#${r.charCodeAt(0)};`),f=()=>{},p=e=>[...a(e)].join(""),a=function*(e){for(e of c(e))typeof e=="string"?yield y(e):yield*k(e)},k=function*({nodeName:e,children:r,...i}){let o="";for(const n in i)n.startsWith("set:")||i[n]==null||i[n]===!1||(i[n]===!0?o+=` ${n}`:o+=` ${n}="${y(String(i[n]))}"`);m.has(e)?yield`<${e}${o}>`:(yield`<${e}${o}>`,r!=null&&(yield*a(r)),yield`</${e}>`)},c=function*(e){if(e==null)return;const r=typeof e;if(r!="boolean")if(r=="string")yield e;else if(r=="number"||r=="bigint")yield String(e);else if(Symbol.iterator in e)for(e of e)yield*c(e);else"nodeName"in e?typeof e.nodeName=="function"?yield*$(e):yield d(e):yield String(e)},$=function*({nodeName:e,fallback:r=e.fallback,...i}){e.constructor.name=="GeneratorFunction"?yield S(e,i):yield*c(e(i))},S=(e,r)=>{const i={...e.attrs},o={...e.args};for(const t in r)t.startsWith("attr:")?i[t.slice(5)]=r[t]:t=="key"||t=="skip"||t=="memo"||t=="ref"||t.startsWith("set:")?i[t]=r[t]:o[t]=r[t];const n={[s.Context]:Object.create(s.current()?.[s.Context]??null),[b]:o,next:f,return:f,throw:t=>{throw t}},l=e.call(n,o),g=s.current();s.current(n);const u=t=>({...i,nodeName:e.is??"div",...d({children:t})});try{return u(l.next().value)}catch(t){return u(l.throw(t).value)}finally{l.return?.(),s.current(g)}},d=({key:e,skip:r,memo:i,ref:o,...n})=>{if("children"in n){const l=[...c(n.children)];l.length?n.children=l.length==1?l[0]:l:delete n.children}return n};exports.html=a;exports.render=p;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("./context.cjs"),m=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),p=Symbol.for("ajo.args"),d=e=>e.replace(/[&<>"']/g,r=>`&#${r.charCodeAt(0)};`),y=()=>{},k=e=>[...u(e)].join(""),u=function*(e){for(e of c(e))typeof e=="string"?yield d(e):yield*$(e)},$=function*({nodeName:e,children:r,...i}){let o="";for(const n in i)n.startsWith("set:")||i[n]==null||i[n]===!1||(i[n]===!0?o+=` ${n}`:o+=` ${n}="${d(String(i[n]))}"`);m.has(e)?yield`<${e}${o}>`:(yield`<${e}${o}>`,r!=null&&(yield*u(r)),yield`</${e}>`)},c=function*(e){if(e==null)return;const r=typeof e;if(r!="boolean")if(r=="string")yield e;else if(r=="number"||r=="bigint")yield String(e);else if(Symbol.iterator in e)for(e of e)yield*c(e);else"nodeName"in e?typeof e.nodeName=="function"?yield*S(e):yield g(e):yield String(e)},S=function*({nodeName:e,fallback:r=e.fallback,...i}){e.constructor.name=="GeneratorFunction"?yield w(e,i):yield*c(e(i))},w=(e,r)=>{const i={...e.attrs},o={...e.args};for(const t in r)t.startsWith("attr:")?i[t.slice(5)]=r[t]:t=="key"||t=="skip"||t=="memo"||t=="ref"||t.startsWith("set:")?i[t]=r[t]:o[t]=r[t];const n=new AbortController,l={[s.Context]:Object.create(s.current()?.[s.Context]??null),[p]:o,signal:n.signal,next:y,return:y,throw:t=>{throw t}},a=e.call(l,o),b=s.current();s.current(l);const f=t=>({...i,nodeName:e.is??"div",...g({children:t})});try{return f(a.next().value)}catch(t){return f(a.throw(t).value)}finally{a.return(),n.abort(),s.current(b)}},g=({key:e,skip:r,memo:i,ref:o,...n})=>{if("children"in n){const l=[...c(n.children)];l.length?n.children=l.length==1?l[0]:l:delete n.children}return n};exports.html=u;exports.render=k;

package/dist/html.js

@@ -1,13 +1,13 @@
-import { Context as f, current as s } from "./context.js";
-const p = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), b = /* @__PURE__ */ Symbol.for("ajo.args"), y = (e) => e.replace(/[&<>"']/g, (n) => `&#${n.charCodeAt(0)};`), u = () => {
-}, v = (e) => [...d(e)].join(""), d = function* (e) {
+import { Context as u, current as s } from "./context.js";
+const p = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), k = /* @__PURE__ */ Symbol.for("ajo.args"), d = (e) => e.replace(/[&<>"']/g, (n) => `&#${n.charCodeAt(0)};`), y = () => {
+}, x = (e) => [...g(e)].join(""), g = function* (e) {
   for (e of c(e))
-    typeof e == "string" ? yield y(e) : yield* k(e);
-}, k = function* ({ nodeName: e, children: n, ...i }) {
+    typeof e == "string" ? yield d(e) : yield* $(e);
+}, $ = function* ({ nodeName: e, children: n, ...i }) {
   let o = "";
   for (const r in i)
-    r.startsWith("set:") || i[r] == null || i[r] === !1 || (i[r] === !0 ? o += ` ${r}` : o += ` ${r}="${y(String(i[r]))}"`);
-  p.has(e) ? yield `<${e}${o}>` : (yield `<${e}${o}>`, n != null && (yield* d(n)), yield `</${e}>`);
+    r.startsWith("set:") || i[r] == null || i[r] === !1 || (i[r] === !0 ? o += ` ${r}` : o += ` ${r}="${d(String(i[r]))}"`);
+  p.has(e) ? yield `<${e}${o}>` : (yield `<${e}${o}>`, n != null && (yield* g(n)), yield `</${e}>`);
 }, c = function* (e) {
   if (e == null) return;
   const n = typeof e;
@@ -15,30 +15,31 @@ const p = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embe
     if (n == "string") yield e;
     else if (n == "number" || n == "bigint") yield String(e);
     else if (Symbol.iterator in e) for (e of e) yield* c(e);
-    else "nodeName" in e ? typeof e.nodeName == "function" ? yield* $(e) : yield m(e) : yield String(e);
-}, $ = function* ({ nodeName: e, fallback: n = e.fallback, ...i }) {
-  e.constructor.name == "GeneratorFunction" ? yield w(e, i) : yield* c(e(i));
-}, w = (e, n) => {
+    else "nodeName" in e ? typeof e.nodeName == "function" ? yield* w(e) : yield m(e) : yield String(e);
+}, w = function* ({ nodeName: e, fallback: n = e.fallback, ...i }) {
+  e.constructor.name == "GeneratorFunction" ? yield S(e, i) : yield* c(e(i));
+}, S = (e, n) => {
   const i = { ...e.attrs }, o = { ...e.args };
   for (const t in n)
     t.startsWith("attr:") ? i[t.slice(5)] = n[t] : t == "key" || t == "skip" || t == "memo" || t == "ref" || t.startsWith("set:") ? i[t] = n[t] : o[t] = n[t];
-  const r = {
-    [f]: Object.create(s()?.[f] ?? null),
-    [b]: o,
-    next: u,
-    return: u,
+  const r = new AbortController(), l = {
+    [u]: Object.create(s()?.[u] ?? null),
+    [k]: o,
+    signal: r.signal,
+    next: y,
+    return: y,
     throw: (t) => {
       throw t;
     }
-  }, l = e.call(r, o), g = s();
-  s(r);
-  const a = (t) => ({ ...i, nodeName: e.is ?? "div", ...m({ children: t }) });
+  }, a = e.call(l, o), b = s();
+  s(l);
+  const f = (t) => ({ ...i, nodeName: e.is ?? "div", ...m({ children: t }) });
   try {
-    return a(l.next().value);
+    return f(a.next().value);
   } catch (t) {
-    return a(l.throw(t).value);
+    return f(a.throw(t).value);
   } finally {
-    l.return?.(), s(g);
+    a.return(), r.abort(), s(b);
   }
 }, m = ({ key: e, skip: n, memo: i, ref: o, ...r }) => {
   if ("children" in r) {
@@ -48,6 +49,6 @@ const p = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embe
   return r;
 };
 export {
-  d as html,
-  v as render
+  g as html,
+  x as render
 };

package/dist/index.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("./context.cjs"),y=Symbol.for("ajo.key"),j=Symbol.for("ajo.memo"),g=Symbol.for("ajo.ref"),A=Symbol.for("ajo.cache"),c=Symbol.for("ajo.generator"),a=Symbol.for("ajo.iterator"),b=Symbol.for("ajo.render"),l=Symbol.for("ajo.args"),N=e=>e.children,k=(e,t,...r)=>((t??={}).nodeName=e,!("children"in t)&&r.length&&(t.children=r.length==1?r[0]:r),t),f=(e,t,r=t.firstChild,s=null)=>{for(e of S(e)){const n=E(e,t,r);r==null?m(t,n,s):n==r?r=n.nextSibling:n==r.nextSibling?(m(t,r,s),r=n.nextSibling):m(t,n,r)}for(;r!=s;){const n=r.nextSibling;r.nodeType==1&&p(r),t.removeChild(r),r=n}},S=function*(e){if(e==null)return;const t=typeof e;if(t!="boolean")if(t=="string")yield e;else if(t=="number"||t=="bigint")yield String(e);else if(Symbol.iterator in e)for(e of e)yield*S(e);else"nodeName"in e?typeof e.nodeName=="function"?yield*O(e):yield e:yield String(e)},O=function*({nodeName:e,...t}){e.constructor.name=="GeneratorFunction"?yield T(e,t):yield*S(e(t))},T=(e,t)=>{const r={...e.attrs},s={...e.args};for(const n in t)n.startsWith("attr:")?r[n.slice(5)]=t[n]:n=="key"||n=="skip"||n=="memo"||n=="ref"||n.startsWith("set:")?r[n]=t[n]:s[n]=t[n];return{...r,nodeName:e.is??"div",[c]:e,[l]:s}},E=(e,t,r)=>typeof e=="string"?F(e,r):G(e,t,r),F=(e,t)=>{for(;t&&t.nodeType!=3;)t=t.nextSibling;return t?t.data!=e&&(t.data=e):t=document.createTextNode(e),t},G=({nodeName:e,children:t,key:r,skip:s,memo:n,ref:x,[c]:u,[l]:v,...w},C,i)=>{for(;i&&(i.localName!=e||i[y]!=null&&i[y]!=r||i[c]&&i[c]!=u);)i=i.nextSibling;return i??=document.createElementNS(w.xmlns??C.namespaceURI,e),r!=null&&(i[y]=r),(n==null||W(i[j],i[j]=n))&&(R(i[A]??B(i),i[A]=w,i),s||(u?I(u,v,i):f(t,i)),typeof x=="function"&&(i[g]=x)(i)),i},R=(e,t,r)=>{for(const s in{...e,...t})e[s]!==t[s]&&(s.startsWith("set:")?r[s.slice(4)]=t[s]:t[s]==null||t[s]===!1?r.removeAttribute(s):r.setAttribute(s,t[s]===!0?"":t[s]))},W=(e,t)=>Array.isArray(e)&&Array.isArray(t)?e.some((r,s)=>r!==t[s]):e!==t,B=e=>Array.from(e.attributes).reduce((t,r)=>(t[r.name]=r.value,t),{}),m=(e,t,r)=>{if(t.contains(document.activeElement)){const s=t.nextSibling;for(;r&&r!=t;){const n=r.nextSibling;e.insertBefore(r,s),r=n}}else e.insertBefore(t,r)},p=e=>{for(const t of e.children)p(t);typeof e.return=="function"&&e.return(),e[g]?.(null)},I=(e,t,r)=>{r[c]??=(M(r),e),Object.assign(r[l]??={},t),r[b]()},M=e=>{Object.assign(e,h),e[o.Context]=Object.create(o.current()?.[o.Context]??null)},h={[b](){const e=o.current();o.current(this);try{const{value:t,done:r}=(this[a]??=this[c].call(this,this[l])).next();f(t,this),this[g]?.(this),r&&this.return()}catch(t){this.throw(t)}finally{o.current(e)}},next(e){try{e?.call(this,this[l])}catch(t){return this.throw(t)}o.current()?.contains(this)||this[b]()},throw(e){for(let t=this;t;t=t.parentNode)if(t[a]?.throw)try{return f(t[a].throw(e).value,t)}catch(r){e=new Error(r?.message??r,{cause:e})}throw e},return(){try{this[a]?.return()}catch(e){this.throw(e)}finally{this[a]=null}}};exports.Fragment=N;exports.h=k;exports.render=f;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("./context.cjs"),y=Symbol.for("ajo.key"),j=Symbol.for("ajo.memo"),g=Symbol.for("ajo.ref"),A=Symbol.for("ajo.cache"),c=Symbol.for("ajo.generator"),o=Symbol.for("ajo.iterator"),b=Symbol.for("ajo.render"),l=Symbol.for("ajo.args"),p=Symbol.for("ajo.controller"),N=e=>e.children,k=(e,t,...r)=>((t??={}).nodeName=e,!("children"in t)&&r.length&&(t.children=r.length==1?r[0]:r),t),f=(e,t,r=t.firstChild,s=null)=>{for(e of S(e)){const n=E(e,t,r);r==null?m(t,n,s):n==r?r=n.nextSibling:n==r.nextSibling?(m(t,r,s),r=n.nextSibling):m(t,n,r)}for(;r!=s;){const n=r.nextSibling;r.nodeType==1&&C(r),t.removeChild(r),r=n}},S=function*(e){if(e==null)return;const t=typeof e;if(t!="boolean")if(t=="string")yield e;else if(t=="number"||t=="bigint")yield String(e);else if(Symbol.iterator in e)for(e of e)yield*S(e);else"nodeName"in e?typeof e.nodeName=="function"?yield*O(e):yield e:yield String(e)},O=function*({nodeName:e,...t}){e.constructor.name=="GeneratorFunction"?yield T(e,t):yield*S(e(t))},T=(e,t)=>{const r={...e.attrs},s={...e.args};for(const n in t)n.startsWith("attr:")?r[n.slice(5)]=t[n]:n=="key"||n=="skip"||n=="memo"||n=="ref"||n.startsWith("set:")?r[n]=t[n]:s[n]=t[n];return{...r,nodeName:e.is??"div",[c]:e,[l]:s}},E=(e,t,r)=>typeof e=="string"?F(e,r):G(e,t,r),F=(e,t)=>{for(;t&&t.nodeType!=3;)t=t.nextSibling;return t?t.data!=e&&(t.data=e):t=document.createTextNode(e),t},G=({nodeName:e,children:t,key:r,skip:s,memo:n,ref:x,[c]:u,[l]:h,...w},v,i)=>{for(;i&&(i.localName!=e||i[y]!=null&&i[y]!=r||i[c]&&i[c]!=u);)i=i.nextSibling;return i??=document.createElementNS(w.xmlns??v.namespaceURI,e),r!=null&&(i[y]=r),(n==null||W(i[j],i[j]=n))&&(R(i[A]??B(i),i[A]=w,i),s||(u?I(u,h,i):f(t,i)),typeof x=="function"&&(i[g]=x)(i)),i},R=(e,t,r)=>{for(const s in{...e,...t})e[s]!==t[s]&&(s.startsWith("set:")?r[s.slice(4)]=t[s]:t[s]==null||t[s]===!1?r.removeAttribute(s):r.setAttribute(s,t[s]===!0?"":t[s]))},W=(e,t)=>Array.isArray(e)&&Array.isArray(t)?e.some((r,s)=>r!==t[s]):e!==t,B=e=>Array.from(e.attributes).reduce((t,r)=>(t[r.name]=r.value,t),{}),m=(e,t,r)=>{if(t.contains(document.activeElement)){const s=t.nextSibling;for(;r&&r!=t;){const n=r.nextSibling;e.insertBefore(r,s),r=n}}else e.insertBefore(t,r)},C=e=>{for(const t of e.children)C(t);typeof e.return=="function"&&e.return(),e[g]?.(null)},I=(e,t,r)=>{r[c]??=(M(r),e),Object.assign(r[l]??={},t),r[b]()},M=e=>{Object.assign(e,q),e[a.Context]=Object.create(a.current()?.[a.Context]??null)},q={[b](){const e=a.current();a.current(this);try{this[o]||(this.signal=(this[p]=new AbortController).signal,this[o]=this[c].call(this,this[l]));const{value:t,done:r}=this[o].next();f(t,this),this[g]?.(this),r&&this.return()}catch(t){this.throw(t)}finally{a.current(e)}},next(e,t){try{typeof e=="function"&&(t=e.call(this,this[l]))}catch(r){return this.throw(r)}return a.current()?.contains(this)||this[b](),t},throw(e){for(let t=this;t;t=t.parentNode)if(t[o]?.throw)try{return f(t[o].throw(e).value,t)}catch(r){e=new Error(r?.message??r,{cause:e})}throw e},return(){try{this[o]?.return()}catch(e){this.throw(e)}finally{this[o]=null,this[p]?.abort()}}};exports.Fragment=N;exports.h=k;exports.render=f;

package/dist/index.js

@@ -1,12 +1,12 @@
-import { Context as j, current as c } from "./context.js";
-const u = /* @__PURE__ */ Symbol.for("ajo.key"), p = /* @__PURE__ */ Symbol.for("ajo.memo"), g = /* @__PURE__ */ Symbol.for("ajo.ref"), A = /* @__PURE__ */ Symbol.for("ajo.cache"), o = /* @__PURE__ */ Symbol.for("ajo.generator"), a = /* @__PURE__ */ Symbol.for("ajo.iterator"), m = /* @__PURE__ */ Symbol.for("ajo.render"), l = /* @__PURE__ */ Symbol.for("ajo.args"), U = (e) => e.children, h = (e, t, ...r) => ((t ??= {}).nodeName = e, !("children" in t) && r.length && (t.children = r.length == 1 ? r[0] : r), t), b = (e, t, r = t.firstChild, s = null) => {
+import { Context as j, current as l } from "./context.js";
+const u = /* @__PURE__ */ Symbol.for("ajo.key"), p = /* @__PURE__ */ Symbol.for("ajo.memo"), g = /* @__PURE__ */ Symbol.for("ajo.ref"), A = /* @__PURE__ */ Symbol.for("ajo.cache"), a = /* @__PURE__ */ Symbol.for("ajo.generator"), o = /* @__PURE__ */ Symbol.for("ajo.iterator"), m = /* @__PURE__ */ Symbol.for("ajo.render"), c = /* @__PURE__ */ Symbol.for("ajo.args"), C = /* @__PURE__ */ Symbol.for("ajo.controller"), U = (e) => e.children, q = (e, t, ...r) => ((t ??= {}).nodeName = e, !("children" in t) && r.length && (t.children = r.length == 1 ? r[0] : r), t), b = (e, t, r = t.firstChild, s = null) => {
   for (e of S(e)) {
     const n = G(e, t, r);
     r == null ? y(t, n, s) : n == r ? r = n.nextSibling : n == r.nextSibling ? (y(t, r, s), r = n.nextSibling) : y(t, n, r);
   }
   for (; r != s; ) {
     const n = r.nextSibling;
-    r.nodeType == 1 && N(r), t.removeChild(r), r = n;
+    r.nodeType == 1 && h(r), t.removeChild(r), r = n;
   }
 }, S = function* (e) {
   if (e == null) return;
@@ -15,20 +15,20 @@ const u = /* @__PURE__ */ Symbol.for("ajo.key"), p = /* @__PURE__ */ Symbol.for(
     if (t == "string") yield e;
     else if (t == "number" || t == "bigint") yield String(e);
     else if (Symbol.iterator in e) for (e of e) yield* S(e);
-    else "nodeName" in e ? typeof e.nodeName == "function" ? yield* C(e) : yield e : yield String(e);
-}, C = function* ({ nodeName: e, ...t }) {
+    else "nodeName" in e ? typeof e.nodeName == "function" ? yield* v(e) : yield e : yield String(e);
+}, v = function* ({ nodeName: e, ...t }) {
   e.constructor.name == "GeneratorFunction" ? yield E(e, t) : yield* S(e(t));
 }, E = (e, t) => {
   const r = { ...e.attrs }, s = { ...e.args };
   for (const n in t)
     n.startsWith("attr:") ? r[n.slice(5)] = t[n] : n == "key" || n == "skip" || n == "memo" || n == "ref" || n.startsWith("set:") ? r[n] = t[n] : s[n] = t[n];
-  return { ...r, nodeName: e.is ?? "div", [o]: e, [l]: s };
+  return { ...r, nodeName: e.is ?? "div", [a]: e, [c]: s };
 }, G = (e, t, r) => typeof e == "string" ? O(e, r) : R(e, t, r), O = (e, t) => {
   for (; t && t.nodeType != 3; ) t = t.nextSibling;
   return t ? t.data != e && (t.data = e) : t = document.createTextNode(e), t;
-}, R = ({ nodeName: e, children: t, key: r, skip: s, memo: n, ref: x, [o]: f, [l]: k, ...w }, v, i) => {
-  for (; i && (i.localName != e || i[u] != null && i[u] != r || i[o] && i[o] != f); ) i = i.nextSibling;
-  return i ??= document.createElementNS(w.xmlns ?? v.namespaceURI, e), r != null && (i[u] = r), (n == null || W(i[p], i[p] = n)) && (T(i[A] ?? B(i), i[A] = w, i), s || (f ? F(f, k, i) : b(t, i)), typeof x == "function" && (i[g] = x)(i)), i;
+}, R = ({ nodeName: e, children: t, key: r, skip: s, memo: n, ref: x, [a]: f, [c]: N, ...w }, k, i) => {
+  for (; i && (i.localName != e || i[u] != null && i[u] != r || i[a] && i[a] != f); ) i = i.nextSibling;
+  return i ??= document.createElementNS(w.xmlns ?? k.namespaceURI, e), r != null && (i[u] = r), (n == null || W(i[p], i[p] = n)) && (T(i[A] ?? B(i), i[A] = w, i), s || (f ? F(f, N, i) : b(t, i)), typeof x == "function" && (i[g] = x)(i)), i;
 }, T = (e, t, r) => {
   for (const s in { ...e, ...t })
     e[s] !== t[s] && (s.startsWith("set:") ? r[s.slice(4)] = t[s] : t[s] == null || t[s] === !1 ? r.removeAttribute(s) : r.setAttribute(s, t[s] === !0 ? "" : t[s]));
@@ -40,37 +40,38 @@ const u = /* @__PURE__ */ Symbol.for("ajo.key"), p = /* @__PURE__ */ Symbol.for(
       e.insertBefore(r, s), r = n;
     }
   } else e.insertBefore(t, r);
-}, N = (e) => {
-  for (const t of e.children) N(t);
+}, h = (e) => {
+  for (const t of e.children) h(t);
   typeof e.return == "function" && e.return(), e[g]?.(null);
 }, F = (e, t, r) => {
-  r[o] ??= (I(r), e), Object.assign(r[l] ??= {}, t), r[m]();
+  r[a] ??= (I(r), e), Object.assign(r[c] ??= {}, t), r[m]();
 }, I = (e) => {
-  Object.assign(e, K), e[j] = Object.create(c()?.[j] ?? null);
+  Object.assign(e, K), e[j] = Object.create(l()?.[j] ?? null);
 }, K = {
   [m]() {
-    const e = c();
-    c(this);
+    const e = l();
+    l(this);
     try {
-      const { value: t, done: r } = (this[a] ??= this[o].call(this, this[l])).next();
+      this[o] || (this.signal = (this[C] = new AbortController()).signal, this[o] = this[a].call(this, this[c]));
+      const { value: t, done: r } = this[o].next();
       b(t, this), this[g]?.(this), r && this.return();
     } catch (t) {
       this.throw(t);
     } finally {
-      c(e);
+      l(e);
     }
   },
-  next(e) {
+  next(e, t) {
     try {
-      e?.call(this, this[l]);
-    } catch (t) {
-      return this.throw(t);
+      typeof e == "function" && (t = e.call(this, this[c]));
+    } catch (r) {
+      return this.throw(r);
     }
-    c()?.contains(this) || this[m]();
+    return l()?.contains(this) || this[m](), t;
   },
   throw(e) {
-    for (let t = this; t; t = t.parentNode) if (t[a]?.throw) try {
-      return b(t[a].throw(e).value, t);
+    for (let t = this; t; t = t.parentNode) if (t[o]?.throw) try {
+      return b(t[o].throw(e).value, t);
     } catch (r) {
       e = new Error(r?.message ?? r, { cause: e });
     }
@@ -78,16 +79,16 @@ const u = /* @__PURE__ */ Symbol.for("ajo.key"), p = /* @__PURE__ */ Symbol.for(
   },
   return() {
     try {
-      this[a]?.return();
+      this[o]?.return();
     } catch (e) {
       this.throw(e);
     } finally {
-      this[a] = null;
+      this[o] = null, this[C]?.abort();
     }
   }
 };
 export {
   U as Fragment,
-  h,
+  q as h,
   b as render
 };

package/html.js

@@ -0,0 +1,142 @@
+import { Context, current } from 'ajo/context'
+
+const Void = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
+
+const Args = Symbol.for('ajo.args')
+
+const escape = s => s.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`)
+
+const noop = () => { }
+
+export const render = h => [...html(h)].join('')
+
+export const html = function* (h) {
+
+	for (h of walk(h)) {
+
+		if (typeof h == 'string') yield escape(h)
+
+		else yield* element(h)
+	}
+}
+
+const element = function* ({ nodeName, children, ...h }) {
+
+	let attrs = ''
+
+	for (const key in h) {
+
+		if (key.startsWith('set:') || h[key] == null || h[key] === false) continue
+
+		if (h[key] === true) attrs += ` ${key}`
+
+		else attrs += ` ${key}="${escape(String(h[key]))}"`
+	}
+
+	if (Void.has(nodeName)) yield `<${nodeName}${attrs}>`
+
+	else {
+
+		yield `<${nodeName}${attrs}>`
+
+		if (children != null) yield* html(children)
+
+		yield `</${nodeName}>`
+	}
+}
+
+const walk = function* (h) {
+
+	if (h == null) return
+
+	const type = typeof h
+
+	if (type == 'boolean') return
+
+	if (type == 'string') yield h
+
+	else if (type == 'number' || type == 'bigint') yield String(h)
+
+	else if (Symbol.iterator in h) for (h of h) yield* walk(h)
+
+	else if ('nodeName' in h) typeof h.nodeName == 'function' ? yield* run(h) : yield vdom(h)
+
+	else yield String(h)
+}
+
+const run = function* ({ nodeName, fallback = nodeName.fallback, ...h }) {
+
+	if (nodeName.constructor.name == 'GeneratorFunction') yield runGenerator(nodeName, h)
+
+	else yield* walk(nodeName(h))
+}
+
+const runGenerator = (fn, h) => {
+
+	const attrs = { ...fn.attrs }, args = { ...fn.args }
+
+	for (const key in h) {
+
+		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
+
+		else if (key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:')) attrs[key] = h[key]
+
+		else args[key] = h[key]
+	}
+
+	const controller = new AbortController()
+
+	const instance = {
+
+		[Context]: Object.create(current()?.[Context] ?? null),
+
+		[Args]: args,
+
+		signal: controller.signal,
+
+		next: noop,
+
+		return: noop,
+
+		throw: value => { throw value }
+	}
+
+	const iterator = fn.call(instance, args)
+
+	const parent = current()
+
+	current(instance)
+
+	const result = children => ({ ...attrs, nodeName: fn.is ?? 'div', ...vdom({ children }) })
+
+	try {
+
+		return result(iterator.next().value)
+
+	} catch (error) {
+
+		return result(iterator.throw(error).value)
+
+	} finally {
+
+		iterator.return()
+
+		controller.abort()
+
+		current(parent)
+	}
+}
+
+const vdom = ({ key, skip, memo, ref, ...h }) => {
+
+	if ('children' in h) {
+
+		const children = [...walk(h.children)]
+
+		if (children.length) h.children = children.length == 1 ? children[0] : children
+
+		else delete h.children
+	}
+
+	return h
+}

package/index.js

@@ -0,0 +1,286 @@
+import { Context, current } from 'ajo/context'
+
+const Key = Symbol.for('ajo.key')
+const Memo = Symbol.for('ajo.memo')
+const Ref = Symbol.for('ajo.ref')
+const Cache = Symbol.for('ajo.cache')
+const Generator = Symbol.for('ajo.generator')
+const Iterator = Symbol.for('ajo.iterator')
+const Render = Symbol.for('ajo.render')
+const Args = Symbol.for('ajo.args')
+const Controller = Symbol.for('ajo.controller')
+
+export const Fragment = props => props.children
+
+export const h = (type, props, ...children) => {
+
+	(props ??= {}).nodeName = type
+
+	if (!('children' in props) && children.length) props.children = children.length == 1 ? children[0] : children
+
+	return props
+}
+
+export const render = (h, el, child = el.firstChild, ref = null) => {
+
+	for (h of walk(h)) {
+
+		const node = reconcile(h, el, child)
+
+		if (child == null) {
+
+			before(el, node, ref)
+
+		} else if (node == child) {
+
+			child = node.nextSibling
+
+		} else if (node == child.nextSibling) {
+
+			before(el, child, ref)
+
+			child = node.nextSibling
+
+		} else {
+
+			before(el, node, child)
+		}
+	}
+
+	while (child != ref) {
+
+		const node = child.nextSibling
+
+		if (child.nodeType == 1) unref(child)
+
+		el.removeChild(child)
+
+		child = node
+	}
+}
+
+const walk = function* (h) {
+
+	if (h == null) return
+
+	const type = typeof h
+
+	if (type == 'boolean') return
+
+	if (type == 'string') yield h
+
+	else if (type == 'number' || type == 'bigint') yield String(h)
+
+	else if (Symbol.iterator in h) for (h of h) yield* walk(h)
+
+	else if ('nodeName' in h) typeof h.nodeName == 'function' ? yield* run(h) : yield h
+
+	else yield String(h)
+}
+
+const run = function* ({ nodeName, ...h }) {
+
+	if (nodeName.constructor.name == 'GeneratorFunction') yield runGenerator(nodeName, h)
+
+	else yield* walk(nodeName(h))
+}
+
+const runGenerator = (fn, h) => {
+
+	const attrs = { ...fn.attrs }, args = { ...fn.args }
+
+	for (const key in h) {
+
+		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
+
+		else if (key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:')) attrs[key] = h[key]
+
+		else args[key] = h[key]
+	}
+
+	return { ...attrs, nodeName: fn.is ?? 'div', [Generator]: fn, [Args]: args }
+}
+
+const reconcile = (h, el, node) => typeof h == 'string' ? text(h, node) : element(h, el, node)
+
+const text = (h, node) => {
+
+	while (node && node.nodeType != 3) node = node.nextSibling
+
+	node ? node.data != h && (node.data = h) : node = document.createTextNode(h)
+
+	return node
+}
+
+const element = ({ nodeName, children, key, skip, memo, ref, [Generator]: gen, [Args]: args, ...h }, el, node) => {
+
+	while (node && (
+
+		(node.localName != nodeName) ||
+
+		(node[Key] != null && node[Key] != key) ||
+
+		(node[Generator] && node[Generator] != gen)
+
+	)) node = node.nextSibling
+
+	node ??= document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
+
+	if (key != null) node[Key] = key
+
+	if (memo == null || some(node[Memo], node[Memo] = memo)) {
+
+		attrs(node[Cache] ?? extract(node), node[Cache] = h, node)
+
+		if (!skip) gen ? next(gen, args, node) : render(children, node)
+
+		if (typeof ref == 'function') (node[Ref] = ref)(node)
+	}
+
+	return node
+}
+
+const attrs = (cache, h, node) => {
+
+	for (const key in { ...cache, ...h }) {
+
+		if (cache[key] === h[key]) continue
+
+		if (key.startsWith('set:')) node[key.slice(4)] = h[key]
+
+		else if (h[key] == null || h[key] === false) node.removeAttribute(key)
+
+		else node.setAttribute(key, h[key] === true ? '' : h[key])
+	}
+}
+
+const some = (a, b) => Array.isArray(a) && Array.isArray(b) ? a.some((v, i) => v !== b[i]) : a !== b
+
+const extract = el => Array.from(el.attributes).reduce((out, attr) => (out[attr.name] = attr.value, out), {})
+
+const before = (el, node, child) => {
+
+	if (node.contains(document.activeElement)) {
+
+		const ref = node.nextSibling
+
+		while (child && child != node) {
+
+			const next = child.nextSibling
+
+			el.insertBefore(child, ref)
+
+			child = next
+		}
+
+	} else el.insertBefore(node, child)
+}
+
+const unref = node => {
+
+	for (const child of node.children) unref(child)
+
+	if (typeof node.return == 'function') node.return()
+
+	node[Ref]?.(null)
+}
+
+const next = (fn, args, el) => {
+
+	el[Generator] ??= (attach(el), fn)
+
+	Object.assign(el[Args] ??= {}, args)
+
+	el[Render]()
+}
+
+const attach = el => {
+
+	Object.assign(el, methods)
+
+	el[Context] = Object.create(current()?.[Context] ?? null)
+}
+
+const methods = {
+
+	[Render]() {
+
+		const parent = current()
+
+		current(this)
+
+		try {
+
+			if (!this[Iterator]) {
+
+				this.signal = (this[Controller] = new AbortController()).signal
+
+				this[Iterator] = this[Generator].call(this, this[Args])
+			}
+
+			const { value, done } = this[Iterator].next()
+
+			render(value, this)
+
+			this[Ref]?.(this)
+
+			if (done) this.return()
+
+		} catch (e) {
+
+			this.throw(e)
+
+		} finally {
+
+			current(parent)
+		}
+	},
+
+	next(fn, result) {
+
+		try {
+
+			if (typeof fn == 'function') result = fn.call(this, this[Args])
+
+		} catch (e) {
+
+			return this.throw(e)
+		}
+
+		if (!current()?.contains(this)) this[Render]()
+
+		return result
+	},
+
+	throw(value) {
+
+		for (let el = this; el; el = el.parentNode) if (el[Iterator]?.throw) try {
+
+			return render(el[Iterator].throw(value).value, el)
+
+		} catch (e) {
+
+			value = new Error(e?.message ?? e, { cause: value })
+		}
+
+		throw value
+	},
+
+	return() {
+
+		try {
+
+			this[Iterator]?.return()
+
+		} catch (e) {
+
+			this.throw(e)
+
+		} finally {
+
+			this[Iterator] = null
+
+			this[Controller]?.abort()
+		}
+	}
+}

package/license

@@ -1,6 +1,6 @@
 ISC License
 
-Copyright (c) 2022-2025, Cristian Falcone
+Copyright (c) 2022-2026, Cristian Falcone
 
 Permission to use, copy, modify, and/or distribute this software for any
 purpose with or without fee is hereby granted, provided that the above

package/package.json

@@ -1,55 +1,59 @@
 {
-	"name": "ajo",
-	"version": "0.1.30",
-	"description": "ajo is a JavaScript view library for building user interfaces",
-	"type": "module",
-	"types": "./types.ts",
-	"module": "./dist/index.js",
-	"main": "./dist/index.cjs",
-	"exports": {
-		".": {
-			"types": "./types.ts",
-			"import": "./dist/index.js",
-			"require": "./dist/index.cjs"
-		},
-		"./context": {
-			"types": "./types.ts",
-			"import": "./dist/context.js",
-			"require": "./dist/context.cjs"
-		},
-		"./html": {
-			"types": "./types.ts",
-			"import": "./dist/html.js",
-			"require": "./dist/html.cjs"
-		}
-	},
-	"files": [
-		"dist",
-		"types.ts"
-	],
-	"scripts": {
-		"test": "vitest --run",
-		"build": "vite build",
-		"bump": "pnpm version patch && git push && git push --tags",
-		"release": "pnpm test && pnpm build && pnpm bump && pnpm publish"
-	},
-	"devDependencies": {
-		"@types/node": "25.2.3",
-		"happy-dom": "20.6.1",
-		"vite": "7.3.1",
-		"vite-tsconfig-paths": "6.1.1",
-		"vitest": "4.0.18"
-	},
-	"keywords": [
-		"ui",
-		"frontend",
-		"web",
-		"dom",
-		"jsx"
-	],
-	"repository": "cristianfalcone/ajo",
-	"author": "Cristian Falcone",
-	"license": "ISC",
-	"bugs": "https://github.com/cristianfalcone/ajo/issues",
-	"homepage": "https://github.com/cristianfalcone/ajo#readme"
-}
+  "name": "ajo",
+  "version": "0.1.31",
+  "description": "ajo is a JavaScript view library for building user interfaces",
+  "type": "module",
+  "types": "./types.ts",
+  "module": "./dist/index.js",
+  "main": "./dist/index.cjs",
+  "exports": {
+    ".": {
+      "types": "./types.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./context": {
+      "types": "./types.ts",
+      "import": "./dist/context.js",
+      "require": "./dist/context.cjs"
+    },
+    "./html": {
+      "types": "./types.ts",
+      "import": "./dist/html.js",
+      "require": "./dist/html.cjs"
+    }
+  },
+  "files": [
+    "dist",
+    "context.js",
+    "html.js",
+    "index.js",
+    "LLMs.md",
+    "types.ts"
+  ],
+  "devDependencies": {
+    "@types/node": "25.2.3",
+    "happy-dom": "20.6.1",
+    "vite": "7.3.1",
+    "vite-tsconfig-paths": "6.1.1",
+    "vitest": "4.0.18"
+  },
+  "keywords": [
+    "ui",
+    "frontend",
+    "web",
+    "dom",
+    "jsx"
+  ],
+  "repository": "cristianfalcone/ajo",
+  "author": "Cristian Falcone",
+  "license": "ISC",
+  "bugs": "https://github.com/cristianfalcone/ajo/issues",
+  "homepage": "https://github.com/cristianfalcone/ajo#readme",
+  "scripts": {
+    "test": "vitest --run",
+    "build": "vite build",
+    "bump": "pnpm version patch && git push && git push --tags",
+    "release": "pnpm test && pnpm build && pnpm bump && pnpm publish"
+  }
+}

package/readme.md

@@ -125,7 +125,7 @@ function* TodoList() {
 
 ### Re-rendering with `this.next()`
 
-Call `this.next()` to trigger a re-render. The optional callback receives current props, useful when props may have changed:
+Call `this.next()` to trigger a re-render. The optional callback receives current props and its return value is passed through:
 
 ```javascript
 function* Stepper(args) {
@@ -158,7 +158,22 @@ function* Good(args) {
 
 ### Lifecycle and Cleanup
 
-Use `try...finally` for cleanup when the component unmounts:
+Every stateful component has a `this.signal` (AbortSignal) that aborts when the component unmounts. Use it with any API that accepts a signal:
+
+```javascript
+function* MouseTracker() {
+
+  let pos = { x: 0, y: 0 }
+
+  document.addEventListener('mousemove', e => this.next(() => {
+    pos = { x: e.clientX, y: e.clientY }
+  }), { signal: this.signal }) // auto-removed on unmount
+
+  while (true) yield <p>{pos.x}, {pos.y}</p>
+}
+```
+
+For APIs that don't accept a signal, use `try...finally`:
 
 ```javascript
 function* Clock() {
@@ -329,7 +344,7 @@ function* UserProfile(args) {
 
   let data = null, error = null, loading = true
 
-  fetch(`/api/users/${args.id}`)
+  fetch(`/api/users/${args.id}`, { signal: this.signal })
     .then(r => r.json())
     .then(d => this.next(() => { data = d; loading = false }))
     .catch(e => this.next(() => { error = e; loading = false }))
@@ -401,9 +416,10 @@ let ref: ThisParameterType<typeof Counter> | null = null
 | `render(children)` | Render to HTML string |
 
 ### Stateful `this`
-| Method | Description |
-|--------|-------------|
-| `this.next(fn?)` | Re-render. Callback receives current args. |
+| Property | Description |
+|----------|-------------|
+| `this.signal` | AbortSignal that aborts on unmount. Pass to `fetch()`, `addEventListener()`, etc. |
+| `this.next(fn?)` | Re-render. Callback receives current args. Returns callback's result. |
 | `this.throw(error)` | Throw to parent boundary |
 | `this.return()` | Terminate generator |
 

package/types.ts

@@ -53,7 +53,8 @@ declare module 'ajo' {
 		TArguments
 
 	type StatefulElement<TArguments, TTag> = ElementType<TTag> & {
-		next: (fn?: (this: StatefulElement<TArguments, TTag>, args: StatefulArgs<TArguments, TTag>) => void) => void,
+		signal: AbortSignal,
+		next: <R>(fn?: (this: StatefulElement<TArguments, TTag>, args: StatefulArgs<TArguments, TTag>) => R) => R,
 		throw: (value?: unknown) => void,
 		return: () => void,
 	}