phillipskevin/auto-automount.md

## auto-automount.md

      
    Raw
  

              auto-automount.md
            
          
    This tests the performance impact of "automount"ing automatically.

  
## index.html
<!doctype html>
<script src="./node_modules/steal/steal.js"></script>

## index.js
import stache from "can-stache";
import viewCallbacks from "can-view-callbacks";
import canSymbol from "can-symbol";

const viewModelSymbol = canSymbol.for("can.viewModel");

var obs = new MutationObserver(function MUTATION_HANDLER(mutationsList) {
    for(let mutation of mutationsList) {
        if (mutation.type === "childList") {
            for (let addedNode of mutation.addedNodes) {
                if (!addedNode[viewModelSymbol] && viewCallbacks._tags[addedNode.tagName.toLowerCase()]) {
                    // element should be mounted
                }
            }
        }
    }
});
obs.observe(document.documentElement, { childList: true, subtree: true });

function renderDivs(num) {
    let viewStr = "";

    for (let i=0; i<num; i++) {
        viewStr += `<div>div ${i}</div>`;
    }

    const view = stache(viewStr);

    document.body.appendChild(
        view()
    );
    console.log(`rendered ${num} divs`);
}

const button = document.createElement("button");
button.innerHTML = "run test";

button.addEventListener("click", function() {
    renderDivs(500);
});

document.body.appendChild(button);

## package.json
{
  "name": "auto-automount-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "can-stache": "^4.0.0-pre.50",
    "can-symbol": "^1.0.0-pre.4",
    "can-view-callbacks": "^4.0.0-pre.10",
    "steal": "^1.6.2"
  }
}
	<!doctype html>
	<script src="./node_modules/steal/steal.js"></script>
	import stache from "can-stache";
	import viewCallbacks from "can-view-callbacks";
	import canSymbol from "can-symbol";

	const viewModelSymbol = canSymbol.for("can.viewModel");

	var obs = new MutationObserver(function MUTATION_HANDLER(mutationsList) {
	for(let mutation of mutationsList) {
	if (mutation.type === "childList") {
	for (let addedNode of mutation.addedNodes) {
	if (!addedNode[viewModelSymbol] && viewCallbacks._tags[addedNode.tagName.toLowerCase()]) {
	// element should be mounted
	}
	}
	}
	}
	});
	obs.observe(document.documentElement, { childList: true, subtree: true });

	function renderDivs(num) {
	let viewStr = "";

	for (let i=0; i<num; i++) {
	viewStr += `<div>div ${i}</div>`;
	}

	const view = stache(viewStr);

	document.body.appendChild(
	view()
	);
	console.log(`rendered ${num} divs`);
	}

	const button = document.createElement("button");
	button.innerHTML = "run test";

	button.addEventListener("click", function() {
	renderDivs(500);
	});

	document.body.appendChild(button);
	{
	"name": "auto-automount-test",
	"version": "1.0.0",
	"description": "",
	"main": "index.js",
	"scripts": {
	"test": "echo \"Error: no test specified\" && exit 1"
	},
	"keywords": [],
	"author": "",
	"license": "ISC",
	"dependencies": {
	"can-stache": "^4.0.0-pre.50",
	"can-symbol": "^1.0.0-pre.4",
	"can-view-callbacks": "^4.0.0-pre.10",
	"steal": "^1.6.2"
	}
	}