Package Exports
- dom-renderer
- dom-renderer/dist/index.js
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 (dom-renderer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.
Readme
DOM Renderer
A light-weight DOM Renderer supports Web components standard & TypeScript language.
Feature
- 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
Usage
JavaScript
Sync Rendering
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);Async Rendering (experimental)
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);TypeScript
tsconfig.json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}index.tsx
Sync Rendering
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
<a href="https://idea2.app/" style={{ color: 'red' }}>
idea2app
</a>
);
console.log(newVNode);Async Rendering (experimental)
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);Node.js & Bun
view.tsx
import { DOMRenderer } from 'dom-renderer';
const renderer = new DOMRenderer();
const Hello = () => <h1>Hello, JSX SSR!</h1>;
export const generateStream = () => renderer.renderToReadableStream(<Hello />);index.ts
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);Framework
Web components
Original
Inspiration
Prototype