https://github.com/jayrbolton/snabbdom-merge
Snabbdom helper for merging two vnodes
https://github.com/jayrbolton/snabbdom-merge
flimflam snabbdom
Last synced: 16 days ago
JSON representation
Snabbdom helper for merging two vnodes
- Host: GitHub
- URL: https://github.com/jayrbolton/snabbdom-merge
- Owner: jayrbolton
- Created: 2017-02-03T20:18:43.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2019-02-04T23:14:47.000Z (over 6 years ago)
- Last Synced: 2025-04-09T21:19:49.231Z (27 days ago)
- Topics: flimflam, snabbdom
- Language: JavaScript
- Homepage:
- Size: 13.7 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# snabbdom-merge
This is a function to merge two snabbdom vnodes, `vnode1` and `vnode2`, with the following behavior:
* Do a standard object merge on the 'props', 'class', 'style', 'attrs', and 'dataset', with the data in vnode2 getting precedence
* Chain event listener and hook functions together, with the function from vnode1 getting called first, then the function in vnode 2
* Eg if vnode1 is h('a', {on: {click: fn1}}) and vnode2 is h('a', {on: {click: fn2}}), then the merged vnode will call fn1, then fn2
* Concat together selector strings, preserving classnames.
* Eg if vnode1 is h('div.x') and vnode2 is h('div.y.z') then the merged vnode will be h('div.x.y.z')
* Concatenate the children of vnode1 with the children of vnode2
## merge(vnode1, vnode2)
This function returns a brand new, merged vnode with the above behavior. vnode1 and vnode2 should have the same tag names.
_Example_
```js
var h = require('snabbdom/h').default
var merge = require('snabbdom-merge')
var sayhi = function(ev) { console.log('hi', ev) }
var saybye = function(ev) { console.log('bye', ev) }
var vnode1 = h('button.x', {
attrs: { 'data-x': 'x' },
on: { click: sayhi }
}, h('span', 'x'))
var vnode2 = h('button.y', {
attrs: { 'data-y': 'y' },
on: { click: saybye }
}, h('span', 'y'))
var merged = merge(vnode1, vnode2)
// Result:
//
// h('button.x.y', {
// attrs: {'data-x': 'x', 'data-y': 'y'}
// , on: {click: function(ev) { sayhi(ev); saybye(ev) }}
// }, [h('span', 'x'), h('span', 'y')])
```