❤
npm
Sign UpSign In

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.

Readme

Keywords

Package Sidebar

Install

npm i tiny-dream-es3

Repository

github.com/arkisst/tiny-dream-es3

Homepage

github.com/arkisst/tiny-dream-es3#readme

Weekly Downloads

29

Version

0.2.1

License

MIT

Unpacked Size

57.1 kB

Total Files

21

Last publish

Collaborators

  • saltyshiomix
Try on RunKit
Report malware