84 lines
2.2 KiB
Markdown
84 lines
2.2 KiB
Markdown
# Nyooom
|
|
|
|
```js
|
|
import {html} from "nyooom/render"
|
|
import {ObservableValue} from "nyooom/observable"
|
|
|
|
const text = new ObservableValue("Nyooom is cool")
|
|
setTimeout(() => {text.value = "Nyooom is awesome!"}, 1e5)
|
|
|
|
document.body.append(html.div(
|
|
html.h1("Hello, World!"),
|
|
html.p(text, {class: "amazing"}),
|
|
html.button("Show Proof", {click: event => { alert("It's true!") }})
|
|
))
|
|
```
|
|
|
|
## Goals
|
|
|
|
> Arrakis teaches the attitude of the knife - chopping off what's incomplete and
|
|
> saying: "Now, it's complete because it's ended here."
|
|
>
|
|
> — Frank Herbert, Dune
|
|
|
|
Nyooom aims to offer as much convenienve as possible within the following
|
|
constraints:
|
|
|
|
1. Small, independent modules that can also work on their own
|
|
1. Code should be easy to figure out by someone who doesn't actiely use nyooom
|
|
1. Easy to gradually introduce and remove rather than forcing big re-writes
|
|
1. Flexible, hackable and easy to audit
|
|
|
|
## Importmaps
|
|
|
|
The included file `importmaps.html` can be used as a starting point for
|
|
importing `nyooom` via importmaps in a minimal environment. Search-and-replace
|
|
`./` to wherever the library should be loaded from if necessary.
|
|
|
|
## A few more examples:
|
|
|
|
Create a Button that deletes itself:
|
|
|
|
```js
|
|
document.body.append(
|
|
html.button("Delete Me", {click: event => event.target.remove()})
|
|
)
|
|
```
|
|
|
|
Turn a two-dimensional array into an HTML table:
|
|
```js
|
|
const table = rows =>
|
|
html.table(html.tbody(rows.map(
|
|
row => html.tr(row.map(
|
|
cell => html.rd(cell, {dataset: {
|
|
content: cell.toLowerCase(),
|
|
}})
|
|
))
|
|
)))
|
|
```
|
|
|
|
A list that you can add items to
|
|
```js
|
|
let list, input = ""
|
|
document.body.append(html.div([
|
|
list=html.ul(),
|
|
html.input({type: 'text', input: e => input = e.target.value}),
|
|
html.button({click: event => list.append(html.li(input))}, "Add"),
|
|
]))
|
|
```
|
|
|
|
A list that you can also delete items from
|
|
```js
|
|
const listItem = content => html.li(
|
|
html.span(content), " ", html.a("[remove]", {
|
|
click: event => event.target.closest("li").remove(),
|
|
style: { cursor: 'pointer', color: 'red' },
|
|
})
|
|
)
|
|
let list, input = ""
|
|
document.body.append(html.div([
|
|
list=html.ul(),
|
|
html.input({type: 'text', input: e => input = e.target.value}),
|
|
html.button({click: event => list.append(listItem(input))}, "Add"),
|
|
]))
|
|
```
|