Package Exports

posthtml-render

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 (posthtml-render) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PostHTML Render

Renders a PostHTML Tree to HTML/XML

Install

npm i -D posthtml-render

ℹ️ This module is also available for bower and as an AMD, CommonJS and IIFE (global) module, uncompressed and compressed

Usage

`NodeJS`

const render = require('posthtml-render')

const tree = []

const node = {}

node.tag = 'ul'
node.attrs = { class: 'list' }
node.content = [
 'one',
 'two',
 'three'
].map((content) => ({ tag: 'li', content }))

tree.push(node)

const html = render(tree, options)

<ul class="list">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>

`🌐 Browser`

<!DOCTYPE html>
<html>
<head>
  <title>Title</title>
  <script src="./node_modules/posthtml-render/lib/browser.min.js"></script>
  <script >
    const tree = {
      tag: 'h1',
      attrs: {
        style: 'color: red;'
      },
      content: [ 'Title' ]
    }

    window.onload = function () {
      document.body.innerHTML = render(tree)
    }
  </script>
</head>
<body></body>
</html>

Options

Name	Type	Default	Description
`singleTags`	`{Array<String\|RegExp>}`	`[]`	Specify custom single tags (self closing)
`closingSingleTag`	`{String}`	`>`	Specify the single tag closing format
`quoteAllAttributes`	`{Boolean}`	`true`	Put double quotes around all tags, even when not necessary.
`replaceQuote`	`{Boolean}`	`true`	Replaces quotes in attribute values with `&quote;`.
`quoteStyle`	`{0 or 1 or 2}`	`2`	Specify the style of quote arround the attribute values

`singleTags`

Specify custom single tags (self closing)

`{String}`

const render = require('posthtml-render')

const tree = [ { tag: 'name' } ]
const options = { singleTags: [ 'name' ] }

const html = render(tree, options)

result.html

<name>

`{RegExp}`

const render = require('posthtml-render')

const tree = [ { tag: '%=title%' } ]
const options = { singleTags: [ /^%.*%$/ ] }

const html = render(tree, options)

result.html

<%=title%>

`closingSingleTag`

Specify the single tag closing format

`Formats`

const render = require('posthtml-render')

const tree = [ { tag: 'img' } ]

`'tag'`

const html = render(tree, { closingSingleTag: 'tag' })

<custom></custom>

`'slash'`

const html = render(tree, { closingSingleTag: 'slash' })

<custom />

`'default' (Default)`

const html = render(tree)

<img>

`'closeAs'`

const tree = [ {
  tag: 'custom',
  closeAs: 'default' // Available types: `tag` | `slash` | `default`
} ]
const html = render(tree, { closingSingleTag: 'closeAs' })

<custom>

`quoteAllAttributes`

Specify if all attributes should be quoted.

`true (Default)`

<i src="index.js"></i>

`false`

<i src=index.js></i>

`replaceQuote`

Replaces quotes in attribute values with &quote;.

`true (Default)`

<img src="<?php echo $foo[&quote;bar&quote;] ?>">

`false`

<img src="<?php echo $foo["bar"] ?>">

`quoteStyle`

`2 (Default)`

Attribute values are wrapped in double quotes:

<img src="https://example.com/example.png" onload="testFunc("test")">

`1`

Attribute values are wrapped in single quote:

<img src='https://example.com/example.png' onload='testFunc("test")'>

`0`

Quote style is based on attribute values (an alternative for replaceQuote option):

<img src="https://example.com/example.png" onload='testFunc("test")'>