# vdtree-dom

> Render vdtree components to the browser DOM without any framework.

Latest version **0.2.0** (published 2021-07-09) · ISC license · 0 weekly downloads

## Install

```sh
npm install vdtree-dom
pnpm add vdtree-dom
yarn add vdtree-dom
bun add vdtree-dom
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2021-07-09 |
| First published | 2021-07-08 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 48 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Leone |
| Maintainers | lgirma |

## Links

- npm: https://www.npmjs.com/package/vdtree-dom
- Repository: https://github.com/lgirma/vdtree-plugins
- Homepage: https://github.com/lgirma/vdtree-plugins/tree/master/dom
- Issues: https://github.com/lgirma/vdtree-plugins/issues
- npm.io page: https://npm.io/package/vdtree-dom

## Recent versions

- 0.2.0 (latest) — 2021-07-09
- 0.1.0 — 2021-07-08

## README

# vdtree-dom

Render vdtree components to the browser DOM without any framework.

## Installation

Using npm:

```shell
npm i vdtree-dom
```

## Usage

Use

* `renderToDom()` method to render an abstract component to DOM
* `toDomElement()` method to create a DOM element from abstract component

```jsx
/** @jsx h */
import {toDomElement, h} from 'vdtree'

const abstractElt = <div>Hello, World!</div>
document.body.append(toDomElement(abstractElt))
```

If you want to render multiple root-level elements, use `toDom`

```javascript
const abstractElts = [
    <div>Element 1</div>,
    <div>Element 3</div>
]
document.body.append(...toDom(abstractElts))
```

To enable watch and update on the DOM when values change, use `renderToDom()` method

```javascript
// First time render
const watch = renderToDom(
    <Comp prop={propVal}/>, targetElement
)

// Anytime you want to re-render the component:
watch.update(
    <Comp prop={newVal}/>
)

// To update only attributes:
watch.newProps(newAttrs)
//or
watch.newProps(prevAttrs => ({...prevAttrs, someProp: newVal}))
```

Rather than doing a complete replacement, it will patch the changes efficiently.

---
_Source: https://npm.io/package/vdtree-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._