0.2.1 • Published 6 years ago
tiny-dream-es3 v0.2.1
Incremental DOM implementation for legacy browsers.
- Zero dependencies, only 2.34kb (gzipped)
- Incremental DOM / Virtuial DOM
- Support for IE8+ and modern browsers
Install
$ npm install --save tiny-dream-es3
# Or use yarn
$ yarn add --dev tiny-dream-es3Tiny Usage
index.html
<body>
<div id="app"></div>
<script src="dist/main.js"></script>
</body>src/main.js
import { TinyDream, patch } from 'tiny-dream-es3'
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 Incremental DOM'
patch(data)
}, 3000)src/App.js (Component)
import { tagOpen, tagClose, text } from 'tiny-dream-es3'
export default {
render (data) {
tagOpen('div')
text(data.text)
tagClose('div')
}
}Example
For full examples, see example folder.
API
Only 7 APIs.
new TinyDream(id, component)
Initialize application by id.
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.