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

1. Read the Code of Conduct
2. Fork it
3. Create your feature branch (git checkout -b my-new-feature)
4. Commit your changes (git commit -am 'Add some feature')
5. Push to the branch (git push origin my-new-feature)
6. Create new Pull Request