Use Snabbdom with template strings
npm install snabbyUse Snabbdom with template strings
``js
import html from 'snabby'
// Create vnodes:
let foo = html
let bar = html// 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
function (inspired by yo-yo). It makes working with an amazing virtual dom very easy and fun
Installation
Snabby version 2.x is a pure es module. It requires node >= v12.17 or a browser that supports the es module format.
If you want the older commonjs build, use the
snabby@1.x npm module
Usage
$3
A tag function that creates a node. This function is usually required as
html instead of snabby:`js
import html from 'snabby'// Function to create VNode from params:
let greet = name => html
let node1 = greet('Jamen')
// Hello, Jamen!
let node2 = greet('World')
// Hello, World!
You have all the modules documented by Snabbdom loaded by default. See Directives for how to use modules, and
for loading custom modules
$3
Directives are attributes that begin with
@, and let you interact with Snabbdom modules. In general, the form is @.props module:`js
html// Or using the
syntax:
html
module, you can use a shorthand by prefixing with : instead of @on::`js
html// Shorthand:
html
Directives work with any module that makes use of
. For example @props:href turns into node.data.props.href.
$3
delayed style properties which are set after the next frame.This makes it easy to declaratively animate the entry of elements.
The
all value of transition-property is not supported in snabbdom or snabby.usage:
`javascript
html` @style:delayed=${ { opacity: '0' } }>
hello, world!!
`
$3
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:
js
import html from 'snabby'let visit = location => html
let node1 = visit('Earth')
// Mount node to DOM
html.update(document.body, node1)
// Hello, Earth!
From there, you can patch updates:
js
let node2 = visit('TRAPPIST-1')// Patch updates to node1
html.update(node1, node2)
// Hello, TRAPPIST-1!
`
$3
Create a
tag function with your own modules.Here is an equivalent to
snabby for example:`js
import create from './create.js'
import { attributesModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/attributes.js';
import { classModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/class.js';
import { propsModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/props.js';
import { styleModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/style.js';
import { eventListenersModule } from 'https://cdn.jsdelivr.net/npm/snabbdom@3/build/package/modules/eventlisteners.js';
const html = create([
attributesModule,
eventListenersModule,
classModule,
propsModule,
styleModule
])
`As mentioned, you can use directives with 3rd party modules fine. Open an issue if you can't!
$3
The
function takes a selector, a key for identifying a thunk, a function that returns a vnode and a variable amount of state parameters. If invoked, the render function will receive the state arguments.The
renderFn is invoked only if the renderFn is changed or [stateArguments] array length or it's elements are changed.
`js
function counter (count) { function numberView (n) {
return html
Number is ${n}
} function rand () {
const randomInt = Math.ceil(Math.random() * 3)
html.update(view, counter(randomInt))
}
const view = html
}This is identical to snabbdom's
function. See https://github.com/snabbdom/snabbdom#thunks for more details.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 meMIT © Jamen Marz
---
      