Baahu is a small zero-dependency Moore machine-based UI framework for Javascript + TypeScript
- Faster and smaller than major frameworks/libraries (Svelte, Preact, Vue, React, and Angular)
- Built-in robust state management: Finite State Machines!
- Event-driven, not change-driven/reactive
- Built-in trie-based router & code-splitting
- First-class TypeScript support: type-checked JSX, props, states, events.
- O(1) component rendering for all components, not just leaves.
Everything you need to know about Baahu is in the docs!
Try it out live on Code Sandbox!
You should read the docs, but if you want a sneak peek at what the API looks like, here a couple of example components:
import { b, machine, emit } from 'baahu';
const Toggle = machine({
id: 'toggle',
initial: 'inactive',
context: () => ({}),
when: {
inactive: { on: { TOGGLE: { to: 'active' } } },
active: { on: { TOGGLE: { to: 'inactive' } } },
},
render: state => (
<div>
<h3>{state}</h3>
<button onClick={() => emit({ type: 'TOGGLE' })}>Toggle</button>
</div>
),
});A traffic light component that doesn't let you cross the street when it is red, and displays the # of times you crossed the street.
import { b, machine, emit } from 'baahu';
/** returns a function that is called by baahu. emit the
* provided event after the specified time */
function delayedEmit(event, delayMS) {
return () => setTimeout(() => emit(event, 'light'), delayMS);
}
/**
* you can make your own abstractions like `delayedEmit`
* for entry/exit/"do" actions.
*
* embracing js/ts (as opposed to shipping with every
* possible abstraction) keeps baahu fast and light!
*/
const Light = machine({
id: 'light',
initial: 'red',
context: () => ({
streetsCrossed: 0,
}),
when: {
red: {
entry: delayedEmit({ type: 'START' }, 3000),
on: {
START: {
to: 'green',
},
CROSS: {
do: () => alert('JAYWALKING'),
},
},
},
yellow: {
entry: delayedEmit({ type: 'STOP' }, 1500),
on: {
STOP: {
to: 'red',
},
CROSS: {
do: ctx => ctx.streetsCrossed++,
},
},
},
green: {
entry: delayedEmit({ type: 'SLOW_DOWN' }, 2500),
on: {
SLOW_DOWN: {
to: 'yellow',
},
CROSS: {
do: ctx => ctx.streetsCrossed++,
},
},
},
},
render: (state, ctx) => (
<div>
<h3>{state}</h3>
{/* this is a targeted event:
only the machine with the specified
id will be checked */}
<button onClick={() => emit({ type: 'CROSS' }, 'light')}>
Cross the Street
</button>
<p>Time(s) street crossed: {ctx.streetsCrossed}</p>
</div>
),
});