hast-util-to-dom

import { JSDOM } from 'jsdom'; import { h } from 'hastscript'; import { toDom } from 'hast-util-to-dom'; // Create a JSDOM environment to simulate a browser DOM const dom = new JSDOM(); const document = dom.window.document; // Construct a hast tree using hastscript (a helper for creating HAST nodes) const hastTree = h('main', [ h('h1', 'Welcome to the DOM!'), h('p', [ h('strong', 'Hello'), ', world! This paragraph was created from a HAST node.' ]), h('ul', [ h('li', 'Item 1'), h('li', 'Item 2') ]) ]); // Convert the hast tree into a DOM node. Pass the JSDOM document as an option. const domNode = toDom(hastTree, { document }); // Append the generated DOM node to the JSDOM document body document.body.append(domNode); // You can now inspect or serialize the resulting DOM structure console.log('Serialized DOM:', dom.serialize()); // Example of using the `afterTransform` hook option const treeWithHook = h('div', [h('span', 'This span will be marked')]); const domNodeWithHook = toDom(treeWithHook, { document, afterTransform(hastNode, domNode) { if (hastNode.type === 'element' && hastNode.tagName === 'span') { // Add a data attribute to the DOM span element (domNode as HTMLElement).dataset.transformed = 'true'; } } }); document.body.append(domNodeWithHook); console.log('Serialized DOM with hook:', dom.serialize());