mich-parse-selector
Version:
Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in [hyperscript][]
170 lines (126 loc) • 9.07 kB
Markdown
# mich-parse-selector [](https://www.npmjs.com/package/mich-parse-selector) [](https://npmjs.org/package/mich-parse-selector) [![npm total downloads][downloads-img]][downloads-url]
> Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in [hyperscript][]
[![codeclimate][codeclimate-img]][codeclimate-url]
[![codestyle][standard-img]][standard-url]
[![linux build][travis-img]][travis-url]
[![windows build][appveyor-img]][appveyor-url]
[![codecov][coverage-img]][coverage-url]
[![dependency status][david-img]][david-url]
_You might also be interested in [gibon][] - a minimal & functional 600 bytes client-side router._
## Table of Contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
* [michParseSelector](#michparseselector)
- [Related](#related)
- [Contributing](#contributing)
- [Building docs](#building-docs)
- [Running tests](#running-tests)
- [Author](#author)
- [License](#license)
_(TOC generated by [verb](https://github.com/verbose/verb) using [markdown-toc](https://github.com/jonschlinkert/markdown-toc))_
## Install
Install with [npm](https://www.npmjs.com/)
```
$ npm install mich-parse-selector --save
```
or install using [yarn](https://yarnpkg.com)
```
$ yarn add mich-parse-selector
```
## Usage
> For more use-cases see the [tests](test.js)
```js
const michParseSelector = require('mich-parse-selector')
```
## API
### [michParseSelector](index.js#L46)
> Parse a simple CSS selector like `p.foo#hero.btn-large.btn` into a [HAST](https://github.com/syntax-tree/hast) node, which is a specification for the Html (or Hypertext) Abstract Syntax Tree. If "tag name" is omitted it defaults to `div`.
**Params**
* `selector` **{String}**: a css selector
* `returns` **{Object}**: a [HAST](https://github.com/syntax-tree/hast)-compliant node object
**Example**
```js
const parseSelector = require('mich-parse-selector')
const divNode = parseSelector('.bar')
const node = parseSelector('p.foo#hero.btn-large.btn')
console.log(divNode)
// => {
// type: 'element',
// tagName: 'div',
// properties: { className: [ 'bar' ] },
// children: []
// }
console.log(node)
// => {
// type: 'element',
// tagName: 'p',
// properties: { id: 'hero', className: [ 'foo', 'btn-large', 'btn' ] },
// children: []
// }
```
## Related
- [always-done](https://www.npmjs.com/package/always-done): Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement… [more](https://github.com/hybridables/always-done#readme) | [homepage](https://github.com/hybridables/always-done#readme "Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement for [async-done][] - pass 100% of its tests plus more")
- [gibon](https://www.npmjs.com/package/gibon): Functional client-side router in ~570 bytes, built on HTML5 History API | [homepage](https://github.com/tunnckocore/gibon#readme "Functional client-side router in ~570 bytes, built on HTML5 History API")
- [hast-util-parse-selector](https://www.npmjs.com/package/hast-util-parse-selector): Parse a simple CSS selector to a HAST node | [homepage](https://github.com/wooorm/hast-util-parse-selector#readme "Parse a simple CSS selector to a HAST node")
- [hastscript](https://www.npmjs.com/package/hastscript): Hyperscript compatible DSL for creating virtual HAST trees | [homepage](https://github.com/wooorm/hastscript#readme "Hyperscript compatible DSL for creating virtual HAST trees")
- [hyperscript](https://www.npmjs.com/package/hyperscript): Create HyperText with JavaScript, on client or server. | [homepage](https://github.com/dominictarr/hyperscript "Create HyperText with JavaScript, on client or server.")
- [minibase](https://www.npmjs.com/package/minibase): Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing… [more](https://github.com/node-minibase/minibase#readme) | [homepage](https://github.com/node-minibase/minibase#readme "Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing [base][] plugins.")
- [try-catch-core](https://www.npmjs.com/package/try-catch-core): Low-level package to handle completion and errors of sync or asynchronous functions, using [once][] and [dezalgo][] libs. Useful for and… [more](https://github.com/hybridables/try-catch-core#readme) | [homepage](https://github.com/hybridables/try-catch-core#readme "Low-level package to handle completion and errors of sync or asynchronous functions, using [once][] and [dezalgo][] libs. Useful for and used in higher-level libs such as [always-done][] to handle completion of anything.")
## Contributing
Pull requests and stars are always welcome. For bugs and feature requests, [please create an issue](https://github.com/tunnckoCore/mich-parse-selector/issues/new).
Please read the [contributing guidelines](CONTRIBUTING.md) for advice on opening issues, pull requests, and coding standards.
If you need some help and can spent some cash, feel free to [contact me at CodeMentor.io](https://www.codementor.io/tunnckocore?utm_source=github&utm_medium=button&utm_term=tunnckocore&utm_campaign=github) too.
**In short:** If you want to contribute to that project, please follow these things
1. Please DO NOT edit [README.md](README.md), [CHANGELOG.md](CHANGELOG.md) and [.verb.md](.verb.md) files. See ["Building docs"](#building-docs) section.
2. Ensure anything is okey by installing the dependencies and run the tests. See ["Running tests"](#running-tests) section.
3. Always use `npm run commit` to commit changes instead of `git commit`, because it is interactive and user-friendly. It uses [commitizen][] behind the scenes, which follows Conventional Changelog idealogy.
4. Do NOT bump the version in package.json. For that we use `npm run release`, which is [standard-version][] and follows Conventional Changelog idealogy.
Thanks a lot! :)
## Building docs
Documentation and that readme is generated using [verb-generate-readme][], which is a [verb][] generator, so you need to install both of them and then run `verb` command like that
```
$ npm install verbose/verb#dev verb-generate-readme --global && verb
```
_Please don't edit the README directly. Any changes to the readme must be made in [.verb.md](.verb.md)._
## Running tests
Clone repository and run the following in that cloned directory
```
$ npm install && npm test
```
## Author
**Charlike Mike Reagent**
+ [github/tunnckoCore](https://github.com/tunnckoCore)
+ [twitter/tunnckoCore](https://twitter.com/tunnckoCore)
+ [codementor/tunnckoCore](https://codementor.io/tunnckoCore)
## License
Copyright © 2016-2017, [Charlike Mike Reagent](https://i.am.charlike.online). Released under the [MIT license](LICENSE).
***
_This file was generated by [verb-generate-readme](https://github.com/verbose/verb-generate-readme), v0.4.1, on February 10, 2017._
_Project scaffolded using [charlike][] cli._
[always-done]: https://github.com/hybridables/always-done
[async-done]: https://github.com/gulpjs/async-done
[base]: https://github.com/node-base/base
[charlike]: https://github.com/tunnckocore/charlike
[commitizen]: https://github.com/commitizen/cz-cli
[dezalgo]: https://github.com/npm/dezalgo
[hyperscript]: https://github.com/dominictarr/hyperscript
[once]: https://github.com/isaacs/once
[standard-version]: https://github.com/conventional-changelog/standard-version
[verb-generate-readme]: https://github.com/verbose/verb-generate-readme
[verb]: https://github.com/verbose/verb
[downloads-url]: https://www.npmjs.com/package/mich-parse-selector
[downloads-img]: https://img.shields.io/npm/dt/mich-parse-selector.svg
[codeclimate-url]: https://codeclimate.com/github/tunnckoCore/mich-parse-selector
[codeclimate-img]: https://img.shields.io/codeclimate/github/tunnckoCore/mich-parse-selector.svg
[travis-url]: https://travis-ci.org/tunnckoCore/mich-parse-selector
[travis-img]: https://img.shields.io/travis/tunnckoCore/mich-parse-selector/master.svg?label=linux
[appveyor-url]: https://ci.appveyor.com/project/tunnckoCore/mich-parse-selector
[appveyor-img]: https://img.shields.io/appveyor/ci/tunnckoCore/mich-parse-selector/master.svg?label=windows
[coverage-url]: https://codecov.io/gh/tunnckoCore/mich-parse-selector
[coverage-img]: https://img.shields.io/codecov/c/github/tunnckoCore/mich-parse-selector/master.svg
[david-url]: https://david-dm.org/tunnckoCore/mich-parse-selector
[david-img]: https://img.shields.io/david/tunnckoCore/mich-parse-selector.svg
[standard-url]: https://github.com/feross/standard
[standard-img]: https://img.shields.io/badge/code%20style-standard-brightgreen.svg
[gibon]: https://github.com/tunnckocore/gibon