From b8fcaf99a94c28c08b120b4be2748a0afddb86e3 Mon Sep 17 00:00:00 2001 From: Maciej Sitko Date: Sat, 7 Oct 2017 11:17:24 +0100 Subject: [PATCH 1/2] Update README.md --- README.md | 25 +++++++++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/README.md b/README.md index 8013ce5..c1953f6 100644 --- a/README.md +++ b/README.md @@ -153,6 +153,31 @@ var vnode = h('div', {style: {color: '#000'}}, [ ]); ``` +### `snabbdom/tovnode` + +Converts a DOM node into a virtual node. Good for patching over an pre-existing, +server-side generated content. + +```javascript +var snabbdom = require('snabbdom') +var patch = snabbdom.init([ // Init patch function with chosen modules + require('snabbdom/modules/class').default, // makes it easy to toggle classes + require('snabbdom/modules/props').default, // for setting properties on DOM elements + require('snabbdom/modules/style').default, // handles styling on elements with support for animations + require('snabbdom/modules/eventlisteners').default, // attaches event listeners +]); +var h = require('snabbdom/h').default; // helper function for creating vnodes +var toVNode = require('snabbdom/tovnode').default; + +var newNode = h('div', {style: {color: '#000'}}, [ + h('h1', 'Headline'), + h('p', 'A paragraph'), +]); + +patch(document.querySelector('.container'), newVNode) + +``` + ### Hooks Hooks are a way to hook into the lifecycle of DOM nodes. Snabbdom From c8b8d5849031f95572021f05d965268a67e72565 Mon Sep 17 00:00:00 2001 From: Maciej Sitko Date: Sat, 7 Oct 2017 11:18:32 +0100 Subject: [PATCH 2/2] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index c1953f6..3223e28 100644 --- a/README.md +++ b/README.md @@ -155,7 +155,7 @@ var vnode = h('div', {style: {color: '#000'}}, [ ### `snabbdom/tovnode` -Converts a DOM node into a virtual node. Good for patching over an pre-existing, +Converts a DOM node into a virtual node. Especially good for patching over an pre-existing, server-side generated content. ```javascript @@ -174,7 +174,7 @@ var newNode = h('div', {style: {color: '#000'}}, [ h('p', 'A paragraph'), ]); -patch(document.querySelector('.container'), newVNode) +patch(toVNode(document.querySelector('.container')), newVNode) ```