Compare commits

...

2 commits

Author SHA1 Message Date
f33348c463 Update readme 2025-02-17 15:23:22 +01:00
0c5e332da2 Add importmaps snippet 2025-02-17 15:23:01 +01:00
2 changed files with 11 additions and 77 deletions

7
importmaps.html Normal file
View file

@ -0,0 +1,7 @@
<script type="importmap">
{
"imports": {
"nyooom/render": "./render.js"
}
}
</script>

View file

@ -48,84 +48,11 @@ document.body.append(html.div(
))
```
## Interface / Examples
## Importmaps
### Basic DOM generatio
Accessing the `html` proxy with any string key returns a new node generator
function:
```js
html.div("Hello, World!")
```
Attributes can be set by passing objects to the generator:
```js
html.div("Big Text", {style: "font-size: 1.4em"})
```
Complex structures can easily achieved by nesting generator functions:
```js
html.div(
html.p(
html.b("Bold Text")
)
)
```
For convenience, arrays assigned as attributes will be joined with spaces:
```js
html.a({class: ["button", "important"]})
```
Assigning a function as an attribute will instead attach it as an event
listener:
```js
html.button("Click me!", {click: event => {
alert("You clicked the button.")
}})
```
<!-- TODO: Document special keys -->
Generators can be called with many arguments. Arrays get iterated recursively as
if they were part of a flat argument list.
### Generating Text Nodes
```js
text("Hello, World")
// Wraps document.createTextNode
text()
// Defaults to empty string instead of erroring
text(null)
// Non-string arguments still error
text`Hello, World!`
// returns a new document fragment containing the text node "Hello, World!"
text`Hello, ${user}!`
// returns a document fragment containing 3 nodes:
// "Hello, ", the interpolated value of `user` and "!"
text`Hello, ${html.b(user)}!`
// Text node for Hello, the <b> tag with the user's name, and a text node for !
```
## handle
```js
import {handle} from 'nyooom/state.js'
```
Since it is common for event handlers to call `preventDefault()`, nyooom
provides a helper function called `handle` with the following definition:
```js
fn => event => { event.preventDefault(); return fn(event) }
```
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: