syntax-tree/hast-util-from-parse5Public

NotificationsYou must be signed in to change notification settings
Fork8
Star17

utility to transform Parse5’s AST to hast

License

MIT license

17 stars 8 forks Branches Tags Activity

Star

Notifications

You must be signed in to change notification settings

Branches Tags

Folders and files

Name		Name	Last commit message	Last commit date
Latest commit History 153 Commits
.github/workflows		.github/workflows
lib		lib
test		test
.editorconfig		.editorconfig
.gitignore		.gitignore
.npmrc		.npmrc
.prettierignore		.prettierignore
index.d.ts		index.d.ts
index.js		index.js
license		license
package.json		package.json
readme.md		readme.md
tsconfig.json		tsconfig.json

Repository files navigation

hast-util-from-parse5

hast utility to transform from theparse5 AST.

What is this?

This package is a utility that can turn a parse5 tree into a hast tree.

When should I use this?

You can use this package when usingparse5 as an HTML parser and wanting towork with hast.

The utilityhast-util-to-parse5 does theinverse of this utility.It generatesparse5s AST again.

The utilityhast-util-from-html wraps thisutility andparse5 to both parse HTML and generate hast from it.

Install

This package isESM only.In Node.js (version 16+),install withnpm:

npm install hast-util-from-parse5

In Deno withesm.sh:

import{fromParse5}from"https://esm.sh/hast-util-from-parse5@8"

In browsers withesm.sh:

<scripttype="module">import{fromParse5}from"https://esm.sh/hast-util-from-parse5@8?bundle"</script>

Use

Say our documentexample.html contains:

<!doctype html><title>Hello!</title><h1id="world">World!<!--after-->

…and our moduleexample.js looks as follows:

import{fromParse5}from'hast-util-from-parse5'import{parse}from'parse5'import{read}from'to-vfile'import{inspect}from'unist-util-inspect'constfile=awaitread('example.html')constp5ast=parse(String(file),{sourceCodeLocationInfo:true})consthast=fromParse5(p5ast,{file})console.log(inspect(hast))

…now runningnode example.js yields:

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

API

This package exports the identifierfromParse5.There is no default export.

`fromParse5(tree[, options])`

Transform aparse5 AST to hast.

Parameters

tree(Parse5Node)—parse5 tree to transform
options(Options, optional)— configuration

Returns

hast tree (HastNode).

`Options`

Configuration (TypeScript type).

Fields

`file`

File used to add positional info to nodes(VFile, optional).

If given,the file should represent the original HTML source.

`space`

Which space the document is in(Space, default:'html').

When an<svg> element is found in the HTML space,this package already automatically switches to and from the SVG space whenentering and exiting it.

`verbose`

Whether to add extra positional info about starting tags,closing tags,and attributes to elements(boolean, default:false).

👉Note:only used whenfile is given.

For the following HTML:

<imgsrc="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}}}

`Space`

Namespace (TypeScript type).

Type

typeSpace='html'|'svg'

Types

This package is fully typed withTypeScript.It exports the additional typesOptions andSpace.

Compatibility

Projects maintained by the unified collective are compatible with maintainedversions of Node.js.

When we cut a new major release,we drop support for unmaintained versions of Node.This means we try to keep the current release line,hast-util-from-parse5@8,compatible with Node.js 16.