@mreinstein/snabby v1.0.5

snabby

Use Snabbdom with template strings

import html from 'snabby'

// Create vnodes:
var foo = html`<div>Hello Earth</div>`
var bar = html`<div>Hello Mars</div>`

// Patch to DOM:
html.update(document.body, foo)

// Patch updates:
html.update(foo, bar)

Snabby is for creating Snabbdom virtual nodes using template strings, and also patch the nodes using an update function (inspired by yo-yo). It makes working with an amazing virtual dom very easy and fun

Installation

$ npm install --save snabby

Usage

snabby

A tag function that creates a node. This function is usually imported as html instead of snabby:

import html from 'snabby'

// Function to create VNode from params:
var greet = name => html`
  <div class='greet'>Hello, ${name}!</div>
`

var node1 = greet('Jamen')
// Hello, Jamen!

var node2 = greet('World')
// Hello, World!

You have all the modules documented by Snabbdom loaded by default. See Directives for how to use modules, and snabby/create for loading custom modules

Directives

Directives are attributes that begin with @, and let you interact with Snabbdom modules. In general, the form is @<name>:[prop]:....

Here is an example using the props module:

html`<a @props=${{ href: '/foo', textContent: 'Hello' }}></a>`

// Or using the `:prop` syntax:
html`<a @props:href='/foo' @props:textContent='Hello'></a>`

For the eventlisteners module, you can use a shorthand by prefixing with : instead of @on::

html`<div @on:click=${fn}>...</div>`

// Shorthand:
html`<div :click=${fn}>`

Directives work with any module that makes use of node.data. For example @props:href turns into node.data.props.href.

snabby.update(target, node)

If you want to put a node on the DOM, or push updates on it (i.e. from events), you use this function.

First things first, the Node has to be mounted to the DOM, before you try and update it:

import html from 'snabby'

var visit = location => html`
  <div class='app'>Hello, ${location}!</div>
`

var node1 = visit('Earth')

// Mount node to DOM
html.update(document.body, node1)
// Hello, Earth!

From there, you can patch updates:

var node2 = visit('TRAPPIST-1')

// Patch updates to node1
html.update(node1, node2)
// Hello, TRAPPIST-1!

snabby/create

Create a snabby tag function with your own modules.

Here is an equivalent to snabby for example:

import create     from 'snabby/create'

// the snabbdom modules you want to import
import attributes from 'snabbdom/attributes'
import clazz      from 'snabbdom/class'
import props      from 'snabbdom/props'
import style      from 'snabbdom/style'
import listeners  from 'snabbdom/eventlisteners'


// initialize snabby with specific modules from snabbdom
const html = create([
    attributes,
    listeners,
    clazz,
    props,
    style
])

As mentioned, you can use directives with 3rd party modules fine. Open an issue if you can't!

Prior Art

These ideas come from my time using:

• yo-yo: Inspired some of the API here
• hyperx: Handles the template string parsing here
• choo: What inspired me to create this module, as I love the API, but not morphdom as much
• bel: Notable mention. It's like twin sister to this. DOM and VDOM
• snabbdom: What gives this the speed
• vue: A front-end framework that uses snabbdom and loosely inspired me

License

MIT © Jamen Marz