<div id="out"></div>
<script src="../../node_modules/steal/steal.js" dev-bundle></script>
<script>
steal('can/view/stache', function(){
	var items = [];
	for (var i = 0; i < 1000; i++) {
		items.push({
			// Random 5 character String
			name: Math.random().toString(36)
				.replace(/[^a-z]+/g, '').substr(0, 5)
		});
	}

	var viewModel = window.viewModel = new can.Map({
		show: false
	})

	can.Component.extend({
		tag: 'grandparent-component',
		view: can.stache('{{# if(show) }}<parent-component></parent-component>{{/ if }}'),
		scope: viewModel
	});
	can.Component.extend({
		tag: 'parent-component',
		view: can.stache('<child-component></child-component>')
	});
	can.Component.extend({
		tag: 'child-component',
		view: can.stache('<ul>{{# items }}<li>{{ name }}</li>{{/ items }}</ul>'),
		scope: {
			items: items
		}
	});
	$('#out').html(can.stache('<grandparent-component></grandparent-component>'));

	setInterval(function () {
		viewModel.attr('show', ! viewModel.attr('show'));
		console.log(Object.keys(can.view.nodeLists.nodeMap).length)
	}, 5); 
});
</script>