moy-dom/README.md

A flexiable Virtual DOM library for building modern web interface.

# 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:

```js
  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:

```js
  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:

```js
  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](http://opensource.org/licenses/MIT)

Copyright (jp) 2018-present murakami