DOM Renderer

Feature

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);

Test in JSX

Install dependencies

npm install tsx expect -D

test/some-test.spec.tsx

import { describe, it } from 'node:test';
import { assertLooksLike } from 'dom-renderer/assert';

describe('some JSX tests', () => {
    it('should assert looks like for input elements', () => {
        assertLooksLike(
            <input id="name" required data-meta={{ first: 1, second: 2 }} />,
            <input data-meta={{ first: 1 }} />
        );
    });
});

Run tests

tsx --test test/*.spec.*

Framework

Web components

Original

Inspiration

Prototype