@koy/vitual-dom

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

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

diff

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

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.

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