# emulatejs-vdom
> The framework for manipulate with DOM tree
Latest version **1.10.26** (published 2022-02-20) · ISC license · 0 weekly downloads
## Install
```sh
npm install emulatejs-vdom
pnpm add emulatejs-vdom
yarn add emulatejs-vdom
bun add emulatejs-vdom
```
## Health
**Score 15/100 (F)** — status: abandoned.
Positive: no vulnerabilities.
Warnings: low downloads; no types; no esm support.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 1.10.26 |
| Published | 2022-02-20 |
| First published | 2022-02-20 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 8.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | SaziX |
| Maintainers | sazix |
## Links
- npm: https://www.npmjs.com/package/emulatejs-vdom
- npm.io page: https://npm.io/package/emulatejs-vdom
## Recent versions
- 1.10.26 (latest) — 2022-02-20
- 1.10.25 — 2022-02-20
- 1.10.24 — 2022-02-20
## README
# EmulateJS
This is the framework can manipulate with DOM tree, mount virtual nodes and other.
For the first you should download it. NPM(EmulateJS reactivity): `npm i emulatejs-reactivity`.
NPM(EmulateJS VDOM): `npm i emulatejs-vdom`.
Plain JS(EmulateJS reactivity): Download
Plain JS(EmulateJS VDOM): Download
**Example with reactivity:**
`index.html`
```html
Document
```
`script.js`
```js
const state = reactive({
randomNumber: 0
});
watchEffect(() => {
console.log(`The current random number state is: ${state.randomNumber}`);
});
setInterval(() => {
state.randomNumber = Math.floor(Math.random() * 1000);
}, 1000);
```
On this example we create a variable "***state()***" with function "***reactivity()***".
This accepts 1 parameter, this is object of different properties. Function "watchEffect" checking the changing values of all properties.
When the property value changes "***watchEffect()***" is running 1 time. This accepts only 1 parameter.
This can be callback or anonymous function.
**Example with VDOM:**
`index.html`
```html
Document
```
`script.js`
```js
const node = h('div', { class: 'container' }, [
h('h1', { class: 'h1' }, 'Hello World')
]);
const app = document.getElementById("app");
mount(node, app);
```
***h()*** - function which create a virtual node. First parameter - tag name.
Second parameter is object with attributes.
And third parameter is depends. Tags which have text, example: p, h1, h2 and other, third parameter is string-type. Default type of depends - array with new virtual nodes.
***unmout()*** - function for unmount virtual node from DOM tree of app container.
Let's do a small TODO app with VDOM.
`index.html`
```html
Document
```
`script.js`
```js
const fNode = h('div', { class: 'firstNode' }, [
h('h1', {}, 'Hello')
]);
const sNode = h('div', { class: 'secondNode' }, [
h('h1', {}, 'World')
]);
function firstReplace() {
patch(fNode, sNode);
}
function secondReplace() {
patch(sNode, fNode);
}
mount(fNode, document.getElementById("app"));
```
***patch()*** - Function for replace the first virtual node to second.
TODO app using VDOM and Reactivity.
`index.html`
```html
Document
```
`script.js`
```js
const state = reactive({
inputValue: ''
});
function render(src) {
return h('div', {class: 'container'}, [
h('h1', {title: 'TODO'}, 'Todo APP using EmulateJS'),
h('div', {class: 'text'}, [
h('img', {
src: src,
style: 'width: 300px;'
}, []),
h('p', {}, 'Write the image link'),
h('input', {oninput: 'state.inputValue = this.value'}, [])
])
]);
}
let currentNode;
watchEffect (() => {
if (!currentNode) {
currentNode = render(state.inputValue)
mount(currentNode, document.getElementById("app"));
} else {
const newNode = render(state.inputValue);
patch(currentNode, newNode);
currentNode = newNode;
}
})
```
---
_Source: https://npm.io/package/emulatejs-vdom · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._