Serializes a dom-like JSON tree into HTML. This is helpful if you end up with a DOM-like JSON object and need to serialize it to HTML. An example use case is using puppeteer to get the DOM tree from a page and wanting to recreate the flattened HTML including shadow roots.
Let's say we have this JSON representation of a webpage:
{
"nodeId": 1,
"backendNodeId": 3,
"nodeType": 9,
"nodeName": "#document",
"localName": "",
"nodeValue": "",
"childNodeCount": 2,
"children": [{
"nodeId": 2,
"parentId": 1,
"backendNodeId": 8,
"nodeType": 10,
"nodeName": "html",
"localName": "",
"nodeValue": "",
"publicId": "",
"systemId": ""
}, {
"nodeId": 3,
"parentId": 1,
"backendNodeId": 9,
"nodeType": 1,
"nodeName": "HTML",
"localName": "html",
"nodeValue": "",
"childNodeCount": 2,
"children": [{
"nodeId": 4,
"parentId": 3,
"backendNodeId": 10,
"nodeType": 1,
"nodeName": "HEAD",
"localName": "head",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 5,
"parentId": 4,
"backendNodeId": 11,
"nodeType": 1,
"nodeName": "STYLE",
"localName": "style",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 6,
"parentId": 5,
"backendNodeId": 12,
"nodeType": 3,
"nodeName": "#text",
"localName": "",
"nodeValue": "\n h1 { color: red; }\n "
}],
"attributes": []
}],
"attributes": []
}, {
"nodeId": 7,
"parentId": 3,
"backendNodeId": 13,
"nodeType": 1,
"nodeName": "BODY",
"localName": "body",
"nodeValue": "",
"childNodeCount": 5,
"children": [{
"nodeId": 8,
"parentId": 7,
"backendNodeId": 4,
"nodeType": 1,
"nodeName": "H1",
"localName": "h1",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 9,
"parentId": 8,
"backendNodeId": 14,
"nodeType": 3,
"nodeName": "#text",
"localName": "",
"nodeValue": "Hello World!"
}],
"attributes": []
}, {
"nodeId": 10,
"parentId": 7,
"backendNodeId": 5,
"nodeType": 1,
"nodeName": "P",
"localName": "p",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 11,
"parentId": 10,
"backendNodeId": 15,
"nodeType": 3,
"nodeName": "#text",
"localName": "",
"nodeValue": "This is some content."
}],
"attributes": []
}, {
"nodeId": 12,
"parentId": 7,
"backendNodeId": 16,
"nodeType": 1,
"nodeName": "P",
"localName": "p",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 13,
"parentId": 12,
"backendNodeId": 6,
"nodeType": 1,
"nodeName": "IMG",
"localName": "img",
"nodeValue": "",
"childNodeCount": 0,
"children": [],
"attributes": ["src", "http://placekitten.com/200/300", "alt", "Some image"]
}],
"attributes": []
}, {
"nodeId": 14,
"parentId": 7,
"backendNodeId": 7,
"nodeType": 1,
"nodeName": "P",
"localName": "p",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 15,
"parentId": 14,
"backendNodeId": 17,
"nodeType": 3,
"nodeName": "#text",
"localName": "",
"nodeValue": "Data-Attributes!"
}],
"attributes": ["data-test", "works"]
}, {
"nodeId": 16,
"parentId": 7,
"backendNodeId": 18,
"nodeType": 1,
"nodeName": "SCRIPT",
"localName": "script",
"nodeValue": "",
"childNodeCount": 1,
"children": [{
"nodeId": 17,
"parentId": 16,
"backendNodeId": 19,
"nodeType": 3,
"nodeName": "#text",
"localName": "",
"nodeValue": " window.title = 'Hello world!' "
}],
"attributes": []
}],
"attributes": []
}],
"attributes": ["lang", "en"],
"frameId": "D46CBAE99B5CABE7F1FF6DDEE269E6A6"
}],
"documentURL": "http://test.local/test-simple.html",
"baseURL": "http://test.local/test-simple.html",
"xmlVersion": ""
}and we want to get the HTML representation:
<html>
<head>
<style>
h1 { color: red; }
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>This is some content.</p>
<p><img src="http://placekitten.com/200/300" alt="Some image"></p>
<p data-test="works">Data-Attributes!</p>
<script>window.title = 'Hello world!'; </script>
</body>
</html>For this we can use the following code:
const serialize = require('dom2html');
const jsonDOM = require('./dom.json');
console.log(serialize(jsonDOM));This is the first release and this thing has been built in a day, basically. Expect bugs, missing features, dragons...but any help is much appreciated!
Contributions are super welcome! Please create an issue with your idea and feel free to submit pull requests :)