All Projects → syntax-tree → hast-util-from-dom

syntax-tree / hast-util-from-dom

Licence: ISC license
utility to transform a DOM tree to hast

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to hast-util-from-dom

hast-util-sanitize
utility to sanitize hast nodes
Stars: ✭ 34 (+70%)
Mutual labels:  syntax-tree, util, unist, hast, hast-util
hast-util-to-html
utility to serialize hast to HTML
Stars: ✭ 47 (+135%)
Mutual labels:  syntax-tree, util, unist, hast, hast-util
mdast-util-to-hast
utility to transform mdast to hast
Stars: ✭ 53 (+165%)
Mutual labels:  syntax-tree, unist, hast, hast-util
unist-builder
utility to create a new trees with a nice syntax
Stars: ✭ 52 (+160%)
Mutual labels:  syntax-tree, util, unist
unist-util-inspect
utility to inspect nodes
Stars: ✭ 16 (-20%)
Mutual labels:  syntax-tree, util, unist
hast-util-select
utility to add `querySelector`, `querySelectorAll`, and `matches` support for hast
Stars: ✭ 20 (+0%)
Mutual labels:  util, hast, hast-util
unist-util-map
utility to create a new tree by mapping all nodes
Stars: ✭ 30 (+50%)
Mutual labels:  syntax-tree, util, unist
hast-util-to-mdast
utility to transform hast (HTML) to mdast (markdown)
Stars: ✭ 26 (+30%)
Mutual labels:  unist, hast, hast-util
hast-util-reading-time
utility to estimate the reading time
Stars: ✭ 55 (+175%)
Mutual labels:  unist, hast, hast-util
nlcst-to-string
utility to transform an nlcst tree to a string
Stars: ✭ 16 (-20%)
Mutual labels:  syntax-tree, util, unist
mdast-util-to-string
utility to get the plain text content of an mdast node
Stars: ✭ 27 (+35%)
Mutual labels:  syntax-tree, util, unist
unist-util-visit-parents
utility to recursively walk over unist nodes, with ancestral information
Stars: ✭ 25 (+25%)
Mutual labels:  syntax-tree, util, unist
unist-util-select
utility to select unist nodes with CSS-like selectors
Stars: ✭ 41 (+105%)
Mutual labels:  util, unist
sast
Parse CSS, Sass, SCSS, and Less into a unist syntax tree
Stars: ✭ 51 (+155%)
Mutual labels:  syntax-tree, unist
MarkdownSyntax
☄️ A Type-safe Markdown parser in Swift.
Stars: ✭ 65 (+225%)
Mutual labels:  syntax-tree, unist
xast
Extensible Abstract Syntax Tree
Stars: ✭ 32 (+60%)
Mutual labels:  syntax-tree, unist
ntast
Notion Abstract Syntax Tree specification.
Stars: ✭ 101 (+405%)
Mutual labels:  syntax-tree, unist
Unist Util Visit
utility to visit nodes
Stars: ✭ 101 (+405%)
Mutual labels:  syntax-tree, util
Unified
☔️ interface for parsing, inspecting, transforming, and serializing content through syntax trees
Stars: ✭ 3,036 (+15080%)
Mutual labels:  syntax-tree, unist
Lite Virtual List
Virtual list component library supporting waterfall flow based on vue
Stars: ✭ 223 (+1015%)
Mutual labels:  dom

hast-util-from-dom

Build Coverage Downloads Size Sponsors Backers Chat

hast utility to transform from a DOM tree.

Contents

What is this?

This package is a utility that takes a DOM tree (from the actual DOM or from things like jsdom) as input and turns it into a hast (HTML) syntax tree.

When should I use this?

You can use this project when you want to use hast in browsers. This package is very small, but it does so by:

  • …not providing positional information
  • …potentially yielding varying results in different (especially older) browsers

The hast utility hast-util-to-dom does the inverse of this utility. It turns hast into a DOM tree.

The rehype plugin rehype-dom-parse wraps this utility to parse HTML with DOM APIs.

Install

This package is ESM only. In Node.js (version 14.14+ and 16.0+), install with npm:

npm install hast-util-from-dom

In Deno with esm.sh:

import {fromDom} from 'https://esm.sh/hast-util-from-dom@4'

In browsers with esm.sh:

<script type="module">
  import {fromDom} from 'https://esm.sh/hast-util-from-dom@4?bundle'
</script>

Use

Say our page example.html looks as follows:

<!doctype html>
<title>Example</title>
<body>
  <main>
    <h1>Hi</h1>
    <p><em>Hello</em>, world!</p>
  </main>
  <script type="module">
    import {fromDom} from 'https://esm.sh/hast-util-from-dom@4?bundle'

    const hast = fromDom(document.querySelector('main'))

    console.log(hast)
  </script>

Now running open example.html prints the following to the console:

{type: "element", tagName: "main", properties: {}, children: Array}

API

This package exports the identifier fromDom. There is no default export.

fromDom(tree, options?)

Transform a DOM tree to a hast tree.

Parameters
  • tree (DomNode) — DOM tree to transform
  • options (Options, optional) — configuration
Returns

Equivalent hast node (HastNode).

AfterTransform

Callback called when each node is transformed (TypeScript type).

Parameters
  • domNode (DomNode) — DOM node that was handled
  • hastNode (HastNode) — corresponding hast node
Returns

Nothing.

Options

Configuration (TypeScript type).

Fields
  • afterTransform (AfterTransform, optional) — callback called when each node is transformed
Returns

HastNode.

Types

This package is fully typed with TypeScript. It exports the additional type Options.

Compatibility

Projects maintained by the unified collective are compatible with all maintained versions of Node.js. As of now, that is Node.js 12.20+, 14.14+, and 16.0+. Our projects sometimes work with older versions, but this is not guaranteed.

Security

Use of hast-util-from-dom itself is safe but see other utilities for more information on potential security problems.

Contribute

See contributing.md in syntax-tree/.github for ways to get started. See support.md for ways to get help.

This project has a code of conduct. By interacting with this repository, organisation, or community you agree to abide by its terms.

Related

License

ISC © Keith McKnight

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].