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

Dependencies (0)

    Dev Dependencies (10)

    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

    7

    Version

    0.2.1

    License

    MIT

    Unpacked Size

    57.1 kB

    Total Files

    21

    Last publish

    Collaborators

    • saltyshiomix
    Try on RunKit
    Report malware