um/README.md

65 lines
1.5 KiB
Markdown
Raw Normal View History

2024-05-05 00:34:27 +00:00
# Tagged
> Minimal Javascript UI Library
This is an experimental composable ui library that takes ideas from Elm Architecture, but without the doctrine - this is Javascript!
## Features
- No Virtual Dom
- No Build System
- No Over Engineering
- ~100 lines of code
- Totally inefficient rendering (at scale)
## Overview
the `app` builder takes an `opts` object that expects it to include:
- `state` as initial data `{object}`
- `actions` as `{object}` with functions definitions
2024-05-05 00:34:27 +00:00
- `view` as `{function}` that returns valid dom
and a querySelector compatible `selector` to mount the ui.
`app` returns:
- `state` current of component as updatable function
- `actions` to call on component
2024-05-05 00:34:27 +00:00
### Example
```html
<script type="module">
import {app, h} from "./tagged.js";
const myapp = app({
state: {name: "[Your Name Here]", job: "Developer"},
view(state, actions) {
2024-05-05 00:34:27 +00:00
return h("main", [
h("strong", `Greeting from ${state.name}`),
h("div", `Your local ${state.job}`),
h("div", {id: "test"}, [
h("h1", "Hello Tagged"),
h("p", 21),
h("hr")
])
]);
}
}, "#main");
</script>
<main id="app"></main>
```
### Inspired By
- hyperapp
- mithril
- Elm Architecture
## Todo
- Actions Example
2024-05-05 00:34:27 +00:00
> WORK-IN-PROGRESS