# moy-dom

> A flexiable Virtual DOM library for building modern web interface.

Latest version **1.1.3** (published 2018-09-09) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

```sh
npm install moy-dom
pnpm add moy-dom
yarn add moy-dom
bun add moy-dom
```

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 1.1.3 |
| Published | 2018-09-09 |
| First published | 2018-07-02 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 118.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | murakami |
| Maintainers | murakamikennzo |
| Keywords | Virtual DOM, diff |

## Links

- npm: https://www.npmjs.com/package/moy-dom
- Repository: https://github.com/MurakamiKennzo/moy-dom
- Homepage: https://github.com/MurakamiKennzo/moy-dom#readme
- Issues: https://github.com/MurakamiKennzo/moy-dom/issues
- npm.io page: https://npm.io/package/moy-dom

## Recent versions

- 1.1.3 (latest) — 2018-09-09
- 1.0.1 — 2018-09-08
- 0.11.5 — 2018-08-22
- 0.10.5 — 2018-07-07
- 0.10.4 — 2018-07-03
- 0.10.3 — 2018-07-02

## README

# 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

---
_Source: https://npm.io/package/moy-dom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._