Array
+Parse HTML to PostHTML Tree
+
+**Kind**: global function
+**Returns**: Array - result
+
+| Param | Type |
+| --- | --- |
+| html | String |
+| options | Object |
+
diff --git a/README.md b/README.md
index 5b7da22..a096ab8 100644
--- a/README.md
+++ b/README.md
@@ -1,89 +1,151 @@
-# posthtml-parser
-[](http://badge.fury.io/js/posthtml-parser)
-[](https://travis-ci.org/posthtml/posthtml-parser?branch=master)
-[](https://coveralls.io/r/posthtml/posthtml-parser?branch=master)
+[![npm][npm]][npm-url]
+[![node][node]][node-url]
+[![deps][deps]][deps-url]
+[![tests][tests]][tests-url]
+[![coverage][cover]][cover-url]
+[![chat][chat]][chat-url]
+
+
+
+
+ Install
+ +```bash +npm i -D posthtml-parser +``` + +Usage
-Parse HTML/XML to [PostHTML AST](https://github.com/posthtml/posthtml-parser#posthtml-ast-format). -More about [PostHTML](https://github.com/posthtml/posthtml#readme) +```js +const parser = require('posthtml-parser') -## Install +const options = {} -[NPM](http://npmjs.com) install +const tree = parser(options)(html) ``` -$ npm install posthtml-parser + +### `AST Format` + +Any parser being used with PostHTML should return a standard PostHTML [Abstract Syntax Tree](https://www.wikiwand.com/en/Abstract_syntax_tree) (AST). Fortunately, this is a very easy format to produce and understand. The AST is an array that can contain strings and objects. Any strings represent plain text content to be written to the output. Any objects represent HTML tags. + +Tag objects generally look something like this: + +#### `Tag {Object}` + +```js +{ + tag: 'div', + attrs: { + class: 'name' + }, + content: [ 'Hello World!' ] +} ``` -## Usage +#### `Text (Content) {String}` -#### Input HTML -```html - - Cat - +```js +'Hello World!' ``` + +Tag objects can contain three keys. The `tag` key takes the name of the tag as the value. This can include custom tags. The optional `attrs` key takes an object with key/value pairs representing the attributes of the html tag. A boolean attribute has an empty string as its value. Finally, the optional `content` key takes an array as its value, which is a PostHTML AST. In this manner, the AST is a tree that should be walked recursively. + +Options
+ +|Name|Type|Default|Description| +|:--:|:--:|:-----:|:----------| +|**[`tags`](#tags)**|`{Array}`|`[ import, include ]`|Specify custom self closing tags| +|**[`directives`](#directives)**|`{Array}`|`[ doctype, ?php ]`|Specify custom directives| + +### `tags` + ```js const parser = require('posthtml-parser') -const fs = require('fs') -const html = fs.readFileSync('path/to/input.html').toString() -console.log(parser(html)) // Logs a PostHTML AST +const tags = [ 'import' ] + +const tree = parser({ tags })(html) ``` -#### input HTML +### `directives` + +```js +const parser = require('posthtml-parser') + +const directives = [ + { name: '?', start: '<', end: '>' } +] + +const tree = parser({ directives })(html) +``` + +Examples
+ +**file.html** ```html Cat ``` -#### Result PostHTMLTree ```js -[{ +const parser = require('posthtml-parser') + +const html = ` + + Cat + +` +const options = {} + +const tree = parser(options)(html) +``` + +```js +[ + { tag: 'a', attrs: { - class: 'animals', - href: '#' + class: 'animals', + href: '#' }, content: [ - '\n ', - { - tag: 'span', - attrs: { - class: 'animals__cat', - style: 'background: url(cat.png)' - }, - content: ['Cat'] + '\n ', + { + tag: 'span', + attrs: { + class: 'animals__cat', + style: 'background: url(cat.png)' }, - '\n' + content: [ 'Cat' ] + }, + '\n' ] -}] + } +] ``` -## PostHTML AST Format -Any parser being used with PostHTML should return a standard PostHTML [Abstract Syntax Tree](https://www.wikiwand.com/en/Abstract_syntax_tree) (AST). Fortunately, this is a very easy format to produce and understand. The AST is an array that can contain strings and objects. Any strings represent plain text content to be written to the output. Any objects represent HTML tags. +[npm]: https://img.shields.io/npm/v/posthtml-parser.svg +[npm-url]: https://npmjs.com/package/posthtml-parser -Tag objects generally look something like this: +[node]: https://img.shields.io/node/v/posthtml-parser.svg +[node-url]: https://nodejs.org -```js -{ - tag: 'div', - attrs: { - class: 'foo' - }, - content: ['hello world!'] -} -``` - -Tag objects can contain three keys. The `tag` key takes the name of the tag as the value. This can include custom tags. The optional `attrs` key takes an object with key/value pairs representing the attributes of the html tag. A boolean attribute has an empty string as its value. Finally, the optional `content` key takes an array as its value, which is a PostHTML AST. In this manner, the AST is a tree that should be walked recursively. - -## Options +[deps]: https://david-dm.org/posthtml/posthtml-parser.svg +[deps-url]: https://david-dm.org/posthtml/posthtml-parser -### `directives` -Type: `Array` -Default: `[{name: '!doctype', start: '<', end: '>'}]` -Description: *Adds processing of custom directives* +[tests]: http://img.shields.io/travis/posthtml/posthtml-parser.svg +[tests-url]: https://travis-ci.org/posthtml/posthtml-parser -## License +[cover]: https://coveralls.io/repos/github/posthtml/posthtml-parser/badge.svg +[cover-url]: https://coveralls.io/github/posthtml/posthtml-parser -[MIT](LICENSE) +[chat]: https://badges.gitter.im/posthtml/posthtml.svg +[chat-url]: https://gitter.im/posthtml/posthtml diff --git a/index.js b/index.js deleted file mode 100644 index da6c828..0000000 --- a/index.js +++ /dev/null @@ -1,122 +0,0 @@ -'use strict'; - -var htmlparser = require('htmlparser2'); -var isObject = require('isobject'); - -/** - * @see https://github.com/fb55/htmlparser2/wiki/Parser-options - */ -var defaultOptions = {lowerCaseTags: false, lowerCaseAttributeNames: false}; - -var defaultDirectives = [{name: '!doctype', start: '<', end: '>'}]; - -/** - * Parse html to PostHTMLTree - * @param {String} html - * @param {Object} [options=defaultOptions] - * @return {PostHTMLTree} - */ -function postHTMLParser(html, options) { - var bufArray = [], - results = []; - - bufArray.last = function() { - return this[this.length - 1]; - }; - - function parserDirective(name, data) { - var directives = options.directives || defaultDirectives; - var last = bufArray.last(); - - for (var i = 0; i < directives.length; i++) { - var directive = directives[i]; - var directiveText = directive.start + data + directive.end; - - if (name.toLowerCase() === directive.name) { - if (!last) { - results.push(directiveText); - return; - } - - last.content || (last.content = []); - last.content.push(directiveText); - } - } - } - - var parser = new htmlparser.Parser({ - onprocessinginstruction: parserDirective, - oncomment: function(data) { - var comment = '', - last = bufArray.last(); - - if (!last) { - results.push(comment); - return; - } - - last.content || (last.content = []); - last.content.push(comment); - }, - onopentag: function(tag, attrs) { - var buf = { tag: tag }; - - if (Object.keys(attrs).length) { - buf.attrs = attrs; - } - - bufArray.push(buf); - }, - onclosetag: function() { - var buf = bufArray.pop(); - - if (!bufArray.length) { - results.push(buf); - return; - } - - var last = bufArray.last(); - if (!Array.isArray(last.content)) { - last.content = []; - } - - last.content.push(buf); - }, - ontext: function(text) { - var last = bufArray.last(); - if (!last) { - results.push(text); - return; - } - - last.content || (last.content = []); - last.content.push(text); - } - }, options || defaultOptions); - - parser.write(html); - parser.end(); - - return results; -} - -function parserWrapper() { - var option; - - function parser(html) { - var opt = option || defaultOptions; - return postHTMLParser(html, opt); - } - - if (arguments.length === 1 && isObject(arguments[0])) { - option = arguments[0]; - return parser; - } - - option = arguments[1]; - return parser(arguments[0]); -} - -module.exports = parserWrapper; -module.exports.defaultOptions = defaultOptions; -module.exports.defaultDirectives = defaultDirectives; diff --git a/lib/index.js b/lib/index.js new file mode 100644 index 0000000..24133a4 --- /dev/null +++ b/lib/index.js @@ -0,0 +1,14 @@ +'use strict' + +const parser = require('./parser') + +module.exports = function (options) { + options = Object.assign( + { lowerCaseTags: false, lowerCaseAttributeNames: false }, + options + ) + + return function (html) { + return parser(html, options) + } +} diff --git a/lib/parser.js b/lib/parser.js new file mode 100644 index 0000000..8e0805b --- /dev/null +++ b/lib/parser.js @@ -0,0 +1,124 @@ +'use strict' + +const Parser = require('htmlparser2/lib/Parser') + +const DIRECTIVES = [ + { name: '!doctype', start: '<', end: '>' }, + { name: '?php', start: '<', end: '>' } +] +/** + * Parse HTML to PostHTML Tree + * + * @method parser + * + * @param {String} html + * @param {Object} options + * + * @return {Array} result + */ +function parser (html, options) { + const buffer = [] + + buffer.last = function () { + return this[this.length - 1] + } + + const result = [] + + const directives = DIRECTIVES.concat(options.directives || []) + + const parse = new Parser({ + onprocessinginstruction: function (name, data) { + let last = buffer.last() + + directives.forEach((directive) => { + const node = directive.start + data + directive.end + + if (name.toLowerCase() === directive.name) { + if (!last) { + result.push(node) + + return + } + + last.content || (last.content = []) + last.content.push(node) + } + }) + }, + + oncomment: function (data) { + const comment = '' + + const last = buffer.last() + + if (!last) { + result.push(comment) + + return + } + + last.content || (last.content = []) + last.content.push(comment) + }, + + onopentag: function (tag, attrs) { + const node = {} + + node.tag = tag + + if (attrs && Object.keys(attrs).length > 0) { + node.attrs = {} + + Object.keys(attrs).forEach((attr) => { + node.attrs[attr] = attrs[attr] + }) + } + + buffer.push(node) + }, + + onclosetag: function () { + const node = buffer.pop() + + if (!buffer.length) { + // undefined for selfClosing tags + // since we don't have any contents + // or an additional closing tag + if (node) { + result.push(node) + } + + return + } + + const last = buffer.last() + + if (!Array.isArray(last.content)) { + last.content = [] + } + + last.content.push(node) + }, + + ontext: function (text) { + const last = buffer.last() + + if (!last) { + result.push(text) + + return + } + + last.content || (last.content = []) + last.content.push(text) + } + }, options) + + parse.write(html) + parse.end() + + return result +} + +module.exports = parser diff --git a/package.json b/package.json index 91a4aca..bea5849 100644 --- a/package.json +++ b/package.json @@ -2,40 +2,40 @@ "name": "posthtml-parser", "version": "0.3.0", "description": "Parse HTML/XML to PostHTMLTree", - "keywords": [ - "html", - "xml", - "parser", - "posthtml", - "posthtmltree" - ], - "main": "index.js", - "scripts": { - "test": "npm run lint && npm run coverage", - "lint": "jshint . && jscs -v .", - "coverage": "istanbul cover --report text --report html --report lcov node_modules/mocha/bin/_mocha", - "preversion": "npm test", - "postversion": "git push && git push --tags && rm -rf coverage" - }, - "repository": "posthtml/posthtml-parser", "author": "Ivan VoischevText
'
+ const expected = [
+ {
+ tag: 'div',
+ content: [ 'Text' ]
+ }
+ ]
+
+ expect(parser(options)(fixture)).to.eql(expected)
+ })
+ })
+
+ it('Integration - Tree', function () {
+ const options = {}
+
+ const fixture = 'Text 1Text 2Text 3'
+ const expected = [
+ {
+ tag: 'span',
+ content: [ 'Text 1' ]
+ },
+ {
+ tag: 'span',
+ content: [ 'Text 2' ]
+ },
+ 'Text 3'
+ ]
+
+ expect(parser(options)(fixture)).to.eql(expected)
+ })
+
+ it('Integration - Node', function () {
+ const options = {}
+
+ const fixture = 'Text 1Text 2Text 3
'
+ const expected = [
+ {
+ tag: 'div',
+ content: [
+ {
+ tag: 'span',
+ content: [ 'Text 1' ]
+ },
+ {
+ tag: 'span',
+ content: [ 'Text 2' ]
+ },
+ 'Text 3'
+ ]
+ }
+ ]
+
+ expect(parser(options)(fixture)).to.eql(expected)
+ })
+})
diff --git a/test/test.js b/test/test.js
deleted file mode 100644
index ed5696e..0000000
--- a/test/test.js
+++ /dev/null
@@ -1,134 +0,0 @@
-var parser = require('..');
-var parserWithMockedDeps = require('rewire')('..');
-var describe = require('mocha').describe;
-var it = require('mocha').it;
-var beforeEach = require('mocha').beforeEach;
-var chai = require('chai');
-var sinon = require('sinon');
-var expect = chai.expect;
-chai.use(require('sinon-chai'));
-
-describe('PostHTML-Parser test', function() {
- describe('Call signatures', function() {
- var customOptions = {lowerCaseTags: false, lowerCaseAttributeNames: false};
- var MockedHtmlParser2;
- var parserSpy;
-
- beforeEach(function() {
- // jscs:disable requireFunctionDeclarations
- MockedHtmlParser2 = function() {};
- MockedHtmlParser2.prototype = {
- write: function() {},
- end: function() {}
- };
- // jscs:enable requireFunctionDeclarations
-
- // Create spy on mocked htmlparser2 to collect call stats
- parserSpy = sinon.spy(MockedHtmlParser2);
-
- // Replace real htmlparser2 dependency of posthtml-parser with mocked
- parserWithMockedDeps.__set__({
- htmlparser: {Parser: parserSpy}
- });
- });
-
- it('should use default options when called with 1 param', function() {
- parserWithMockedDeps('');
- expect(parserSpy.firstCall.args[1]).to.eql(parser.defaultOptions);
- });
-
- it('should use custom options when called with 2 params', function() {
- parserWithMockedDeps('', customOptions);
- expect(parserSpy.firstCall.args[1]).to.eql(customOptions);
- });
-
- it('should use custom params when called as factory function', function() {
- var factory = parserWithMockedDeps(customOptions);
- expect(factory).to.be.a('function');
- expect(factory('')).to.be.an('array');
- expect(parserSpy.firstCall.args[1]).to.eql(customOptions);
- });
- });
-
- it('should be parse doctype in uppercase', function() {
- expect(parser('')).to.eql(['']);
- });
-
- it('should be parse comment', function() {
- expect(parser('')).to.eql(['']);
- });
-
- it('should be parse comment in content', function() {
- expect(parser('')).to.eql([{tag: 'div', content: ['']}]);
- });
-
- it('should be parse doctype', function() {
- expect(parser('')).to.eql(['']);
- });
-
- it('should be parse directive', function() {
- var customDirectives = {directives: [
- {name: '?php', start: '<', end: '>'}
- ]};
-
- expect(parser('', customDirectives)).to.eql(['']);
- });
-
- it('should be parse directives and tag', function() {
- var customDirectives = {directives: [
- {name: '!doctype', start: '<', end: '>'},
- {name: '?php', start: '<', end: '>'}
- ]};
-
- var html = '';
- var tree = [
- '',
- {
- content: [''],
- tag: 'html'
- }
- ];
-
- expect(parser(html, customDirectives)).to.eql(tree);
- });
-
- it('should be parse tag', function() {
- expect(parser('')).to.eql([{ tag: 'html' }]);
- });
-
- it('should be parse doctype and tag', function() {
- expect(parser('')).to.eql(['', { tag: 'html' }]);
- });
-
- it('should be parse tag attrs', function() {
- expect(parser('')).to.eql([{
- tag: 'div', attrs: { id: 'id', class: 'class'} }
- ]);
- });
-
- it('should be parse text', function() {
- expect(parser('Text')).to.eql(['Text']);
- });
-
- it('should be parse text in content', function() {
- expect(parser('Text
')).to.eql([{ tag: 'div', content: ['Text'] }]);
- });
-
- it('should be parse not a single node in tree', function() {
- expect(parser('Text1Text2Text3')).to.eql([
- { tag: 'span', content: ['Text1']}, { tag: 'span', content: ['Text2']}, 'Text3'
- ]);
- });
-
- it('should be parse not a single node in parent content', function() {
- expect(parser('Text1Text2Text3
')).to.eql([
- { tag: 'div', content: [{ tag: 'span', content: ['Text1']}, { tag: 'span', content: ['Text2']}, 'Text3'] }
- ]);
- });
-
- it('should be parse camelCase tag name', function() {
- expect(parser('