Snabbdom CSS-Selector
npm install snabbdom-selectorsnabbdom-selector is a utility tool, written in TypeScript,
to find snabbdom VNode objects matching a given CSS Selector.
sh
npm install snabbdom-selector
`Basic Usage
`js
import { select } from 'snabbdom-selector'
import { h } from 'snabbdom'const vNode = h('div', {}, [
h('div.test', {}, [
h('p', {key: 1}, 'Foo')
])
])
const matches = select('.test p', vNode)
console.log(matches)
// => [{sel: 'p', text: 'Foo', elm: HTMLElement, key: 1, children: undefined, data: {...}}]
`API
$3
$3
Note that there are 2 function signatures, this is because
select is curried!This is the main function provided by this library, it allows using a css selector to
find vNode's that are made from that css selector. The vNode used will be traversed, and
any matches at any arbitrary depth will be returned inside of the resulting array. An empty
array will be returned if no matches are found.
`js
import { select } from 'snabbdom-selector'const vNode = h('div', {}, [
h('div.test', {}, [
h('p', {key: 1}, 'Foo')
])
])
const match = select('.test p'); // if given 1 parameter it returns a new function!
const matches = match(vNode);
console.log(matches)
// => [{sel: 'p', text: 'Foo', elm: HTMLElement, key: 1, children: undefined, data: {...}}]
`$3
This function given a CSS selector like that passed to snabbdom's
h function, returns an object
containing parsed tagName, id, and className.`js
import { selectorParser } from 'snabbdom-selector'const { tagName, id, className } = selectorParser('div#foo.bar.baz');
console.log(tagName) // div
console.log(id) // foo
console.log(className) // 'bar baz'
`$3
This function given a snabbdom VNode object will return its className including that contained
within snabbdom's provided
props and class modules.`js
import { classNameFromVNode } from 'snabbdom-selector'const vNode = h('div.foo', { class: { bar: true } }, [])
console.log(classNameFromVNode(vNode)) // 'foo bar'
``