[](https://www.npmjs.com/package/tiny-dream)
[](https://www.npmjs.com/package/tiny-dream)
[](http://makeapullrequest.com)
[](https://github.com/arkisst/tiny-dream/blob/master/LICENSE)
[WIP] A tiny Incremental DOM for modern browsers.
- Zero dependencies, only 2.15kb (gzipped)
- Incremental DOM / Virtuial DOM
## Install
```bash
$ npm install --save tiny-dream
# Or use yarn
$ yarn add --dev tiny-dream
```
## Usage
**index.html**
```html
```
**src/main.js**
```js
import { TinyDream, patch } from 'tiny-dream'
import App from './App'
new TinyDream('app', App)
// initial rendering
const data = { text: 'Hello World' }
patch(data)
// patch diff as if whole rendering
setTimeout(() => {
data.text = 'Hello Next World'
patch(data)
}, 3000)
```
**src/App.js** (Component)
```js
import { tagOpen, tagClose, text } from 'tiny-dream'
export default {
render (data) {
tagOpen('div')
text(data.text)
tagClose('div')
}
}
```
## Example
For full examples, see [example](https://github.com/arkisst/tiny-dream/tree/master/examples) folder.
## Legacy browsers support
See [tiny-dream-es3](https://github.com/arkisst/tiny-dream-es3). It works on **IE8+**.
## API
There are only 7 APIs.
### `new TinyDream(id, component)`
Initialize application by id with component.
### `tagOpen(tagName[, attributesArray, key])`
Create open tag like `
`.
The `key` is used when searching and rendering lists for the best performance.
### `tagClose(tagName)`
Create close tag like `
`.
### `tagVoid(tagName[, attributesArray, key])`
Create (empty) tag node like ``.
The `key` is used when searching and rendering lists for the best performance.
### `text(text)`
Create text node.
### `component(component, data)`
Create custom component (and pass data).
### `patch(data)`
Render whole incremental dom and patch **only actual diffs** to the real dom.