mich-parse-selector

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

You might also be interested in gibon - a minimal & functional 600 bytes client-side router.

Table of Contents

• Install
• Usage
• API
  • michParseSelector
• Related
• Contributing
• Building docs
• Running tests
• Author
• License

(TOC generated by verb using markdown-toc)

Install

Install with npm

$ npm install mich-parse-selector --save

or install using yarn

$ yarn add mich-parse-selector

Usage

For more use-cases see the tests

const michParseSelector = require('mich-parse-selector')

API

michParseSelector

Parse a simple CSS selector like p.foo#hero.btn-large.btn into a 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-compliant node object

Example

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: Handle completion and errors with elegance! Support for streams, callbacks, promises, child processes, async/await and sync functions. A drop-in replacement… more | homepage
• gibon: Functional client-side router in ~570 bytes, built on HTML5 History API | homepage
• hast-util-parse-selector: Parse a simple CSS selector to a HAST node | homepage
• hastscript: Hyperscript compatible DSL for creating virtual HAST trees | homepage
• hyperscript: Create HyperText with JavaScript, on client or server. | homepage
• minibase: Minimalist alternative for Base. Build complex APIs with small units called plugins. Works well with most of the already existing… more | homepage
• 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 | homepage

Contributing

Pull requests and stars are always welcome. For bugs and feature requests, please create an issue.
Please read the contributing guidelines 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 too.

In short: If you want to contribute to that project, please follow these things

1. Please DO NOT edit README.md, CHANGELOG.md and .verb.md files. See "Building docs" section.
2. Ensure anything is okey by installing the dependencies and run the tests. See "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.

Running tests

Clone repository and run the following in that cloned directory

$ npm install && npm test

Author

Charlike Mike Reagent

• github/tunnckoCore
• twitter/tunnckoCore
• codementor/tunnckoCore

License

Copyright © 2016-2017, Charlike Mike Reagent. Released under the MIT license.

---

This file was generated by verb-generate-readme, v0.4.1, on February 10, 2017.
Project scaffolded using charlike cli.