Motorcycle.js DOM Driver

The Standard DOM Driver for Motorcycle. Built using Snabbdom for it's modularity and it's faster virtual-dom implementation. This library exports the fantastic hyperscript-helpers library for ease-of-use.

Installing

$ npm install @motorcycle/dom

Want to Contribute?

If you found an issue or want to contribute code, please read the contributing guidelines.

Differences from Cycle-DOM

Many of the differences come from Snabbdom itself, and I highly recommend reading through their documentation first to discover the differences between Matt Esch's Virtual-DOM.

A less obvious difference is how this driver patches the DOM.

For Example, Given the view h1('Hello, World!') being patched to <div id='#app'></div>, this is how it will look after being patched:

<!-- Cycle-DOM -->
<div id='#app'>
  <h1>Hello, World!</h1>
</div>

<!-- Motorcycle-DOM -->
<h1>Hello, World</h1>

This library does not keep the root element it is patched to for performance reasons.

Examples

Basic usage

import most from 'most'
import {run} from '@motorcycle/core'
import {makeDOMDriver, h} from '@motorcycle/dom'

function main(sources) {
  ...
  return {
    DOM: view$,
  }
}

run(main, {
  DOM: makeDOMDriver('#app')
})

More examples can be found here.

API

makeDOMDriver(container, modules)

Arguments

container :: Element|CSS-Selector - A DOM node or a CSS-Selector which points to an existing DOM node that will be used as the initial place to patch the DOM.

modules :: Array - An array of Snabbdom modules which will be used by Snabbdom to add/remove behaviors that are available to you from the h() or hyperscript-helpers functions.

import {makeDOMDriver} from '@motorcycle/dom'

makeDOMDriver('#app')
// or
makeDOMDriver(document.querySelector('#app'))

/* with modules */
/* these are the default modules used */
makeDOMDriver('#app', [
  require(`snabbdom/modules/class`),
  require(`snabbdom/modules/props`),
  require(`snabbdom/modules/attributes`),
  require(`snabbdom/modules/style`),
])

h(selector, data, children)

Importing

import {h} from '@motorcycle/dom'

For more information on how to use h(), please refer to the original documentation.

hyperscript-helpers

Importing

import {div, h1, p} from '@motorcycle/dom'

For more information on how to use hyperscript-helpers.