solarite 0.1.0 → 0.2.0

package/tests/Solarite.test.js

@@ -1,17 +1,222 @@
 // noinspection DuplicatedCode
 
+// Broken tests will be annotated with FIXME
+
 import {camelToDashes, htmlContext} from "../src/solarite/Util.js";
-import {watchGet, watchSet} from "../src/solarite/watch.js";
+//import {watchGet, watchSet} from "../src/solarite/watch.js";
+
+import {Solarite, r, getArg} from '../src/solarite/Solarite.js';
+//import {Solarite, r, getArg} from '../dist/Solarite.min.js'; // This will help the Benchmark test warm up.
+//import {watch} from "../src/solarite/watch2.js";
+import watch3 from "../src/solarite/watch3.js";
+//import NodeGroupManager from "../src/solarite/NodeGroupManager.js";
+import NodeGroup from "../src/solarite/NodeGroup.js";
+import Template from "../src/solarite/Template.js";
+import Shell from "../src/solarite/Shell.js";
+
 import Testimony, {assert} from './Testimony.js';
-Testimony.enableJsDom();
 
-import {Solarite, r} from '../src/solarite/Solarite.js';
-//import {Red, r, Perf} from '../dist/Solarite.min.js'; // This will help the Benchmark test warm up.
-import {watch} from "../src/solarite/watch2.js";
+// This function is used by the various tests.
+window.getHtml = (item, includeComments=false) => {
+	if (!item)
+		return item;
+
+	if (item.fragment)
+		item = item.fragment; // Shell
+	if (item instanceof DocumentFragment)
+		item = [...item.childNodes]
+
+	else if (item.getNodes)
+		item = item.getNodes()
+
+	let result;
+	if (Array.isArray(item)) {
+		if (!includeComments)
+			item = item.filter(n => n.nodeType !==8)
+
+		result = item.map(n => n.nodeType === 8 ? `<!--${n.textContent}-->` : n.outerHTML || n.textContent).join('|');
+	}
+	else
+		result = item.outerHTML || item.textContent
+
+	if (!includeComments)
+		result = result.replace(/(<)!--(.*?)-->/g, '')
+
+	// Remove whitespace between tags, so we can write simpler tests.
+	return result.replace(/^\s+</g, '<').replace(/>\s+</g, '><').replace(/>\s+$/g, '>');
+}
+
+
+
+//<editor-fold desc="shell">
+/* ┌─────────────────╮
+ * | Shell           |
+ * └─────────────────╯*/
+Testimony.test('Solarite.Shell.empty', () => {
+	let shell = new Shell(['', ''])
+	assert.eq(getHtml(shell, true), '<!--ExprPath:0-->|<!--ExprPathEnd:0-->')
+});
+
+Testimony.test('Solarite.Shell.paragraph', () => {
+	let shell = new Shell(['<p>', '</p>'])
+	assert.eq(getHtml(shell, true), '<p><!--ExprPath:0--><!--ExprPathEnd:0--></p>')
+});
+
+Testimony.test('Solarite.Shell.nodeBefore', () => {
+	let shell = new Shell(['a', ''])
+	assert.eq(getHtml(shell, true), 'a|<!--ExprPathEnd:0-->')
+});
+
+Testimony.test('Solarite.Shell.nodeAfter', () => {
+	let shell = new Shell(['', 'b'])
+	assert.eq(getHtml(shell, true), '<!--ExprPath:0-->|b')
+});
+
+Testimony.test('Solarite.Shell.nodeBeforeAfter', () => {
+	let shell = new Shell(['a', 'b'])
+	assert.eq(getHtml(shell, true), 'a|b')
+});
+
+Testimony.test('Solarite.Shell.emptyTwoPaths', () => {
+	let shell = new Shell(['', '', ''])
+	assert.eq(getHtml(shell, true), '<!--ExprPath:0-->|<!--ExprPathEnd:0-->|<!--ExprPathEnd:1-->')
+});
+
+Testimony.test('Solarite.Shell.nodeBetweenPaths', () => {
+	let shell = new Shell(['', 'a', ''])
+	assert.eq(getHtml(shell, true), '<!--ExprPath:0-->|a|<!--ExprPathEnd:1-->')
+});
+
+Testimony.test('Solarite.Shell.nodesAroundPaths', () => {
+	let shell = new Shell(['a', 'b', 'c'])
+	assert.eq(getHtml(shell, true), 'a|b|c')
+});
+
+Testimony.test('Solarite.Shell.emptyTwoPathsNested', () => {
+	let shell = new Shell(['<p>', '', '</p>'])
+	assert.eq(getHtml(shell, true), '<p><!--ExprPath:0--><!--ExprPathEnd:0--><!--ExprPathEnd:1--></p>')
+});
+
+Testimony.test('Solarite.Shell.nodesAroundPathsNested', () => {
+	let shell = new Shell(['<p>a', 'b', 'c</p>'])
+	assert.eq(getHtml(shell, true), '<p>abc</p>')
+});
+
+
+// Testimony.test('Shell.emptySpacer', () => {
+// 	let expr = 1;
+// 	let shell = new Shell(['<input ', '', 'onclick=','>'])
+// 	console.log(getHtml(shell, true))
+// });
+
+
+
+//</editor-fold>
+
+
+
+//<editor-fold desc="nodegroup">
+/* ┌─────────────────╮
+ * | NodeGroup       |
+ * └─────────────────╯*/
+Testimony.test('Solarite.NodeGroup.empty', () => {
+
+	let ng = new NodeGroup(new Template([``], []))
+	assert.eq(getHtml(ng), '')
+
+	ng.applyExprs([])
+	assert.eq(getHtml(ng), '')
+});
+
+
+Testimony.test('Solarite.NodeGroup.oneExpr', () => {
+
+	let ng = new NodeGroup(new Template([``, ``], ['1']))
+	assert.eq(getHtml(ng), '1')
+
+	ng.applyExprs([2])
+	assert.eq(getHtml(ng), '2')
+
+	ng.applyExprs([[3, 4, 5]])
+	assert.eq(getHtml(ng), '3|4|5')
+});
+
+Testimony.test('Solarite.NodeGroup.emptyAdjacent', () => {
+	let ng = new NodeGroup(new Template([``, ``, ``], ['1', '2']))
+	ng.verify();
+
+	assert.eq(getHtml(ng), '1|2')
+
+	ng.applyExprs([3, 4])
+	assert.eq(getHtml(ng), '3|4')
+
+	ng.applyExprs([[1, 2, 3], [4, 5, 6]])
+	assert.eq(getHtml(ng), '1|2|3|4|5|6')
+});
+
+
+Testimony.test('Solarite.NodeGroup.paragraph', () => {
+	let ng = new NodeGroup(new Template(['<p>', '</p>'], ['1']))
+	assert.eq(getHtml(ng), '<p>1</p>')
+
+	ng.applyExprs([2])
+	assert.eq(getHtml(ng), '<p>2</p>')
+
+	ng.applyExprs([[3, 4, 5]])
+	assert.eq(getHtml(ng), '<p>345</p>')
+});
+
+Testimony.test('Solarite.NodeGroup.node', () => {
+	let a = r('<p>a</p>')
+	let b = r('<p>b</p>')
+	let ng = new NodeGroup(new Template(['<div>', '</div>'], [a]))
+
+	assert.eq(getHtml(ng), '<div><p>a</p></div>')
+
+	ng.applyExprs([b]);
+	assert.eq(getHtml(ng), '<div><p>b</p></div>')
+
+	ng.applyExprs([1]);
+	assert.eq(getHtml(ng), '<div>1</div>')
+
+	ng.applyExprs([a]);
+	assert.eq(getHtml(ng), '<div><p>a</p></div>')
+});
+
+Testimony.test('Solarite.NodeGroup._nodeSwap', () => {
+	let a = r('<p>a</p>')
+	let b = r('<p>b</p>')
+	let ng = new NodeGroup(new Template(['<div>', '', '</div>'], [a, b]))
+	document.body.append(ng.startNode)
+
+	assert.eq(getHtml(ng), '<div><p>a</p><p>b</p></div>')
+
+	ng.applyExprs([b, a]);
+	assert.eq(getHtml(ng), '<div><p>b</p><p>a</p></div>');
+});
+
+
+Testimony.test('Solarite.NodeGroup.arrayReverse', () => {
+	let list = [r('a'), r('b')];
+
+	let ng = new NodeGroup(new Template(['<div>', '</div>'], [list]))
+	ng.verify();
+	assert(getHtml(ng), '<div>ab</div')
+
+	list.reverse();
+	ng.applyExprs([list])
+	assert(getHtml(ng), '<div>ba</div')
+});
+//</editor-fold>
 
 
 
-Testimony.test('Util.htmlContext', () => {
+//<editor-fold desc="util">
+/* ┌─────────────────╮
+ * | Util            |
+ * └─────────────────╯*/
+
+Testimony.test('Solarite.Util.htmlContext', () => {
 	assert.eq(htmlContext('<div class="test'), htmlContext.Attribute)
 	assert.eq(htmlContext('">hello '), htmlContext.Text);
 	assert.eq(htmlContext('<span data-attr="hi > there"'), htmlContext.Tag);
@@ -24,14 +229,21 @@ Testimony.test('Util.htmlContext', () => {
 	assert.eq(htmlContext('>'), htmlContext.Text);
 });
 
-Testimony.test('Util.camelToDashes', () => {
+Testimony.test('Solarite.Util.camelToDashes', () => {
 	assert.eq(camelToDashes('ProperName'), 'proper-name');
 	assert.eq(camelToDashes('HTMLElement'), 'html-element');
 	assert.eq(camelToDashes('BigUI'), 'big-ui');
 	assert.eq(camelToDashes('UIForm'), 'ui-form');
 	assert.eq(camelToDashes('A100'), 'a-100');
 });
+//</editor-fold>
+
 
+
+//<editor-fold desc="basic">
+/* ┌─────────────────╮
+ * | Basic           |
+ * └─────────────────╯*/
 Testimony.test('Solarite.basic.empty', () => {
 	class A extends HTMLElement {
 		constructor() {
@@ -153,20 +365,27 @@ Testimony.test('Solarite.basic.createElement', () => {
 	a.render();
 	assert.eq(getHtml(a), `<r-35><div>Hello!</div></r-35>`);
 });
+//</editor-fold>
+
 
 
-// Expr
+//<editor-fold desc="expr">
+/* ┌─────────────────╮
+ * | Expr            |
+ * └─────────────────╯*/
 Testimony.test('Solarite.expr.staticString', () => {
-	class R40 extends Solarite {
+	class R40 extends HTMLElement {
 		render() {
-			r(this)`Solarite ${'🟥'} Component`
+			r(this)`Solarite ${'Test'} Component`
 		}
 	}
+	customElements.define('r-40', R40);
 
 	let a = new R40();
+	a.render();
 	document.body.append(a);
 
-	assert.eq(getHtml(a), '<r-40>Solarite 🟥 Component</r-40>');
+	assert.eq(getHtml(a), '<r-40>Solarite Test Component</r-40>');
 
 	a.remove();
 });
@@ -190,7 +409,6 @@ Testimony.test('Solarite.expr.htmlString', () => {
 	assert.eq(getHtml(a), '<r-42>This text is <b>Bold</b>!</r-42>');
 });
 
-
 Testimony.test('Solarite.expr.table', () => {
 
 	class R43 extends Solarite {
@@ -217,7 +435,13 @@ Testimony.test('Solarite.expr.documentFragment', () => {
 		}
 	}
 
-	let a = new R44({render:true}); // auto render on construct.
+	let a = new R44(); // auto render on construct.
+
+	a.render();
+	assert.eq(getHtml(a), '<r-44>This text is <b>Bold</b><i>Italic</i>!</r-44>');
+
+
+	a.render();
 	assert.eq(getHtml(a), '<r-44>This text is <b>Bold</b><i>Italic</i>!</r-44>');
 });
 
@@ -446,7 +670,6 @@ Testimony.test('Solarite.expr.staticElement', () => {
 	assert.eq(getHtml(a), '<r-74>Field: <input></r-74>');
 });
 
-
 Testimony.test('Solarite.expr.varText', () => {
 	class A extends Solarite {
 		value = 'Apple';
@@ -472,8 +695,6 @@ Testimony.test('Solarite.expr.varText', () => {
 	assert.eq(a.childNodes.length, 3);
 });
 
-
-
 Testimony.test('Solarite.expr.cyclicRef', () => {
 
 
@@ -499,15 +720,14 @@ Testimony.test('Solarite.expr.cyclicRef', () => {
 	a.render();
 	assert.eq(getHtml(a), '<r-100>The fruit is Cherry!</r-100>');
 });
+//</editor-fold>
 
 
 
-
-
-
-
-
-// Loop:
+//<editor-fold desc="loop">
+/* ┌─────────────────╮
+ * | Loop            |
+ * └─────────────────╯*/
 Testimony.test('Solarite.loop.strings', () => {
 	class A extends Solarite {
 		fruits = ['Apple', 'Banana'];
@@ -543,7 +763,6 @@ Testimony.test('Solarite.loop.strings', () => {
 	assert.eq(getHtml(a), '<r-200>Apple</r-200>');
 });
 
-
 Testimony.test('Solarite.loop.paragraphs', () => {
 	class A extends Solarite {
 		fruits = ['Apple', 'Banana'];
@@ -554,7 +773,8 @@ Testimony.test('Solarite.loop.paragraphs', () => {
 	}
 	customElements.define('r-210', A);
 	let a = new A();
-	document.body.append(a);
+
+	a.render();
 
 	assert.eq(getHtml(a), '<r-210><p>Apple</p><p>Banana</p></r-210>');
 
@@ -563,6 +783,7 @@ Testimony.test('Solarite.loop.paragraphs', () => {
 	assert.eq(getHtml(a), '<r-210><p>Apple</p><p>Banana</p><p>Cherry</p></r-210>');
 
 	a.fruits.pop();
+	window.debug = true;
 	a.render();
 	assert.eq(getHtml(a), '<r-210><p>Apple</p><p>Banana</p></r-210>');
 
@@ -581,8 +802,7 @@ Testimony.test('Solarite.loop.paragraphs', () => {
 	a.remove();
 });
 
-
-Testimony.test('Solarite.loop.paragraphsBefore', () => {
+Testimony.test('Solarite.loop.paragraphsBefore', `Same as above, but with another element afterward.`, () => {
 	class A extends Solarite {
 		fruits = ['Apple', 'Banana'];
 
@@ -619,6 +839,54 @@ Testimony.test('Solarite.loop.paragraphsBefore', () => {
 	a.remove();
 });
 
+Testimony.test('Solarite.loop.continuity', `Make sure elements are reused in a consistent way.`, () => {
+	class A extends Solarite {
+		fruits = ['Apple', 'Banana'];
+
+		render() {
+			r(this)`${this.fruits.map(fruit => r`<p>${fruit}</p>`)}`
+		}
+	}
+	customElements.define('a-213', A);
+	let a = new A();
+	document.body.append(a);
+	a.render();
+	assert.eq(getHtml(a), '<a-213><p>Apple</p><p>Banana</p></a-213>');
+
+	let apple = a.children[0];
+	let banana = a.children[1];
+	a.fruits.shift();
+	a.render();
+	assert.eq(getHtml(a), '<a-213><p>Banana</p></a-213>');
+	assert.eq(a.children[0], banana);
+
+	a.fruits.pop();
+	a.render();
+	assert.eq(getHtml(a), '<a-213></a-213>');
+
+	// We get back the same element.
+	a.fruits.push('Apple');
+	a.render();
+	assert.eq(getHtml(a), '<a-213><p>Apple</p></a-213>');
+	assert.eq(a.children[0], apple);
+
+
+	a.fruits.push('Banana');
+	a.render();
+	assert.eq(getHtml(a), '<a-213><p>Apple</p><p>Banana</p></a-213>');
+	assert.eq(a.children[0], apple);
+	assert.eq(a.children[1], banana);
+
+	// Make sure we maintain continuity after adding to the beginning.
+	a.fruits.unshift('Cherry');
+	a.render();
+	assert.eq(getHtml(a), '<a-213><p>Cherry</p><p>Apple</p><p>Banana</p></a-213>');
+	assert.eq(a.children[1], apple);
+	assert.eq(a.children[2], banana);
+
+	a.remove();
+});
+
 Testimony.test('Solarite.loop.eventBindings', async () => {
 	await new Promise((resolve, reject) => {
 		let callCount = 0;
@@ -653,7 +921,7 @@ Testimony.test('Solarite.loop.eventBindings', async () => {
 
 });
 
-
+// TODO: Why is this called pathCache?  What does it test?
 Testimony.test('Solarite.loop.pathCache', () => {
 
 	class R216 extends Solarite {
@@ -670,15 +938,13 @@ Testimony.test('Solarite.loop.pathCache', () => {
 	}
 
 	let a = new R216();
-	document.body.append(a);
 	a.render();
 	assert.eq(getHtml(a), `<r-216><p>Item</p><p>Item</p></r-216>`);
 
 	a.fruits.shift();
+	window.debug = true;
 	a.render();
 	assert.eq(getHtml(a), `<r-216><p>Item</p></r-216>`);
-
-	a.remove();
 });
 
 Testimony.test('Solarite.loop.nested', () => {
@@ -728,6 +994,7 @@ Testimony.test('Solarite.loop.nested', () => {
 
 	a.pets.reverse();
 	a.fruits.reverse();
+	window.debug = true;
 	a.render();
 	assert.eq(getHtml(a), `<r-220><p>Bird eats Apricot</p><p>Bird eats Banana</p><p>Cat eats Apricot</p><p>Cat eats Banana</p></r-220>`);
 
@@ -803,7 +1070,6 @@ Testimony.test('Solarite.loop.nested2', () => {
 	a.remove();
 });
 
-
 Testimony.test('Solarite.loop.nested3', `Move items from one sublist to another.`, () => {
 	
 	class A225 extends Solarite {
@@ -825,6 +1091,7 @@ Testimony.test('Solarite.loop.nested3', `Move items from one sublist to another.
 	
 	let a = new A225();
 	document.body.append(a);
+	window.debug = true;
 	a.render();
 	
 	let cherry = a.fruitGroups[1].pop();
@@ -834,15 +1101,12 @@ Testimony.test('Solarite.loop.nested3', `Move items from one sublist to another.
 	
 	let banana = a.fruitGroups[1].pop();
 	a.fruitGroups[0].push(banana);
-	//window.debug = true;
 	a.render();
-	
+
 	window.verify = false;
 	a.remove();
 });
 
-
-
 // Tried to make a simpler version of nested3, but it works fine:
 Testimony.test('Solarite.loop.nested4', () => {
 	
@@ -877,14 +1141,6 @@ Testimony.test('Solarite.loop.nested4', () => {
 	a.remove();
 });
 
-
-
-
-
-
-
-
-
 Testimony.test('Solarite.loop.nested5', () => {
 	
 	// This test was originally created by reducing a failure in production code
@@ -904,7 +1160,7 @@ Testimony.test('Solarite.loop.nested5', () => {
 		]
 		
 		render() {
-			this.html = r`
+			r(this)`
 			<a-227>${this.boxes.map(item =>
 				r`${item.map(item2 =>
 					r`<div title=${v}>${item2}</div>`
@@ -929,28 +1185,12 @@ Testimony.test('Solarite.loop.nested5', () => {
 	]
 	a.render();
 	
-	assert.eq(a.outerHTML, `<a-227><!--PathStart:0--><!--PathStart:0--><div title="F2"><!--PathStart:1-->A<!--PathEnd:1--></div><div title="F2"><!--PathStart:1-->B<!--PathEnd:1--></div><!--PathEnd:0--><!--PathStart:0--><div title="F2"><!--PathStart:1-->A<!--PathEnd:1--></div><!--PathEnd:0--><!--PathEnd:0--></a-227>`);
+	assert.eq(a.outerHTML, `<a-227><!--ExprPath:0--><!--ExprPath:0--><div title="F2"><!--ExprPath:1-->A<!--ExprPathEnd:1--></div><div title="F2"><!--ExprPath:1-->B<!--ExprPathEnd:1--></div><!--ExprPathEnd:0--><!--ExprPath:0--><div title="F2"><!--ExprPath:1-->A<!--ExprPathEnd:1--></div><!--ExprPathEnd:0--><!--ExprPathEnd:0--></a-227>`);
 	
 	window.verify = false;
 	a.remove();
 });
 
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
 Testimony.test('Solarite.loop.nestedConditional', () => {
 
 	let isGoodBoy = true;
@@ -1035,7 +1275,6 @@ Testimony.test('Solarite.loop.conditionalNested', () => {
 	a.remove();
 });
 
-
 Testimony.test('Solarite.loop.tripleNested', 'Triple nested grid', () => {
 
 	class R250 extends Solarite {
@@ -1101,12 +1340,15 @@ Testimony.test('Solarite.loop.tripleNested', 'Triple nested grid', () => {
 	a.remove();
 });
 
+//</editor-fold>
 
 
 
 
-
-
+//<editor-fold desc="embed">
+/* ┌─────────────────╮
+ * | Embed            |
+ * └─────────────────╯*/
 
 Testimony.test('Solarite.embed.styleStatic', () => {
 	let count = 0;
@@ -1159,7 +1401,6 @@ Testimony.test('Solarite.embed.optionsNoStyles', () => {
 	a.remove();
 });
 
-
 Testimony.test('Solarite.embed.styleDynamic', () => {
 	let style1 = `:host { color: red }`
 	let style2 = `:host { font-weight: bold }`
@@ -1233,10 +1474,6 @@ Testimony.test('Solarite.embed.styleDynamicTag', () => {
 	a.remove();
 });
 
-
-
-
-
 Testimony.test('Solarite.embed.svg', () => {
 	class R330 extends Solarite {
 		render() {
@@ -1314,8 +1551,16 @@ Testimony.test('Solarite.embed._scriptDynamic', () => {
 	delete window.scriptStaticCount;
 });
 
+//</editor-fold>
+
 
 
+
+//<editor-fold desc="attrib">
+/* ┌─────────────────╮
+ * | Attrib          |
+ * └─────────────────╯*/
+
 Testimony.test('Solarite.attrib.single', () => {
 
 	let val = 'one';
@@ -1385,7 +1630,6 @@ Testimony.test('Solarite.attrib.double', () => {
 	assert.eq(getHtml(a), `<r-420><div class="oneBtwoB">oneB</div></r-420>`)
 });
 
-
 Testimony.test('Solarite.attrib.doubleAndText', () => {
 
 	let val1 = 'one';
@@ -1499,12 +1743,11 @@ Testimony.test('Solarite.attrib.toggle', () => {
 	assert.eq(getHtml(a), `<r-460><div></div></r-460>`)
 });
 
-
 Testimony.test('Solarite.attrib.pseudoRoot', () => {
 	let title = 'Hello'
 	class R470 extends Solarite {
 		render() {
-			this.html = r`<r-470 title="${title}">World</r-470>`
+			r(this)`<r-470 title="${title}">World</r-470>`
 		}
 	}
 
@@ -1522,7 +1765,6 @@ Testimony.test('Solarite.attrib.pseudoRoot', () => {
 	assert.eq(a.outerHTML, `<r-470>World</r-470>`)
 });
 
-
 Testimony.test('Solarite.attrib.pseudoRoot2', 'Static attribute overrides.', () => {
 	let title = 'Hello'
 	class R472 extends Solarite {
@@ -1584,9 +1826,59 @@ Testimony.test('Solarite.attrib.multiple', '', () => {
 	assert.eq(getHtml(a), `<r-474><button onclick="" class="primary">Hello</button></r-474>`);
 });
 
+Testimony.test('Solarite.attrib.ids1', () => {
+	class R500 extends Solarite {
+		one;
+		render() {
+			r(this)`<div data-id="one"></div>`;
+		}
+	}
+
+	let a = new R500();
+	a.render();
+
+	assert(a.one.tagName === 'DIV')
+});
+
+Testimony.test('Solarite.attrib.ids2', () => {
+	class R510 extends Solarite {
+		one;
+		render() {
+			r(this)`<div data-id="one"><p id="two"></p></div>`;
+		}
+	}
+
+	let a = new R510();
+	a.render();
+
+	assert(a.one.tagName === 'DIV')
+	assert(a.two.tagName === 'P')
+});
+
+Testimony.test('Solarite.attrib.idsDelve', () => {
+	class R520 extends Solarite {
+		one;
+		render() {
+			r(this)`<div data-id="one"><p id="path.to.p"></p></div>`;
+		}
+	}
+
+	let a = new R520();
+	a.render();
+
+	assert(a.one.tagName === 'DIV')
+	assert(a.path.to.p.tagName === 'P')
+});
+//</editor-fold>
+
+
 
 
-Testimony.test('Solarite.comments', () => {
+//<editor-fold desc="comments">
+/* ┌─────────────────╮
+ * | comments        |
+ * └─────────────────╯*/
+Testimony.test('Solarite.comments.one', () => {
 	
 	class A480 extends Solarite {
 		render() {
@@ -1601,7 +1893,7 @@ Testimony.test('Solarite.comments', () => {
 	a.remove();
 });
 
-Testimony.test('Solarite.comments2', () => {
+Testimony.test('Solarite.comments.two', () => {
 	
 	class A482 extends Solarite {
 		render() {
@@ -1614,32 +1906,72 @@ Testimony.test('Solarite.comments2', () => {
 	assert.eq(getHtml(a), `<a-482><div>3</div></a-482>`)
 	a.remove();
 });
+//</editor-fold>
 
 
 
 
+//<editor-fold desc="r">
+/* ┌─────────────────╮
+ * | r               |
+ * └─────────────────╯*/
+Testimony.test('Solarite.r.staticElement', () => {
+	let button = r(`<button>hi</button>`);
+	assert(button instanceof HTMLElement); // Not a DocumentFragment
+	assert.eq(getHtml(button), `<button>hi</button>`)
+})
 
-Testimony.test('Solarite.ids', () => {
-	class R500 extends Solarite {
-		one;
-		render() {
-			this.html = r`<div data-id="one"></div>`;
-		}
-	}
+Testimony.test('Solarite.r.staticElement2', () => {
+	let button = r(`
+		<button>hi</button>`);
+	assert(button instanceof HTMLElement); // Not a DocumentFragment
+	assert.eq(getHtml(button), `<button>hi</button>`)
+})
 
-	let a = new R500();
-	a.render();
+Testimony.test('Solarite.r.staticElement3', () => {
+	let button = r(` <!-- comment -->
+		<button>hi</button>`);
+	assert(button instanceof HTMLElement); // Not a DocumentFragment
+	assert.eq(getHtml(button), `<button>hi</button>`)
+})
 
-	assert(a.one.tagName === 'DIV')
+Testimony.test('Solarite.r.staticElement4', () => {
+	let button = r(` Hello`);
+	assert(button instanceof Text);
+	assert.eq(getHtml(button), ` Hello`)
+})
+
+Testimony.test('Solarite.r.staticElement5', () => {
+	let button = r(` <!--comment--> Hello`);
+	assert(button instanceof Text);
+	assert.eq(getHtml(button), ` Hello`)
+})
+
+Testimony.test('Solarite.r.fragment', () => {
+	let fragment = r(`Hello <button>hi</button>`);
+	assert(fragment instanceof DocumentFragment);
+	assert.eq(getHtml(fragment), `Hello |<button>hi</button>`)
 });
 
-Testimony.test('Solarite.r._createElement', () => {
+Testimony.test('Solarite.r.fragment2', () => {
+	let fragment = r()`Hello <button>hi</button>`;
+	assert(fragment instanceof DocumentFragment);
+	assert.eq(getHtml(fragment), `Hello |<button>hi</button>`)
+});
 
-	let button = r()`<button>hi</button>`
-	console.log(button.outerHTML)
-	document.body.append(button);
-})
+Testimony.test('Solarite.r.staticElement3', () => {
+	let button = r()`<button>hi</button>`;
+	assert(button instanceof HTMLElement);
+	assert.eq(getHtml(button), `<button>hi</button>`)
+});
 
+Testimony.test('Solarite.r.staticElement4', () => {
+	// with line return
+	let button = r()`
+		<button>hi</button>`;
+	assert(button instanceof HTMLElement);
+	assert.eq(getHtml(button), `<button>hi</button>`)
+})
 
 
 
@@ -1650,70 +1982,213 @@ Testimony.test('Solarite.r.element', () => {
 	assert.eq(getHtml(button), `<button>I'm a <b>better</b> button</button>`)
 })
 
+Testimony.test('Solarite.r.standalone1', () => {
+	let button = r({
+		count: 0,
 
+		inc() {
+			this.count++;
+			this.render();
+		},
 
-Testimony.test('Solarite.r.lightweightComponent', () => {
-	function betterButton(count=0) {
-		let result = r(
-			() => r`<button onclick=${(ev, self)=>{count++; self.render()}}>I'm a ${count}X better button</button>`
-		);
-		result.inc = () => {
-			count++;
-			result.render();
-		}
-		return result;
-	}
-
-	let button = betterButton(3);
-	assert.eq(getHtml(button), `<button onclick="">I'm a 3X better button</button>`)
-
-	button.inc();
-	assert.eq(getHtml(button), `<button onclick="">I'm a 4X better button</button>`)
-})
-
-Testimony.test('Solarite.r.lightweightComponent2', () => {
-	function betterButton(count=0) {
-		let result = r(
-			() => r`<button onclick=${(ev, self)=>{count++; self.render()}}>I'm a ${count}X better button</button>`
-		);
-		result.inc = () => {
-			count++;
-			result.render();
+		render() {
+			r(this)`<button onclick=${this.inc}>I've been clicked ${this.count} times.</button>`
 		}
-		return result;
-	}
+	});
+	//document.body.append(button);
 
-	let button = betterButton(3);
-	assert.eq(getHtml(button), `<button onclick="">I'm a 3X better button</button>`)
+	assert.eq(getHtml(button), `<button onclick="">I've been clicked 0 times.</button>`)
 
 	button.inc();
-	assert.eq(getHtml(button), `<button onclick="">I'm a 4X better button</button>`)
-})
+	assert.eq(getHtml(button), `<button onclick="">I've been clicked 1 times.</button>`);
 
+	button.dispatchEvent(new MouseEvent('click'));
+	assert.eq(getHtml(button), `<button onclick="">I've been clicked 2 times.</button>`);
 
+	//button.remove();
+});
 
+Testimony.test('Solarite.r.standalone2', () => {
+	let list = r({
+		items: [],
 
-Testimony.test('Solarite.component.tr', () => {
+		add() {
+			this.items.push('Item ' + this.items.length);
+			this.render();
+		},
 
-	class TR510 extends Solarite('tr') {
 		render() {
-			this.html = r`<td>hello</td>`
+			r(this)`
+			<div>
+	            <button onclick=${this.add}>Add Item</button>
+	            <hr>
+	            ${this.items.map(item => r`
+	                <p>${item}</p>
+	            `)}
+	        </div>`
 		}
-	}
+	});
 
-	let table = document.createElement('table')
+	//document.body.append(list);
 
-	table.append(new TR510())
-	document.body.append(table)
+	assert.eq(getHtml(list), `<div><button onclick="">Add Item</button><hr></div>`);
 
-	assert.eq(table.outerHTML, `<table><tr is="tr-510"><td>hello</td></tr></table>`)
+	// At one point, rendering a standalone component the first time would re-render everything.
+	// Here we make sure the hr element doesn't come back.
+	list.querySelector('hr').remove();
+	list.render();
 
-	table.remove();
+	assert.eq(getHtml(list), `<div><button onclick="">Add Item</button></div>`);
+
+	list.add();
+	assert.eq(getHtml(list), `<div><button onclick="">Add Item</button><p>Item 0</p></div>`);
 
+	list.querySelector('button').dispatchEvent(new MouseEvent('click'));
+	assert.eq(getHtml(list), `<div><button onclick="">Add Item</button><p>Item 0</p><p>Item 1</p></div>`);
+
+	//button.remove();
 });
 
+Testimony.test('Solarite.r.standaloneId', "Test id's on standalone elmenets.", () => {
+	let list = r({
+		items: [],
 
-Testimony.test('Solarite.component.staticAttribs', () => {
+		add() {
+			this.items.push('Item ' + this.items.length);
+			this.render();
+		},
+
+		render() {
+			r(this)`
+			<div>
+			   <button data-id="button" onclick=${this.add}>Add Item</button>
+			</div>`
+		}
+	});
+
+	assert.eq(list.button.tagName, 'BUTTON');
+});
+
+Testimony.test('Solarite.r.standaloneStyle', "Test id's on standalone elmenets.", () => {
+	let box = r({
+		render() {
+			r(this)`
+			<div>
+	         <style>:host { display: block; background: red; width: 20px; height: 20px }</style>      
+	      </div>`
+		}
+	});
+
+	let styleId = box.getAttribute('data-style');
+	assert.eq(box.firstElementChild.textContent, `div[data-style="${styleId}"] { display: block; background: red; width: 20px; height: 20px }`);
+});
+
+Testimony.test('Solarite.r.standalone3', () => {
+
+	// Make sure a div inside a div doesn't replace the parent div.
+	let list = r({
+		items: [],
+
+		render() {
+			r(this)`
+			<div>
+				${this.items.map(item => r`
+					<div>
+						<input placeholder="Name" value=${item.name}>
+						<input type="number" value=${item.qty}>
+						<button onclick=${()=>this.removeItem(item)}>x</button>
+					</div>		   
+				`)}
+			</div>`
+		}
+	});
+
+	list.items.push({name: 'name', qty: 2});
+	list.render();
+
+	assert.eq(getHtml(list), `<div><div><input placeholder="Name" value="name"><input type="number" value="2"><button onclick="">x</button></div></div>`);
+});
+
+Testimony.test('Solarite.r.standaloneChild', () => {
+
+	function createItem(item) {
+		return r({
+			item: item,
+			render(attribs = null) {
+				// If attributes passed to constructor have changed.
+				if (attribs)
+					this.item = attribs.item;
+				r(this)`
+				<div>
+				   <b>${this.item.name}</b> - ${this.item.description}<br>
+				</div>`
+			}
+		});
+	}
+
+	function createList(items) {
+		return r({
+			items: items,
+			render() {
+				r(this)`
+				<div>
+					${this.items.map(item =>
+					createItem(item)
+				)}
+				</div>`
+			}
+		});
+	}
+
+	let list = createList([
+		{
+			name: 'English',
+			description: 'See spot run.'
+		},
+
+		{
+			name: 'Science',
+			description: 'Snails are mollusks.'
+		}
+	]);
+	document.body.append(list);
+
+	list.items[0].name = 'PhysEd';
+	list.render(); // calls NotesItem.render() with the new item.
+
+	assert.eq(getHtml(list), `<div><div><b>PhysEd</b> - See spot run.<br></div><div><b>Science</b> - Snails are mollusks.<br></div></div>`);
+
+	list.remove();
+});
+//</editor-fold>
+
+
+
+
+//<editor-fold desc="component">
+/* ┌─────────────────╮
+ * | Component       |
+ * └─────────────────╯*/
+Testimony.test('Solarite.component.tr', () => {
+
+	class TR510 extends Solarite('tr') {
+		render() {
+			this.html = r`<td>hello</td>`
+		}
+	}
+
+	let table = document.createElement('table')
+
+	table.append(new TR510())
+	document.body.append(table)
+
+	assert.eq(table.outerHTML, `<table><tr is="tr-510"><td>hello</td></tr></table>`)
+
+	table.remove();
+
+});
+
+Testimony.test('Solarite.component.staticAttribs', () => {
 	// Note that all attribs become lowercase.
 	// Not sure how to prevent this w/o using an xml doctype.
 	class B512 extends Solarite {
@@ -1739,11 +2214,9 @@ Testimony.test('Solarite.component.staticAttribs', () => {
 	let a = new A512();
 	a.render();
 	
-	assert.eq(a.outerHTML, `<a-512><div><b-512 name="User" userid="2"><!--PathStart:0-->User | 2<!--PathEnd:1--></b-512></div></a-512>`);
+	assert.eq(a.outerHTML, `<a-512><div><b-512 name="User" userid="2"><!--ExprPath:0-->User | 2<!--ExprPathEnd:1--></b-512></div></a-512>`);
 });
 
-
-
 Testimony.test('Solarite.component.dynamicAttribs', 'Attribs specified via ${...}', () => {
 	
 	class B513 extends Solarite {
@@ -1769,21 +2242,17 @@ Testimony.test('Solarite.component.dynamicAttribs', 'Attribs specified via ${...
 	let a = new A513();
 	a.render();
 	
-	assert.eq(a.outerHTML, `<a-513><div><b-513 name="User" userid="2"><!--PathStart:0-->User | 2<!--PathEnd:1--></b-513></div></a-513>`);
+	assert.eq(a.outerHTML, `<a-513><div><b-513 name="User" userid="2"><!--ExprPath:0-->User | 2<!--ExprPathEnd:1--></b-513></div></a-513>`);
 });
 
 Testimony.test('Solarite.component.getArg', 'Attribs specified html when not nested in another Solarite component.', () => {
-	
-	Solarite.getArgs = function(el) {
-		debugger;
-		return {};
-	}
-	
+
 	class B514 extends Solarite {
 		constructor({name, userid}={}) {
 			super();
-			this.name = this.getArg('name', name);
-			this.userId = this.getArg('userid', userid);
+
+			this.name = getArg(this, 'name', name);
+			this.userId = getArg(this, 'userid', userid);
 			this.render();
 		}
 		
@@ -1796,14 +2265,11 @@ Testimony.test('Solarite.component.getArg', 'Attribs specified html when not nes
 
 	let div = document.createElement('div');
 	div.innerHTML = `<b-514 name="User" userid="2"></b-514>`
-	
-	assert.eq(div.outerHTML, `<div><b-514 name="User" userid="2"><!--PathStart:0-->User | 2<!--PathEnd:1--></b-514></div>`)
+
+	assert.eq(div.outerHTML, `<div><b-514 name="User" userid="2"><!--ExprPath:0-->User | 2<!--ExprPathEnd:1--></b-514></div>`)
 	
 });
 
-
-
-
 Testimony.test('Solarite.component.nested', () => {
 
 	let bRenderCount = 0;
@@ -1828,11 +2294,10 @@ Testimony.test('Solarite.component.nested', () => {
 	assert(!(a.firstChild instanceof B515))
 
 	a.render();
-    assert(a.firstChild instanceof B515);
+   assert(a.firstChild instanceof B515);
 	assert.eq(getHtml(a), `<a-515><b-515><div>B</div></b-515></a-515>`);
 })
 
-
 // Pass an object to the child.
 Testimony.test('Solarite.component.nested2', () => {
 
@@ -1883,19 +2348,78 @@ Testimony.test('Solarite.component.nested2', () => {
 	a.title = 'Users2'
 	a.render();
 	assert.eq(getHtml(a), `<a-520>Users2<b-520 user=""><div>Name:</div><div>Barry</div><div>Email:</div><div>fred@example.com</div></b-520></a-520>`)
-	assert.eq(bRenderCount, 0) // Value passed to b didn't change, so it shouldn't re-render.
+	assert.eq(bRenderCount, 0); // Value passed to b didn't change, so it shouldn't re-render.
 
 	a.remove();
 });
 
+// Pass an object to the child.
+Testimony.test('Solarite.component.nestedNonSolarite', () => {
 
+	let bRenderCount = 0;
+	class B530 extends HTMLElement {
+
+		constructor({user}={}) {
+			super();
+			this.user = user;
+			this.render();
+		}
+
+		render(props={}) {
+			if (props.user)
+				this.user = props.user;
+			r(this)`<div>Name:</div><div>${this.user.name}</div><div>Email:</div><div>${this.user.email}</div>`;
+			bRenderCount++;
+		}
+	}
+	customElements.define('b-530', B530);
+
+	class A530 extends HTMLElement {
+		title = 'Users'
+		user = {name: 'John', email: 'john@example.com'};
+		render() {
+			r(this)`${this.title}<b-530 user="${this.user}"></b-530>`
+		}
+	}
+	customElements.define('a-530', A530);
+
+	let a = new A530();
+	a.render();
+	document.body.append(a);
+	assert.eq(getHtml(a), `<a-530>Users<b-530 user=""><div>Name:</div><div>John</div><div>Email:</div><div>john@example.com</div></b-530></a-530>`)
+
+
+	a.user = {name: 'Fred', email: 'fred@example.com'};
+	a.render();
+	assert.eq(getHtml(a), `<a-530>Users<b-530 user=""><div>Name:</div><div>Fred</div><div>Email:</div><div>fred@example.com</div></b-530></a-530>`)
+
+
+	a.user.name = 'Barry'
+	a.render();
+	assert.eq(getHtml(a), `<a-530>Users<b-530 user=""><div>Name:</div><div>Barry</div><div>Email:</div><div>fred@example.com</div></b-530></a-530>`)
+
+	bRenderCount = 0
+	a.render();
+	assert.eq(bRenderCount, 0)
+
+	a.title = 'Users2'
+	a.render();
+	assert.eq(getHtml(a), `<a-530>Users2<b-530 user=""><div>Name:</div><div>Barry</div><div>Email:</div><div>fred@example.com</div></b-530></a-530>`)
+	assert.eq(bRenderCount, 0) // Value passed to b didn't change, so it shouldn't re-render.
+
+	a.remove();
+});
 
 // TODO: This redraws every tr on every update.
 // Maybe that can be fixed when keying is supported?
 Testimony.test('Solarite.component.nestedTrLoop', () => {
 
 	function tableRow(user) {
-		let tr = r(() => r`<tr><td>${user.name}</td><td>${user.email}</td></tr>`)
+		let tr = r({
+			render() {
+				r(this)`<tr><td>${user.name}</td><td>${user.email}</td></tr>`
+			}
+		})
 		return tr;
 	}
 
@@ -1929,7 +2453,6 @@ Testimony.test('Solarite.component.nestedTrLoop', () => {
 	table.remove();
 });
 
-
 Testimony.test('Solarite.component.nestedComponentTrLoop', () => {
 
 	class TR540 extends Solarite('tr') {
@@ -1973,16 +2496,20 @@ Testimony.test('Solarite.component.nestedComponentTrLoop', () => {
 
 	table.remove();
 });
+//</editor-fold>
 
 
 
-// Slots
 
+//<editor-fold desc="slots">
+/* ┌─────────────────╮
+ * | Slots           |
+ * └─────────────────╯*/
 Testimony.test('Solarite.slots.basic', () => {
 
 	class S10 extends Solarite {
 		render() {
-			this.html = r`<div>slot content:<slot></slot></div>`
+			r(this)`<div>slot content:<slot></slot></div>`
 		}
 	}
 	S10.define();
@@ -2013,9 +2540,31 @@ Testimony.test('Solarite.slots.named', () => {
 });
 
 
-// Events
+Testimony.test('Solarite.slots.slotless', `Add children even when no slots present.`, () => {
+
+	class S30 extends Solarite {
+		render() {
+			r(this)`<div>child1</div>`
+		}
+	}
+	S30.define();
+
+	let div = r('<div><s-30>child2<br>child4</s-30></div>')
+	document.body.append(div);
+
+	assert.eq(div.outerHTML, `<div><s-30><div>child1</div>child2<br>child4</s-30></div>`)
+
+	div.remove();
+});
+//</editor-fold>
+
+
 
-// TODO:
+
+//<editor-fold desc="events">
+/* ┌─────────────────╮
+ * | Events          |
+ * └─────────────────╯*/
 Testimony.test('Solarite.events.classic', () => {
 
 	class Ev10 extends Solarite {
@@ -2113,10 +2662,110 @@ Testimony.test('Solarite.events.onComponent', 'Event attrib on root component',
 	assert.eq(a.count, '2');
 });
 
+Testimony.test('Solarite.events.onChild', () => {
+
+	class E50 extends HTMLElement {
+		constructor() {
+			super();
+			this.items = [];
+			this.render();
+		}
+
+		addItem() {
+			this.items.push(1);
+			this.render();
+		}
+
+		render() {
+			r(this)`
+			<e-50>				
+				<button onclick=${this.addItem}>Add Item</button>
+			</e-50>`
+		}
+	}
+	customElements.define('e-50', E50);
+
+	let e = new E50();
+	e.querySelector('button').dispatchEvent(new MouseEvent('click'));
+	assert.eq(e.items.length, 1);
+});
+
+Testimony.test('Solarite.events.onExprChild', () => {
+
+	class E60 extends HTMLElement {
+		constructor() {
+			super();
+			this.items = [];
+			this.render();
+		}
+
+		addItem() {
+			this.items.push(1);
+			this.render();
+		}
+
+		render() {
+			r(this)`
+			<e-60>				
+				${r`<button onclick=${this.addItem}>Add Item</button>`}
+			</e-60>`
+		}
+	}
+	customElements.define('e-60', E60);
+
+	let e = new E60();
+	e.querySelector('button').dispatchEvent(new MouseEvent('click'));
+	assert.eq(e.items.length, 1);
+});
+
+Testimony.test('Solarite.events.loop', () => {
+
+	let lastButtonId = null;
+
+	class V70 extends Solarite {
+		items = [{id: 1}, {id: 2}];
+
+		log(id) {
+			lastButtonId = id;
+			//console.log(id);
+		}
+
+		render() {
+			r(this)`
+			<v-70>
+				${this.items.map(item => r`
+					<button onclick=${[this.log, item.id]}>${item.id}</button>
+				`)}
+			</v-70>`
+		}
+	}
+
+	let v = new V70();
+	document.body.append(v);
+
+	v.children[1].dispatchEvent(new MouseEvent('click'));
+	assert.eq(lastButtonId, 2);
+
+	// This doesn't update the bound function to use 3.
+	v.items.splice(1, 1); // remove 2.
+	v.items.push({id: 3});
+	window.debug = true;
+	v.render();
+	v.children[1].dispatchEvent(new MouseEvent('click'));
+	assert.eq(lastButtonId, 3);
+
+
+	//v.remove();
+});
+//</editor-fold>
+
 
 
-// Binding
 
+//<editor-fold desc="binding">
+/* ┌─────────────────╮
+ * | Binding         |
+ * └─────────────────╯*/
 Testimony.test('Solarite.binding.input', () => {
 
 	class B10 extends Solarite {
@@ -2265,8 +2914,6 @@ Testimony.test('Solarite.binding.selectDynamic', () => {
 	b.remove();
 });
 
-
-
 Testimony.test('Solarite.binding.number', () => {
 
 	class B40 extends Solarite {
@@ -2295,8 +2942,45 @@ Testimony.test('Solarite.binding.number', () => {
 	b.remove();
 });
 
+// FIXME
+Testimony.test('Solarite.binding.number2', () => {
+
+	class B50 extends Solarite {
+		count = 1
+
+		render() {
+			r(this)`<input type="number" data-id="input" value=${[this, 'count']}>`
+		}
+	}
+
+	let b = new B50();
+	document.body.append(b);
+	assert.eq(b.input.value, '1')
+
+	b.count = 2;
+	b.render();
+	assert.eq(b.input.value, '2')
+
+	b.input.value = 3;
+	b.input.dispatchEvent(new Event('input', {
+		bubbles: true,
+		cancelable: true,
+	}));
+	assert.eq(b.count, 3)
+
+	b.remove();
+});
+
+
+//</editor-fold>
+
+
 
 
+//<editor-fold desc="watch">
+/* ┌─────────────────╮
+ * | Watch           |
+ * └─────────────────╯*/
 /*
 Testimony.test('Solarite.watched.watchSet', () => {
 	
@@ -2837,19 +3521,121 @@ Testimony.test('Solarite.watch2._forEachSpliceInsert', () => {
 
 
 
+Testimony.test('Solarite.watch3.primitive', () => {
+
+	class W100 extends HTMLElement {
+
+		constructor() {
+			super();
+			watch3(this, 'name', 'Fred');
+
+
+			this.render();
+		}
+
+		render() {
+			r(this)`<w-100>${this.name + '!'}</w-100>`;
+		}
+	}
+	customElements.define('w-100', W100);
+
+	let a = new W100();
+	document.body.append(a);
+	assert(a.outerHTML, `<w-100>Fred!</w-100>`);
+
+	a.name = 'Jim';
+	assert(a.outerHTML, `<w-100>Jim!</w-100>`);
+
+	a.remove();
+});
+
 
+Testimony.test('Solarite.watch3._nodes', () => {
 
+	class W110 extends HTMLElement {
+		name = 'Fred';
+		name2 = 'White';
 
+		constructor() {
+			super();
+			watch3(this, 'name');
+			this.render();
+		}
 
+		render() {
+			r(this)`<w-110>${() => r`<div>${this.name + '!'}</div>`} ${this.name2}</w-110>`;
+		}
+	}
+	customElements.define('w-110', W110);
 
+	let a = new W110();
+	document.body.append(a);
+	assert(a.outerHTML, `<w-110><div>Fred!</div> White</w-110>`);
 
+	a.name = 'Jim';
+	assert(a.outerHTML, `<w-110><div>Jim!</div> White</w-110>`);
 
+	a.name2 = 'Brown'
+	a.render();
+	assert(a.outerHTML, `<w-110><div>Jim!</div> Brown</w-110>`);
 
+	a.remove();
+});
+//</editor-fold>
 
 
-Testimony.test('Solarite.full.treeItems', () => {
 
-	//import '../src/RedComponent.js'
+
+//<editor-fold desc="full">
+/* ┌─────────────────╮
+ * | Full            |
+ * └─────────────────╯*/
+
+Testimony.test('Solarite.full._todoList', () => {
+	class ShoppingList extends HTMLElement {
+		constructor(items=[]) {
+			super();
+			this.items = items;
+			this.render();
+		}
+
+		addItem() {
+			this.items.push({name: '', qty: 0});
+			this.render();
+		}
+
+		removeItem(item) {
+			this.items.splice(this.items.indexOf(item), 1);
+			this.render();
+		}
+
+		render() {
+			r(this)`
+			<shopping-list>
+				<style>:host input { width: 80px }</style>
+					
+				<button onclick=${this.addItem}>Add Item</button>
+	
+				${this.items.map(item => r`
+					<div>
+						<input placeholder="Item" value=${item.name} 
+							oninput=${e => { // two-way binding
+								item.name = e.target.value;
+								this.render()
+							}}>
+					</div>		   
+				`)}
+			</shopping-list>`
+		}
+	}
+
+	customElements.define('shopping-list', ShoppingList);
+	document.body.append(new ShoppingList()); // add <shopping-list> element
+});
+
+Testimony.test('Solarite.full._treeItems', () => {
+
+	//import '../src/Solarite.js'
 
 	class TreeItem extends Solarite {
 
@@ -2866,13 +3652,13 @@ Testimony.test('Solarite.full.treeItems', () => {
 		}
 
 		render() {
-			this.html = r`
+			r(this)`
 				<tree-item>
 					<style>
 						:host #childItems { padding-left: 20px }
 					</style>				
 					<div onclick="${this.toggleChildren}">${this.titleText}</div>
-					<div id="childItems" hidden="${!this.showChildren}">
+					<div hidden="${!this.showChildren}">
 						${this.childItems}
 					</div>
 				</tree-item>`;
@@ -2894,3 +3680,159 @@ Testimony.test('Solarite.full.treeItems', () => {
 });
 
 
+
+
+
+// An attempt to create a simpler version that reproduces the same bug as full.misc.
+// but this version always works, and doesn't reproduce the issue.
+Testimony.test('Solarite.full._isc2', () => {
+	let items = [
+		{name: 'Apples', qty: 1},
+		{name: 'Banans', qty: 2},
+		{name: 'Cherries', qty: 3}
+	]
+	let toggle = false;
+
+	class Misc2 extends HTMLElement {
+		render() {
+			r(this)`
+			<misc-2>
+				${items.map(item => r`
+					<div>
+						${r`<span>${item.name}</span>`}
+						${r`<span>${item.qty}</span>`}
+					</div>`
+				)}
+				
+			</misc-2>`;
+		}
+	}
+
+	customElements.define('misc-2', Misc2);
+
+	let m = new Misc2();
+	document.body.append(m);
+	m.render();
+
+
+	// let temp = items[0];
+	// items[0] = items[1];
+	// items[1] = temp;
+
+	// items[0].name = 'Bananas';
+	// items[0].qty = 3;
+
+	//items[0] = items[1];
+
+	toggle = !toggle;
+
+	m.render();
+
+	toggle = !toggle;
+
+	m.render();
+
+	toggle = !toggle;
+
+	m.render();
+
+});
+
+
+
+
+Testimony.test('Solarite.full._misc', () => {
+
+	class Misc1 extends HTMLElement {
+
+		items = [];
+		options = [];
+
+
+
+		constructor(options) {
+			super();
+			this.options = options;
+			this.items = items;
+
+			for (let product of this.items)
+				for (let option of this.options)
+					option[product.id + '_showOther'] = !!(product[option.name] && option.name !== product[option.name]);
+
+			this.render();
+		}
+
+		async setValue(product, option, field, value) {
+			product[field] = value;
+			option[product.id + '_showOther'] = !!(value && option.name !== value);
+			this.render();
+		}
+
+		render() {
+			r(this)`
+			<misc-1>
+				${this.items.map(item => r`
+					<p>						
+						${this.options.map(option => r`
+							<div style="display: flex">
+								${r`<button onclick=${() => this.setValue(item, option, option.name, '')}>${option.name}</button>`}
+								
+								${option[item.id + '_showOther']  && r`<input>`}							
+							</div>`
+						)}
+					</p>
+					<br><br>
+				`)}
+			</misc-1>`;
+		}
+	}
+	customElements.define('misc-1', Misc1);
+
+	let options = [
+		{
+			name: "a"
+		},
+		{
+			name: "b"
+		},
+		{
+			name: "c"
+		}
+	];
+	let items = [
+		{
+			"id": 1,
+			"a": 1,
+			"b": 2,
+			"c": 3
+		},
+		{
+			"id": 2,
+			"a": 1,
+			"b": 2,
+			"c": null
+		}
+	];
+	let sp = new Misc1(options, items);
+	document.body.append(sp);
+
+	sp.children[0].setAttribute('style', 'border: 1px solid red');
+
+	sp.children[0].children[0].querySelector('input').setAttribute('style', 'border: 3px solid #f80');
+	sp.children[0].children[1].querySelector('input').setAttribute('style', 'border: 3px solid #fc0');
+	sp.children[0].children[2].querySelector('input').setAttribute('style', 'border: 3px solid #660');
+
+	sp.children[1].setAttribute('style', 'border: 1px solid blue');
+
+	sp.children[3].children[0].setAttribute('style', 'border: 3px solid #0f8');
+	sp.children[3].children[1].setAttribute('style', 'border: 3px solid #0fc');
+	sp.children[3].children[2].setAttribute('style', 'border: 3px solid #0cf');
+
+	// Trigger bug:
+	//sp.setValue(products[0], 'b', '');
+	//sp.setValue(products[0], 'c', '');
+});
+
+
+//<editor-fold desc="full">
+