snabbdom-selector

Snabbdom Selector

snabbdom-selector is a utility tool, written in TypeScript, to find snabbdom VNode objects matching a given CSS Selector.

This is for me!

npm install snabbdom-selector

Basic Usage

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

select(cssSelector: string, vNode: snabbdom.VNode): Array<snabbdom.VNode>

select(cssSelector: string): (vNode: snabbdom.VNode) => Array<snabbdom.VNode>

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.

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: {...}}]

selectorParser(selector: string): Object

This function given a CSS selector like that passed to snabbdom's h function, returns an object containing parsed tagName, id, and className.

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'

classNameFromVNode(vNode: snabbdom.VNode): string

This function given a snabbdom VNode object will return its className including that contained within snabbdom's provided props and class modules.

import { classNameFromVNode } from 'snabbdom-selector'

const vNode = h('div.foo', { class: { bar: true } }, [])

console.log(classNameFromVNode(vNode)) // 'foo bar'

Versioning

This library uses compatible versioning, a versioning system that is backwards compatible with semantic-versioning.