Awesome
snabbdom-helpers
A set of functions that map the entire list of the W3C DOM elements. Each function returns a snabbdom vnode object.
using
This export will return a list of functions, where each function was created from a partially applied curry. Each function represents a tag in the list of W3C allowed tags, including deprecated, and experimental.
Each tag takes an optional object as an argument. If no value is given it functions like so:
import {main} from "snabbdom-helpers"
main() // <main></main>
To give values to these tags simply pass them as keys on the object, where certain keys are special like selector
. Selector allows you to easily define the DOM selector of the element, with the CSS id and class syntax:
import {p} from "snabbdom-helpers"
p({
selector: "#article1"
})
<p id="article1"></p>
import {p} from "snabbdom-helpers"
p({
selector: ".round"
})
<p class="round"></p>
import {p} from "snabbdom-helpers"
p({
selector: "#user1.profile.outward"
})
<p id="user1" class="profile outward"></p>
Content is either a String (of text) or an Array of Nodes and/or String:
import {p} from "snabbdom-helpers"
p({
children: "I'm fun!"
})
<p>I'm fun!</p>
import {article} from "snabbdom-helpers"
import {h1} from "snabbdom-helpers"
article({
children: [
h1({children: "Hello"})
"world"
]
})
<article><h1>Hello</h1>world</article>
Some tags have no content, they are called void elements. For example:
import {img} from "snabbdom-helpers"
img()
<img>
If you give a empty tag any children it will throw an error:
import {meta} from "snabbdom-helpers"
meta({children: "Hello!"}) // new Error("Empty tag cannot semantically have children")
Finally you can give any other attributes to your element:
import {video} from "snabbdom-helpers"
video({
data: {
id: "1"
},
aria: {
title: "A Sad Movie"
},
src: "https://cdn.movies.com/m/1",
loop: true
})
<video data-id="1" aria-title="A Sad Movie" src="https://cdn.movies.com/m/1" loop></video>
Because snabbdom-helpers
relies on snabbdom
you can also use it's special style and event syntax systems.
Here's a large example:
import {article} from "snabbdom-helpers"
import {h1} from "snabbdom-helpers"
import {p} from "snabbdom-helpers"
export default function view () {
return article({
data: {id: "1"},
aria: {role: "navigation"},
children: [
h1({
style: {color: "blue"},
children: "Hello"
}),
p({selector: ".red.body", children: "World!"})
]
})
}
It should output (minus white-spacing):
<article data-id="1" aria-role="navigation">
<h1 style="color: blue;">Hello</h1>
<p class="red body">
World!
</p>
</article>
contributing
- Read the Code of Conduct
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request