A light-weight DOM Renderer supports Web components standard & TypeScript language.
- input: Virtual DOM object in JSX syntax
- output: DOM object or XML string of HTML, SVG & MathML languages
- run as: Sync, Async, Generator functions & Readable streams
import { DOMRenderer, VNode } from 'dom-renderer';
const newVNode = new DOMRenderer().patch(
new VNode({
tagName: 'body',
node: document.body
}),
new VNode({
tagName: 'body',
children: [
new VNode({
tagName: 'a',
props: { href: 'https://idea2.app/' },
style: { color: 'red' },
children: [new VNode({ text: 'idea2app' })]
})
]
})
);
console.log(newVNode);import { DOMRenderer, VNode } from 'dom-renderer';
-const newVNode = new DOMRenderer().patch(
+const newVNode = new DOMRenderer().patchAsync(
new VNode({
tagName: 'body',
node: document.body
}),
new VNode({
tagName: 'body',
children: [
new VNode({
tagName: 'a',
props: { href: 'https://idea2.app/' },
style: { color: 'red' },
children: [new VNode({ text: 'idea2app' })]
})
]
})
);
-console.log(newVNode);
+newVNode.then(console.log);
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
<a href="https://idea2.app/" style={{ color: 'red' }}>
idea2app
</a>
);
console.log(newVNode);import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
<a href="https://idea2.app/" style={{ color: 'red' }}>
idea2app
- </a>
+ </a>,
+ document.body,
+ 'async'
);
-console.log(newVNode);
+newVNode.then(console.log);import { DOMRenderer } from 'dom-renderer';
const renderer = new DOMRenderer();
const Hello = () => <h1>Hello, JSX SSR!</h1>;
export const generateStream = () => renderer.renderToReadableStream(<Hello />);import { Readable } from 'stream';
import { createServer } from 'http';
import 'dom-renderer/polyfill';
import { generateStream } from './view';
createServer((request, response) => {
const stream = generateStream();
Readable.fromWeb(stream).pipe(response);
}).listen(8080);
