dwaltrip/memory-leak-mithril-v.1.1.1.html

## memory-leak-mithril-v.1.1.1.html
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Memory Leak test</title>
    <script src="mithril-v1.1.1.js"></script>
    <style>
      body { padding: 15px; margin: 0; }
      #widget-container {
        width: 340; height: 340; display: flex; flex-wrap: wrap; margin-top: 10px;
      }
      .widget {
        height: 30px; width: 30px; margin: 2px; border: 1px solid #777; font-size: 10px;
        display: flex; justify-content: center; align-items: center;
        box-sizing: border-box; user-select: none;
      }
      .widget:hover { cursor: pointer; }
    </style>
  </head>
  <body>
    <button onclick="toggleWidgets()">Toggle widgets</button>
    <div id="widget-container"></div>
    <script>
      var NUM_WIDGETS = 100;

      var idCounter = 0;
      function getWidget() {
        return {
          oninit: function() {
            this.id = (++idCounter);
            console.log('Widget.oninit -- id:', this.id);
          },
          onclick:        function() { console.log('onclick -- id:',                this.id); },
          onbeforeremove: function() { console.log('Widget.onbeforeremove -- id:',  this.id); },
          view: function() {
            return m('.widget', { onclick: ()=> this.onclick() }, this.id);
          }
        };
      }

      var rootNodes = [];
      var isShowingWidgets = false;
      function toggleWidgets() {
        rootNodes.forEach(function(rootNode) {
          if (isShowingWidgets) {
            var node = rootNode.children[0];
            m.mount(node, null);
            node.remove();
          } else {
            var node = buildWidgetMountPoint(rootNode);
            m.mount(node, getWidget());
          }
        });
       isShowingWidgets = !isShowingWidgets;
      }

      function buildWidgetMountPoint(parent) {
        var node = document.createElement('div');
        node.classList.add('widget-wrapper');
        parent.appendChild(node);
        return node;
      }

      function setup() {
        console.log('-- testing again with mithril v1.1.1 -- test 2');
        var container = document.getElementById('widget-container');
        for (var i = 1; i <= NUM_WIDGETS; i++) {
          var rootNode = document.createElement('div');
          rootNode.id = 'root-' + i;
          rootNode.classList.add('root-node');
          container.appendChild(rootNode);
          rootNodes.push(rootNode);
        }
        toggleWidgets();
      }
      setup();
    </script>
  </body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Memory Leak test</title>
	<script src="mithril-v1.1.1.js"></script>
	<style>
	body { padding: 15px; margin: 0; }
	#widget-container {
	width: 340; height: 340; display: flex; flex-wrap: wrap; margin-top: 10px;
	}
	.widget {
	height: 30px; width: 30px; margin: 2px; border: 1px solid #777; font-size: 10px;
	display: flex; justify-content: center; align-items: center;
	box-sizing: border-box; user-select: none;
	}
	.widget:hover { cursor: pointer; }
	</style>
	</head>
	<body>
	<button onclick="toggleWidgets()">Toggle widgets</button>
	<div id="widget-container"></div>
	<script>
	var NUM_WIDGETS = 100;

	var idCounter = 0;
	function getWidget() {
	return {
	oninit: function() {
	this.id = (++idCounter);
	console.log('Widget.oninit -- id:', this.id);
	},
	onclick: function() { console.log('onclick -- id:', this.id); },
	onbeforeremove: function() { console.log('Widget.onbeforeremove -- id:', this.id); },
	view: function() {
	return m('.widget', { onclick: ()=> this.onclick() }, this.id);
	}
	};
	}

	var rootNodes = [];
	var isShowingWidgets = false;
	function toggleWidgets() {
	rootNodes.forEach(function(rootNode) {
	if (isShowingWidgets) {
	var node = rootNode.children[0];
	m.mount(node, null);
	node.remove();
	} else {
	var node = buildWidgetMountPoint(rootNode);
	m.mount(node, getWidget());
	}
	});
	isShowingWidgets = !isShowingWidgets;
	}

	function buildWidgetMountPoint(parent) {
	var node = document.createElement('div');
	node.classList.add('widget-wrapper');
	parent.appendChild(node);
	return node;
	}

	function setup() {
	console.log('-- testing again with mithril v1.1.1 -- test 2');
	var container = document.getElementById('widget-container');
	for (var i = 1; i <= NUM_WIDGETS; i++) {
	var rootNode = document.createElement('div');
	rootNode.id = 'root-' + i;
	rootNode.classList.add('root-node');
	container.appendChild(rootNode);
	rootNodes.push(rootNode);
	}
	toggleWidgets();
	}
	setup();
	</script>
	</body>
	</html>