um/README.md

76 lines
2.5 KiB
Markdown
Raw Normal View History

2024-05-06 01:22:15 +00:00
# Um
2024-05-05 00:34:27 +00:00
2024-05-05 14:27:14 +00:00
> Minimal JavaScript UI Builder
2024-05-05 00:34:27 +00:00
2024-05-06 01:22:15 +00:00
Um, is an experimental composable UI builder that takes ideas from early [hyperapp](https://github.com/jorgebucaran/hyperapp) design, but does not stick to strict Elm Architecture.
2024-05-22 16:34:59 +00:00
Um, because you should think about, um, NOT using it.
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-22 16:34:59 +00:00
**Um** only has 2 exported functions, `app()` and `h()`, and the later is optional.
2024-05-05 00:34:27 +00:00
2024-05-06 01:22:15 +00:00
### app({opts})
2024-05-05 00:34:27 +00:00
2024-05-05 14:27:14 +00:00
The `app()` is the builder function and takes an `opts` object:
2024-05-05 00:34:27 +00:00
2024-05-05 14:27:14 +00:00
#### Input:
2024-05-05 00:34:27 +00:00
2024-05-05 14:27:14 +00:00
| Property | Default | Description |
| --------- | -------------------------- | ----------------------------------------------------------- |
| `state` | `{}` | initial data state |
| `actions` | `{}` | function object passed to view |
| `view` | `(state, actions) => null` | function that takes state and actions and returns valid dom |
2024-05-22 16:34:59 +00:00
| `mount` | `body` | valid query selector as mounting point |
2024-05-05 14:27:14 +00:00
#### Output:
2024-05-22 16:34:59 +00:00
> WARNING: May change in future
2024-05-05 19:05:16 +00:00
| Property | Description |
| --------------- | --------------------------------------------- |
| `state([data])` | state function to get or update internal data |
2024-05-05 14:27:14 +00:00
### h(tag, [...args])
2024-05-22 16:34:59 +00:00
The `h()` is an **optional** hypertext build utility that weighs in around **~250b** and is provided as *a* way to build out your `view` DOM, but you can build your `view` using any method you like as long as it returns valid DOM.
2024-05-05 14:27:14 +00:00
## Example
2024-05-05 00:34:27 +00:00
```html
<script type="module">
2024-05-06 01:22:15 +00:00
import {app, h} from "./um.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"}, [
2024-05-06 01:22:15 +00:00
h("h1", "Um, Hello"),
2024-05-05 00:34:27 +00:00
h("p", 21),
h("hr")
])
]);
}
2024-05-05 14:27:14 +00:00
});
2024-05-05 00:34:27 +00:00
</script>
```
2024-05-05 13:07:17 +00:00
## Notes
2024-05-05 00:34:27 +00:00
2024-05-05 19:05:16 +00:00
> WORK-IN-PROGRESS
2024-05-22 15:06:33 +00:00
### TODO
- Remove State Helper or make better