ajo 0.1.29 → 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 u=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"),p=e=>e.replace(/[&<>"']/g,r=>`&#${r.charCodeAt(0)};`),o=()=>{},v=e=>[...y(e)].join(""),y=function*(e,{alloc:r=o,push:t=o,placeholder:n=o}={}){for(e of f(e,{alloc:r,push:t,placeholder:n}))typeof e=="string"?yield p(e):yield*w(e,{alloc:r,push:t,placeholder:n})},w=function*({nodeName:e,children:r,...t},n){let l="";for(const i in t)i.startsWith("set:")||t[i]==null||t[i]===!1||(t[i]===!0?l+=` ${i}`:l+=` ${i}="${p(String(t[i]))}"`);m.has(e)?yield`<${e}${l}>`:(yield`<${e}${l}>`,r!=null&&(yield*y(r,n)),yield`</${e}>`)},f=function*(e,r){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*f(e,r);else"nodeName"in e?typeof e.nodeName=="function"?yield*$(e,r):yield a(e,r):yield String(e)},$=function*({nodeName:e,fallback:r=e.fallback,...t},n){const l=e.constructor.name;e.src?yield S(e.src,t,n):l=="GeneratorFunction"?yield x(e,t,n):l=="AsyncGeneratorFunction"?yield A(e,r,t,n):(t=e(t),typeof t?.then=="function"?yield j(r,t,n):yield*f(t,n))},S=(e,r,t)=>{const n=t.alloc();return t.push({id:n,src:e,h:a(r,t),done:!0}),t.placeholder(n)},x=(e,r,t)=>{const n={...e.attrs},l={...e.args};for(const c in r)c.startsWith("attr:")?n[c.slice(5)]=r[c]:c=="key"||c=="skip"||c=="memo"||c=="ref"||c.startsWith("set:")?n[c]=r[c]:l[c]=r[c];const i={[u.Context]:Object.create(u.current()?.[u.Context]??null),[b]:l,next:o,return:o,throw:c=>{throw c}},s=e.call(i,l),g=u.current();u.current(i);const d=c=>({...n,nodeName:e.is??"div",...a({children:c},t)});try{return d(s.next().value)}catch(c){return d(s.throw(c).value)}finally{s.return?.(),u.current(g)}},A=(e,r,t,n)=>{const l=n.alloc();return Promise.resolve().then(async()=>{const i=e(t);n={...n,alloc:(s=l)=>n.alloc(s)};try{for(t=await i.next();!t.done;)n.push({id:l,h:a(t.value,n),done:!1}),t=await i.next();n.push({id:l,h:a(t.value,n),done:!0})}catch(s){n.push({id:l,h:a(s,n),done:!0})}finally{i.return?.()}}),n.placeholder(l,r)},j=(e,r,t)=>{const n=t.alloc();return r.then(l=>t.push({id:n,h:a(l,{...t,alloc:(i=n)=>t.alloc(i)}),done:!0})),t.placeholder(n,e)},a=({key:e,skip:r,memo:t,ref:n,...l},i)=>{if("children"in l){const s=[...f(l.children,i)];s.length?l.children=s.length==1?s[0]:s:delete l.children}return l};exports.html=y;exports.render=v;
+"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,75 +1,54 @@
-import { Context as d, current as o } from "./context.js";
-const b = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), w = /* @__PURE__ */ Symbol.for("ajo.args"), p = (e) => e.replace(/[&<>"']/g, (r) => `&#${r.charCodeAt(0)};`), u = () => {
-}, W = (e) => [...g(e)].join(""), g = function* (e, { alloc: r = u, push: t = u, placeholder: n = u } = {}) {
-  for (e of f(e, { alloc: r, push: t, placeholder: n }))
-    typeof e == "string" ? yield p(e) : yield* $(e, { alloc: r, push: t, placeholder: n });
-}, $ = function* ({ nodeName: e, children: r, ...t }, n) {
-  let l = "";
-  for (const i in t)
-    i.startsWith("set:") || t[i] == null || t[i] === !1 || (t[i] === !0 ? l += ` ${i}` : l += ` ${i}="${p(String(t[i]))}"`);
-  b.has(e) ? yield `<${e}${l}>` : (yield `<${e}${l}>`, r != null && (yield* g(r, n)), yield `</${e}>`);
-}, f = function* (e, r) {
+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 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}="${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 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* f(e, r);
-    else "nodeName" in e ? typeof e.nodeName == "function" ? yield* v(e, r) : yield a(e, r) : yield String(e);
-}, v = function* ({ nodeName: e, fallback: r = e.fallback, ...t }, n) {
-  const l = e.constructor.name;
-  e.src ? yield x(e.src, t, n) : l == "GeneratorFunction" ? yield S(e, t, n) : l == "AsyncGeneratorFunction" ? yield A(e, r, t, n) : (t = e(t), typeof t?.then == "function" ? yield G(r, t, n) : yield* f(t, n));
-}, x = (e, r, t) => {
-  const n = t.alloc();
-  return t.push({ id: n, src: e, h: a(r, t), done: !0 }), t.placeholder(n);
-}, S = (e, r, t) => {
-  const n = { ...e.attrs }, l = { ...e.args };
-  for (const c in r)
-    c.startsWith("attr:") ? n[c.slice(5)] = r[c] : c == "key" || c == "skip" || c == "memo" || c == "ref" || c.startsWith("set:") ? n[c] = r[c] : l[c] = r[c];
-  const i = {
-    [d]: Object.create(o()?.[d] ?? null),
-    [w]: l,
-    next: u,
-    return: u,
-    throw: (c) => {
-      throw c;
+  const n = typeof e;
+  if (n != "boolean")
+    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* 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 = new AbortController(), l = {
+    [u]: Object.create(s()?.[u] ?? null),
+    [k]: o,
+    signal: r.signal,
+    next: y,
+    return: y,
+    throw: (t) => {
+      throw t;
     }
-  }, s = e.call(i, l), m = o();
-  o(i);
-  const y = (c) => ({ ...n, nodeName: e.is ?? "div", ...a({ children: c }, t) });
+  }, a = e.call(l, o), b = s();
+  s(l);
+  const f = (t) => ({ ...i, nodeName: e.is ?? "div", ...m({ children: t }) });
   try {
-    return y(s.next().value);
-  } catch (c) {
-    return y(s.throw(c).value);
+    return f(a.next().value);
+  } catch (t) {
+    return f(a.throw(t).value);
   } finally {
-    s.return?.(), o(m);
+    a.return(), r.abort(), s(b);
   }
-}, A = (e, r, t, n) => {
-  const l = n.alloc();
-  return Promise.resolve().then(async () => {
-    const i = e(t);
-    n = { ...n, alloc: (s = l) => n.alloc(s) };
-    try {
-      for (t = await i.next(); !t.done; )
-        n.push({ id: l, h: a(t.value, n), done: !1 }), t = await i.next();
-      n.push({ id: l, h: a(t.value, n), done: !0 });
-    } catch (s) {
-      n.push({ id: l, h: a(s, n), done: !0 });
-    } finally {
-      i.return?.();
-    }
-  }), n.placeholder(l, r);
-}, G = (e, r, t) => {
-  const n = t.alloc();
-  return r.then((l) => t.push({ id: n, h: a(l, { ...t, alloc: (i = n) => t.alloc(i) }), done: !0 })), t.placeholder(n, e);
-}, a = ({ key: e, skip: r, memo: t, ref: n, ...l }, i) => {
-  if ("children" in l) {
-    const s = [...f(l.children, i)];
-    s.length ? l.children = s.length == 1 ? s[0] : s : delete l.children;
+}, m = ({ key: e, skip: n, memo: i, ref: o, ...r }) => {
+  if ("children" in r) {
+    const l = [...c(r.children)];
+    l.length ? r.children = l.length == 1 ? l[0] : l : delete r.children;
   }
-  return l;
+  return r;
 };
 export {
   g as html,
-  W as render
+  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
 };