https://github.com/colingourlay/duet-virtual-dom

Use a virtual DOM with duet by passing patches from the worker thread to the main thread, and expected DOM events back in.
https://github.com/colingourlay/duet-virtual-dom

Last synced: about 1 month ago
JSON representation

Use a virtual DOM with duet by passing patches from the worker thread to the main thread, and expected DOM events back in.

• Host: GitHub
• URL: https://github.com/colingourlay/duet-virtual-dom
• Owner: colingourlay
• Created: 2016-05-26T07:10:40.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2016-09-22T22:27:46.000Z (about 8 years ago)
• Last Synced: 2024-10-10T10:02:48.562Z (about 1 month ago)
• Language: JavaScript
• Homepage: https://www.npmjs.com/package/duet-virtual-dom
• Size: 4.88 KB
• Stars: 8
• Watchers: 3
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# duet-virtual-dom

Use a virtual DOM with [duet](https://github.com/colingourlay/duet) by passing patches from the worker thread to the main thread, and expected DOM events back in.

```

$ npm install duet-virtual-dom

```

## Usage

```javascript

var duet    = require('duet');

var channel = require('duet-virtual-dom/channel');

var vdom    = require('duet-virtual-dom');

var h       = require('virtual-dom/h');

duet([channel], function () {

    var update = vdom('body');

    function view(state) {

        return h('button', {dataset: {click: onClick}}, state);

    }

    function onClick(event, value) {

        render();

    }

    function render() {

        update(view((new Date()).toLocaleTimeString()));

    }

    render();

});

```

## API

### `vdom(selector[, options])`

Creates a virtual dom in the main thread's document inside (or at) the selector provided, returning an `update` method you can call with subsequent virtual dom trees.

* `selector` - used to select an element in the DOM. By default your virtual dom's root will be inserted into it.

* `options` - an optional object which may contain:

    * `tree` - an initial virtal dom tree.

    * `isTarget` - a boolean specifying whether the selector is for an element that should be replaced by your virtual dom, rather than a container your virtual dom will be inserted into.

### `update(tree)`

Call this with a virtual dom tree. The tree will be diffed with the last tree, new event handlers (if any) will be registered, and the resulting patch will be serialised and sent to the main thread and applied.

Any event handlers you specify by name (click, select, etc.) in your virtual dom tree as properties of a node's dataset will be replaced by references, which will be sent back from the main thread when they occur. Your event handler will be called with two arguments:

* `event` - The event object itself (well, all that was fit to serialize), including a `target` property which contains all non-dom-specific data.

* `value` - An object containing the value of the event's target, if it was a named input, or all named child inputs if the event's target was a form element.

## Example

An example can be seen in the [duet example app](https://github.com/colingourlay/duet-example-app).