Package Exports

hast-util-from-parse5

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (hast-util-from-parse5) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

hast-util-from-parse5

Transform HAST to Parse5’s AST.

Installation

npm:

npm install hast-util-from-parse5

Usage

Dependencies:

var parse5 = require('parse5');
var inspect = require('unist-util-inspect');
var vfile = require('vfile');
var fromParse5 = require('hast-util-from-parse5');

Fixture:

var doc = '<!doctype html><title>Hello!</title><h1 id="world">World!<!--after-->';

Parse:

var ast = parse5.parse(doc, {locationInfo: true});

Transform:

var hast = fromParse5(ast, vfile(doc));

Yields:

root[2] (1:1-1:70, 0-69) [data={"quirksMode":false}]
├─ doctype (1:1-1:16, 0-15) [name="html"]
└─ element[2] [tagName="html"]
   ├─ element[1] [tagName="head"]
   │  └─ element[1] (1:16-1:37, 15-36) [tagName="title"]
   │     └─ text: "Hello!" (1:23-1:29, 22-28)
   └─ element[1] [tagName="body"]
      └─ element[2] (1:37-1:70, 36-69) [tagName="h1"][properties={"id":"world"}]
         ├─ text: "World!" (1:52-1:58, 51-57)
         └─ comment: "after" (1:58-1:70, 57-69)

API

`toParse5(ast[, options])`

Transform an ASTNode to a HAST Node.

`options`

If options is a VFile, it’s treated as {file: options}.

`options.file`

Virtual file, used to add positional information to HAST nodes. If given, the file should have the original HTML source as its contents.

`options.verbose`

Whether to add positional information about starting tags, closing tags, and attributes to elements (boolean, default: false). Note: not used without file.

For the following HTML:

<img src="http://example.com/fav.ico" alt="foo" title="bar">

The verbose info would looks as follows:

{
  type: 'element',
  tagName: 'img',
  properties: {
    src: 'http://example.com/fav.ico',
    alt: 'foo',
    title: 'bar'
  },
  children: [],
  data: {
    position: {
      opening: {
        start: {line: 1, column: 1, offset: 0},
        end: {line: 1, column: 61, offset: 60}
      },
      closing: null,
      properties: {
        src: {
          start: {line: 1, column: 6, offset: 5},
          end: {line: 1, column: 38, offset: 37}
        },
        alt: {
          start: {line: 1, column: 39, offset: 38},
          end: {line: 1, column: 48, offset: 47}
        },
        title: {
          start: {line: 1, column: 49, offset: 48},
          end: {line: 1, column: 60, offset: 59}
        }
      }
    }
  },
  position: {
    start: {line: 1, column: 1, offset: 0},
    end: {line: 1, column: 61, offset: 60}
  }
}