What if you want to update dom elements without relying on virtual DOM, what is the alternative ?.
In fact there are many alternatives, diffDOM is one of them.
Here is an example of its use : diffDOMSample
lib.js
const diffDOM=function(e){...};
const dd = new diffDOM.DiffDOM();
let render;
function html(html) {
var template = document.createElement('template');
html = html.trim(); // Never return a text node of whitespace as the result
template.innerHTML = html;
return template.content.firstChild;
}
function init(view, state, target = document.body) {
let preview = view(state);
target.append(preview);
render = function () {
dd.apply(preview, dd.diff(preview, view(state)));
}
}
export { html, init, render }
state.js
import { render } from "./lib.js"
const State = {
counter: 0
}
const handler = {
get(target, property) {
return target[property];
},
set(target, property, value) {
Reflect.set(target, property, value);
render()
return true
}
}
const state = new Proxy(State, handler);
export { state }
main.js
import { html, init } from "./lib.js"
import { state } from "./state.js"
function inc() {
state.counter = state.counter + 1;
}
function view (state) {
let view = html(`
<div>
<div>Counter <span>${state.counter}</span> </div>
<button>INC</button>
</div>
`);
let btn = view.querySelector("button")
btn.onclick = inc;
return view;
}
init(view, state);fully at the following sample :
Top comments (0)