This library uses webpack. I added my webpack config to the project. You can learn more here.
npm install virtual-dom-library
const currentVNode = h(
'div',
{
classes: ['some-class'],
events: {
click: (event: Event): void => console.log('click'),
mousedown: (event: Event): void => console.log('mouse down'),
},
simpleAttrs: { 'data-type': 'div' },
styles: {
border: '1px solid red',
borderRadius: '5px',
margin: '20px',
padding: '15px',
},
},
[
'Some-Text-Node',
h('span', null, 'Some child for span'),
'Some new text node',
h('hr', null, null),
],
);
const newVNode = h(
'div',
{
classes: ['new-class'],
events: { dblclick: (event: Event): void => console.log('dblclick') },
simpleAttrs: { 'data-type': 'div', active: 'false' },
},
'New some child.',
);
mount(currentVNode, document.querySelector('#app') as HTMLElement);
patch(currentVNode, newVNode);h - This function creates a virtual node than can then be inserted into a real dom through the mount function.
- @param {TVNodeTagName} tag - Html element name.
- @param {(IHProps|null)} props - Props for html element.
- @param {(THChildren|null)} children - Children for the html element.
- @returns {IVNode} A virtual node.
const virtualNode = h(
'div',
{
classes: ['some-class'],
events: {
click: (event: Event): void => console.log('click'),
mousedown: (event: Event): void => console.log('mouse down'),
},
simpleAttrs: { 'data-type': 'div' },
styles: {
border: '1px solid red',
borderRadius: '5px',
margin: '20px',
padding: '15px',
},
},
[
'Some-Text-Node',
h('span', null, 'Some child for span'),
'Some new text node',
h('hr', null, null),
],
);mount - This function takes a virtual node and turns it into a real dom node and then inserts it into the html element.
- @param {IVNode} vNode - you can create virtual node with h function.
- @param { HTMLElement } container - Parent for the new html element.
- @returns {void} This function returns nothing.
const virtualNode = h(
'div',
{
classes: ['some-class'],
events: {
click: (event: Event): void => console.log('click'),
mousedown: (event: Event): void => console.log('mouse down'),
},
simpleAttrs: { 'data-type': 'div' },
styles: {
border: '1px solid red',
borderRadius: '5px',
margin: '20px',
padding: '15px',
},
},
[
'Some-Text-Node',
h('span', null, 'Some child for span'),
'Some new text node',
h('hr', null, null),
],
);
mount(virtualNode, document.querySelector('#app') as HTMLElement);patch - This function checks the difference between the new virtual node and the current.
- @param { IVNode } currentVNode - A virtual node that was added to the real DOM using
- the mount function.
- @param { IVNode } newVNode - New virtual node to change the previous one.
- @throws Throws an error if the current virtual node has not been added to
- the current DOM using the mount function.
- @returns { void } This function returns nothing.
const currentVNode = h(
'div',
{
classes: ['some-class'],
events: {
click: (event: Event): void => console.log('click'),
mousedown: (event: Event): void => console.log('mouse down'),
},
simpleAttrs: { 'data-type': 'div' },
styles: {
border: '1px solid red',
borderRadius: '5px',
margin: '20px',
padding: '15px',
},
},
[
'Some-Text-Node',
h('span', null, 'Some child for span'),
'Some new text node',
h('hr', null, null),
],
);
const newVNode = h(
'div',
{
classes: ['new-class'],
events: { dblclick: (event: Event): void => console.log('dblclick') },
simpleAttrs: { 'data-type': 'div', active: 'false' },
},
'updated child',
);
mount(currentVNode, document.querySelector('#app') as HTMLElement);
patch(currentVNode, newVNode);createHtmlElementFromVNode - This function creates an html element from a virtual node.
- @param {IVNode} vNode - you can create virtual node with h function.
- @returns {HTMLElement}
const currentVNode = h(
'div',
{
classes: ['some-class'],
events: {
click: (event: Event): void => console.log('click'),
mousedown: (event: Event): void => console.log('mouse down'),
},
simpleAttrs: { 'data-type': 'div' },
styles: {
border: '1px solid red',
borderRadius: '5px',
margin: '20px',
padding: '15px',
},
},
[
'Some-Text-Node',
h('span', null, 'Some child for span'),
'Some new text node',
h('hr', null, null),
],
);
const element = createHtmlElementFromVNode();
console.log('Html element', element);
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent