Chapter I · The interface
Ajo
State is just a variable.
A small UI library built on JSX and JavaScript generators. A stateful component is a generator: what you declare before its loop persists, and this.next() renders it again. No hooks, no dependency arrays, no rules about call order.
What Ajo gives you
- Control over reconciliationkey, memo and skip decide what is compared; everything else is updated where it stands.
- Server renderingajo/html renders the same components to HTML, and the browser continues from that DOM.
- ClovesShared behavior is a plain function of the component host, with no ordering rules and no registry.
- Generators hold stateVariables declared before the render loop live as long as the component. There is no separate state container to learn.
- Explicit updatesthis.next() runs your change and renders once. After the component is gone it does nothing.
- Cleanup with this.signalAn AbortSignal that aborts when the component ends. Pass it to fetch and addEventListener.
In practice
clock.tsx
Status Published on npm.
ajo0.2.0Generator components, in-place DOM reconciliation and server rendering.
ajo-cloves0.2.1Reusable behaviors: controlled state, dismissal, keyboard focus and sensors.
ajo-ui0.3.0Unstyled, accessible component families with stable styling hooks.
ajo-ui-playa0.3.0Themed components and a build-time UnoCSS preset.
import type { Stateful } from 'ajo'
export const Clock: Stateful = function* () {
let now = new Date()
const timer = setInterval(() => this.next(() => now = new Date()), 1000)
this.signal.addEventListener('abort', () => clearInterval(timer))
while (true) yield <time>{now.toLocaleTimeString()}</time>
}