tiny-dream-es3

0.2.1 • Public • Published

npm downloads PRs Welcome MIT License

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-es3

Tiny 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.

Package Sidebar

Install

npm i tiny-dream-es3

Weekly Downloads

1

Version

0.2.1

License

MIT

Unpacked Size

57.1 kB

Total Files

21

Last publish

Collaborators

  • saltyshiomix