tiny-dream
v0.5.3
Published
A tiny Incremental DOM implementation for modern browsers.
Downloads
11
Maintainers
saltyshiomixReadme
[WIP] A tiny Incremental DOM for modern browsers.
- Zero dependencies, only 2.15kb (gzipped)
- Incremental DOM / Virtuial DOM
Install
$ npm install --save tiny-dream
# Or use yarn
$ yarn add --dev tiny-dreamUsage
index.html
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>src/main.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)
import { tagOpen, tagClose, text } from 'tiny-dream'
export default {
render (data) {
tagOpen('div')
text(data.text)
tagClose('div')
}
}Example
For full examples, see example folder.
Legacy browsers support
See 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 <div>.
The key is used when searching and rendering lists for the best performance.
tagClose(tagName)
Create close tag like </div>.
tagVoid(tagName[, attributesArray, key])
Create (empty) tag node like <input>.
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.