Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/tunnckocore/mich-parse-selector

Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in Hyperscript
https://github.com/tunnckocore/mich-parse-selector

ast css css-selector-parser dom hast hastscript html hyperscript mich parser virtual-dom

Last synced: 3 months ago
JSON representation

Tiny parser for simple CSS selectors, just in ~300 bytes. Pretty similar to what is done in Hyperscript

Host: GitHub
URL: https://github.com/tunnckocore/mich-parse-selector
Owner: tunnckoCore
License: mit
Created: 2017-02-09T20:41:31.000Z (almost 8 years ago)
Default Branch: master
Last Pushed: 2022-12-06T15:21:14.000Z (about 2 years ago)
Last Synced: 2024-10-05T02:17:04.774Z (4 months ago)
Topics: ast, css, css-selector-parser, dom, hast, hastscript, html, hyperscript, mich, parser, virtual-dom
Language: JavaScript
Homepage:
Size: 476 KB
Stars: 3
Watchers: 3
Forks: 0
Open Issues: 12
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE

Awesome Lists containing this project

README

        # mich-parse-selector [![NPM version](https://img.shields.io/npm/v/mich-parse-selector.svg?style=flat)](https://www.npmjs.com/package/mich-parse-selector) [![NPM monthly downloads](https://img.shields.io/npm/dm/mich-parse-selector.svg?style=flat)](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