store.subscribe(function storeRootListener() {
const newTree = report(store.getState());
const patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
});
static update() {
if(initialized === false) {
return;
}
let children = [];
children.push(Bar.render());
if(Sidebar.shown) {
children.push(Sidebar.render());
}
children.push(Content.render());
if(Tutorial.shown) {
children.push(Tutorial.render());
}
if(loading) {
let l = h("#loading", { "key": "loading" }, h("div", { "className": "fa fa-refresh fa-spin" }));
children.push(l);
}
let newTree = h("#container", children);
let patches = diff(tree, newTree);
content = patch(content, patches);
tree = newTree;
}
function update(node, oldModel, newModel) {
var patches = diff(oldModel, newModel);
var newNode = patch(node.firstChild, patches)
if (newNode !== node.firstChild) {
node.replaceChild(newNode, node.firstChild)
}
}
function update(store) {
var newTree = render(store);
var patches = diff(tree, newTree);
tree = newTree;
rootNode = patch(rootNode, patches);
console.info(store);
}
raf(function tick () {
var newTree = self.render()
var patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)
tree = newTree
raf(tick)
})
renderWithTemplate: function (data) {
this.r = this.r || 0;
this.r++;
var firstRender = !this.tree || !this.el;
var renderedTemplate, newTree;
if (isString(this.template)) {
renderedTemplate = this.template;
} else {
renderedTemplate = this.template(data || this);
}
var ast = parse(renderedTemplate.trim());
newTree = this.astToVdom(ast[0]);
if (firstRender) {
var el = createElement(newTree);
this.tree = newTree;
if (this.setElement) {
this.el.appendChild(el);
this._backboneEl = el;
} else {
this.el = el;
}
} else {
var patches = diff(this.tree, newTree);
this.tree = newTree;
patch(this._backboneEl || this.el, patches);
}
},
export function updateTree(vdom, newTree, history = []) {
const patches = diff(vdom.tree, newTree)
const newDom = {
node: patch(vdom.node, patches),
tree: newTree,
}
const keydownListener = makeKeydownListener(history)
function onKeydown(e) {
if (e.which === 13) {
e.preventDefault()
// Retrieve value of the input
// TODO: needs refactoring
const inputs = document.getElementsByClassName('input')
const command = inputs[inputs.length - 1].innerHTML
keydownListener(e, command)
.then(newHistory => updateTree(newDom, App(newHistory), newHistory))
.then(function() {
document.removeEventListener('keydown', onKeydown)
})
}
}
document.addEventListener('keydown', onKeydown)
}
function scene() {
const newTree = el(props)
const patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)
tree = newTree
raf(scene)
}
MathJax.Hub.Queue(["Typeset", MathJax.Hub, hidden, function() {
var newTree = virtualize(hidden.firstChild);
var patches = diff(lastVnode, newTree);
root = patch(root, patches);
document.getElementsByTagName('html')[0].scrollTop = root.scrollHeight;
lastVnode = newTree;
}]);
window.requestAnimationFrame(() => {
let patches = diff(this.tree, newTree);
this.rootNode = patch(this.rootNode, patches);
this.tree = newTree;
//use for fast forwarding.
this.viewDuration = pixelsToSeconds(this.rootNode.clientWidth - this.controls.width, this.samplesPerPixel, this.sampleRate);
});
var updateState = () => {
var newTree = render();
var patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
postRenderHook();
mediator.publish("DID_RENDER");
};
const next = nextTree => {
if (root) {
root = patch(root, diff(tree, nextTree))
} else {
root = document.body.insertBefore(createElement(nextTree), document.body.firstChild)
}
tree = nextTree
}
ret.render = function render() {
let newNode = createVdom(root);
let localized = localize(ultraDeepClone(newNode));
let patches = diff(newNode, localized);
if (patches['0']) observer.reset(); // reset observer if having patches
root = patch(root, patches);
}
var render = function () {
animationFrameToken = 0;
var previousTree = _this.previousTree;
var newTree = _this.render();
var patches = diff(previousTree, newTree);
patch(el, patches);
_this.onAfterPatch();
};
setInterval(() => {
count ++;
const newTree = render(count);
const patches = diff(tree, newTree);
rootNode = patch(rootNode, patches);
tree = newTree;
}, 1000);
runIteration: function(i) {
var workingData = this.workingDataArray[i];
var fromNode = workingData.fromNode;
var fromNodeVDOM = workingData.fromNodeVDOM;
var toNodeVDOM = workingData.toNodeVDOM;
var patches = diff(fromNodeVDOM, toNodeVDOM);
patch(fromNode, patches);
}
render: function(stage, opts) {
var newTree = svg('svg', {
width: this.s(this.params.width),
height: this.s(this.params.height)
}, [this.objectsToSVG(stage.children, opts)]);
var diffTree = diff(this.tree, newTree);
this.el = patch(this.el, diffTree);
this.tree = newTree;
},
markupS.onValue(function(markup) {
if (!rootNode) {
oldMarkup = markup;
rootNode = createElement(markup);
rootEl.appendChild(rootNode);
} else {
diffM = diff(oldMarkup, markup);
rootNode = patch(rootNode, diffM);
oldMarkup = markup;
}
});
function hook (loop, element) {
loop._element = element;
loop._html = element.outerHTML;
loop.vdom = generateVDOM(loop);
var patches = diff(virtualHTML(element.outerHTML), loop.vdom);
writePatches(loop._element, patches);
loop.partials && hookPartials(loop);
}
function applyPatches (loop, callback) {
if (loop.locked) return;
var vdom = generateVDOM(loop);
var patches = diff(loop.vdom, vdom);
writePatches(element(loop), patches);
loop.vdom = vdom;
callback && callback();
}
update: function (prev, node) {
if (!prev.tree || !this.eq(prev.tree.slot)(this.tree.slot)) {
return this.init();
}
if (this.tree.thunk) {
this.vdom = prev.vdom;
this.el = prev.el;
} else {
this.vdom = this.render(this.tree);
this.el = vpatch(node, vdiff(prev.vdom, this.vdom));
}
}
function draw(count) {
if (!initialized) {
tree = render(count);
dom = createElement(tree);
document.getElementById('dynamic-content').appendChild(dom);
initialized = true;
} else {
var newTree = render(count);
var patches = diff(tree, newTree);
patch(dom, patches);
tree = newTree;
}
}
raf(function tick () {
var state = snapshot();
if (state === lastState) { return; }
lastState = state;
var tree = render(state);
var patches = diff(lastTree, tree);
root = patch(root, patches);
lastTree = tree;
raf(tick);
});
function updateThunk(previous, domNode) {
if (!this.shouldUpdate(this, previous)) {
this.vnode = previous.vnode;
return;
}
if (!this.vnode) {
this.vnode = this.thunk();
}
var patches = diff(previous.vnode, this.vnode);
patch(domNode, patches);
}
view.prototype.render = function() {
var newTree = this.rootComponent(this.state)
var patches = diff(this.tree, newTree)
this.rootNode = patch(this.rootNode, patches)
this.tree = newTree
for(var key in this.observers) {
var node = this.rootNode.querySelector(key)
var obs = this.observers[key]
node['on' + obs.ev] = fn
}
if(this.cacheState) saveToLS(this.cacheState, this.state)
return this
}
vTree.subscribe((newVTree) => {
if (oldVTree) {
// последующие рендеры
let patches = diff(oldVTree, newVTree);
rootNode = patch(rootNode, patches);
} else {
// первый рендер
rootNode = createElement(newVTree);
document.getElementById("app").appendChild(rootNode);
}
oldVTree = newVTree;
DOMSource.onNext(true);
});
const applyQueue = (state, render) => {
ensureInitialized(state, render)
if(!queue.length) return state
const newState = queue.reduce((s, act) => Object.assign({}, s, act(s)), state )
queue = []
console.log(newState)
const newTree = render(newState)
const patches = diff(tree, newTree)
rootNode = patch(rootNode, patches)
tree = newTree
return newState
}
function write (chunk, encoding, next) {
try {
validateChunk(chunk) // might throw
var key = chunk.key
// @TODO: what if key === 'ERROR' ??? or unknown???
var vtree = chunk.value
if (oldTree) {
patches = diff(oldTree, vtree)
element = patch(element, patches)
} else {
element = create(vtree, {})
target.appendChild(element)
}
oldTree = vtree
next()
} catch (error) { next(error) } // @TODO: maybe display error page?
}
setTimeout(() => {
let old = notifications.splice(1, 1);
let old2 = notifications.splice(1, 1);
notifications = notifications.concat(old2, old);
// let old = notifications.splice(0, 1);
// let old2 = notifications.splice(1, 1);
// notifications = notifications.concat(old2, old);
// notifications.unshift({
// id: 10,
// text: 'new 10'
// });
// notifications = [{
// id: 2,
// text: 'Info 2'
// }, {
// id: 10,
// text: 'New 10'
// }, {
// id: 1,
// text: 'Info 1'
// }, {
// id: 3,
// text: 'Info 3'
// }, {
// id: 4,
// text: 'Info 4'
// }];
var newTree = render(notifications);
var patches = diff(tree, newTree);
// console.log(patches);
rootNode = patch(rootNode, patches);
tree = newTree;
}, 500);
ElementSpotIntro.prototype.composite = function(id) {
// Get new view and build the subtree
var model = this.collection.at(id);
var tree = model.get('vtree');
var element = model.get('element');
// model state change
// create the new tree
model.set('title', 'click');
var innerHtml = this.templateFunc( model.attributes )
.replace(/(?:(?:^|\n)\s+|\s+(?:$|\n))/g,'');
var newTree = convertHTML(innerHtml);
// composition
var patches = diff(tree, newTree);
element = patch(element, patches);
// finalize
model.set('vtree', newTree);
model.set('element', element);
};