Awesome
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
(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 todiv
.
Params
selector
{String}: a css selectorreturns
{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
- Please DO NOT edit README.md, CHANGELOG.md and .verb.md files. See "Building docs" section.
- Ensure anything is okey by installing the dependencies and run the tests. See "Running tests" section.
- Always use
npm run commit
to commit changes instead ofgit commit
, because it is interactive and user-friendly. It uses commitizen behind the scenes, which follows Conventional Changelog idealogy. - 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
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.