You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

140 lines
5.1 KiB

4 years ago
  1. # parser
  2. [![Build Status][travis-image]][travis-url]
  3. [![Code Quality][codeclimate-image]][codeclimate-url]
  4. [![NPM version][npm-version-image]][npm-url]
  5. [![NPM downloads][npm-downloads-image]][npm-url]
  6. [![MIT License][license-image]][license-url]
  7. [![Coverage Status][coverage-image]][coverage-url]
  8. Minimal, loose html parser for Riot tags
  9. ### Install
  10. ```bash
  11. npm i @riotjs/parser --save
  12. ```
  13. The package has two modules:
  14. ```js
  15. // Use as: parser(options).parse(code, startPosition)
  16. const parser = require('@riotjs/parser').default
  17. // The enum NodeTypes (a plain JS object) that contains the values of the
  18. // type property of the nodes emited by tagParser (and more).
  19. const nodeTypes = require('@riotjs/parser').nodeTypes
  20. ```
  21. ES6 modules export:
  22. ```js
  23. import parser, { nodeTypes } from '@riotjs/parser'
  24. ```
  25. This parser is a low-level tool that builds a simple array of objects with information about the given html fragment, readed secuencially. It is designed to parse one single tag and not entire html pages, the tag closing the root element ends the parsing.
  26. There are 3 main node types:
  27. * Tags - HTMLElements, including SCRIPT and STYLE elements.
  28. * Comments - Ignored by default.
  29. * Text - Text nodes.
  30. Opening tags can contain attributes. Text and attribute values can contain expressions.
  31. There's no support for untagged JavaScript block.
  32. The value returned by the parser is an object like this:
  33. ```js
  34. {
  35. data, // String of the given html fragment with no changes.
  36. output // Array of objects with information about the parsed tags.
  37. }
  38. ```
  39. The first element of `output` is the opening tag of the root element.
  40. The parsing stops when the closing tag of the root is found, so the last node have the ending position.
  41. ### Commands
  42. * Build: `npm run build`
  43. * Test: `npm t`
  44. * Samples: `npm run samples`
  45. ## Tag names
  46. Both, html and Riot tag names must start with a 7 bit letter (`[a-zA-Z]`) followed by zero o more ISO-8859-1 characters, except those in `[\x00-\x2F\x7F-\xA0>/]`.
  47. If the first letter is not found, it becomes simple text.
  48. Any non-recognized character ends the tag name (`'/'` behaves like whitespace).
  49. All the tag names are converted to lower case.
  50. ## Openning Tags
  51. Start with a `'<'` followed by a [tag name](#tag-names) or the character `'!'` that signals the start of a [comment](#comments), `DOCTYPE` or `CDATA` declaration (last two are parsed as comments).
  52. Against the html5 specs, tags ending with `'/>'` are preserved as self-closing tags (the builder must handle this).
  53. ## Closing tags
  54. They are included in the output, except for void or self-closing tags, and its name include the first slash.
  55. ## Attributes
  56. Accepts all characters as the tag names and more.
  57. An equal sign (`'='`) separates the name of the value. If there's no name, this `'='` is the first character of the name (yes). The value can be empty.
  58. One or more slashes (`'/'`) behaves like whitespace. In the name, the slash splits the name generating two attributes, even if the name was quoted.
  59. The first `>` anywhere in the openning tag ends the attribute list, except if this is in a quoted value.
  60. All attribute names are converted to lowercase and the unquoted values are trimmed.
  61. ## Comments
  62. Must start with `'<!--'`. The next following `'-->'` or the end of file ends the comment.
  63. Comments in short notation, starting with `'<!'` (without `'--'`), ends at the first `'>'`.
  64. By default, comments are discarted.
  65. ## Expressions
  66. Expressions may be contained in attribute values or text nodes.
  67. The default delimiters are `'{'` and `'}'`.
  68. There may be more tan one expression as part of one attribute value or text node, or only one replacing the entire value or node.
  69. When used as the whole attribute value, there's no need to enclose the expression inside quotes, even if the expression contains whitespace.
  70. Single and double quotes can be nested inside the expression.
  71. To emit opening (left) brackets as literal text wherever an opening bracket is expected, the bracket must be prefixed with a backslash (the JS escape char `'\'`).
  72. This character is preserved in the output, but the parser will add a `replace` property for the attribute or node containing the escaped bracket, whose value is the bracket itself.
  73. ## Options
  74. * `comments` - Pass `true` to preserve the comments.
  75. * `brackets` - Array of two string with the left/right brackets used to extract expressions.
  76. [travis-image]:https://img.shields.io/travis/riot/parser.svg?style=flat-square
  77. [travis-url]:https://travis-ci.org/riot/parser
  78. [license-image]:http://img.shields.io/badge/license-MIT-000000.svg?style=flat-square
  79. [license-url]:LICENSE.txt
  80. [npm-version-image]:http://img.shields.io/npm/v/@riotjs/parser.svg?style=flat-square
  81. [npm-downloads-image]:http://img.shields.io/npm/dm/@riotjs/parser.svg?style=flat-square
  82. [npm-url]:https://npmjs.org/package/@riotjs/parser
  83. [coverage-image]:https://img.shields.io/coveralls/riot/parser/master.svg?style=flat-square
  84. [coverage-url]:https://coveralls.io/r/riot/parser/?branch=master
  85. [codeclimate-image]:https://api.codeclimate.com/v1/badges/5db4f1c96a43e3736cf0/maintainability
  86. [codeclimate-url]:https://codeclimate.com/github/riot/parser