https://github.com/putoutjs/aleman
🐊Putout-based framework for web
https://github.com/putoutjs/aleman
Last synced: 27 days ago
JSON representation
🐊Putout-based framework for web
- Host: GitHub
- URL: https://github.com/putoutjs/aleman
- Owner: putoutjs
- Created: 2025-08-08T23:18:12.000Z (11 months ago)
- Default Branch: master
- Last Pushed: 2026-05-20T21:31:02.000Z (about 1 month ago)
- Last Synced: 2026-05-21T02:00:55.822Z (about 1 month ago)
- Language: JavaScript
- Homepage:
- Size: 349 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: ChangeLog
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# Aleman
> **ぶしどうとはしぬこととみつけたり。**
>
> *Bushidō to wa shinu koto to mitsuketari.*
>
> **"The way of the warrior is found in death."**
>
> **はがくれ』**
>
> Yamamoto Tsunetomo, Hagakure
🐊Putout-based framework for web.
## Install
```
bun i aleman
```
## Rules and Addons
Aleman supports two main concepts:
- ✅ addons - events;
- ✅ rules - 🐊**Putout** rules that changes HTML;
All interaction with DOM made by using the rules, and we interact not with DOM directly, but with JSX AST.
It makes testing simple, states predictable and independent.
### Addons
Addon responsible for UI and interaction with outer world: clicks, fetches and everything like this.
Aleman supports next types of addons:
- ✅ [Global](#globals);
- ✅ [Events](#events);
- ✅ [Keys](#keys);
- ✅ [Vim](#vim);
When you need to filter out events according to `state` use `filter`:
```js
export const filter = ({state}) => state.command === 'show';
```
#### Global
Any browser event you need to listen globally:
```js
export const events = ['click'];
export const listener = () => ({
command: 'hide',
index: -1,
showSubmenu: false,
insideSubmenu: false,
});
```
#### Events
Any browser event you need to listen according to element with `data-name="hello":
```js
export const name = 'hello';
export const events = ['click'];
export const listener = () => ({
command: 'hide',
index: -1,
showSubmenu: false,
insideSubmenu: false,
});
```
#### Keys
```js
export const keys = ['Escape'];
export const listener = ({state, options}) => {
options.beforeHide?.(state);
return {
command: 'hide',
showSubmenu: false,
index: -1,
};
};
```
### Vim
```js
import * as up from './up.js';
export const commands = ['gg'];
export function listener({state, options}) {
const {
insideSubmenu,
index,
submenuIndex,
} = state;
const newState = {
...state,
index: insideSubmenu ? index : 1,
submenuIndex: insideSubmenu ? 1 : submenuIndex,
};
return up.listener({
state: newState,
options,
});
}
```
## Licence
MIT