Show number of mutations while stepping

apps/shared/api.js

@@ -5,6 +5,9 @@ API = {
 		todos: []
 	},
 	nextId: 0,
+	mutations: 0,
+
+	observer: null,
 
 	// synchronous render
 	// should bring the view in sync with models++
@@ -57,6 +60,7 @@ API = {
 
 	reset: function(todoCount){
 		// reset
+		this.mutations = 0;
 		this.store.counter = 0;
 		this.clearAllTodos();
 
@@ -70,6 +74,23 @@ API = {
 		this.store.counter = 0;
 	},
 
+	startObserver: function(){
+		this.mutations = 0;
+		this.observer = this.observer || new MutationObserver(function(muts){
+			API.mutations = API.mutations + muts.length;
+		});
+		this.observer.observe(document.body,{
+			attributes: true,
+			childList: true,
+			characterData: true,
+			subtree: true
+		});
+	},
+
+	stopObserver: function(){
+		this.observer.disconnect();
+	},
+
 	// step - do a single iteration
 	step: function(){
 		var todos = this.store.todos;
@@ -82,11 +103,13 @@ API = {
 
 		if (actionNr == 0) {
 			// remove the first todo
-			this.removeTodo(todos[0]);
+			// this.removeTodo(this.removedTodo = todos[0]);
 
 		} else if (actionNr == 1) {
 			// add a new todo
-			this.addTodo("Added " + cycleNr);
+			// todos.push(this.removedTodo);
+			this.removedTodo = null;
+			// this.addTodo("Added " + cycleNr);
 		} else if (actionNr == 2) {
 			// Rename a todo
 			var todo = todos[(cycleNr + actionNr) % count]

client.imba

@@ -58,11 +58,13 @@ state:run = do
 
 tag Stepper < button
 	def ontouchstart t
-		@interval = setInterval(&,10) do
-			state.step(1)
+		app:api.startObserver for app in apps
+		@interval = setInterval(&,1000 / 60) do state.step(1)
 
 	def ontouchend t
 		clearInterval(@interval)
+		app:api.stopObserver for app in apps
+		Imba.commit
 
 
 Imba.mount <div[state].root ->
@@ -78,6 +80,10 @@ Imba.mount <div[state].root ->
 			<header> app:name + " " + String(app:bm or '') # ? String(app:bm) : @status
 			<AppFrame[app] src="apps/{app:path}" css:minHeight='340px'>
 			<footer>
+				if app:api and app:api:mutations
+					<div.muts>
+						<span.value> app:api:mutations
+						<i> "muts"
 				if app:bm and data:fastest
 					<div.ops>
 						<span.value> Math.round(app:bm:hz)

client.js

@@ -480,13 +480,18 @@ state.run = function() {
 
 var Stepper = _T.defineTag('Stepper', 'button', function(tag){
 	tag.prototype.ontouchstart = function (t){
-		return this._interval = setInterval(function() {
-			return state.step(1);
-		},10);
+		for (let i = 0, len = apps.length; i < len; i++) {
+			apps[i].api.startObserver();
+		};
+		return this._interval = setInterval(function() { return state.step(1); },1000 / 60);
 	};
 
 	tag.prototype.ontouchend = function (t){
-		return clearInterval(this._interval);
+		clearInterval(this._interval);
+		for (let i = 0, len = apps.length; i < len; i++) {
+			apps[i].api.stopObserver();
+		};
+		return Imba.commit();
 	};
 });
 
@@ -510,23 +515,29 @@ Imba.mount(_T.$('div',this).flag('root').setData(state).setTemplate(function() {
 					(t0.$.a=t0.$.a || _T.$('header',self)).setContent(app.name + " " + String(app.bm || ''),3).end(), // ? String(app:bm) : @status
 					(t0.$.b=t0.$.b || AppFrame.build(self).css('minHeight','340px')).setSrc(("apps/" + (app.path))).setData(app).end(),
 					(t0.$.c=t0.$.c || _T.$('footer',self)).setContent([
+						(app.api && app.api.mutations) ? (
+							(t0.$.d=t0.$.d || _T.$('div',self).flag('muts')).setContent([
+								(t0.$.e=t0.$.e || _T.$('span',self).flag('value')).setContent(app.api.mutations,3).end(),
+								(t0.$.f=t0.$.f || _T.$('i',self).setText("muts")).end()
+							],2).end()
+						) : void(0),
 						(app.bm && self.data().fastest) ? Imba.static([
-							(t0.$.d=t0.$.d || _T.$('div',self).flag('ops')).setContent([
-								(t0.$.e=t0.$.e || _T.$('span',self).flag('value')).setContent(Math.round(app.bm.hz),3).end(),
-								(t0.$.f=t0.$.f || _T.$('i',self).setText("ops/sec")).end()
+							(t0.$.g=t0.$.g || _T.$('div',self).flag('ops')).setContent([
+								(t0.$.h=t0.$.h || _T.$('span',self).flag('value')).setContent(Math.round(app.bm.hz),3).end(),
+								(t0.$.i=t0.$.i || _T.$('i',self).setText("ops/sec")).end()
 							],2).end(),
 							(app.bm == self.data().fastest) ? (
-								(t0.$.g=t0.$.g || _T.$('div',self).flag('small').flag('compare')).setContent((t0.$.h=t0.$.h || _T.$('span',self).setText("baseline")).end(),2).end()
+								(t0.$.j=t0.$.j || _T.$('div',self).flag('small').flag('compare')).setContent((t0.$.k=t0.$.k || _T.$('span',self).setText("baseline")).end(),2).end()
 							) : ((app.bm.hz < self.data().fastest.hz) ? (
-								(t0.$.i=t0.$.i || _T.$('div',self).flag('small').flag('compare').flag('slower')).setContent([
-									(t0.$.j=t0.$.j || _T.$('span',self).flag('x').flag('s')).setContent((self.data().fastest.hz / app.bm.hz).toFixed(2) + 'x',3).end(),
-									(t0.$.k=t0.$.k || _T.$('i',self).setText("slower")).end()
+								(t0.$.l=t0.$.l || _T.$('div',self).flag('small').flag('compare').flag('slower')).setContent([
+									(t0.$.m=t0.$.m || _T.$('span',self).flag('x').flag('s')).setContent((self.data().fastest.hz / app.bm.hz).toFixed(2) + 'x',3).end(),
+									(t0.$.n=t0.$.n || _T.$('i',self).setText("slower")).end()
 								],2).end()
 							) : void(0))
 						],2) : void(0),
-						(t0.$.l=t0.$.l || _T.$('div',self).flag('small').flag('size')).setContent([
-							(t0.$.m=t0.$.m || _T.$('i',self).setText('library')).end(),
-							(t0.$.n=t0.$.n || _T.$('span',self).flag('value')).setContent(app.libSize,3).end()
+						(t0.$.o=t0.$.o || _T.$('div',self).flag('small').flag('size')).setContent([
+							(t0.$.p=t0.$.p || _T.$('i',self).setText('library')).end(),
+							(t0.$.q=t0.$.q || _T.$('span',self).flag('value')).setContent(app.libSize,3).end()
 						],2).end()
 					],1).end()
 				],2).end();