um/README.md

61 lines
1.4 KiB
Markdown
Raw Normal View History

2024-05-05 00:34:27 +00:00
# Tagged
> Minimal Javascript UI Library
2024-05-05 13:07:17 +00:00
This is an experimental composable ui builder that takes ideas from Elm Architecture, but without the doctrine - this is Javascript!
2024-05-05 00:34:27 +00:00
## Features
- No Virtual Dom
- No Build System
- No Over Engineering
2024-05-05 13:07:17 +00:00
- ~1kb minified
- Totally INEFFICIENT rendering (at scale)
2024-05-05 00:34:27 +00:00
## Overview
2024-05-05 13:07:17 +00:00
the `app` builder takes an `opts` object that expects:
2024-05-05 00:34:27 +00:00
- `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
2024-05-05 13:07:17 +00:00
- `mount` as querySelector compatible `{string}`
2024-05-05 00:34:27 +00:00
`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">
2024-05-05 13:07:17 +00:00
import {app, h} from "./tagged.min.js";
2024-05-05 00:34:27 +00:00
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
- Elm Architecture
2024-05-05 13:07:17 +00:00
## Notes
2024-05-05 00:34:27 +00:00
> WORK-IN-PROGRESS