gistfile1.txt

// calling create tree would do this
// only the attrs/children then are dynamic will by in the given nodes
// the nodes all should be monomorphic thus have the same properties (null if not used)


// we will clone these nodes
const precompiledNode1 = document.createElement('div');
const precompiledNode2 = document.createElement('div');
precompiledNode2.textContent = 'Node!';
precompiledNode2.className = 'foo';
const precompiledNode3 = document.createElement('span');
precompiledNode3.textContent = 'Static node';
precompiledNode3.className = 'foo';

function myTemplate(v1, v2, v3) {
	return { id: 0x0001, key: null, dom: precompiledNode1, attrs: null, children: [v1, ' ', v2].concat(v3) }
}

function myTemplate2() {
	return { id: 0x0002, key: null, dom: precompiledNode2, attrs: null, children: null };
}

function someRender() {
	// template
	// <div>
	// 	Hello world <div className='foo'>Node!</div><div className='foo'>Node!</div><div className='foo'>Node!</div>
	// </div>
	return myTemplate('Hello', 'world!', [ myTemplate2(), myTemplate2(), myTemplate2() ])
}

function myTemplate3(v1, v2) {
	return { id: 0x0003, key: null, dom: precompiledNode1, attrs: { className: v1 }, children: [
		{ id: 0x0004, key: null, dom: precompiledNode3, attrs: null, children: null }
	].concat(v2)};
}

function someRender2() {
	// template
	// <div className='test'>
	//	<span className='foo'>Static node</span>
	//	<div className='foo'>Node!</div><div className='foo'>Node!</div><div className='foo'>Node!</div>
	// </div>
	return myTemplate3('test', [ myTemplate2(), myTemplate2(), myTemplate2() ])
}