https://github.com/easywebapp/dom-renderer
A light-weight DOM Renderer supports Web components standard & TypeScript language.
https://github.com/easywebapp/dom-renderer
component dom ecmascript html5 light-weight render web
Last synced: 14 days ago
JSON representation
A light-weight DOM Renderer supports Web components standard & TypeScript language.
- Host: GitHub
- URL: https://github.com/easywebapp/dom-renderer
- Owner: EasyWebApp
- Created: 2019-02-03T17:16:53.000Z (about 6 years ago)
- Default Branch: main
- Last Pushed: 2025-02-25T14:43:03.000Z (about 2 months ago)
- Last Synced: 2025-04-06T05:40:07.996Z (18 days ago)
- Topics: component, dom, ecmascript, html5, light-weight, render, web
- Language: TypeScript
- Homepage: http://web-cell.dev/DOM-Renderer/
- Size: 424 KB
- Stars: 7
- Watchers: 2
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: ReadMe.md
- Funding: .github/FUNDING.yml
Awesome Lists containing this project
README
# DOM Renderer
A light-weight DOM Renderer supports [Web components][1] standard & [TypeScript][2] language.
[][3]
[][4]
[][5]
[][6]
## Feature
- input: [Virtual DOM][7] object in [JSX][8] syntax
- output: [DOM][9] object or [XML][10] string of [HTML][11], [SVG][12] & [MathML][13] languages
- run as: **Sync**, [Async][14], [Generator][15] functions & [Readable streams][16]
## Usage
### JavaScript
#### Sync Rendering
```js
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)
```diff
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
[][17]
#### `tsconfig.json`
```json
{
"compilerOptions": {
"jsx": "react-jsx",
"jsxImportSource": "dom-renderer"
}
}
```
#### `index.tsx`
##### Sync Rendering
```tsx
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
idea2app
);
console.log(newVNode);
```
##### Async Rendering (experimental)
```diff
import { DOMRenderer } from 'dom-renderer';
const newVNode = new DOMRenderer().render(
idea2app
-
+ ,
+ document.body,
+ 'async'
);
-console.log(newVNode);
+newVNode.then(console.log);
```
### Node.js & Bun
#### `view.tsx`
```tsx
import { DOMRenderer } from 'dom-renderer';
const renderer = new DOMRenderer();
const Hello = () =>
Hello, JSX SSR!
;
export const generateStream = () => renderer.renderToReadableStream();
```
#### `index.ts`
```js
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
[][18]
## Original
### Inspiration
[][19]
### Prototype
[][20]
[1]: https://www.webcomponents.org/
[2]: https://www.typescriptlang.org/
[3]: https://libraries.io/npm/dom-renderer
[4]: https://github.com/EasyWebApp/DOM-Renderer/actions/workflows/main.yml
[5]: https://nodei.co/npm/dom-renderer/
[6]: https://gitpod.io/?autostart=true#https://github.com/EasyWebApp/DOM-Renderer
[7]: https://en.wikipedia.org/wiki/Virtual_DOM
[8]: https://facebook.github.io/jsx/
[9]: https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model
[10]: https://developer.mozilla.org/en-US/docs/Web/XML
[11]: https://developer.mozilla.org/en-US/docs/Web/HTML
[12]: https://developer.mozilla.org/en-US/docs/Web/SVG
[13]: https://developer.mozilla.org/en-US/docs/Web/MathML
[14]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function
[15]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
[16]: https://developer.mozilla.org/en-US/docs/Web/API/ReadableStream
[17]: https://codesandbox.io/s/dom-renderer-example-pmcsvs?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.tsx&theme=dark
[18]: https://codesandbox.io/s/mobx-web-components-pvn9rf?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FWebComponent.ts&moduleview=1&theme=dark
[19]: https://github.com/snabbdom/snabbdom
[20]: https://codesandbox.io/s/dom-renderer-pglxkx?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.ts&theme=dark