ajo 0.1.30 → 0.1.32

package/LLMs.md

@@ -0,0 +1,349 @@
+# 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 }) => (
+  <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* ({ initial }) {
+
+  // before loop: init state & handlers (use parameter for initial args)
+
+  let count = 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 lifecycle end
+
+  for (const { step = 1 } of this) { // main render loop — `for...of this` yields fresh args each cycle
+
+    try { // optional: error boundary
+
+      // 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
+
+// Or use stateful() to avoid duplicating 'section':
+// const Counter = stateful(function* ({ initial }: Args) { ... }, 'section')
+// Counter.attrs = { class: 'counter-wrap' }
+// Counter.args = { step: 1 }
+
+// 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** | Destructure in parameter for init code. Render loops: `for (const { prop } of this)` for fresh args each cycle (new bindings), or `for ({ prop } of this)` without `const` to reassign variables from the outer scope. `while (true)` when you don't need fresh args |
+| **Generators** | Stateful components are JS generators with a main render loop (`while`/`for...of`). Since they're generators, yields can also appear outside the loop — sequential phases, conditional blocks, etc. are all valid |
+| **Root JSX** | Use `<>...</>` in stateful to avoid double wrapper |
+| **Re-render** | `this.next(fn?)` — returns `fn`'s result. Safe after unmount (no-op). Use `this.throw(e)` for explicit error routing |
+| **Context** | `context<T>(fallback)` creates context. Stateless: read only. Stateful: read/write. Reads go inside loop (fresh each render). Constant writes can go before loop; dynamic writes go inside 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 managed DOM |
+| **Custom wrapper** | `stateful(fn, 'tagname')` sets `.is` and infers `this` type. Or manually: `Stateful<Args, 'tagname'>` + `.is = 'tagname'`. 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` aborts on lifecycle end (unmount, `this.return()`, generator done). Use for fetch, addEventListener, etc. `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(deep?)`. Iterable: `for...of this` yields args. Type: `ThisParameterType<typeof Component>` |
+
+## Common Patterns
+
+```tsx
+import type { Stateful, Stateless, WithChildren } from 'ajo'
+import { stateful } from 'ajo'
+import { context } from 'ajo/context'
+
+// Async data loading
+type LoaderArgs = { url: string }
+
+const DataLoader: Stateful<LoaderArgs> = function* ({ url }) {
+
+  let data: unknown = null
+  let error: Error | null = null
+
+  fetch(url, { signal: this.signal })  // signal auto-aborts on lifecycle end
+    .then(r => r.json())
+    .then(d => this.next(() => data = d))   // no-op if unmounted
+    .catch(e => this.next(() => error = e)) // no-op if unmounted
+
+  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 render loop
+const ThemeProvider: Stateful<WithChildren> = function* () {
+
+  let theme: 'light' | 'dark' = 'light'
+
+  const toggle = () => this.next(() => theme = theme === 'light' ? 'dark' : 'light')
+
+  for (const { children } of this) {
+
+    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>}
+        {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* () {
+  let container: HTMLUListElement | null = null
+  for (const { items } of this) {
+    queueMicrotask(() => container!.scrollTop = container!.scrollHeight)
+    yield (
+      <ul ref={el => container = el}>
+        {items.map(item => <li key={item.id}>{item.text}</li>)}
+      </ul>
+    )
+  }
+}
+
+// Reassign parameter vars in render loop (no const/let — updates outer scope)
+const Greeter: Stateful<{ name: string }> = function* ({ name }) {
+  // name is available for init code here
+  for ({ name } of this) {  // reassigns `name` from parameter each cycle
+    yield <p>Hello, {name}!</p>
+  }
+}
+
+// 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} />
+
+// ❌ Context read outside loop - stale values
+function* Bad() {
+  const theme = ThemeContext()  // frozen at mount, never updated
+  while (true) yield ...
+}
+
+// ✅ Context read inside loop - fresh each render
+function* Good() {
+  while (true) {
+    const user = UserContext()    // read: fresh value each render
+    yield ...
+  }
+}
+
+// ✅ Constant context write outside loop - value never changes, OK
+function* Good() {
+  ThemeContext('dark')            // write once: constant value
+  while (true) yield ...
+}
+
+// ✅ Dynamic context write inside loop - value depends on state
+function* Good() {
+  let theme = 'light'
+  while (true) {
+    ThemeContext(theme)           // write: updated 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 automatic runtime (Vite example):
+
+```ts
+// vite.config.ts
+export default defineConfig({
+  esbuild: {
+    jsx: 'automatic',
+    jsxImportSource: 'ajo',
+  },
+})
+```
+
+For other build systems: `jsx: 'react-jsx'` (or `'automatic'`), `jsxImportSource: 'ajo'`. No manual imports needed — the build tool auto-imports from `ajo/jsx-runtime`.

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

package/dist/html.js

@@ -1,53 +1,55 @@
-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) {
-  for (e of c(e))
-    typeof e == "string" ? yield y(e) : yield* k(e);
-}, k = 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}>`);
-}, c = function* (e) {
-  if (e == null) return;
-  const n = typeof e;
+import { Context as d, current as c } from "./context.js";
+const w = /* @__PURE__ */ new Set(["area", "base", "br", "col", "command", "embed", "hr", "img", "input", "keygen", "link", "meta", "param", "source", "track", "wbr"]), p = /* @__PURE__ */ Symbol.for("ajo.args"), i = (t) => t.replace(/[&<>"']/g, (e) => `&#${e.charCodeAt(0)};`), m = () => {
+}, S = { tag: "div" }, C = (t) => {
+  let e = "";
+  return f(t, (n) => e += n), e;
+}, f = (t, e) => {
+  if (t == null) return;
+  const n = typeof t;
   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* $(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) => {
-  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,
-    throw: (t) => {
-      throw t;
+    if (n == "string") e(i(t));
+    else if (n == "number" || n == "bigint") e(i(String(t)));
+    else if (Symbol.iterator in t) for (t of t) f(t, e);
+    else "nodeName" in t ? typeof t.nodeName == "function" ? v(t, e) : g(t, e) : e(i(String(t)));
+}, g = (t, e) => {
+  const { nodeName: n, children: s } = t;
+  let l = "";
+  for (const o in t)
+    o == "nodeName" || o == "children" || o == "key" || o == "skip" || o == "memo" || o == "ref" || o.startsWith("set:") || t[o] == null || t[o] === !1 || (t[o] === !0 ? l += ` ${o}` : l += ` ${o}="${i(String(t[o]))}"`);
+  w.has(n) ? e(`<${n}${l}>`) : (e(`<${n}${l}>`), s != null && f(s, e), e(`</${n}>`));
+}, v = ({ nodeName: t, fallback: e = t.fallback, ...n }, s) => {
+  t.constructor.name == "GeneratorFunction" ? x(t, n, s) : f(t(n), s);
+}, x = (t, e, n) => {
+  const s = { ...t.attrs }, l = { ...t.args };
+  for (const r in e)
+    r.startsWith("attr:") ? s[r.slice(5)] = e[r] : r == "key" || r == "skip" || r == "memo" || r == "ref" || r.startsWith("set:") ? s[r] = e[r] : l[r] = e[r];
+  const o = new AbortController(), b = {
+    *[Symbol.iterator]() {
+      for (; ; ) yield this[p];
+    },
+    [d]: Object.create(c()?.[d] ?? null),
+    [p]: l,
+    signal: o.signal,
+    next: m,
+    return: m,
+    throw: (r) => {
+      throw r;
     }
-  }, l = e.call(r, o), g = s();
-  s(r);
-  const a = (t) => ({ ...i, nodeName: e.is ?? "div", ...m({ children: t }) });
+  }, u = t.call(b, l), k = c();
+  c(b);
+  const y = (r) => ({ ...s, nodeName: t.is ?? S.tag, children: r });
+  let a = "";
   try {
-    return a(l.next().value);
-  } catch (t) {
-    return a(l.throw(t).value);
+    g(y(u.next().value), (r) => a += r);
+  } catch (r) {
+    a = "", g(y(u.throw(r).value), ($) => a += $);
   } finally {
-    l.return?.(), s(g);
+    u.return(), o.abort(), c(k);
   }
-}, 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 r;
+  n(a);
 };
 export {
-  d as html,
-  v as render
+  S as defaults,
+  f as html,
+  C 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 l=require("./context.cjs"),{isArray:x}=Array,{assign:N,create:A}=Object,a=Symbol.for("ajo.key"),g=Symbol.for("ajo.keyed"),C=Symbol.for("ajo.memo"),u=Symbol.for("ajo.cache"),f=Symbol.for("ajo.generator"),o=Symbol.for("ajo.iterator"),S=Symbol.for("ajo.render"),c=Symbol.for("ajo.args"),h=Symbol.for("ajo.controller"),E={tag:"div"},v=(r,t)=>(t&&(r.is=t),r),m=(r,t,e=t.firstChild,n=null)=>{for(p(r,i=>{const s=typeof i=="string"?M(i,e):W(i,t,e);e==null?b(t,s,n):s==e?e=s.nextSibling:s==e.nextSibling?(b(t,e,n),e=s.nextSibling):b(t,s,e)});e!=n;){const i=e.nextSibling;e.nodeType==1&&O(e),t.removeChild(e),e=i}},p=(r,t)=>{if(r==null)return;const e=typeof r;if(e!="boolean")if(e=="string")t(r);else if(e=="number"||e=="bigint")t(String(r));else if(Symbol.iterator in r)for(r of r)p(r,t);else"nodeName"in r?typeof r.nodeName=="function"?T(r,t):t(r):t(String(r))},T=({nodeName:r,...t},e)=>{r.constructor.name=="GeneratorFunction"?e(G(r,t)):p(r(t),e)},G=(r,t)=>{const e={...r.attrs},n={...r.args};for(const i in t)i.startsWith("attr:")?e[i.slice(5)]=t[i]:i=="key"||i=="skip"||i=="memo"||i=="ref"||i.startsWith("set:")?e[i]=t[i]:n[i]=t[i];return{...e,nodeName:r.is??E.tag,[f]:r,[c]:n}},M=(r,t)=>{for(;t&&t.nodeType!=3;)t=t.nextSibling;return t?t.data!=r&&(t.data=r):t=document.createTextNode(r),t},W=(r,t,e)=>{const{nodeName:n,children:i,key:s,skip:k,memo:w,[f]:y,[c]:j}=r;for(s!=null&&(e=(t[g]??=new Map).get(s)??e);e&&(e.localName!=n||e[a]!=null&&e[a]!=s||e[f]&&e[f]!=y);)e=e[a]!=null?null:e.nextElementSibling;return e??=document.createElementNS(r.xmlns??t.namespaceURI,n),s!=null&&t[g].set(e[a]=s,e),(w==null||I(e[C],e[C]=w))&&(B(e[u],e[u]=r,e),k||(y?R(y,j,e):m(i,e))),e},B=(r,t,e)=>{for(const n in{...r,...t})n=="nodeName"||n=="children"||n=="key"||n=="skip"||n=="memo"||r?.[n]===t[n]||(n=="ref"&&typeof t[n]=="function"?t[n](e):n.startsWith("set:")?e[n.slice(4)]=t[n]:t[n]==null||t[n]===!1?e.removeAttribute(n):e.setAttribute(n,t[n]===!0?"":t[n]))},I=(r,t)=>x(r)&&x(t)?r.some((e,n)=>e!==t[n]):r!==t,K=(r,t)=>{let e=t.firstElementChild;for(;e;)if(r(e)&&e.firstElementChild)e=e.firstElementChild;else{for(;e!=t&&!e.nextElementSibling;)e=e.parentNode??t;e=e!=t&&e.nextElementSibling}},b=(r,t,e)=>{if(t.isConnected&&t.contains(document.activeElement)){const n=t.nextSibling;for(;e&&e!=t;){const i=e.nextSibling;r.insertBefore(e,n),e=i}}else r.insertBefore(t,e)},O=r=>{let t=r;for(;t.firstElementChild;)t=t.firstElementChild;for(;;){const{nextElementSibling:e,parentNode:n}=t;if(t[a]!=null&&n?.[g]?.delete(t[a]),typeof t.return=="function"&&t.return(!1),typeof t[u]?.ref=="function"&&t[u].ref(null),t===r)break;if(t=e??n??r,e)for(;t.firstElementChild;)t=t.firstElementChild}},R=(r,t,e)=>{e[f]??=(N(e,q)[l.Context]=A(l.current()?.[l.Context]??null),r),e[c]=t,e[S]()},q={*[Symbol.iterator](){for(;;)yield this[c]},[S](){const r=l.current();l.current(this);try{this[o]||(this.signal=(this[h]=new AbortController).signal,this[o]=this[f].call(this,this[c]));const{value:t,done:e}=this[o].next();m(t,this),e&&this.return()}catch(t){this.throw(t)}finally{l.current(r)}},next(r,t){if(!this.isConnected)return t;try{typeof r=="function"&&(t=r.call(this,this[c]))}catch(e){return this.throw(e)}return l.current()?.contains(this)||this[S](),t},throw(r){for(let t=this;t;t=t.parentNode)if(t[o]?.throw)try{return m(t[o].throw(r).value,t)}catch(e){r=new Error(e?.message??e,{cause:r})}throw r},return(r=!0){r&&K(t=>typeof t.return=="function"?t.return():!0,this);try{this[o]?.return()}catch(t){this.throw(t)}finally{this[o]=null,this[h]?.abort()}}};exports.defaults=E;exports.render=m;exports.stateful=v;