hast-util-to-dom

hast utility to transform to the DOM

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
hast-util-to-dom
1904.0.09 months ago6 years agoMinified + gzip package size for hast-util-to-dom in KB

Popular Searches

Readme

hast-util-to-dom
!Buildbuild-badgebuild !Coveragecoverage-badgecoverage !Downloadsdownloads-badgedownloads !Sizesize-badgesize !Sponsorssponsors-badgecollective !Backersbackers-badgecollective !Chatchat-badgechat
hast utility to transform to a DOM tree.

Contents

*   [`toDom(tree[, options])`](#todomtree-options)
*   [`AfterTransform`](#aftertransform)
*   [`Options`](#options)

What is this?

This package is a utility that creates a DOM tree (defaulting to the actual DOM but also supporting things like jsdomjsdom) from a hast (HTML) syntax tree.

When should I use this?

You can use this project when you want to turn hast into a DOM in browsers, either to use it directly on a page, or to enable the use of DOM APIs (such as querySelector to find things or innerHTML to serialize stuff).
The hast utility hast-util-from-domhast-util-from-dom does the inverse of this utility. It turns DOM trees into hast.
The rehype plugin rehype-dom-stringifyrehype-dom-stringify wraps this utility to serialize as HTML with DOM APIs.

Install

This package is ESM onlyesm. In Node.js (version 16+), install with npm:
npm install hast-util-to-dom

In Deno with esm.shesmsh:
import {toDom} from 'https://esm.sh/hast-util-to-dom@4'

In browsers with esm.shesmsh:
<script type="module">
  import {toDom} from 'https://esm.sh/hast-util-to-dom@4?bundle'
</script>

Use

Say our page example.html looks as follows:
<!doctype html>
<title>Example</title>
<body>
  <script type="module">
    import {h} from 'https://esm.sh/hastscript?bundle'
    import {toDom} from 'https://esm.sh/hast-util-to-dom?bundle'

    const tree = h('main', [
      h('h1', 'Hi'),
      h('p', [h('em', 'Hello'), ', world!'])
    ])

    document.body.append(toDom(tree))
  </script>

Now running open example.html shows the main, h1, and p elements on the page.

API

This package exports the identifier toDomapi-to-dom. There is no default export.

toDom(tree[, options])

Turn a hast tree into a DOM tree.
Parameters
— tree to transform
— configuration
Returns
DOM node (DomNodedom-node).

AfterTransform

Callback called when each node is transformed (TypeScript type).
Parameters
— hast node that was handled
— corresponding DOM node
Returns
Nothing.

Options

Configuration (TypeScript type).
Fields
— callback called when each node is transformed
  • document (Document, default: globalThis.document)
— document interface to use.
  • fragment (boolean, default: false)
— whether to return a DOM fragment (`true`) or a whole document (`false`)
  • namespace (string, default: depends)
— namespace to use to create elements

Syntax tree

The syntax tree is hast.

Types

This package is fully typed with TypeScript. It exports the additional types AfterTransformapi-after-transform and Optionsapi-options.

Compatibility

Projects maintained by the unified collective are compatible with maintained versions 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-to-dom@^4, compatible with Node.js 16.

Security

Use of hast-util-to-dom can open you up to a cross-site scripting (XSS)xss attack if the hast tree is unsafe. Use hast-util-santizehast-util-sanitize to make the hast tree safe.

Related

— sanitize hast nodes
— serialize as HTML
— create a hast tree from a DOM tree

Contribute

See contributing.mdcontributing in syntax-tree/.githubhealth for ways to get started. See support.mdsupport for ways to get help.
This project has a code of conductcoc. By interacting with this repository, organization, or community you agree to abide by its terms.

License

ISClicense © Keith McKnightauthor