# virtual-dom-base

> > Virtual DOM Base is a basic implementation of DOM manipulation lib.

Latest version **0.1.6** (published 2018-01-22) · ISC license · 0 weekly downloads

## Install

```sh
npm install virtual-dom-base
pnpm add virtual-dom-base
yarn add virtual-dom-base
bun add virtual-dom-base
```

## Health

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

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.6 |
| Published | 2018-01-22 |
| First published | 2018-01-18 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 2 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | conan |
| Maintainers | lcc19941214 |

## Links

- npm: https://www.npmjs.com/package/virtual-dom-base
- Repository: https://github.com/lcc19941214/virtual-dom-base
- Homepage: https://github.com/lcc19941214/virtual-dom-base#readme
- Issues: https://github.com/lcc19941214/virtual-dom-base/issues
- npm.io page: https://npm.io/package/virtual-dom-base

## Dependencies (2)

- [minimist](https://npm.io/package/minimist.md) ^1.2.0
- [uglifyjs-webpack-plugin](https://npm.io/package/uglifyjs-webpack-plugin.md) ^1.1.6

## Recent versions

- 0.1.6 (latest) — 2018-01-22
- 0.1.5 — 2018-01-19
- 0.1.4 — 2018-01-19
- 0.1.3 — 2018-01-18
- 0.1.1 — 2018-01-18
- 0.1.0 — 2018-01-18

## README

# Virtual DOM Base

> Virtual DOM Base is a basic implementation of DOM manipulation lib.

### Intro

With `Element` and `RenderDOM` offered by **Virtual DOM Base**, you can easily manipulate your DOM structure.

### Usage

`jsx` syntax is supported in this lib, and you can also use `Element.createElement` to create virtual DOM and render it to real DOM.

**Basic Usage**

```javascript
import { Element } from 'virtual-dom-base';

const root = Element.createElement('div', {
  id: 'root',
  Element.createElement('h1', null, 'Hello Virtual DOM Base!'),
  Element.createElement('blockquote', null,
  	Element.createElement('code', null, 'Virtual DOM Base'),
    ' is a basic implementation of DOM manipulation lib.'
  ),
});
```

**With JSX**

```jsx
import { Element } from 'virtual-dom-base';

const root = (
  <div id="root">
    <h1>Hello Virtual DOM Base!</h1>
    <blockquote>
      <code>Virtual DOM Base</code> is a basic implementation of DOM manipulation lib.
    </blockquote>
  </div>
);
```

### Types of Params

| Type             | Result                           |
| ---------------- | -------------------------------- |
| Element instance | Element(HTMLElement)             |
| String           | TextNode                         |
| Number           | TextNode                         |
| Undefined        | Comment(`<!-- empty node -->`)   |
| Null             | Comment(`<!-- empty node -->`)   |
| Object           | Comment(`<!-- unknown node -->`) |
| Array            | DocumentFragment                 |
| Default          | Comment(`<!-- unknown node -->`) |

#### example

```jsx
import { Element } from 'virtual-dom-base';

const root = (
  <div>
    <h1>Headline</h1>
    text
    7873632
    {undefined}
    {null}
    {{ name: 'virtual dom base' }}
    {[
      <div className="child">Amy</div>,
      <div className="child">Bob</div>,
      Math.random > 0.5 ? 'Cindy' : 'Dick',
      false
    ]}
    <div>Content</div>
  </div>
);
```

**output**

![readme.1](./static/readme.1.png)

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