Compare commits
2 commits
97fd4d5f63
...
f33348c463
Author | SHA1 | Date | |
---|---|---|---|
f33348c463 | |||
0c5e332da2 |
2 changed files with 11 additions and 77 deletions
7
importmaps.html
Normal file
7
importmaps.html
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
<script type="importmap">
|
||||||
|
{
|
||||||
|
"imports": {
|
||||||
|
"nyooom/render": "./render.js"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
81
readme.md
81
readme.md
|
@ -48,84 +48,11 @@ document.body.append(html.div(
|
||||||
))
|
))
|
||||||
```
|
```
|
||||||
|
|
||||||
## Interface / Examples
|
## Importmaps
|
||||||
|
|
||||||
### Basic DOM generatio
|
The included file `importmaps.html` can be used as a starting point for
|
||||||
|
importing `nyooom` via importmaps in a minimal environment. Search-and-replace
|
||||||
Accessing the `html` proxy with any string key returns a new node generator
|
`./` to wherever the library should be loaded from if necessary.
|
||||||
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) }
|
|
||||||
```
|
|
||||||
|
|
||||||
## A few more examples:
|
## A few more examples:
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue