can/demos/can-component/nested-component-leak.html

MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy.

<div id='out'></div>
<script src="../../node_modules/steal/steal.js"></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',
		template: can.stache('{{#if show}}<parent-component></parent-component>{{/if}}'),
		scope: viewModel
	});
	can.Component.extend({
		tag: 'parent-component',
		template: can.stache('<child-component></child-component>')
	});
	can.Component.extend({
		tag: 'child-component',
		template: 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>