ajo 0.1.32 → 0.1.34

package/LLMs.md

@@ -58,7 +58,7 @@ const Counter: Stateful<Args, 'section'> = function* ({ initial }) {
         <>
           <input
             ref={el => inputRef = el}
-            value={count}
+            set:value={count}
             set:oninput={e => this.next(() => count = +(e.target as HTMLInputElement).value)}
           />
           <button set:onclick={inc}>+{step}</button>
@@ -117,9 +117,10 @@ ref?.next()  // trigger re-render from outside
 | **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 |
+| **SVG** | Set `xmlns="http://www.w3.org/2000/svg"` on the root `<svg>` element — children inherit the namespace |
 | **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 |
+| **Skip** | `skip` excludes children from reconciliation; it does not sanitize `set:innerHTML` |
 | **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 |
@@ -224,7 +225,7 @@ counterRef?.next()  // trigger re-render from outside
 <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!)
+<div set:innerHTML={trustedHtml} skip />     // trusted/sanitized HTML + skip
 
 // Post-render work (DOM is updated by the time the microtask runs)
 const ScrollList: Stateful<{ items: Item[] }> = function* () {
@@ -261,7 +262,7 @@ className="..."
 onClick={...}
 useState, useEffect, useCallback
 
-// ❌ class/style as object or array: no special handling in Ajo
+// ❌ class/style as object or array: no special handling in Ajo (compile error)
 <div class={{ active: isActive }} />        // won't work
 <div class={['btn', 'primary']} />          // won't work
 <div style={{ color: 'red' }} />            // won't work
@@ -321,9 +322,12 @@ const inc = () => count++  // won't re-render
 // ❌ set:textContent/innerHTML without skip: content gets cleared
 <div set:innerHTML={html} />
 
+// ❌ skip is not sanitization
+<div set:innerHTML={userHtml} skip />
+
 // ✅ Correct
 const inc = () => this.next(() => count++)
-<div set:innerHTML={html} skip />
+<div set:innerHTML={trustedHtml} skip />
 ```
 
 ## Setup
@@ -334,10 +338,17 @@ pnpm add ajo
 yarn add ajo
 ```
 
-Configure JSX automatic runtime (Vite example):
+Configure the JSX automatic runtime in the build tool:
 
 ```ts
-// vite.config.ts
+// vite.config.ts (Vite 8+, rolldown/oxc)
+export default defineConfig({
+  oxc: {
+    jsx: { importSource: 'ajo' },
+  },
+})
+
+// vite.config.ts (Vite 7 and below, esbuild)
 export default defineConfig({
   esbuild: {
     jsx: 'automatic',
@@ -346,4 +357,30 @@ export default defineConfig({
 })
 ```
 
-For other build systems: `jsx: 'react-jsx'` (or `'automatic'`), `jsxImportSource: 'ajo'`. No manual imports needed — the build tool auto-imports from `ajo/jsx-runtime`.
+And in tsconfig, so JSX types resolve in the editor:
+
+```jsonc
+// tsconfig.json
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "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`.
+
+Mount and server-render:
+
+```tsx
+import { render } from 'ajo'
+
+render(<App />, document.getElementById('root')!)
+// render(h, el, child?, ref?) — optional child/ref bound the reconciled
+// range to [child, ref) for hydration or partial updates inside el
+
+import { render as toString } from 'ajo/html'
+
+const html = toString(<App />)  // SSR: stateful components run one iteration, then finalize
+```

package/context.js

@@ -1,18 +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
+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/context.js

@@ -1,11 +1 @@
-const e = /* @__PURE__ */ Symbol.for("ajo.context"), r = (t, o = /* @__PURE__ */ Symbol()) => function(...l) {
-  const n = this ?? c;
-  return n ? l.length ? n[e][o] = l[0] : o in n[e] ? n[e][o] : t : t;
-};
-let c = null;
-const s = (...t) => t.length ? c = t[0] : c;
-export {
-  e as Context,
-  r as context,
-  s as current
-};
+var t=Symbol.for("ajo.context"),n=(n,o=Symbol())=>function(...l){let r=this??e;return r?l.length?r[t][o]=l[0]:o in r[t]?r[t][o]:n:n},e=null,o=(...t)=>t.length?e=t[0]:e;export{t as Context,n as context,o as current};

package/dist/html.js

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

package/dist/index.js

@@ -1,110 +1 @@
-import { Context as x, current as c } from "./context.js";
-const { isArray: h } = Array, { assign: N, create: A } = Object, l = /* @__PURE__ */ Symbol.for("ajo.key"), b = /* @__PURE__ */ Symbol.for("ajo.keyed"), C = /* @__PURE__ */ Symbol.for("ajo.memo"), u = /* @__PURE__ */ Symbol.for("ajo.cache"), a = /* @__PURE__ */ Symbol.for("ajo.generator"), o = /* @__PURE__ */ Symbol.for("ajo.iterator"), g = /* @__PURE__ */ Symbol.for("ajo.render"), f = /* @__PURE__ */ Symbol.for("ajo.args"), E = /* @__PURE__ */ Symbol.for("ajo.controller"), v = { tag: "div" }, q = (r, t) => (t && (r.is = t), r), S = (r, t, e = t.firstChild, i = null) => {
-  for (p(r, (n) => {
-    const s = typeof n == "string" ? W(n, e) : B(n, t, e);
-    e == null ? y(t, s, i) : s == e ? e = s.nextSibling : s == e.nextSibling ? (y(t, e, i), e = s.nextSibling) : y(t, s, e);
-  }); e != i; ) {
-    const n = e.nextSibling;
-    e.nodeType == 1 && R(e), t.removeChild(e), e = n;
-  }
-}, 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" ? G(r, t) : t(r) : t(String(r));
-}, G = ({ nodeName: r, ...t }, e) => {
-  r.constructor.name == "GeneratorFunction" ? e(T(r, t)) : p(r(t), e);
-}, T = (r, t) => {
-  const e = { ...r.attrs }, i = { ...r.args };
-  for (const n in t)
-    n.startsWith("attr:") ? e[n.slice(5)] = t[n] : n == "key" || n == "skip" || n == "memo" || n == "ref" || n.startsWith("set:") ? e[n] = t[n] : i[n] = t[n];
-  return { ...e, nodeName: r.is ?? v.tag, [a]: r, [f]: i };
-}, W = (r, t) => {
-  for (; t && t.nodeType != 3; ) t = t.nextSibling;
-  return t ? t.data != r && (t.data = r) : t = document.createTextNode(r), t;
-}, B = (r, t, e) => {
-  const { nodeName: i, children: n, key: s, skip: k, memo: w, [a]: m, [f]: j } = r;
-  for (s != null && (e = (t[b] ??= /* @__PURE__ */ new Map()).get(s) ?? e); e && (e.localName != i || e[l] != null && e[l] != s || e[a] && e[a] != m); ) e = e[l] != null ? null : e.nextElementSibling;
-  return e ??= document.createElementNS(r.xmlns ?? t.namespaceURI, i), s != null && t[b].set(e[l] = s, e), (w == null || K(e[C], e[C] = w)) && (I(e[u], e[u] = r, e), k || (m ? F(m, j, e) : S(n, e))), e;
-}, I = (r, t, e) => {
-  for (const i in { ...r, ...t })
-    i == "nodeName" || i == "children" || i == "key" || i == "skip" || i == "memo" || r?.[i] === t[i] || (i == "ref" && typeof t[i] == "function" ? t[i](e) : i.startsWith("set:") ? e[i.slice(4)] = t[i] : t[i] == null || t[i] === !1 ? e.removeAttribute(i) : e.setAttribute(i, t[i] === !0 ? "" : t[i]));
-}, K = (r, t) => h(r) && h(t) ? r.some((e, i) => e !== t[i]) : r !== t, M = (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;
-    }
-}, y = (r, t, e) => {
-  if (t.isConnected && t.contains(document.activeElement)) {
-    const i = t.nextSibling;
-    for (; e && e != t; ) {
-      const n = e.nextSibling;
-      r.insertBefore(e, i), e = n;
-    }
-  } else r.insertBefore(t, e);
-}, R = (r) => {
-  let t = r;
-  for (; t.firstElementChild; ) t = t.firstElementChild;
-  for (; ; ) {
-    const { nextElementSibling: e, parentNode: i } = t;
-    if (t[l] != null && i?.[b]?.delete(t[l]), typeof t.return == "function" && t.return(!1), typeof t[u]?.ref == "function" && t[u].ref(null), t === r) break;
-    if (t = e ?? i ?? r, e) for (; t.firstElementChild; ) t = t.firstElementChild;
-  }
-}, F = (r, t, e) => {
-  e[a] ??= (N(e, O)[x] = A(c()?.[x] ?? null), r), e[f] = t, e[g]();
-}, O = {
-  *[Symbol.iterator]() {
-    for (; ; ) yield this[f];
-  },
-  [g]() {
-    const r = c();
-    c(this);
-    try {
-      this[o] || (this.signal = (this[E] = new AbortController()).signal, this[o] = this[a].call(this, this[f]));
-      const { value: t, done: e } = this[o].next();
-      S(t, this), e && this.return();
-    } catch (t) {
-      this.throw(t);
-    } finally {
-      c(r);
-    }
-  },
-  next(r, t) {
-    if (!this.isConnected) return t;
-    try {
-      typeof r == "function" && (t = r.call(this, this[f]));
-    } catch (e) {
-      return this.throw(e);
-    }
-    return c()?.contains(this) || this[g](), t;
-  },
-  throw(r) {
-    for (let t = this; t; t = t.parentNode) if (t[o]?.throw) try {
-      return S(t[o].throw(r).value, t);
-    } catch (e) {
-      r = new Error(e?.message ?? e, { cause: r });
-    }
-    throw r;
-  },
-  return(r = !0) {
-    r && M((t) => typeof t.return == "function" ? t.return() : !0, this);
-    try {
-      this[o]?.return();
-    } catch (t) {
-      this.throw(t);
-    } finally {
-      this[o] = null, this[E]?.abort();
-    }
-  }
-};
-export {
-  v as defaults,
-  S as render,
-  q as stateful
-};
+import{isVNode as t}from"./jsx.js";import{Context as n,current as e}from"./context.js";var b,{isArray:o}=Array,{assign:r,hasOwn:a,keys:l}=Object,s=Symbol.for("ajo.key"),i=Symbol.for("ajo.keyed"),m=Symbol.for("ajo.memo"),c=Symbol.for("ajo.cache"),f=Symbol.for("ajo.generator"),u=Symbol.for("ajo.iterator"),d=Symbol.for("ajo.render"),g=Symbol.for("ajo.args"),h=Symbol.for("ajo.controller"),y={tag:"div"},p=(e,t)=>(t&&(e.is=t),e),S=(e,t,r=t.firstChild,n=null)=>{if(x(e,e=>{let i="string"==typeof e?E(e,r,n):N(e,t,r,n);null==r?A(t,i,n):i==r?r=i.nextSibling:i==r.nextSibling?(r.contains(document.activeElement)?t.insertBefore(i,r):t.insertBefore(r,n),r=i.nextSibling):A(t,i,r)}),r&&!n&&r==t.firstChild){let e=[...t.children];t[i]?.clear(),t.textContent="";for(let t of e)O(t)}else for(;r&&r!=n;){let e=r.nextSibling;t.removeChild(r),1==r.nodeType&&O(r,t),r=e}},x=(e,r)=>{let n=typeof e;if(null!=e&&"boolean"!=n)if("string"==n)r(e);else if("number"==n||"bigint"==n)r(String(e));else if(t(e))"function"==typeof e.nodeName?C(e,r):r(e);else if(Symbol.iterator in Object(e))for(e of e)x(e,r);else r(String(e))},C=({nodeName:e,...t},r)=>{"GeneratorFunction"==e.constructor.name?r(j(e,t)):x(e(t),r)},j=(e,t)=>{let r={...e.attrs},n={...e.args};for(let e of l(t))e.startsWith("attr:")?r[e.slice(5)]=t[e]:"key"==e||"skip"==e||"memo"==e||"ref"==e||e.startsWith("set:")?r[e]=t[e]:n[e]=t[e];return r.nodeName=e.is??y.tag,r[f]=e,r[g]=n,r},E=(e,t,r)=>{for(;t&&t!=r&&3!=t.nodeType;)t=t.nextSibling;return null==t||t==r?t=document.createTextNode(e):t.data!=e&&(t.data=e),t},N=(e,t,r,n)=>{let l=e.nodeName,o=e.key,a=e[f];for(r&&null!=o&&null==n&&(r=t[i]?.get(o)??r);r&&r!=n;){let e=r[s],t=r[f];if(!(r.localName!=l||null!=e&&e!=o||t&&t!=a))break;r=null==e?r.nextElementSibling:null}return(null==r||r==n)&&(r=document.createElementNS(e.xmlns??t.namespaceURI,l)),null!=o&&(t[i]??=new Map).set(r[s]=o,r),(!r[c]||null==e.memo||w(r[m],e.memo))&&(k(r[c],e,r),e.skip||(a?B(a,e[g],r):r[c]||"string"!=typeof e.children&&"number"!=typeof e.children?S(e.children,r):r.textContent=e.children+""),r[m]=e.memo,r[c]=e),r},v=e=>"nodeName"==e||"children"==e||"key"==e||"skip"==e||"memo"==e,k=(e,t,r)=>{if(!e)for(let e=r.attributes.length;e--;){let{name:n}=r.attributes[e];a(t,n)||r.removeAttribute(n)}for(let n in t)if(a(t,n)){let i=t[n];if(e&&e[n]===i||v(n))continue;"ref"==n&&"function"==typeof i?i(r):n.startsWith("set:")?r[n.slice(4)]=i:null==i||!1===i?r.removeAttribute(n):"class"==n&&"string"==typeof r.className?r.className=!0===i?"":i:r.setAttribute(n,!0===i?"":i)}if(e)for(let n in e)if(a(e,n)){if(a(t,n)||v(n))continue;n.startsWith("set:")?r[n.slice(4)]=void 0:r.removeAttribute(n)}},w=(e,t)=>{if(o(e)&&o(t)){if(e.length!=t.length)return!0;for(let r=e.length;r--;)if(e[r]!==t[r])return!0;return!1}return e!==t},A=(e,t,r)=>{if(t.isConnected&&t.contains(document.activeElement)){let n=t.nextSibling;for(;r&&r!=t;){let t=r.nextSibling;e.insertBefore(r,n),r=t}}else e.insertBefore(t,r)},O=(e,t)=>{if(e[m]==O)return;e[m]=O;let r=e;for(;r.firstElementChild;)r=r.firstElementChild;for(;;){let{nextElementSibling:n,parentNode:l}=r;if(null!=r[s]&&(l??t)?.[i]?.delete(r[s]),"function"==typeof r.return&&r.return(!1),"function"==typeof r[c]?.ref&&r[c].ref(null),r==e)break;if(r=n??l??e,n)for(;r.firstElementChild;)r=r.firstElementChild}},B=(t,i,o)=>{o[f]||(T(),r(o,W)[n]=Object.create(e()?.[n]??null),o[f]=t);let s=o[g]??=i;for(let e of l(s))a(i,e)||delete s[e];r(s,i),o[d]()},T=()=>b||(b=new MutationObserver(e=>{for(let t of e)for(let e of t.removedNodes)1==e.nodeType&&!e.isConnected&&O(e,t.target)})).observe(document,{childList:!0,subtree:!0}),W={*[Symbol.iterator](){for(;;)yield this[g]},[d](){let t=e();e(this);try{this[u]||(this.signal=(this[h]=new AbortController).signal,this[u]=this[f].call(this,this[g]));let{value:e,done:t}=this[u].next();S(e,this),t&&this.return()}catch(t){this.throw(t)}finally{e(t)}},next(t,r){if(!1===this[u]||!this.isConnected)return r;try{"function"==typeof t&&(r=t.call(this,this[g]))}catch(t){return this.throw(t)}return e()?.contains(this)||this[d](),r},throw(e){for(let t=this;t;t=t.parentNode)if(t[u]?.throw)try{return S(t[u].throw(e).value,t)}catch(t){e=Error(t?.message??t,{cause:e})}throw e},return(e=!0){let t=this[u];if(!1!==t){this[u]=!1,e&&((e,t)=>{let r=t.firstElementChild;for(;r;)if(e(r)&&r.firstElementChild)r=r.firstElementChild;else{for(;r!=t&&!r.nextElementSibling;)r=r.parentNode??t;r=r!=t&&r.nextElementSibling}})(e=>"function"!=typeof e.return||e.return(),this);try{t?.return()}catch(e){this.throw(e)}finally{this[u]=null,this[h]?.abort()}}}};export{y as defaults,S as render,p as stateful};

package/dist/jsx.js

@@ -1,12 +1 @@
-const l = (e) => e.children, i = (e, n, ...t) => ((n ??= {}).nodeName = e, !("children" in n) && t.length && (n.children = t.length == 1 ? t[0] : t), n);
-function c(e, n, t) {
-  return t != null && ((n ??= {}).key = t), i(e, n);
-}
-const s = c, u = c;
-export {
-  l as Fragment,
-  i as h,
-  c as jsx,
-  u as jsxDEV,
-  s as jsxs
-};
+var t=Symbol(),n=a=>(a[t]=a,a),e=a=>a?.[t]===a,o=a=>a.children;function r(a,s,e){return(s??={}).nodeName=a,null!=e&&(s.key=e),n(s)}var a=r,l=r;export{o as Fragment,e as isVNode,r as jsx,l as jsxDEV,a as jsxs,n as mark};

package/html.js

@@ -1,4 +1,7 @@
 import { Context, current } from './context.js'
+import { isVNode } from './jsx.js'
+
+const { keys } = Object
 
 const Void = new Set(['area', 'base', 'br', 'col', 'command', 'embed', 'hr', 'img', 'input', 'keygen', 'link', 'meta', 'param', 'source', 'track', 'wbr'])
 
@@ -6,6 +9,8 @@ const Args = Symbol.for('ajo.args')
 
 const escape = s => s.replace(/[&<>"']/g, c => `&#${c.charCodeAt(0)};`)
 
+const Tag = /^[A-Za-z][\w:.-]*$/, Attr = /^[^\s"'/>=\0-\x1F\x7F]+$/
+
 const noop = () => { }
 
 export const defaults = { tag: 'div' }
@@ -31,33 +36,33 @@ export const html = (h, emit) => {
 
 	else if (type == 'number' || type == 'bigint') emit(escape(String(h)))
 
-	else if (Symbol.iterator in h) for (h of h) html(h, emit)
+	else if (isVNode(h)) typeof h.nodeName == 'function' ? run(h, emit) : element(h, emit)
 
-	else if ('nodeName' in h) typeof h.nodeName == 'function' ? run(h, emit) : element(h, emit)
+	else if (Symbol.iterator in Object(h)) for (h of h) html(h, emit)
 
 	else emit(escape(String(h)))
 }
 
 const element = (h, emit) => {
 
-	const { nodeName, children } = h
+	let { nodeName, children } = h
+
+	nodeName = typeof nodeName == 'string' && Tag.test(nodeName) ? nodeName : defaults.tag
 
 	let a = ''
 
-	for (const key in h) {
+	for (const key of keys(h)) {
 
-		if (key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:') || h[key] == null || h[key] === false) continue
+		if (key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:') || !Attr.test(key) || h[key] == null || h[key] === false) continue
 
 		if (h[key] === true) a += ` ${key}`
 
 		else a += ` ${key}="${escape(String(h[key]))}"`
 	}
 
-	if (Void.has(nodeName)) emit(`<${nodeName}${a}>`)
+	emit(`<${nodeName}${a}>`)
 
-	else {
-
-		emit(`<${nodeName}${a}>`)
+	if (!Void.has(nodeName)) {
 
 		if (children != null) html(children, emit)
 
@@ -65,7 +70,7 @@ const element = (h, emit) => {
 	}
 }
 
-const run = ({ nodeName, fallback = nodeName.fallback, ...h }, emit) => {
+const run = ({ nodeName, ...h }, emit) => {
 
 	if (nodeName.constructor.name == 'GeneratorFunction') runGenerator(nodeName, h, emit)
 
@@ -76,7 +81,7 @@ const runGenerator = (fn, h, emit) => {
 
 	const attrs = { ...fn.attrs }, args = { ...fn.args }
 
-	for (const key in h) {
+	for (const key of keys(h)) {
 
 		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
 
@@ -85,6 +90,8 @@ const runGenerator = (fn, h, emit) => {
 		else args[key] = h[key]
 	}
 
+	attrs.nodeName = fn.is ?? defaults.tag
+
 	const controller = new AbortController()
 
 	const instance = {
@@ -110,19 +117,23 @@ const runGenerator = (fn, h, emit) => {
 
 	current(instance)
 
-	const vnode = children => ({ ...attrs, nodeName: fn.is ?? defaults.tag, children })
-
 	let out = ''
 
+	const write = chunk => out += chunk
+
 	try {
 
-		element(vnode(iterator.next().value), chunk => out += chunk)
+		attrs.children = iterator.next().value
+
+		element(attrs, write)
 
 	} catch (error) {
 
 		out = ''
 
-		element(vnode(iterator.throw(error).value), chunk => out += chunk)
+		attrs.children = iterator.throw(error).value
+
+		element(attrs, write)
 
 	} finally {
 

package/index.js

@@ -1,6 +1,7 @@
 import { Context, current } from './context.js'
+import { isVNode } from './jsx.js'
 
-const { isArray } = Array, { assign, create } = Object
+const { isArray } = Array, { assign, hasOwn, keys } = Object
 
 const Key = Symbol.for('ajo.key')
 const Keyed = Symbol.for('ajo.keyed')
@@ -20,7 +21,7 @@ export const render = (h, el, child = el.firstChild, ref = null) => {
 
 	walk(h, h => {
 
-		const node = typeof h == 'string' ? text(h, child) : element(h, el, child)
+		const node = typeof h == 'string' ? text(h, child, ref) : element(h, el, child, ref)
 
 		if (child == null) {
 
@@ -32,7 +33,9 @@ export const render = (h, el, child = el.firstChild, ref = null) => {
 
 		} else if (node == child.nextSibling) {
 
-			before(el, child, ref)
+			if (child.contains(document.activeElement)) el.insertBefore(node, child)
+
+			else el.insertBefore(child, ref)
 
 			child = node.nextSibling
 
@@ -42,33 +45,41 @@ export const render = (h, el, child = el.firstChild, ref = null) => {
 		}
 	})
 
-	while (child != ref) {
+	if (child && !ref && child == el.firstChild) {
 
-		const node = child.nextSibling
+		const gone = [...el.children]
+
+		el[Keyed]?.clear()
+
+		el.textContent = ''
 
-		if (child.nodeType == 1) unref(child)
+		for (const node of gone) unref(node)
+
+	} else while (child && child != ref) {
+
+		const node = child.nextSibling
 
 		el.removeChild(child)
 
+		if (child.nodeType == 1) unref(child, el)
+
 		child = node
 	}
 }
 
 const walk = (h, fn) => {
 
-	if (h == null) return
-
 	const type = typeof h
 
-	if (type == 'boolean') return
+	if (h == null || type == 'boolean') return
 
 	if (type == 'string') fn(h)
 
 	else if (type == 'number' || type == 'bigint') fn(String(h))
 
-	else if (Symbol.iterator in h) for (h of h) walk(h, fn)
+	else if (isVNode(h)) typeof h.nodeName == 'function' ? run(h, fn) : fn(h)
 
-	else if ('nodeName' in h) typeof h.nodeName == 'function' ? run(h, fn) : fn(h)
+	else if (Symbol.iterator in Object(h)) for (h of h) walk(h, fn)
 
 	else fn(String(h))
 }
@@ -84,7 +95,7 @@ const runGenerator = (fn, h) => {
 
 	const attrs = { ...fn.attrs }, args = { ...fn.args }
 
-	for (const key in h) {
+	for (const key of keys(h)) {
 
 		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
 
@@ -93,65 +104,117 @@ const runGenerator = (fn, h) => {
 		else args[key] = h[key]
 	}
 
-	return { ...attrs, nodeName: fn.is ?? defaults.tag, [Generator]: fn, [Args]: args }
+	attrs.nodeName = fn.is ?? defaults.tag
+
+	attrs[Generator] = fn
+
+	attrs[Args] = args
+
+	return attrs
 }
 
-const text = (h, node) => {
+const text = (h, node, ref) => {
+
+	while (node && node != ref && node.nodeType != 3) node = node.nextSibling
 
-	while (node && node.nodeType != 3) node = node.nextSibling
+	if (node == null || node == ref) node = document.createTextNode(h)
 
-	node ? node.data != h && (node.data = h) : node = document.createTextNode(h)
+	else if (node.data != h) node.data = h
 
 	return node
 }
 
-const element = (h, el, node) => {
+const element = (h, el, node, ref) => {
 
-	const { nodeName, children, key, skip, memo, [Generator]: gen, [Args]: args } = h
+	const nodeName = h.nodeName, key = h.key, gen = h[Generator]
 
-	if (key != null) node = (el[Keyed] ??= new Map()).get(key) ?? node
+	if (node && key != null && ref == null) node = el[Keyed]?.get(key) ?? node
 
-	while (node && (
+	while (node && node != ref) {
 
-		(node.localName != nodeName) ||
+		const k = node[Key], g = node[Generator]
 
-		(node[Key] != null && node[Key] != key) ||
+		if (node.localName == nodeName && (k == null || k == key) && (!g || g == gen)) break
 
-		(node[Generator] && node[Generator] != gen)
+		node = k != null ? null : node.nextElementSibling
+	}
 
-	)) node = node[Key] != null ? null : node.nextElementSibling
+	if (node == null || node == ref) node = document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
 
-	node ??= document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
+	if (key != null) (el[Keyed] ??= new Map()).set(node[Key] = key, node)
 
-	if (key != null) el[Keyed].set(node[Key] = key, node)
+	if (!node[Cache] || h.memo == null || some(node[Memo], h.memo)) {
 
-	if (memo == null || some(node[Memo], node[Memo] = memo)) {
+		attrs(node[Cache], h, node)
 
-		attrs(node[Cache], node[Cache] = h, node)
+		if (!h.skip) {
 
-		if (!skip) gen ? next(gen, args, node) : render(children, node)
+			if (gen) next(gen, h[Args], node)
+
+			else if (!node[Cache] && (typeof h.children == 'string' || typeof h.children == 'number')) node.textContent = h.children + ''
+
+			else render(h.children, node)
+		}
+
+		node[Memo] = h.memo
+
+		node[Cache] = h
 	}
 
 	return node
 }
 
+const special = key => key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo'
+
 const attrs = (cache, h, node) => {
 
-	for (const key in { ...cache, ...h }) {
+	if (!cache) for (let i = node.attributes.length; i--;) {
 
-		if (key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo' || cache?.[key] === h[key]) continue
+		const { name } = node.attributes[i]
 
-		if (key == 'ref' && typeof h[key] == 'function') h[key](node)
+		if (!hasOwn(h, name)) node.removeAttribute(name)
+	}
 
-		else if (key.startsWith('set:')) node[key.slice(4)] = h[key]
+	for (const key in h) if (hasOwn(h, key)) {
 
-		else if (h[key] == null || h[key] === false) node.removeAttribute(key)
+		const value = h[key]
 
-		else node.setAttribute(key, h[key] === true ? '' : h[key])
+		if (cache && cache[key] === value || special(key)) continue
+
+		if (key == 'ref' && typeof value == 'function') value(node)
+
+		else if (key.startsWith('set:')) node[key.slice(4)] = value
+
+		else if (value == null || value === false) node.removeAttribute(key)
+
+		else if (key == 'class' && typeof node.className == 'string') node.className = value === true ? '' : value
+
+		else node.setAttribute(key, value === true ? '' : value)
+	}
+
+	if (cache) for (const key in cache) if (hasOwn(cache, key)) {
+
+		if (hasOwn(h, key) || special(key)) continue
+
+		if (key.startsWith('set:')) node[key.slice(4)] = undefined
+
+		else node.removeAttribute(key)
 	}
 }
 
-const some = (a, b) => isArray(a) && isArray(b) ? a.some((v, i) => v !== b[i]) : a !== b
+const some = (a, b) => {
+
+	if (isArray(a) && isArray(b)) {
+
+		if (a.length != b.length) return true
+
+		for (let i = a.length; i--;) if (a[i] !== b[i]) return true
+
+		return false
+	}
+
+	return a !== b
+}
 
 const each = (fn, node) => {
 
@@ -187,7 +250,11 @@ const before = (el, node, child) => {
 	} else el.insertBefore(node, child)
 }
 
-const unref = root => {
+const unref = (root, parent) => {
+
+	if (root[Memo] == unref) return
+
+	root[Memo] = unref
 
 	let node = root
 
@@ -197,13 +264,13 @@ const unref = root => {
 
 		const { nextElementSibling, parentNode } = node
 
-		if (node[Key] != null) parentNode?.[Keyed]?.delete(node[Key])
+		if (node[Key] != null) (parentNode ?? parent)?.[Keyed]?.delete(node[Key])
 
 		if (typeof node.return == 'function') node.return(false)
 
 		if (typeof node[Cache]?.ref == 'function') node[Cache].ref(null)
 
-		if (node === root) break
+		if (node == root) break
 
 		node = nextElementSibling ?? parentNode ?? root
 
@@ -213,13 +280,32 @@ const unref = root => {
 
 const next = (fn, args, el) => {
 
-	el[Generator] ??= (assign(el, methods)[Context] = create(current()?.[Context] ?? null), fn)
+	if (!el[Generator]) {
 
-	el[Args] = args
+		watch()
+
+		assign(el, methods)[Context] = Object.create(current()?.[Context] ?? null)
+
+		el[Generator] = fn
+	}
+
+	const prev = el[Args] ??= args
+
+	for (const key of keys(prev)) if (!hasOwn(args, key)) delete prev[key]
+
+	assign(prev, args)
 
 	el[Render]()
 }
 
+let observer
+
+const watch = () => observer || (observer = new MutationObserver(records => {
+
+	for (const record of records) for (const node of record.removedNodes) if (node.nodeType == 1 && !node.isConnected) unref(node, record.target)
+
+})).observe(document, { childList: true, subtree: true })
+
 const methods = {
 
 	*[Symbol.iterator]() { while (true) yield this[Args] },
@@ -257,7 +343,7 @@ const methods = {
 
 	next(fn, result) {
 
-		if (!this.isConnected) return result
+		if (this[Iterator] === false || !this.isConnected) return result
 
 		try {
 
@@ -289,11 +375,17 @@ const methods = {
 
 	return(deep = true) {
 
+		const iterator = this[Iterator]
+
+		if (iterator === false) return
+
+		this[Iterator] = false
+
 		if (deep) each(el => typeof el.return == 'function' ? el.return() : true, this)
 
 		try {
 
-			this[Iterator]?.return()
+			iterator?.return()
 
 		} catch (e) {
 

package/jsx.js

@@ -1,21 +1,20 @@
-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 function jsx(type, props, key) {
-
-	if (key != null) (props ??= {}).key = key
-
-	return h(type, props)
-}
-
-export const jsxs = jsx
-
-export const jsxDEV = jsx
+const VNode = Symbol()
+
+export const mark = v => (v[VNode] = v, v)
+
+export const isVNode = v => v?.[VNode] === v
+
+export const Fragment = props => props.children
+
+export function jsx(type, props, key) {
+
+	(props ??= {}).nodeName = type
+
+	if (key != null) props.key = key
+
+	return mark(props)
+}
+
+export const jsxs = jsx
+
+export const jsxDEV = jsx

package/license

@@ -1,15 +1,15 @@
-ISC License
-
-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
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
-REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
-AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
-INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
-LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
-OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
-PERFORMANCE OF THIS SOFTWARE.
+ISC License
+
+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
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE
+OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.

package/package.json

@@ -1,40 +1,34 @@
 {
   "name": "ajo",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "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": {
     ".": {
       "react-native": "./index.js",
       "types": "./types.ts",
-      "import": "./dist/index.js",
-      "require": "./dist/index.cjs"
+      "import": "./dist/index.js"
     },
     "./context": {
       "react-native": "./context.js",
       "types": "./types.ts",
-      "import": "./dist/context.js",
-      "require": "./dist/context.cjs"
+      "import": "./dist/context.js"
     },
     "./html": {
       "types": "./types.ts",
-      "import": "./dist/html.js",
-      "require": "./dist/html.cjs"
+      "import": "./dist/html.js"
     },
     "./jsx-runtime": {
       "react-native": "./jsx.js",
       "types": "./types.ts",
-      "import": "./dist/jsx.js",
-      "require": "./dist/jsx.cjs"
+      "import": "./dist/jsx.js"
     },
     "./jsx-dev-runtime": {
       "react-native": "./jsx.js",
       "types": "./types.ts",
-      "import": "./dist/jsx.js",
-      "require": "./dist/jsx.cjs"
+      "import": "./dist/jsx.js"
     }
   },
   "files": [
@@ -47,12 +41,12 @@
     "types.ts"
   ],
   "devDependencies": {
-    "@types/node": "25.3.1",
-    "happy-dom": "20.7.0",
-    "typescript": "5.9.3",
-    "vite": "7.3.1",
-    "vite-tsconfig-paths": "6.1.1",
-    "vitest": "4.0.18"
+    "@types/node": "26.0.0",
+    "happy-dom": "20.10.6",
+    "terser": "5.48.0",
+    "typescript": "6.0.3",
+    "vite": "8.0.16",
+    "vitest": "4.1.9"
   },
   "keywords": [
     "ui",
@@ -61,13 +55,19 @@
     "dom",
     "jsx"
   ],
-  "repository": "cristianfalcone/ajo",
+  "repository": {
+    "type": "git",
+    "url": "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",
+    "bench": "pnpm --dir bench bench",
+    "bench:quick": "pnpm --dir bench bench:quick",
+    "bench:ajo": "pnpm --dir bench bench:ajo",
     "build": "vite build",
     "bump": "pnpm version patch && git push && git push --tags",
     "release": "pnpm test && pnpm build && pnpm bump && pnpm publish"

package/readme.md

@@ -226,7 +226,7 @@ function* ErrorBoundary() {
 | `key` | Unique identifier for list reconciliation |
 | `ref` | Callback receiving DOM element (or `null` on unmount) |
 | `memo` | Skip reconciliation: `memo={[deps]}`, `memo={value}`, or `memo` (render once) |
-| `skip` | Exclude children from reconciliation (required with `set:innerHTML`) |
+| `skip` | Exclude children from reconciliation; not a sanitizer |
 | `set:*` | Set DOM properties instead of HTML attributes |
 | `attr:*` | Force HTML attributes on stateful component wrappers |
 
@@ -243,8 +243,8 @@ function* ErrorBoundary() {
 <input type="checkbox" set:checked={bool} />
 <video set:currentTime={0} set:muted />
 
-// innerHTML requires skip
-<div set:innerHTML={html} skip />
+// innerHTML is only for trusted/sanitized HTML; skip preserves assigned children
+<div set:innerHTML={trustedHtml} skip />
 ```
 
 ### `ref` - DOM Access
@@ -254,13 +254,13 @@ function* AutoFocus() {
 
   let input = null
 
-  while (true) yield (
-    <>
-      <input ref={el => el?.focus()} />
-      <button set:onclick={() => input?.select()}>Select</button>
-    </>
-  )
-}
+  while (true) yield (
+    <>
+      <input ref={el => { input = el; el?.focus() }} />
+      <button set:onclick={() => input?.select()}>Select</button>
+    </>
+  )
+}
 
 // Ref to stateful component includes control methods
 let timer = null
@@ -424,8 +424,9 @@ let ref: ThisParameterType<typeof Counter> | null = null
 ### `ajo/html`
 | Export | Description |
 |--------|-------------|
-| `render(children)` | Render to HTML string. |
-| `html(children)` | Render to HTML generator (yields strings). |
+| `render(children)` | Render to HTML string. |
+| `html(children, emit)` | Render to HTML chunks by calling `emit(chunk)`. |
+| `defaults` | Default SSR wrapper tag config (`defaults.tag`). |
 
 ### Stateful `this`
 | Property | Description |
@@ -434,7 +435,7 @@ let ref: ThisParameterType<typeof Counter> | null = null
 | `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(deep?)` | Terminate generator. Pass `true` to also terminate child generators. |
+| `this.return(deep?)` | Terminate generator. Deep cleanup is the default; pass `false` to skip child generators. |
 
 `this` is also the wrapper element (`this.addEventListener()`, etc).
 

package/types.ts

@@ -2,7 +2,7 @@ declare module 'ajo' {
 
 	type Tag = keyof (HTMLElementTagNameMap & SVGElementTagNameMap)
 
-	type Type = Tag | (string & {}) | Stateless | Stateful
+	type Type = Tag | (string & {}) | Stateless<any> | Stateful<any, any>
 
 	type Children = unknown
 
@@ -35,6 +35,12 @@ declare module 'ajo' {
 		[key: `attr:${string}`]: unknown
 	}
 
+	type CommonAttrs = {
+		class: string | boolean | null,
+		style: string | boolean | null,
+		xmlns: string,
+	}
+
 	interface Defaults { }
 
 	type DefaultTag = Defaults extends { tag: infer T extends string } ? T : 'div'
@@ -46,7 +52,7 @@ declare module 'ajo' {
 	type Stateful<TArgs extends Args = {}, TTag extends string = DefaultTag> = {
 		(this: StatefulElement<TArgs, TTag>, args: TArgs): Iterator<Children>
 	} & (TTag extends DefaultTag ? { is?: TTag } : { is: TTag }) & {
-		attrs?: Partial<PropSetter<TTag>> & Args,
+		attrs?: Partial<PropSetter<TTag> & CommonAttrs> & Args,
 		args?: Partial<TArgs>,
 	}
 
@@ -60,13 +66,16 @@ declare module 'ajo' {
 	type StatefulElement<TArgs, TTag> = ElementType<TTag> & {
 		[Symbol.iterator](): Iterator<TArgs>,
 		signal: AbortSignal,
-		next: <R>(fn?: (this: StatefulElement<TArgs, TTag>, args: TArgs) => R) => R,
+		next: {
+			(): undefined,
+			<R>(fn: (this: StatefulElement<TArgs, TTag>, args: TArgs) => R): R,
+		},
 		throw: (value?: unknown) => void,
 		return: (deep?: boolean) => void,
 	}
 
 	type HTMLIntrinsicElements = {
-		[TTag in Tag]: Partial<PropSetter<TTag> & SpecialAttrs<ElementType<TTag>>> & Args
+		[TTag in Tag]: Partial<PropSetter<TTag> & SpecialAttrs<ElementType<TTag>> & CommonAttrs> & Args
 	}
 
 	interface IntrinsicElements extends HTMLIntrinsicElements { }
@@ -82,7 +91,7 @@ declare module 'ajo' {
 				: P
 			: P
 
-	function render(h: Children, el: ParentNode, child?: ChildNode, ref?: ChildNode): void
+	function render(h: Children, el: ParentNode, child?: ChildNode | null, ref?: ChildNode | null): void
 
 	function stateful<TArgs extends Args, TTag extends string = DefaultTag>(
 		fn: (this: StatefulElement<TArgs, TTag>, args: TArgs) => Iterator<Children>,
@@ -105,9 +114,8 @@ declare module 'ajo/html' {
 }
 
 declare module 'ajo/jsx-runtime' {
-	import { Type, Args, VNode, Children, ElementChildrenAttribute, IntrinsicElements as _IE } from 'ajo'
+	import { Type, Args, VNode, ElementChildrenAttribute, IntrinsicElements as _IE } from 'ajo'
 	export function Fragment({ children }: ElementChildrenAttribute): typeof children
-	export function h(tag: Type, attrs?: Args | null, ...children: Children[]): VNode
 	export function jsx(type: Type, props: Args | null, key?: string | number): VNode
 	export function jsxs(type: Type, props: Args | null, key?: string | number): VNode
 	export function jsxDEV(type: Type, props: Args | null, key?: string | number): VNode
@@ -120,7 +128,7 @@ declare module 'ajo/jsx-runtime' {
 
 declare module 'ajo/jsx-dev-runtime' {
 	import { IntrinsicElements as _IE } from 'ajo'
-	export { Fragment, h, jsx, jsxs, jsxDEV } from 'ajo/jsx-runtime'
+	export { Fragment, jsx, jsxs, jsxDEV } from 'ajo/jsx-runtime'
 	export namespace JSX {
 		type ElementChildrenAttribute = import('ajo').ElementChildrenAttribute
 		type LibraryManagedAttributes<C, P> = import('ajo').ManagedAttributes<C, P>

package/dist/context.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=Symbol.for("ajo.context"),r=(t,e=Symbol())=>function(...l){const n=this??c;return n?l.length?n[o][e]=l[0]:e in n[o]?n[o][e]:t:t};let c=null;const u=(...t)=>t.length?c=t[0]:c;exports.Context=o;exports.context=r;exports.current=u;

package/dist/html.cjs

@@ -1 +0,0 @@
-"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/index.cjs

@@ -1 +0,0 @@
-"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;

package/dist/jsx.cjs

@@ -1 +0,0 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=e=>e.children,c=(e,n,...t)=>((n??={}).nodeName=e,!("children"in n)&&t.length&&(n.children=t.length==1?t[0]:t),n);function s(e,n,t){return t!=null&&((n??={}).key=t),c(e,n)}const j=s,l=s;exports.Fragment=i;exports.h=c;exports.jsx=s;exports.jsxDEV=l;exports.jsxs=j;