snabbdom-selector
Advanced tools
Comparing version 0.4.0 to 1.0.0
The MIT License (MIT) | ||
Copyright (c) 2015 Tylor Steinberger | ||
Copyright (c) 2015-2016 Tylor Steinberger | ||
@@ -5,0 +5,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy |
{ | ||
"name": "snabbdom-selector", | ||
"version": "0.4.0", | ||
"version": "1.0.0", | ||
"description": "Snabbdom CSS-Selector", | ||
"main": "lib/index.js", | ||
"main": "lib/commonjs/index.js", | ||
"jsnext:main": "lib/es2015/index.js", | ||
"module": "lib/es2015/index.js", | ||
"typings": "lib/es2015/index.d.ts", | ||
"scripts": { | ||
"eslint": "eslint src/", | ||
"mocha": "mocha --compilers js:babel-core/register", | ||
"test-browser": "testem", | ||
"test-ci": "testem ci", | ||
"test": "npm run eslint && npm run mocha && npm run test-ci", | ||
"start": "npm install && npm prune && validate-commit-msg", | ||
"precompile": "rm -rf lib/ && mkdir -p lib", | ||
"compile": "babel -d lib/ src/", | ||
"prepublish": "npm run compile", | ||
"release": "npm run release-patch", | ||
"release-patch": "git checkout master && release patch && npm publish --access=public", | ||
"release-minor": "git checkout master && release minor && npm publish --access=public", | ||
"release-major": "git checkout master && release major && npm publish --access=public" | ||
"test:lint": "tslint src/*.ts src/**/*.ts", | ||
"test:unit": "cross-env TS_NODE_PROJECT=./test/tsconfig.json mocha -r ts-node/register test/*.ts", | ||
"test": "npm run test:lint && npm run test:unit", | ||
"build:commonjs": "tsc -P tsconfig.commonjs.json", | ||
"build:es2015": "tsc -P tsconfig.json", | ||
"build": "npm run build:commonjs && npm run build:es2015" | ||
}, | ||
@@ -37,23 +33,14 @@ "repository": { | ||
"devDependencies": { | ||
"assert": "^1.3.0", | ||
"babel-cli": "^6.3.17", | ||
"babel-core": "^6.3.17", | ||
"babel-eslint": "^4.1.6", | ||
"babel-preset-es2015": "^6.3.13", | ||
"babelify": "^7.2.0", | ||
"browserify": "^12.0.1", | ||
"cli-release": "^1.0.4", | ||
"eslint": "^1.0.0", | ||
"eslint-config-cycle": "^3.1.0", | ||
"eslint-plugin-cycle": "^1.0.2", | ||
"eslint-plugin-no-class": "^0.1.0", | ||
"mocha": "^2.3.4", | ||
"snabbdom": "^0.2.8", | ||
"testem": "^0.9.11", | ||
"validate-commit-message": "^3.0.1" | ||
"@types/mocha": "^2.2.32", | ||
"@types/node": "^6.0.46", | ||
"cross-env": "^3.1.3", | ||
"mocha": "^3.1.2", | ||
"snabbdom": "^0.5.4", | ||
"ts-node": "^1.6.1", | ||
"tslint": "^3.15.1", | ||
"typescript": "^2.0.6" | ||
}, | ||
"dependencies": { | ||
"browser-split": "0.0.1", | ||
"cssauron": "^1.2.0" | ||
"cssauron": "^1.4.0" | ||
} | ||
} |
@@ -1,14 +0,17 @@ | ||
# Snabbdom Selector | ||
# Snabbdom Selector [![ComVer](https://img.shields.io/badge/ComVer-compliant-brightgreen.svg)](https://github.com/staltz/comver) | ||
## Install | ||
`snabbdom-selector` is a utility tool, written in TypeScript, | ||
to find snabbdom VNode objects matching a given CSS Selector. | ||
## This is for me! | ||
```sh | ||
npm install snabbdom-selector | ||
``` | ||
$ npm install snabbdom-selector | ||
``` | ||
## Basic Usage | ||
```js | ||
import select from 'snabbdom-selector' | ||
import h from 'snabbdom/h' | ||
import { select } from 'snabbdom-selector' | ||
import * as h from 'snabbdom/h' | ||
const vnode = h('div', {}, [ | ||
const vNode = h('div', {}, [ | ||
h('div.test', {}, [ | ||
@@ -19,3 +22,3 @@ h('p', {key: 1}, 'Foo') | ||
const matches = select('.test p', vnode) | ||
const matches = select('.test p', vNode) | ||
@@ -25,1 +28,61 @@ console.log(matches) | ||
``` | ||
## 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. | ||
```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: {...}}] | ||
``` | ||
### `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. | ||
```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' | ||
``` | ||
### `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. | ||
```js | ||
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](https://github.com/staltz/comver), a versioning system | ||
that is backwards compatible with semantic-versioning. |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
No v1
QualityPackage is not semver >=1. This means it is not stable and does not support ^ ranges.
Found 1 instance in 1 package
1
8
0
87
19549
20
445
1
- Removedbrowser-split@0.0.1
- Removedbrowser-split@0.0.1(transitive)
Updatedcssauron@^1.4.0