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: 3 months 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 (almost 6 years ago)
• Default Branch: main
• Last Pushed: 2024-11-05T21:43:09.000Z (3 months ago)
• Last Synced: 2024-11-06T17:07:16.767Z (3 months ago)
• Topics: component, dom, ecmascript, html5, light-weight, render, web
• Language: TypeScript
• Homepage: http://web-cell.dev/DOM-Renderer/
• Size: 436 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 4
• 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.

[![NPM Dependency](https://img.shields.io/librariesio/github/EasyWebApp/DOM-Renderer.svg)][3]

[![CI & CD](https://github.com/EasyWebApp/DOM-Renderer/actions/workflows/main.yml/badge.svg)][4]

[![NPM](https://nodei.co/npm/dom-renderer.png?downloads=true&downloadRank=true&stars=true)][5]

[![Open in GitPod](https://gitpod.io/button/open-in-gitpod.svg)][6]

## Usage

### JavaScript

```js

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

```

### TypeScript

[![Edit DOM Renderer example](https://codesandbox.io/static/img/play-codesandbox.svg)][7]

#### `tsconfig.json`

```json

{

    "compilerOptions": {

        "jsx": "react-jsx",

        "jsxImportSource": "dom-renderer"

    }

}

```

#### `index.tsx`

```tsx

import { DOMRenderer } from 'dom-renderer';

const newVNode = new DOMRenderer().render(

    

        idea2app

    

);

console.log(newVNode);

```

### 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

[![Edit MobX Web components](https://codesandbox.io/static/img/play-codesandbox.svg)][8]

## Original

### Inspiration

[![SnabbDOM](https://github.com/snabbdom.png)][9]

### Prototype

[![Edit DOM Renderer](https://codesandbox.io/static/img/play-codesandbox.svg)][10]

[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://codesandbox.io/s/dom-renderer-example-pmcsvs?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.tsx&theme=dark

[8]: https://codesandbox.io/s/mobx-web-components-pvn9rf?autoresize=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2FWebComponent.ts&moduleview=1&theme=dark

[9]: https://github.com/snabbdom/snabbdom

[10]: https://codesandbox.io/s/dom-renderer-pglxkx?autoresize=1&expanddevtools=1&fontsize=14&hidenavigation=1&module=%2Fsrc%2Findex.ts&theme=dark