Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/tjkandala/baahu
🐘 (fast) state machine-based UI framework
https://github.com/tjkandala/baahu
fast framework frontend javascript library lightweight state-machine state-management typescript ui web
Last synced: about 1 month ago
JSON representation
🐘 (fast) state machine-based UI framework
- Host: GitHub
- URL: https://github.com/tjkandala/baahu
- Owner: tjkandala
- License: mit
- Created: 2020-04-22T18:11:29.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:02:40.000Z (almost 2 years ago)
- Last Synced: 2024-08-03T01:30:27.161Z (5 months ago)
- Topics: fast, framework, frontend, javascript, library, lightweight, state-machine, state-management, typescript, ui, web
- Language: TypeScript
- Homepage: https://baahu.dev
- Size: 2.24 MB
- Stars: 116
- Watchers: 7
- Forks: 1
- Open Issues: 20
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-list - baahu - based UI framework | tjkandala | 81 | (TypeScript)
README
---
## What is Baahu?
Baahu is a small zero-dependency [Moore machine-based](https://en.wikipedia.org/wiki/Moore_machine) UI framework for Javascript + TypeScript
## Features
- [Faster and smaller than major frameworks/libraries](https://baahu.dev/docs/performance) (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](https://baahu.dev/docs/performance#higher-level-internal-optimizations) for _all_ components, not just leaves.
## Get Started
Everything you need to know about Baahu is in the [docs](https://baahu.dev/docs/introduction)!
[Try it out live on Code Sandbox!](https://codesandbox.io/s/hello-baahu-2zzv7?file=/src/index.tsx)
## Example Components
You should read the docs, but if you want a sneak peek at what the API looks like, here a couple of example components:
### Toggle
```tsx
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 => (
{state}
emit({ type: 'TOGGLE' })}>Toggle
),
});
```
### Traffic Light
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.
[codesandbox](https://codesandbox.io/s/baahu-traffic-light-zox6c)
```tsx
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) => (
{state}
{/* this is a targeted event:
only the machine with the specified
id will be checked */}
emit({ type: 'CROSS' }, 'light')}>
Cross the Street
Time(s) street crossed: {ctx.streetsCrossed}
),
});
```