ajo 0.1.33 → 0.1.34

package/LLMs.md

@@ -117,6 +117,7 @@ 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; it does not sanitize `set:innerHTML` |
@@ -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
@@ -337,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',
@@ -349,4 +357,30 @@ export default defineConfig({
 })
 ```
 
+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/dist/html.js

@@ -1 +1 @@
-import{isVNode as t,mark as n}from"./jsx.js";import{Context as e,current as o}from"./context.js";var{keys:r}=Object,a=new Set(["area","base","br","col","command","embed","hr","img","input","keygen","link","meta","param","source","track","wbr"]),l=Symbol.for("ajo.args"),s=e=>e.replace(/[&<>"']/g,e=>`&#${e.charCodeAt(0)};`),i=/^[A-Za-z][\w:.-]*$/,m=/^[^\s"'/>=\0-\x1F\x7F]+$/,f=()=>{},c={tag:"div"},u=e=>{let t="";return d(e,e=>t+=e),t},d=(e,r)=>{if(null==e)return;let a=typeof e;if("boolean"!=a)if("string"==a)r(s(e));else if("number"==a||"bigint"==a)r(s(String(e)));else if(t(e))"function"==typeof e.nodeName?b(e,r):g(e,r);else if(Symbol.iterator in Object(e))for(e of e)d(e,r);else r(s(String(e)))},g=(e,t)=>{let{nodeName:o,children:n}=e;o="string"==typeof o&&i.test(o)?o:c.tag;let l="";for(let t of r(e))"nodeName"==t||"children"==t||"key"==t||"skip"==t||"memo"==t||"ref"==t||t.startsWith("set:")||!m.test(t)||null==e[t]||!1===e[t]||(!0===e[t]?l+=` ${t}`:l+=` ${t}="${s(String(e[t]))}"`);t(`<${o}${l}>`),a.has(o)||(null!=n&&d(n,t),t(`</${o}>`))},b=({nodeName:e,...t},r)=>{"GeneratorFunction"==e.constructor.name?h(e,t,r):d(e(t),r)},h=(t,a,s)=>{let i={...t.attrs},m={...t.args};for(let e of r(a))e.startsWith("attr:")?i[e.slice(5)]=a[e]:"key"==e||"skip"==e||"memo"==e||"ref"==e||e.startsWith("set:")?i[e]=a[e]:m[e]=a[e];let u=new AbortController,d={*[Symbol.iterator](){for(;;)yield this[l]},[e]:Object.create(o()?.[e]??null),[l]:m,signal:u.signal,next:f,return:f,throw:e=>{throw e}},b=t.call(d,m),h=o();o(d);let y=e=>n({...i,nodeName:t.is??c.tag,children:e}),p="";try{g(y(b.next().value),e=>p+=e)}catch(t){p="",g(y(b.throw(t).value),e=>p+=e)}finally{b.return(),u.abort(),o(h)}s(p)};export{c as defaults,d as html,u 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 +1 @@
-import{isVNode as t,mark as n}from"./jsx.js";import{Context as e,current as o}from"./context.js";var y,{isArray:r}=Array,{assign:a,hasOwn:l,keys:s}=Object,i=Symbol.for("ajo.key"),m=Symbol.for("ajo.keyed"),f=Symbol.for("ajo.memo"),c=Symbol.for("ajo.cache"),u=Symbol.for("ajo.generator"),d=Symbol.for("ajo.iterator"),g=Symbol.for("ajo.render"),b=Symbol.for("ajo.args"),h=Symbol.for("ajo.controller"),p={tag:"div"},S=(e,t)=>(t&&(e.is=t),e),x=(e,t,r=t.firstChild,n=null)=>{if(C(e,e=>{let i="string"==typeof e?E(e,r,n):k(e,t,r,n);null==r?A(t,i,n):i==r?r=i.nextSibling:i==r.nextSibling?(A(t,r,n),r=i.nextSibling):A(t,i,r)}),r&&!n&&r==t.firstChild){let e=[];for(t[m]?.clear();r;)e.push(r),r=r.nextSibling;for(r of(t.textContent="",e))1==r.nodeType&&O(r)}else for(;r&&r!=n;){let e=r.nextSibling,n=t.removeChild(r);1==n.nodeType&&O(n,t),r=e}},C=(e,r)=>{if(null==e)return;let n=typeof e;if("boolean"!=n)if("string"==n)r(e);else if("number"==n||"bigint"==n)r(String(e));else if(t(e))"function"==typeof e.nodeName?N(e,r):r(e);else if(Symbol.iterator in Object(e))for(e of e)C(e,r);else r(String(e))},N=({nodeName:e,...t},r)=>{"GeneratorFunction"==e.constructor.name?r(j(e,t)):C(e(t),r)},j=(e,t)=>{let r={...e.attrs},i={...e.args};for(let e of s(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]:i[e]=t[e];return n({...r,nodeName:e.is??p.tag,[u]:e,[b]:i})},E=(e,t,r)=>{for(;t&&t!=r&&3!=t.nodeType;)t=t.nextSibling;return t&&t!=r?t.data!=e&&(t.data=e):t=document.createTextNode(e),t},k=(e,t,r,n)=>{let o=e.nodeName,l=e.key,s=e[u];for(r&&null!=l&&null==n&&(r=(t[m]??=new Map).get(l)??r);r&&r!=n&&(r.localName!=o||null!=r[i]&&r[i]!=l||r[u]&&r[u]!=s);)r=null==r[i]?r.nextElementSibling:null;return r==n&&(r=null),r??=document.createElementNS(e.xmlns??t.namespaceURI,o),null!=l&&(t[m]??=new Map).set(r[i]=l,r),(!r[c]||null==e.memo||w(r[f],e.memo))&&(v(r[c],e,r),e.skip||(s?T(s,e[b],r):r[c]||"string"!=typeof e.children&&"number"!=typeof e.children?x(e.children,r):r.textContent=e.children+""),r[f]=e.memo,r[c]=e),r},v=(e,t,r)=>{if(!e)for(let e=r.attributes.length;e--;)l(t,r.attributes[e].name)||r.removeAttribute(r.attributes[e].name);for(let n in t)if(l(t,n)){let i=t[n];if(e&&e[n]===i||"nodeName"==n||"children"==n||"key"==n||"skip"==n||"memo"==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(l(e,n)){if(l(t,n)||"nodeName"==n||"children"==n||"key"==n||"skip"==n||"memo"==n)continue;n.startsWith("set:")?r[n.slice(4)]=void 0:r.removeAttribute(n)}},w=(e,t)=>{if(r(e)&&r(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[f]==O)return;e[f]=O;let r=e;for(;r.firstElementChild;)r=r.firstElementChild;for(;;){let{nextElementSibling:n,parentNode:o}=r;if(null!=r[i]&&(o??t)?.[m]?.delete(r[i]),"function"==typeof r.return&&r.return(!1),"function"==typeof r[c]?.ref&&r[c].ref(null),r===e)break;if(r=n??o??e,n)for(;r.firstElementChild;)r=r.firstElementChild}},T=(t,r,n)=>{n[u]??=(W(),a(n,M)[e]=Object.create(o()?.[e]??null),t);for(let e of s(n[b]??=r))l(r,e)||delete n[b][e];a(n[b],r),n[g]()},W=()=>y||(y=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}),M={*[Symbol.iterator](){for(;;)yield this[b]},[g](){let e=o();o(this);try{this[d]||(this.signal=(this[h]=new AbortController).signal,this[d]=this[u].call(this,this[b]));let{value:e,done:t}=this[d].next();x(e,this),t&&this.return()}catch(e){this.throw(e)}finally{o(e)}},next(e,t){if(!1===this[d]||!this.isConnected)return t;try{"function"==typeof e&&(t=e.call(this,this[b]))}catch(e){return this.throw(e)}return o()?.contains(this)||this[g](),t},throw(e){for(let t=this;t;t=t.parentNode)if(t[d]?.throw)try{return x(t[d].throw(e).value,t)}catch(t){e=Error(t?.message??t,{cause:e})}throw e},return(e=!0){if(!1===this[d])return;let t=this[d];this[d]=!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[d]=null,this[h]?.abort()}}};export{p as defaults,x as render,S 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 +1 @@
-var t=Symbol.for("ajo.vnode"),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};
+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,17 +1,17 @@
-import { Context, current } from './context.js'
-import { isVNode, mark } 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'])
-
-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 = () => { }
+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'])
+
+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' }
 
@@ -24,53 +24,53 @@ export const render = h => {
 	return out
 }
 
-export const html = (h, emit) => {
-
-	if (h == null) return
-
-	const type = typeof h
-
-	if (type == 'boolean') return
+export const html = (h, emit) => {
+
+	if (h == null) return
+
+	const type = typeof h
+
+	if (type == 'boolean') return
 
 	if (type == 'string') emit(escape(h))
 
-	else if (type == 'number' || type == 'bigint') emit(escape(String(h)))
+	else if (type == 'number' || type == 'bigint') emit(escape(String(h)))
 
-	else if (isVNode(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)))
-}
+	else if (isVNode(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) => {
 
-	let { nodeName, children } = h
-
-	nodeName = typeof nodeName == 'string' && Tag.test(nodeName) ? nodeName : defaults.tag
-
-	let a = ''
-
-	for (const key of keys(h)) {
-
-		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]))}"`
-	}
-
-	emit(`<${nodeName}${a}>`)
-
-	if (!Void.has(nodeName)) {
-
-		if (children != null) html(children, emit)
-
-		emit(`</${nodeName}>`)
+	let { nodeName, children } = h
+
+	nodeName = typeof nodeName == 'string' && Tag.test(nodeName) ? nodeName : defaults.tag
+
+	let a = ''
+
+	for (const key of keys(h)) {
+
+		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]))}"`
+	}
+
+	emit(`<${nodeName}${a}>`)
+
+	if (!Void.has(nodeName)) {
+
+		if (children != null) html(children, emit)
+
+		emit(`</${nodeName}>`)
 	}
 }
 
-const run = ({ nodeName, ...h }, emit) => {
+const run = ({ nodeName, ...h }, emit) => {
 
 	if (nodeName.constructor.name == 'GeneratorFunction') runGenerator(nodeName, h, emit)
 
@@ -81,7 +81,7 @@ const runGenerator = (fn, h, emit) => {
 
 	const attrs = { ...fn.attrs }, args = { ...fn.args }
 
-	for (const key of keys(h)) {
+	for (const key of keys(h)) {
 
 		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
 
@@ -90,11 +90,13 @@ const runGenerator = (fn, h, emit) => {
 		else args[key] = h[key]
 	}
 
+	attrs.nodeName = fn.is ?? defaults.tag
+
 	const controller = new AbortController()
 
 	const instance = {
 
-		*[Symbol.iterator]() { while (true) yield this[Args] },
+		*[Symbol.iterator]() { while (true) yield this[Args] },
 
 		[Context]: Object.create(current()?.[Context] ?? null),
 
@@ -115,19 +117,23 @@ const runGenerator = (fn, h, emit) => {
 
 	current(instance)
 
-	const vnode = children => mark({ ...attrs, nodeName: fn.is ?? defaults.tag, children })
-
-	let out = ''
-
-	try {
-
-		element(vnode(iterator.next().value), chunk => out += chunk)
-
-	} catch (error) {
-
-		out = ''
-
-		element(vnode(iterator.throw(error).value), chunk => out += chunk)
+	let out = ''
+
+	const write = chunk => out += chunk
+
+	try {
+
+		attrs.children = iterator.next().value
+
+		element(attrs, write)
+
+	} catch (error) {
+
+		out = ''
+
+		attrs.children = iterator.throw(error).value
+
+		element(attrs, write)
 
 	} finally {
 

package/index.js

@@ -1,375 +1,401 @@
-import { Context, current } from './context.js'
-import { isVNode, mark } from './jsx.js'
-
-const { isArray } = Array, { assign, hasOwn, keys } = Object
-
-const Key = Symbol.for('ajo.key')
-const Keyed = Symbol.for('ajo.keyed')
-const Memo = Symbol.for('ajo.memo')
-const Cache = Symbol.for('ajo.cache')
-const Generator = Symbol.for('ajo.generator')
-const Iterator = Symbol.for('ajo.iterator')
-const Render = Symbol.for('ajo.render')
-const Args = Symbol.for('ajo.args')
-const Controller = Symbol.for('ajo.controller')
-
-export const defaults = { tag: 'div' }
-
-export const stateful = (fn, is) => (is && (fn.is = is), fn)
-
-export const render = (h, el, child = el.firstChild, ref = null) => {
-
-	walk(h, h => {
-
-		const node = typeof h == 'string' ? text(h, child, ref) : element(h, el, child, ref)
-
-		if (child == null) {
-
-			before(el, node, ref)
-
-		} else if (node == child) {
-
-			child = node.nextSibling
-
-		} else if (node == child.nextSibling) {
-
-			before(el, child, ref)
-
-			child = node.nextSibling
-
-		} else {
-
-			before(el, node, child)
-		}
-	})
-
-	if (child && !ref && child == el.firstChild) {
-
-		const gone = []
-
-		el[Keyed]?.clear()
-
-		while (child) gone.push(child), child = child.nextSibling
-
-		el.textContent = ''
-
-		for (child of gone) if (child.nodeType == 1) unref(child)
-
-	} else while (child && child != ref) {
-
-		const node = child.nextSibling
-
-		const gone = el.removeChild(child)
-
-		if (gone.nodeType == 1) unref(gone, el)
-
-		child = node
-	}
-}
-
-const walk = (h, fn) => {
-
-	if (h == null) return
-
-	const type = typeof h
-
-	if (type == 'boolean') return
-
-	if (type == 'string') fn(h)
-
-	else if (type == 'number' || type == 'bigint') fn(String(h))
-
-	else if (isVNode(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))
-}
-
-const run = ({ nodeName, ...h }, fn) => {
-
-	if (nodeName.constructor.name == 'GeneratorFunction') fn(runGenerator(nodeName, h))
-
-	else walk(nodeName(h), fn)
-}
-
-const runGenerator = (fn, h) => {
-
-	const attrs = { ...fn.attrs }, args = { ...fn.args }
-
-	for (const key of keys(h)) {
-
-		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
-
-		else if (key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:')) attrs[key] = h[key]
-
-		else args[key] = h[key]
-	}
-
-	return mark({ ...attrs, nodeName: fn.is ?? defaults.tag, [Generator]: fn, [Args]: args })
-}
-
-const text = (h, node, ref) => {
-
-	while (node && node != ref && node.nodeType != 3) node = node.nextSibling
-
-	node && node != ref ? node.data != h && (node.data = h) : node = document.createTextNode(h)
-
-	return node
-}
-
-const element = (h, el, node, ref) => {
-
-	const nodeName = h.nodeName, key = h.key, gen = h[Generator]
-
-	if (node && key != null && ref == null) node = (el[Keyed] ??= new Map()).get(key) ?? node
-
-	while (node && node != ref && (
-
-		(node.localName != nodeName) ||
-
-		(node[Key] != null && node[Key] != key) ||
-
-		(node[Generator] && node[Generator] != gen)
-
-	)) node = node[Key] != null ? null : node.nextElementSibling
-
-	if (node == ref) node = null
-
-	node ??= document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
-
-	if (key != null) (el[Keyed] ??= new Map()).set(node[Key] = key, node)
-
-	if (!node[Cache] || h.memo == null || some(node[Memo], h.memo)) {
-
-		attrs(node[Cache], h, node)
-
-		if (!h.skip) gen ? next(gen, h[Args], node) : !node[Cache] && (typeof h.children == 'string' || typeof h.children == 'number') ? node.textContent = h.children + '' : render(h.children, node)
-
-		node[Memo] = h.memo
-
-		node[Cache] = h
-	}
-
-	return node
-}
-
-const attrs = (cache, h, node) => {
-
-	if (!cache) for (let i = node.attributes.length; i--;) hasOwn(h, node.attributes[i].name) || node.removeAttribute(node.attributes[i].name)
-
-	for (const key in h) if (hasOwn(h, key)) {
-
-		const value = h[key]
-
-		if (cache && cache[key] === value || key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo') 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) || key == 'nodeName' || key == 'children' || key == 'key' || key == 'skip' || key == 'memo') continue
-
-		if (key.startsWith('set:')) node[key.slice(4)] = undefined
-
-		else node.removeAttribute(key)
-	}
-}
-
-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) => {
-
-	let child = node.firstElementChild
-
-	while (child)
-
-		if (fn(child) && child.firstElementChild) child = child.firstElementChild
-
-		else {
-
-			while (child != node && !child.nextElementSibling) child = child.parentNode ?? node
-
-			child = child != node && child.nextElementSibling
-		}
-}
-
-const before = (el, node, child) => {
-
-	if (node.isConnected && node.contains(document.activeElement)) {
-
-		const ref = node.nextSibling
-
-		while (child && child != node) {
-
-			const next = child.nextSibling
-
-			el.insertBefore(child, ref)
-
-			child = next
-		}
-
-	} else el.insertBefore(node, child)
-}
-
-const unref = (root, parent) => {
-
-	if (root[Memo] == unref) return
-
-	root[Memo] = unref
-
-	let node = root
-
-	while (node.firstElementChild) node = node.firstElementChild
-
-	while (true) {
-
-		const { nextElementSibling, parentNode } = node
-
-		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
-
-		node = nextElementSibling ?? parentNode ?? root
-
-		if (nextElementSibling) while (node.firstElementChild) node = node.firstElementChild
-	}
-}
-
-const next = (fn, args, el) => {
-
-	el[Generator] ??= (watch(), assign(el, methods)[Context] = Object.create(current()?.[Context] ?? null), fn)
-
-	for (const key of keys(el[Args] ??= args)) hasOwn(args, key) || delete el[Args][key]
-
-	assign(el[Args], 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] },
-
-	[Render]() {
-
-		const parent = current()
-
-		current(this)
-
-		try {
-
-			if (!this[Iterator]) {
-
-				this.signal = (this[Controller] = new AbortController()).signal
-
-				this[Iterator] = this[Generator].call(this, this[Args])
-			}
-
-			const { value, done } = this[Iterator].next()
-
-			render(value, this)
-
-			if (done) this.return()
-
-		} catch (e) {
-
-			this.throw(e)
-
-		} finally {
-
-			current(parent)
-		}
-	},
-
-	next(fn, result) {
-
-		if (this[Iterator] === false || !this.isConnected) return result
-
-		try {
-
-			if (typeof fn == 'function') result = fn.call(this, this[Args])
-
-		} catch (e) {
-
-			return this.throw(e)
-		}
-
-		if (!current()?.contains(this)) this[Render]()
-
-		return result
-	},
-
-	throw(value) {
-
-		for (let el = this; el; el = el.parentNode) if (el[Iterator]?.throw) try {
-
-			return render(el[Iterator].throw(value).value, el)
-
-		} catch (e) {
-
-			value = new Error(e?.message ?? e, { cause: value })
-		}
-
-		throw value
-	},
-
-	return(deep = true) {
-
-		if (this[Iterator] === false) return
-
-		const iterator = this[Iterator]
-
-		this[Iterator] = false
-
-		if (deep) each(el => typeof el.return == 'function' ? el.return() : true, this)
-
-		try {
-
-			iterator?.return()
-
-		} catch (e) {
-
-			this.throw(e)
-
-		} finally {
-
-			this[Iterator] = null
-
-			this[Controller]?.abort()
-		}
-	}
-}
+import { Context, current } from './context.js'
+import { isVNode } from './jsx.js'
+
+const { isArray } = Array, { assign, hasOwn, keys } = Object
+
+const Key = Symbol.for('ajo.key')
+const Keyed = Symbol.for('ajo.keyed')
+const Memo = Symbol.for('ajo.memo')
+const Cache = Symbol.for('ajo.cache')
+const Generator = Symbol.for('ajo.generator')
+const Iterator = Symbol.for('ajo.iterator')
+const Render = Symbol.for('ajo.render')
+const Args = Symbol.for('ajo.args')
+const Controller = Symbol.for('ajo.controller')
+
+export const defaults = { tag: 'div' }
+
+export const stateful = (fn, is) => (is && (fn.is = is), fn)
+
+export const render = (h, el, child = el.firstChild, ref = null) => {
+
+	walk(h, h => {
+
+		const node = typeof h == 'string' ? text(h, child, ref) : element(h, el, child, ref)
+
+		if (child == null) {
+
+			before(el, node, ref)
+
+		} else if (node == child) {
+
+			child = node.nextSibling
+
+		} else if (node == child.nextSibling) {
+
+			if (child.contains(document.activeElement)) el.insertBefore(node, child)
+
+			else el.insertBefore(child, ref)
+
+			child = node.nextSibling
+
+		} else {
+
+			before(el, node, child)
+		}
+	})
+
+	if (child && !ref && child == el.firstChild) {
+
+		const gone = [...el.children]
+
+		el[Keyed]?.clear()
+
+		el.textContent = ''
+
+		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) => {
+
+	const type = typeof h
+
+	if (h == null || type == 'boolean') return
+
+	if (type == 'string') fn(h)
+
+	else if (type == 'number' || type == 'bigint') fn(String(h))
+
+	else if (isVNode(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))
+}
+
+const run = ({ nodeName, ...h }, fn) => {
+
+	if (nodeName.constructor.name == 'GeneratorFunction') fn(runGenerator(nodeName, h))
+
+	else walk(nodeName(h), fn)
+}
+
+const runGenerator = (fn, h) => {
+
+	const attrs = { ...fn.attrs }, args = { ...fn.args }
+
+	for (const key of keys(h)) {
+
+		if (key.startsWith('attr:')) attrs[key.slice(5)] = h[key]
+
+		else if (key == 'key' || key == 'skip' || key == 'memo' || key == 'ref' || key.startsWith('set:')) attrs[key] = h[key]
+
+		else args[key] = h[key]
+	}
+
+	attrs.nodeName = fn.is ?? defaults.tag
+
+	attrs[Generator] = fn
+
+	attrs[Args] = args
+
+	return attrs
+}
+
+const text = (h, node, ref) => {
+
+	while (node && node != ref && node.nodeType != 3) node = node.nextSibling
+
+	if (node == null || node == ref) node = document.createTextNode(h)
+
+	else if (node.data != h) node.data = h
+
+	return node
+}
+
+const element = (h, el, node, ref) => {
+
+	const nodeName = h.nodeName, key = h.key, gen = h[Generator]
+
+	if (node && key != null && ref == null) node = el[Keyed]?.get(key) ?? node
+
+	while (node && node != ref) {
+
+		const k = node[Key], g = node[Generator]
+
+		if (node.localName == nodeName && (k == null || k == key) && (!g || g == gen)) break
+
+		node = k != null ? null : node.nextElementSibling
+	}
+
+	if (node == null || node == ref) node = document.createElementNS(h.xmlns ?? el.namespaceURI, nodeName)
+
+	if (key != null) (el[Keyed] ??= new Map()).set(node[Key] = key, node)
+
+	if (!node[Cache] || h.memo == null || some(node[Memo], h.memo)) {
+
+		attrs(node[Cache], h, node)
+
+		if (!h.skip) {
+
+			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) => {
+
+	if (!cache) for (let i = node.attributes.length; i--;) {
+
+		const { name } = node.attributes[i]
+
+		if (!hasOwn(h, name)) node.removeAttribute(name)
+	}
+
+	for (const key in h) if (hasOwn(h, key)) {
+
+		const value = 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) => {
+
+	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) => {
+
+	let child = node.firstElementChild
+
+	while (child)
+
+		if (fn(child) && child.firstElementChild) child = child.firstElementChild
+
+		else {
+
+			while (child != node && !child.nextElementSibling) child = child.parentNode ?? node
+
+			child = child != node && child.nextElementSibling
+		}
+}
+
+const before = (el, node, child) => {
+
+	if (node.isConnected && node.contains(document.activeElement)) {
+
+		const ref = node.nextSibling
+
+		while (child && child != node) {
+
+			const next = child.nextSibling
+
+			el.insertBefore(child, ref)
+
+			child = next
+		}
+
+	} else el.insertBefore(node, child)
+}
+
+const unref = (root, parent) => {
+
+	if (root[Memo] == unref) return
+
+	root[Memo] = unref
+
+	let node = root
+
+	while (node.firstElementChild) node = node.firstElementChild
+
+	while (true) {
+
+		const { nextElementSibling, parentNode } = node
+
+		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
+
+		node = nextElementSibling ?? parentNode ?? root
+
+		if (nextElementSibling) while (node.firstElementChild) node = node.firstElementChild
+	}
+}
+
+const next = (fn, args, el) => {
+
+	if (!el[Generator]) {
+
+		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] },
+
+	[Render]() {
+
+		const parent = current()
+
+		current(this)
+
+		try {
+
+			if (!this[Iterator]) {
+
+				this.signal = (this[Controller] = new AbortController()).signal
+
+				this[Iterator] = this[Generator].call(this, this[Args])
+			}
+
+			const { value, done } = this[Iterator].next()
+
+			render(value, this)
+
+			if (done) this.return()
+
+		} catch (e) {
+
+			this.throw(e)
+
+		} finally {
+
+			current(parent)
+		}
+	},
+
+	next(fn, result) {
+
+		if (this[Iterator] === false || !this.isConnected) return result
+
+		try {
+
+			if (typeof fn == 'function') result = fn.call(this, this[Args])
+
+		} catch (e) {
+
+			return this.throw(e)
+		}
+
+		if (!current()?.contains(this)) this[Render]()
+
+		return result
+	},
+
+	throw(value) {
+
+		for (let el = this; el; el = el.parentNode) if (el[Iterator]?.throw) try {
+
+			return render(el[Iterator].throw(value).value, el)
+
+		} catch (e) {
+
+			value = new Error(e?.message ?? e, { cause: value })
+		}
+
+		throw value
+	},
+
+	return(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 {
+
+			iterator?.return()
+
+		} catch (e) {
+
+			this.throw(e)
+
+		} finally {
+
+			this[Iterator] = null
+
+			this[Controller]?.abort()
+		}
+	}
+}

package/jsx.js

@@ -1,4 +1,4 @@
-const VNode = Symbol.for('ajo.vnode')
+const VNode = Symbol()
 
 export const mark = v => (v[VNode] = v, v)
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ajo",
-  "version": "0.1.33",
+  "version": "0.1.34",
   "description": "ajo is a JavaScript view library for building user interfaces",
   "type": "module",
   "types": "./types.ts",

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,11 +114,11 @@ declare module 'ajo/html' {
 }
 
 declare module 'ajo/jsx-runtime' {
-	import { Type, Args, VNode, ElementChildrenAttribute, IntrinsicElements as _IE } from 'ajo'
-	export function Fragment({ children }: ElementChildrenAttribute): typeof children
-	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
+	import { Type, Args, VNode, ElementChildrenAttribute, IntrinsicElements as _IE } from 'ajo'
+	export function Fragment({ children }: ElementChildrenAttribute): typeof children
+	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
 	export namespace JSX {
 		type ElementChildrenAttribute = import('ajo').ElementChildrenAttribute
 		type LibraryManagedAttributes<C, P> = import('ajo').ManagedAttributes<C, P>
@@ -117,9 +126,9 @@ declare module 'ajo/jsx-runtime' {
 	}
 }
 
-declare module 'ajo/jsx-dev-runtime' {
-	import { IntrinsicElements as _IE } from 'ajo'
-	export { Fragment, jsx, jsxs, jsxDEV } from 'ajo/jsx-runtime'
+declare module 'ajo/jsx-dev-runtime' {
+	import { IntrinsicElements as _IE } from 'ajo'
+	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>