DOM Renderer

A light-weight DOM Renderer supports Web components standard & TypeScript language.

Usage

JavaScript

import { DOMRenderer } from 'dom-renderer';

const newVNode = new DOMRenderer().patch(
    {
        tagName: 'body',
        node: document.body
    },
    {
        tagName: 'body',
        children: [
            {
                tagName: 'a',
                props: { href: 'https://idea2.app/' },
                style: { color: 'red' },
                children: [{ text: 'idea2app' }]
            }
        ]
    }
);

console.log(newVNode);
Copy

TypeScript

tsconfig.json

{
    "compilerOptions": {
        "jsx": "react-jsx",
        "jsxImportSource": "dom-renderer"
    }
}
Copy

index.tsx

import { DOMRenderer } from 'dom-renderer';

const newVNode = new DOMRenderer().render(
    <a href="https://idea2.app/" style={{ color: 'red' }}>
        idea2app
    </a>
);

console.log(newVNode);
Copy

Node.js & Bun

import { Readable } from 'stream';
import { createServer } from 'http';
import { DOMRenderer } from 'dom-renderer';

const renderer = new DOMRenderer();

const Hello = () => 
Hello, JSX SSR!
;

createServer((request, response) => {
    const stream = renderer.renderToReadableStream();

    Readable.fromWeb(stream).pipe(response);
}).listen(8080);
Copy

Framework

Web components

Original

Inspiration

Prototype