Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/alexcambose/virtual-dom
A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.
https://github.com/alexcambose/virtual-dom
algorithm api diffing dom dom-builder dom-element dom-events dom-manipulation dom-node dom-tree hyperscript json lightweight object optimization react virtual-dom
Last synced: about 3 hours ago
JSON representation
A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.
- Host: GitHub
- URL: https://github.com/alexcambose/virtual-dom
- Owner: alexcambose
- License: mit
- Created: 2018-04-28T14:46:07.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2019-12-29T23:22:13.000Z (almost 5 years ago)
- Last Synced: 2024-05-21T04:21:14.975Z (6 months ago)
- Topics: algorithm, api, diffing, dom, dom-builder, dom-element, dom-events, dom-manipulation, dom-node, dom-tree, hyperscript, json, lightweight, object, optimization, react, virtual-dom
- Language: JavaScript
- Homepage: https://alexcambose.github.io/virtual-dom/
- Size: 156 KB
- Stars: 12
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# virtual-dom
[](https://travis-ci.org/alexcambose/virtual-dom)
A Virtual DOM algorithm implementation that improves front end performance by updating only changed nodes in the DOM.
### [**DEMO**](https://alexcambose.github.io/virtual-dom/)
## Installation
As [npm](https://www.npmjs.com/package/@alexcambose/virtual-dom) package
```bash
npm i -S @alexcambose/virtual-dom
```
Standalone script file
```html
```
## Usage
```javascript
let newContent = null;
// the function that will create virtual-dom object
const createDom = title => (
h('div', null,
h('h1', { className: 'header' }, title),
h('p', null , 'Lorem ipsum'),
h('footer', { className: 'footer' }, 'The footer'),
)
);
// create virtual-dom object
let content = createDom('Some title');
// render the virtual dom object into the real dom
render(content, document.getElementById('app'));
const rerender = () => {
// create the virtual-dom object again but with dfferent properties
newContent = createDom('Some other title');
// patches object that will be used to modify changed elements
const patches = diff(content, newContent);
//appy patches
patch(appContainer, patches);
// update content
content = newContent;
};
```
## API
* `h(tagName, props, ...children)` - Function to define virtual-dom using hyperscript style
```js
h('div', { className: 'section' },
h('h1', { style: {color: 'red'} }, 'Section title'),
));
```
will output
```js
{
type: "div",
props: {
className: "section",
children: [
{
type: "h1",
props: {
style: {
color: "red"
},
children: [
"Section title"
]
}
}
]
}
}
```
* `render(VDOM, domElement)` - renders the virtual dom object into a specified element in dom
```js
// content = h(..., h(...))
render(content, document.getElementById('app'));
```
* `diff(oldVDOM, newVDOM)` - create a *patches object* that contains all the differences between two virtual-dom objects, should be used with `patch`
```js
const oldVDOM = h('h1', null, 'Hello title');
const newVDOM = h('h1', { className: 'header' }, 'Hello new class');
const patches = diff(oldVDOM, newVDOM);
```
`patches` will look something like this
```js
{
0:{
childrenPatches: {
0: {
selfPatch: {
type: PATCH_TEXT_NODE,
payload: "Hello new class"
}
}
}
}
}
```
* `patch(domElement, patches)` - updates the dom based on the patches produced by `diff`
```js
const patches = diff(oldVDOM, newVDOM);
patch(document.getElementById('app'), patches);
```
## License
MIT