moy-dom v1.1.3

moy-dom

It's just like react 、vue and etc liarbraies's virtual dom algorithm。

I defined it as a flexiable Virtual DOM library for building modern web interface.

This liarbry export Element 、render and reRender for programming.

Element

The Element is for creating the virtual dom node. you can use the below two methods at the class Element:

• of -> create an virtual dom node
• render -> get the real dom node

here's an example:

  import { Element } from 'moy-dom'

  const vnode = Element.of(
    'p', {
      class: 'container',
    },
    Element.of(
      'span',
      'text node',
    ),
  )

  const node = vnode.render()

  const app = document.getElementById('app')

  app.appendChild(node)

in the example above, we create an vnode and append it to app's (a real dom node) children.

too simple, right?

Note: when you using Object.prototype.toString.call(Element.of(...)), you will get 'object Element'.

render

the render function can append an vnode to a real dom node's children.

It accepts two parameters that the first one is the real dom node and the second one is a function that can return a vnode.

here is an example:

  import { Element, render } from 'moy-dom'

  render(document.getElementById('app'), () => Element.of('span', {
      class: 'text',
    },
    'text content',
  ))

run the code above, you will see the app DOMElement append a span child that has className 'text' and contains text 'text content'.

reRender

the reRender function is useful for reRender a vnode by using the virtual dom diff algorithm.

Node: you must have called render function when you using reRender.

here is an example:

  import { Element, render, reRender } from 'moy-dom'

  const app = document.getElementById('app')

  let init = true

  const getNode = () => init ? (init = false) || Element.of('span', {class: 'text'}, 'text content') : 'text content'

  render(app, getNode)

  setTimeout(reRender, 2000)

you can copy the code to your application, and you will see the dom changed as you wish。

License

MIT

Copyright (jp) 2018-present murakami