function render<T>(template: Template<T>, self: any) {
let result;
env.begin();
let templateIterator = template.render(new UpdatableReference(self), root, new TestDynamicScope());
do {
result = templateIterator.next();
} while (!result.done);
result = result.value;
env.commit();
return result;
}
function render<T>(template: Template<T>, context={}) {
self = new UpdatableReference(context);
env.begin();
let templateIterator = template.render(self, root, new TestDynamicScope());
do {
result = templateIterator.next();
} while (!result.done);
result = result.value;
env.commit();
return result;
}
export function start() {
let env = new DemoEnvironment();
const TEMPLATES = {};
Array.prototype.slice.call(document.querySelectorAll("[data-template-name]")).forEach(function(node) {
let name = node.getAttribute("data-template-name"),
source = node.textContent;
TEMPLATES[name] = env.compile(source);
});
let data = {
width: window.innerWidth,
height: window.innerHeight,
points: new RingBuffer(500), // in practice we only have 100-200 circles on screen
count: 0,
// fps: 0
};
let output = document.getElementById('output');
let self = new UpdatableReference(data);
let template: Template<{}> = TEMPLATES['application'];
let templateIterator = template.render({ self, parentNode: output, dynamicScope: new TestDynamicScope() });
let result;
do {
result = templateIterator.next();
} while (!result.done);
result = result.value;
window.addEventListener("resize", function() {
data.width = window.innerWidth;
data.height = window.innerHeight;
});
document.addEventListener("mousemove", function(e) {
data.points.push( new Point(window.performance.now(), e.layerX, e.layerY) );
});
function tick() {
let timestamp = window.performance.now();
data.count = 0;
data.points.forEach(function(point, i) {
if (point) {
point.update(i, timestamp);
if (point.opacity > 0.001) {
data.count++;
} else {
data.points.remove(i);
}
}
});
self.update(data);
env.begin();
result.rerender();
env.commit();
window.requestAnimationFrame(tick);
}
tick();
}