@koy/virtual-dom NPM

This is the official koy virtual dom library.

The library exports Element, diff and patch function that you can do some magical thing here.

Element

Element is a Functor that you can do like React.createElement but I add more special functions.

If you don't know about Functor, you'd better learn it and here is a good palce, Tupperware.

you can use Element.of when you want to create a dom object:

Element.of('div', {class: 'container'}, 'murakami')

The above is the basic usage, If you are not familiar with Functor, I suggest you just treat Element as it.

And for some programmer, may know of is a function that put some thing into a container, that means I need some functions to handle it's value, this is map、join、chain and ap. There are the basic functions in function programming.

const container = Element.of('div', {class: 'container'}, 'murakami')

map(({tagName, attributes, children}) => ['span', attributes, ...children], container) // equals to Element.of('span', {class: 'container'}, 'murakami')

const nestedContainer = Element.of(
  Element.of('div', {class: 'container'}, 'murakami')
)
join(nestedContainer) // equals to Element.of('div', {class: 'container'}, 'murakami')

chain(({tagName, attributes, children}) => Element.of(tagName, ...children), container) // equals to Element.of('div', 'murakami')

ap(Element.of(({tagName, attributes, children}) => ['span', attributes, ...children]), container) // equals to Element.of('span', {class: 'container'}, 'murakami')

This is some simple example, and If you are familiar with category theory, you may do some better things magically, I'm sorry, currently, I'm not good at it.

Note: If your Element isn't an appropriate dom object, you can't render it in the user interface.

diff

The diff funciton is the implementation of diff algorithm, you can use it to diff two Element node tree, here is an example:

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'))
) // new Map([[0, [{type: 'ATTRIBUTES_CHANGE', attributes: {class: 'custom-container'}}]], [2, [{type: 'TEXT_REPLACE', text: 'Welcome to @koy/vitual-dom'}]]])

Note: The above comment is just a tip, isn't a real output when you use diff since I use Symbol and other data structure.

patch

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

Node: Make sure you root dom node lastChild is your root Element.

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

Note: The above patch function's first parameter is just a tip, isn't a real Map structure when you use patch since I use Symbol and other data structure.