# @koy/vitual-dom

> A virtual DOM algorithm.

Latest version **0.16.4** (published 2018-11-10) · MIT license · 0 weekly downloads

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

## Install

```sh
npm install @koy/vitual-dom
pnpm add @koy/vitual-dom
yarn add @koy/vitual-dom
bun add @koy/vitual-dom
```

## Health

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

Negative: deprecated.

## Facts

| | |
|---|---|
| Version | 0.16.4 |
| Published | 2018-11-10 |
| First published | 2018-11-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=9.10.1 |
| Dependencies | 0 |
| Unpacked size | 36.8 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | murakami |
| Maintainers | murakamikennzo |
| Keywords | koy, virtual DOM |

## Links

- npm: https://www.npmjs.com/package/@koy/vitual-dom
- Repository: https://github.com/MurakamiKennzo/koy/tree/master/packages/vitual-dom
- npm.io page: https://npm.io/package/@koy/vitual-dom

## Recent versions

- 0.16.4 (latest) — 2018-11-10

## README

# @koy/core

A virtual DOM algorithm.

## Why I write this library?

Since vitual DOM is so popular and many library have realized it，and I write it's for that I want to buid an app with the most natural javascript funcitonal programming way, that means we should run some code on webWorker or some other parallel way. I should control my code and know what should put to there and what not, so It comes.

> It may not the best vitual DOM algorithm, it just a way that I realize.

## How do I design this library?

You means, What a virtual DOM algorithm contains? An Element, a diff logic and a patch method, so you got it here.

### Element

I design it as a class if you are familiar with OOP, but we shouldn't think it's a class and think it as a Container, or malformed Functor without map. And, you can use of method to put your dom type to Element like this:

```js
Element.of('div', {class: 'container'}, Element.of('h2', 'Welcome to koy'))
```

### diff

The diff method can diff two Element and get their differences:

```js
diff(
  Element.of('div', {class: 'custom-container'}, Element.of('h2', 'Welcome to @koy/vitual-dom')),
  Element.of('div', {class: 'container'}, Element.of('h2', 'Welcome to koy'))
) // [0: [type: 1, attributes: {class: 'custom-container'}], 2: [type: 0, text: 'Welcome to @koy/vitual-dom']]
```

### patch

The patch method can put the patches we get from diff method to real dom.

**Note**: make sure you root dom node lastChild is your root Element.

```js
const root = document.getElementById('app')
patch({0: [type: 1, attributes: {class: 'container'}]}, root) // can change root lastChild's className to container
```

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