Security News
The Unpaid Backbone of Open Source: Solo Maintainers Face Increasing Security Demands
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.
By Sarah Gooding - Sep 20, 2024
posthtml-render
Advanced tools
What is posthtml-render?
The posthtml-render package is a utility for rendering PostHTML tree structures into HTML strings. It is commonly used in conjunction with PostHTML parsers and plugins to transform and generate HTML content programmatically.
What are posthtml-render's main functionalities?
Basic HTML Rendering
This feature allows you to render a basic HTML structure from a PostHTML tree. The code sample demonstrates rendering a simple div element with text content.
const render = require('posthtml-render');
const tree = [{ tag: 'div', content: 'Hello, World!' }];
const html = render(tree);
console.log(html); // <div>Hello, World!</div>Nested HTML Elements
This feature allows you to render nested HTML elements. The code sample shows how to create a div element containing a nested span element.
const render = require('posthtml-render');
const tree = [{ tag: 'div', content: [{ tag: 'span', content: 'Nested content' }] }];
const html = render(tree);
console.log(html); // <div><span>Nested content</span></div>Attributes Handling
This feature allows you to add attributes to HTML elements. The code sample demonstrates rendering an anchor tag with an href attribute.
const render = require('posthtml-render');
const tree = [{ tag: 'a', attrs: { href: 'https://example.com' }, content: 'Click here' }];
const html = render(tree);
console.log(html); // <a href="https://example.com">Click here</a>Other packages similar to posthtml-render
htmlparser2
htmlparser2 is a fast and forgiving HTML/XML parser. It can be used to parse HTML into a DOM-like structure, which can then be manipulated and rendered back to HTML. Compared to posthtml-render, htmlparser2 offers more comprehensive parsing capabilities but requires additional steps to render HTML.
cheerio
Cheerio is a fast, flexible, and lean implementation of core jQuery designed specifically for the server. It parses HTML and XML documents and provides a jQuery-like API for manipulating the resulting structure. Cheerio is more feature-rich in terms of DOM manipulation compared to posthtml-render, but it is also heavier and more complex.
jsdom
jsdom is a JavaScript implementation of the WHATWG DOM and HTML standards, primarily intended for use with Node.js. It allows you to create and manipulate a full DOM environment, including rendering HTML. jsdom is more powerful and comprehensive than posthtml-render, but it is also more resource-intensive.
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 "e;. |
quoteStyle | `{0 | 1 | 2}` |
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></img>
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 "e;.
true (Default)
<img src="<?php echo $foo["e;bar"e;] ?>">
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")'>
FAQs
Renders PostHTML Tree to HTML/XML
The npm package posthtml-render receives a total of 545,516 weekly downloads. As such, posthtml-render popularity was classified as popular.
We found that posthtml-render demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Package last updated on 18 Nov 2020
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Understanding License Exceptions: What Developers Need to Know
License exceptions modify the terms of open source licenses, impacting how software can be used, modified, and distributed. Developers should be aware of the legal implications of these exceptions.
By Sarah Gooding - Sep 20, 2024
Security News
Developer Accuses Tencent of Copyright Violation After Python Utility’s License Changed from GPLv3 to BSD
A developer is accusing Tencent of violating the GPL by modifying a Python utility and changing its license to BSD, highlighting the importance of copyleft compliance.
By Sarah Gooding - Sep 18, 2024