preact-render-to-dom

This package is a rewrite of preact-render-to-string to render Preact virtual DOM content directly to DOM, without any support for reactivity or updates.

It's intended for rendering static documents, such as SVG images. In particular, it's helpful on NodeJS when rendering to another virtual implementation of real DOM, specifically one of:

• xmldom
• jsdom

Compared to rendering via preact-render-to-string, followed by parsing via xmldom or jsdom, this package is ~4x or ~24x faster, respectively. Try npm test yourself!

SVG Tiler uses this package to more quickly convert Preact VDOM to xmldom intermediate form used to compose the entire document, before rendering everything to a file.

Usage

See test.coffee for examples of usage.

In the examples below, the resulting dom object should be a Node, specifically an Element, DocumentFragment, or TextNode.

Real DOM

import {RenderToDom} from 'preact-render-to-dom';
const dom = new RenderToDom().render(preactVDom);

xmldom

import {RenderToXMLDom} from 'preact-render-to-dom';
import xmldom from '@xmldom/xmldom';
const dom = new RenderToXMLDom({xmldom}).render(preactVDom);

jsdom

import {RenderToJSDom} from 'preact-render-to-dom';
import jsdom from 'jsdom';
const dom = new RenderToJSDom({jsdom}).render(preactVDom);

Options

The RenderTo*Dom classes support a single options argument, which can have the following properties:

• svg: true: start in SVG mode (not needed if top-level tag is <svg>)
• skipNS: true: don't bother using document.createElementNS in SVG mode (saves time, and usually not needed with xmldom for example)
• RenderToDom only:
  • document: an interface like the browser's document (defaults to document global if available)
  • DOMParser: an interface like the browser's DOMParser (needed only if nodes do not support the innerHTML interface)
• RenderToXMLDom only:
  • xmldom: the result of importing @xmldom/xmldom
• RenderToJSDom only:
  • jsdom: the result of importing jsdom, or the JSDOM class within

License

The code is released under an MIT license, the same license as preact-render-to-string on which this code is heavily based.

Last modeled after this preact-render-to-string commit.