From 35b8c1e3b9c59ef38c8717fe34b0e90975dfab75 Mon Sep 17 00:00:00 2001
From: Jesse Jurman <j.r.jurman@gmail.com>
Date: Fri, 6 Oct 2023 22:14:22 -0400
Subject: [PATCH] working import-component output

---
 cypress/import.cy.js                   |  18 +++
 cypress/inline.cy.js                   |  65 ++++++++++
 cypress/spec.cy.js                     |  65 ----------
 examples/import/example-container.html |  14 +++
 examples/import/im-progressbar.html    |  17 +++
 examples/import/im-temperature.html    |  46 +++++++
 examples/import/index.html             |  31 +++++
 examples/{ => inline}/index.html       | 162 ++++++++++++-------------
 package.json                           |  10 +-
 result.js                              |  88 --------------
 src/TramLite.js                        |  10 +-
 src/build-component.js                 |  36 ------
 src/import-component.js                |  36 ++++++
 src/processors/ComponentDefinition.js  |  16 +++
 test.html                              |   3 -
 x-button.html                          |   3 -
 16 files changed, 336 insertions(+), 284 deletions(-)
 create mode 100644 cypress/import.cy.js
 create mode 100644 cypress/inline.cy.js
 delete mode 100644 cypress/spec.cy.js
 create mode 100644 examples/import/example-container.html
 create mode 100644 examples/import/im-progressbar.html
 create mode 100644 examples/import/im-temperature.html
 create mode 100644 examples/import/index.html
 rename examples/{ => inline}/index.html (53%)
 delete mode 100644 result.js
 delete mode 100644 src/build-component.js
 create mode 100644 src/import-component.js
 delete mode 100644 test.html
 delete mode 100644 x-button.html

diff --git a/cypress/import.cy.js b/cypress/import.cy.js
new file mode 100644
index 0000000..3b4e390
--- /dev/null
+++ b/cypress/import.cy.js
@@ -0,0 +1,18 @@
+describe('Tram-Lite Example Components (via import)', () => {
+	it('should validate Tram-Lite APIs and Use Cases when importing components', () => {
+		// visit index.html (this works because the test page doesn't need to be hosted to work!)
+		cy.visit('../examples/import/index.html');
+
+		/* verify that component effects trigger on dependency updates */
+		cy.get('im-temperature').get('input#f').type('19');
+		cy.get('im-temperature').get('input#c').should('have.value', '-7');
+		cy.get('im-temperature').get('input#f').should('have.value', '19');
+
+		/* verify that an element with multiple dependencies triggers on either dependency */
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+		cy.get('im-progressbar').get('input#value').clear().type('12');
+		cy.get('im-progressbar').should('have.attr', 'warning');
+		cy.get('im-progressbar').get('input#max').clear().type('15');
+		cy.get('im-progressbar').should('not.have.attr', 'warning');
+	});
+});
diff --git a/cypress/inline.cy.js b/cypress/inline.cy.js
new file mode 100644
index 0000000..2f232df
--- /dev/null
+++ b/cypress/inline.cy.js
@@ -0,0 +1,65 @@
+describe('Tram-Lite Example Components', () => {
+	// per Cypress best practices (https://docs.cypress.io/guides/references/best-practices#Creating-Tiny-Tests-With-A-Single-Assertion)
+	// it is often better to run all tests together, rather than having unit-like tests... so we'll comment the intent of each test,
+	// rather than doing a reset between each test. The results should still be just as obvious in the cypress runner!
+	it('should validate all Tram-Lite APIs and Use Cases', () => {
+		// visit index.html (this works because the test page doesn't need to be hosted to work!)
+		cy.visit('../examples/inline/index.html');
+
+		/* validate that slot elements are rendered as expected in Tram-Lite */
+		cy.get('in-title').contains('Title');
+		cy.get('in-title').contains('Tram-Lite Components!');
+
+		/* validate that the counter elements work as expected */
+		cy.get('in-counter#default').contains(/Green: 0/); // default values should populate
+		cy.get('in-counter#red').contains(/Red: 0/); // passed in values should populate
+		cy.get('in-counter#red').click(); // clicking a counter should increment
+		cy.get('in-counter#red').contains(/Red: 1/);
+
+		/* verify that updating inputs updates attributes as expected (tl-controlled) */
+		cy.get('in-mirror').get('input#source').type('Hello, World');
+		cy.get('in-mirror').get('input#reflection').should('have.value', 'Hello, World');
+		cy.get('in-mirror').should('have.attr', 'value', 'Hello, World');
+		cy.get('in-mirror').should('have.attr', 'is-mirrored', '');
+
+		/* verify that updating an attribute copies to multiple elements and attributes */
+		cy.get('in-colorpicker').invoke('attr', 'hue', '120');
+		cy.get('in-colorpicker').get('input#hue-range-input').should('have.value', '120');
+		cy.get('in-colorpicker').get('input#hue-text-input').should('have.value', '120');
+		cy.get('in-colorpicker')
+			.get('rect')
+			.then(($element) => {
+				const rawColor = window.getComputedStyle($element[0])['fill'];
+				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
+			});
+
+		/* verify that startup scripts in component definitions trigger as expected */
+		cy.get('in-todoitem').contains('Example Initial Item');
+		cy.get('in-todoitem').contains('Learning Tram-Lite');
+
+		/* verify that creating elements works as expected */
+		cy.get('in-todolist').get('form input').type('Cypress Test'); // create new todo item
+		cy.get('in-todolist').get('form').submit();
+
+		cy.get('in-todoitem').contains('Cypress Test'); // verify it exists
+
+		cy.get('in-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
+		cy.get('in-todolist').get('span').contains('(1/3)');
+
+		/* verify that updating an input with a false value unsets the attribute value */
+		cy.get('in-todoitem').contains('Cypress Test').click();
+		cy.get('in-todolist').get('span').contains('(0/3)');
+
+		/* verify that component effects trigger on dependency updates */
+		cy.get('in-temperature').get('input#f').type('19');
+		cy.get('in-temperature').get('input#c').should('have.value', '-7');
+		cy.get('in-temperature').get('input#f').should('have.value', '19');
+
+		/* verify that an element with multiple dependencies triggers on either dependency */
+		cy.get('in-progressbar').should('not.have.attr', 'warning');
+		cy.get('in-progressbar').get('input#value').clear().type('12');
+		cy.get('in-progressbar').should('have.attr', 'warning');
+		cy.get('in-progressbar').get('input#max').clear().type('15');
+		cy.get('in-progressbar').should('not.have.attr', 'warning');
+	});
+});
diff --git a/cypress/spec.cy.js b/cypress/spec.cy.js
deleted file mode 100644
index f8a1f48..0000000
--- a/cypress/spec.cy.js
+++ /dev/null
@@ -1,65 +0,0 @@
-describe('Tram-Lite Example Components', () => {
-	// per Cypress best practices (https://docs.cypress.io/guides/references/best-practices#Creating-Tiny-Tests-With-A-Single-Assertion)
-	// it is often better to run all tests together, rather than having unit-like tests... so we'll comment the intent of each test,
-	// rather than doing a reset between each test. The results should still be just as obvious in the cypress runner!
-	it('should validate all Tram-Lite APIs and Use Cases', () => {
-		// visit index.html (this works because the test page doesn't need to be hosted to work!)
-		cy.visit('../examples/index.html');
-
-		/* validate that slot elements are rendered as expected in Tram-Lite */
-		cy.get('ex-title').contains('Title');
-		cy.get('ex-title').contains('Tram-Lite Components!');
-
-		/* validate that the counter elements work as expected */
-		cy.get('ex-counter#default').contains(/Green: 0/); // default values should populate
-		cy.get('ex-counter#red').contains(/Red: 0/); // passed in values should populate
-		cy.get('ex-counter#red').click(); // clicking a counter should increment
-		cy.get('ex-counter#red').contains(/Red: 1/);
-
-		/* verify that updating inputs updates attributes as expected (tl-controlled) */
-		cy.get('ex-mirror').get('input#source').type('Hello, World');
-		cy.get('ex-mirror').get('input#reflection').should('have.value', 'Hello, World');
-		cy.get('ex-mirror').should('have.attr', 'value', 'Hello, World');
-		cy.get('ex-mirror').should('have.attr', 'is-mirrored', '');
-
-		/* verify that updating an attribute copies to multiple elements and attributes */
-		cy.get('ex-colorpicker').invoke('attr', 'hue', '120');
-		cy.get('ex-colorpicker').get('input#hue-range-input').should('have.value', '120');
-		cy.get('ex-colorpicker').get('input#hue-text-input').should('have.value', '120');
-		cy.get('ex-colorpicker')
-			.get('rect')
-			.then(($element) => {
-				const rawColor = window.getComputedStyle($element[0])['fill'];
-				expect(rawColor).to.equal('oklch(0.7 0.1 120)');
-			});
-
-		/* verify that startup scripts in component definitions trigger as expected */
-		cy.get('ex-todoitem').contains('Example Initial Item');
-		cy.get('ex-todoitem').contains('Learning Tram-Lite');
-
-		/* verify that creating elements works as expected */
-		cy.get('ex-todolist').get('form input').type('Cypress Test'); // create new todo item
-		cy.get('ex-todolist').get('form').submit();
-
-		cy.get('ex-todoitem').contains('Cypress Test'); // verify it exists
-
-		cy.get('ex-todoitem').contains('Cypress Test').click(); // click it, and verify that the top label updates
-		cy.get('ex-todolist').get('span').contains('(1/3)');
-
-		/* verify that updating an input with a false value unsets the attribute value */
-		cy.get('ex-todoitem').contains('Cypress Test').click();
-		cy.get('ex-todolist').get('span').contains('(0/3)');
-
-		/* verify that component effects trigger on dependency updates */
-		cy.get('ex-temperature').get('input#f').type('19');
-		cy.get('ex-temperature').get('input#c').should('have.value', '-7');
-		cy.get('ex-temperature').get('input#f').should('have.value', '19');
-
-		/* verify that an element with multiple dependencies triggers on either dependency */
-		cy.get('ex-progressbar').should('not.have.attr', 'warning');
-		cy.get('ex-progressbar').get('input#value').clear().type('12');
-		cy.get('ex-progressbar').should('have.attr', 'warning');
-		cy.get('ex-progressbar').get('input#max').clear().type('15');
-		cy.get('ex-progressbar').should('not.have.attr', 'warning');
-	});
-});
diff --git a/examples/import/example-container.html b/examples/import/example-container.html
new file mode 100644
index 0000000..566f319
--- /dev/null
+++ b/examples/import/example-container.html
@@ -0,0 +1,14 @@
+<example-container>
+	<style>
+		fieldset {
+			border: yellow 1px solid;
+		}
+		legend {
+			color: yellow;
+		}
+	</style>
+	<fieldset>
+		<legend>${'name'}</legend>
+		<slot></slot>
+	</fieldset>
+</example-container>
diff --git a/examples/import/im-progressbar.html b/examples/import/im-progressbar.html
new file mode 100644
index 0000000..5a71ade
--- /dev/null
+++ b/examples/import/im-progressbar.html
@@ -0,0 +1,17 @@
+<im-progressbar value="3" max="10">
+	<div>
+		<input id="value" type="number" tl-controlled tl-trigger="input" />
+		<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
+	</div>
+	<progress value="${'value'}" max="${'max'}"></progress>
+	<div>${'warning'}</div>
+	<script tl-effect tl-dependencies="value max">
+		const value = parseInt(this.getAttribute('value'));
+		const max = parseInt(this.getAttribute('max'));
+		if (value > max) {
+			this.setAttribute('warning', `WARNING: ${value} is greater than ${max}`);
+		} else {
+			this.removeAttribute('warning');
+		}
+	</script>
+</im-progressbar>
diff --git a/examples/import/im-temperature.html b/examples/import/im-temperature.html
new file mode 100644
index 0000000..54bf837
--- /dev/null
+++ b/examples/import/im-temperature.html
@@ -0,0 +1,46 @@
+<im-temperature celsius="" fahrenheit="">
+	<label>
+		<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
+		Celsius
+	</label>
+	=
+	<label>
+		<input id="f" tl-controlled placeholder="F" unit="fahrenheit" tl-hostattr="fahrenheit" tl-trigger="input" />
+		Fahrenheit
+	</label>
+
+	<script tl-effect>
+		// functions to define for the rest of the component
+		this.calcCelsius = (f) => {
+			return ((f - 32) * (5 / 9)).toFixed(0);
+		};
+
+		this.calcFahrenheit = (c) => {
+			return (c * (9 / 5) + 32).toFixed(0);
+		};
+
+		this.isReflectiveUpdate = (temperatureConverter) => {
+			const f = temperatureConverter.getAttribute('fahrenheit');
+			const c = temperatureConverter.getAttribute('celsius');
+			// if this celsius or fahrenheit value would generate the other, don't update
+			// this is indicative of an update triggered by another update!
+			// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+			// e.g. 19F and 20F both map to -7C
+			return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+		};
+	</script>
+	<script tl-effect tl-dependencies="celsius">
+		const c = this.getAttribute('celsius');
+		const newF = this.calcFahrenheit(c);
+		if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
+			this.setAttribute('fahrenheit', newF);
+		}
+	</script>
+	<script tl-effect tl-dependencies="fahrenheit">
+		const f = this.getAttribute('fahrenheit');
+		const newC = this.calcCelsius(f);
+		if (f && !isNaN(newC)) {
+			this.setAttribute('celsius', newC);
+		}
+	</script>
+</im-temperature>
diff --git a/examples/import/index.html b/examples/import/index.html
new file mode 100644
index 0000000..d5cbece
--- /dev/null
+++ b/examples/import/index.html
@@ -0,0 +1,31 @@
+<!doctype html>
+<html lang="en">
+	<head>
+		<title>Tram-Lite Example Components</title>
+		<link rel="icon" type="image/png" href="https://unpkg.com/@tram-one/tram-logo@5.0.1/dist/lite_32.png" />
+
+		<meta charset="utf-8" />
+		<style>
+			:root {
+				color-scheme: dark light;
+			}
+			body {
+				margin: auto;
+				max-width: 800px;
+			}
+		</style>
+
+		<script
+			src="../../output/import-component.js"
+			tl-components="/examples/import/example-container.html /examples/import/im-progressbar.html /examples/import/im-temperature.html"
+		></script>
+	</head>
+	<body>
+		<example-container name="Temperature Converter">
+			<im-temperature></im-temperature>
+		</example-container>
+		<example-container name="Progress Bar">
+			<im-progressbar></im-progressbar>
+		</example-container>
+	</body>
+</html>
diff --git a/examples/index.html b/examples/inline/index.html
similarity index 53%
rename from examples/index.html
rename to examples/inline/index.html
index 7f40718..c2e239e 100644
--- a/examples/index.html
+++ b/examples/inline/index.html
@@ -15,7 +15,7 @@
 			}
 		</style>
 
-		<script src="../output/tram-lite.js"></script>
+		<script src="../../output/tram-lite.js"></script>
 	</head>
 	<body>
 		<template tl-definition>
@@ -34,36 +34,43 @@
 				</fieldset>
 			</example-container>
 
-			<ex-title>
+			<in-title>
 				<h1 style="font-size: 1em">Title: <slot></slot></h1>
-			</ex-title>
+			</in-title>
 
-			<ex-counter count="0" label="Green" color="#CEFFCE">
-				<button style="color: ${'color'}" onclick="increment(this)">${'label'}: ${'count'}</button>
-			</ex-counter>
+			<in-counter count="0" label="Green" color="#CEFFCE">
+				<button style="color: ${'color'}">${'label'}: ${'count'}</button>
+				<script tl-effect>
+					const inCounter = this;
+					inCounter.shadowRoot.querySelector('button').addEventListener('click', () => {
+						const newCount = parseInt(inCounter.getAttribute('count')) + 1;
+						inCounter.setAttribute('count', newCount);
+					});
+				</script>
+			</in-counter>
 
-			<ex-mirror value="" is-mirrored="">
+			<in-mirror value="" is-mirrored="">
 				<input size="10" id="reflection" placeholder="Mirrored" disabled tl-controlled />
 				<input size="10" id="source" placeholder="Type in here!" tl-controlled tl-trigger="keyup" />
-			</ex-mirror>
+			</in-mirror>
 
-			<ex-todoitem>
+			<in-todoitem>
 				<label style="display: block">
 					<input type="checkbox" tl-controlled tl-hostattr="checked" tl-targetattr="checked" />
 					<slot></slot>
 				</label>
 				<script tl-effect tl-dependencies="checked">
-					const todoList = this.getRootNode().host;
+					const todoItemList = this.getRootNode().host;
 
 					// query all list items to determine new completed and total
-					const todoItems = todoList.shadowRoot.querySelectorAll('ex-todoitem');
-					todoList.setAttribute('total', todoItems.length);
-					const completedItems = todoList.shadowRoot.querySelectorAll('ex-todoitem[checked]');
-					todoList.setAttribute('completed', completedItems.length);
+					const todoItems = todoItemList.shadowRoot.querySelectorAll('in-todoitem');
+					todoItemList.setAttribute('total', todoItems.length);
+					const completedItems = todoItemList.shadowRoot.querySelectorAll('in-todoitem[checked]');
+					todoItemList.setAttribute('completed', completedItems.length);
 				</script>
-			</ex-todoitem>
+			</in-todoitem>
 
-			<ex-todolist completed="0" total="0">
+			<in-todolist completed="0" total="0">
 				<style>
 					todo-section {
 						padding-inline-start: 5px;
@@ -71,17 +78,33 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 					}
 				</style>
 				<span>To Do List (${'completed'}/${'total'})</span>
-				<form onsubmit="submitNewTodoItem(this, event)">
+				<form>
 					<input name="input" placeholder="New Item" autofill="false" />
 				</form>
 				<todo-section></todo-section>
 				<script tl-effect>
-					addNewTodoItem(this, 'Example Initial Item');
-					addNewTodoItem(this, 'Learning Tram-Lite');
+					const todoList = this;
+
+					function addNewTodoItem(todoText) {
+						const list = todoList.shadowRoot.querySelector('todo-section');
+						const newItem = this.document.createElement('in-todoitem');
+						newItem.innerText = todoText;
+						list.appendChild(newItem);
+					}
+
+					function submitNewTodoItem(event) {
+						event.preventDefault();
+						addNewTodoItem(event.target.input.value);
+						event.target.reset();
+					}
+					todoList.shadowRoot.querySelector('form').addEventListener('submit', submitNewTodoItem);
+
+					addNewTodoItem('Example Initial Item');
+					addNewTodoItem('Learning Tram-Lite');
 				</script>
-			</ex-todolist>
+			</in-todolist>
 
-			<ex-colorpicker width="100px">
+			<in-colorpicker width="100px">
 				<style>
 					svg {
 						display: block;
@@ -95,9 +118,9 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 				<svg viewbox="0 0 100 100" width="${'width'}">
 					<rect width="100" height="100" />
 				</svg>
-			</ex-colorpicker>
+			</in-colorpicker>
 
-			<ex-temperature celsius="" fahrenheit="">
+			<in-temperature celsius="" fahrenheit="">
 				<label>
 					<input id="c" tl-controlled placeholder="C" unit="celsius" tl-hostattr="celsius" tl-trigger="input" />
 					Celsius
@@ -108,23 +131,43 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 					Fahrenheit
 				</label>
 
+				<script tl-effect>
+					// functions to define for the rest of the component
+					this.calcCelsius = (f) => {
+						return ((f - 32) * (5 / 9)).toFixed(0);
+					};
+
+					this.calcFahrenheit = (c) => {
+						return (c * (9 / 5) + 32).toFixed(0);
+					};
+
+					this.isReflectiveUpdate = (temperatureConverter) => {
+						const f = temperatureConverter.getAttribute('fahrenheit');
+						const c = temperatureConverter.getAttribute('celsius');
+						// if this celsius or fahrenheit value would generate the other, don't update
+						// this is indicative of an update triggered by another update!
+						// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
+						// e.g. 19F and 20F both map to -7C
+						return this.calcFahrenheit(this.calcCelsius(f)) === this.calcFahrenheit(c);
+					};
+				</script>
 				<script tl-effect tl-dependencies="celsius">
 					const c = this.getAttribute('celsius');
-					const newF = calcFahrenheit(c);
-					if (c && !isNaN(newF) && !isReflectiveUpdate(this)) {
+					const newF = this.calcFahrenheit(c);
+					if (c && !isNaN(newF) && !this.isReflectiveUpdate(this)) {
 						this.setAttribute('fahrenheit', newF);
 					}
 				</script>
 				<script tl-effect tl-dependencies="fahrenheit">
 					const f = this.getAttribute('fahrenheit');
-					const newC = calcCelsius(f);
+					const newC = this.calcCelsius(f);
 					if (f && !isNaN(newC)) {
 						this.setAttribute('celsius', newC);
 					}
 				</script>
-			</ex-temperature>
+			</in-temperature>
 
-			<ex-progressbar value="3" max="10">
+			<in-progressbar value="3" max="10">
 				<div>
 					<input id="value" type="number" tl-controlled tl-trigger="input" />
 					<input id="max" type="number" tl-controlled tl-hostattr="max" tl-trigger="input" />
@@ -140,72 +183,29 @@ <h1 style="font-size: 1em">Title: <slot></slot></h1>
 						this.removeAttribute('warning');
 					}
 				</script>
-			</ex-progressbar>
+			</in-progressbar>
 		</template>
 
-		<script>
-			// for ex-counter
-			function increment(button) {
-				const counter = button.getRootNode().host;
-				const newCount = parseInt(counter.getAttribute('count')) + 1;
-				counter.setAttribute('count', newCount);
-			}
-
-			// for todo list
-			function addNewTodoItem(todoList, todoText) {
-				const list = todoList.shadowRoot.querySelector('todo-section');
-				const newItem = document.createElement('ex-todoitem');
-				newItem.innerText = todoText;
-				list.appendChild(newItem);
-			}
-
-			function submitNewTodoItem(form, event) {
-				event.preventDefault();
-				const todoList = form.getRootNode().host;
-				addNewTodoItem(todoList, form.input.value);
-				form.reset();
-			}
-
-			// for temperature converter
-			function calcCelsius(f) {
-				return ((f - 32) * (5 / 9)).toFixed(0);
-			}
-
-			function calcFahrenheit(c) {
-				return (c * (9 / 5) + 32).toFixed(0);
-			}
-
-			function isReflectiveUpdate(temperatureConverter) {
-				const f = temperatureConverter.getAttribute('fahrenheit');
-				const c = temperatureConverter.getAttribute('celsius');
-				// if this celsius or fahrenheit value would generate the other, don't update
-				// this is indicative of an update triggered by another update!
-				// this can happen because multiple Fahrenheit values map to the same (truncated) celsius value
-				// e.g. 19F and 20F both map to -7C
-				return calcFahrenheit(calcCelsius(f)) === calcFahrenheit(c);
-			}
-		</script>
-
-		<ex-title>Tram-Lite Components!</ex-title>
+		<in-title>Tram-Lite Components!</in-title>
 		<example-container name="Counters">
-			<ex-counter id="blue" label="Blue" color="#CECEFF"></ex-counter>
-			<ex-counter id="red" label="Red" color="#FFCECE"></ex-counter>
-			<ex-counter id="default"></ex-counter>
+			<in-counter id="blue" label="Blue" color="#CECEFF"></in-counter>
+			<in-counter id="red" label="Red" color="#FFCECE"></in-counter>
+			<in-counter id="default"></in-counter>
 		</example-container>
 		<example-container name="Mirror Input">
-			<ex-mirror></ex-mirror>
+			<in-mirror></in-mirror>
 		</example-container>
 		<example-container name="To Do List">
-			<ex-todolist></ex-todolist>
+			<in-todolist></in-todolist>
 		</example-container>
 		<example-container name="Color Picker">
-			<ex-colorpicker hue="200"></ex-colorpicker>
+			<in-colorpicker hue="200"></in-colorpicker>
 		</example-container>
 		<example-container name="Temperature Converter">
-			<ex-temperature></ex-temperature>
+			<in-temperature></in-temperature>
 		</example-container>
 		<example-container name="Progress Bar">
-			<ex-progressbar></ex-progressbar>
+			<in-progressbar></in-progressbar>
 		</example-container>
 	</body>
 </html>
diff --git a/package.json b/package.json
index ef941b5..4b7cf1d 100644
--- a/package.json
+++ b/package.json
@@ -12,12 +12,16 @@
 	"scripts": {
 		"prestart": "npm run build",
 		"start": "serve .",
-		"build": "npm run bundle && npm run build:api && npm run build:tram-lite",
+		"build": "npm run bundle && npm run set && npm run minify",
 		"bundle": "uglifyjs src/TramLite.js src/processors/*.js -o output/bundle-step.js --define APP_VERSION=\"'4.1.1'\" -b --comments all",
-		"build:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" -b --comments all ",
-		"build:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" -b --comments all ",
+		"set": "npm run set:api && npm run set:tram-lite && npm run set:import-component",
+		"set:api": "uglifyjs output/bundle-step.js -o output/api.js --define MODULE=\"true\" -b --comments all ",
+		"set:tram-lite": "uglifyjs output/bundle-step.js -o output/tram-lite.js --define MODULE=\"false\" -b --comments all ",
+		"set:import-component": "uglifyjs output/bundle-step.js src/import-component.js -o output/import-component.js --define MODULE=\"true\" -b --comments all ",
+		"minify": "npm run minify:api && npm run minify:tram-lite && npm run minify:import-component",
 		"minify:api": "uglifyjs output/api.js -o output/api.min.js -c -m",
 		"minify:tram-lite": "uglifyjs output/tram-lite.js -o output/tram-lite.min.js -c -m",
+		"minify:import-component": "uglifyjs output/import-component.js -o output/import-component.min.js -c -m",
 		"prepublishOnly": "npm run build",
 		"pretest": "npm run build",
 		"test": "cypress open",
diff --git a/result.js b/result.js
deleted file mode 100644
index f8f1567..0000000
--- a/result.js
+++ /dev/null
@@ -1,88 +0,0 @@
-class CustomTramLiteElement extends HTMLElement {
-            static tramLiteVersion = "4.1.1";
-            static tagName = rootElement.tagName.toLowerCase();
-            static get observedAttributes() {
-                // all of the template variables are attributes that we'll update on
-                return templateVariables;
-            }
-            constructor() {
-                super(), 
-                // list of attribute and text nodes that have a template value
-                // these are scanned through when templated attributes are updated
-                this.templateValuesAttrNodes = [], this.templateValuesTextNodes = [];
-                // Create a shadow root
-                // and append our HTML to it
-                var shadow = this.attachShadow({
-                    mode: "open"
-                });
-                shadow.append(...rootElement.cloneNode(!0).childNodes), 
-                // save the original template in templateValuesTextNodes
-                ComponentDefinition.getTextNodesWithTramLiteValues(shadow).forEach(textNode => {
-                    this.templateValuesTextNodes.push({
-                        textNode: textNode,
-                        originalTemplate: textNode.textContent
-                    });
-                }), 
-                // save the original attribute in the templateValuesAttributes
-                ComponentDefinition.getElementsWithTramLiteValuesInAttributes(shadow).forEach(element => {
-                    [ ...element.attributes ].forEach(attrNode => {
-                        attrNode.value.match(/tl:(.+?):/) && this.templateValuesAttrNodes.push({
-                            attrNode: attrNode,
-                            element: element,
-                            originalTemplate: attrNode.value
-                        });
-                    });
-                });
-            }
-            connectedCallback() {
-                // set all attribute values
-                // - the first default value is whatever is set on DOM creation
-                // - next, we check if there are default values that were part of the define
-                // - lastly, we'll set it to an empty string.
-                var defaultAttributes = Object.keys(defaultAttributeValues);
-                [ ...templateVariables, ...defaultAttributes ].forEach(attributeName => {
-                    null === this.getAttribute(attributeName) && this.setAttribute(attributeName, defaultAttributeValues[attributeName] || "");
-                }), 
-                // an initial call to set the default attributes
-                this.attributeChangedCallback(), 
-                // if there were any scripts that were waiting to be triggered on component mount, trigger them now
-                this.shadowRoot.querySelectorAll('script[tl-hold="component-mount"]').forEach(componentEffect => {
-                    componentEffect.removeAttribute("tl-hold");
-                });
-            }
-            attributeChangedCallback(name, oldValue, newValue) {
-                // scan through all text nodes and attributes with template values, and update them
-                this.updateTextNodeTemplates(), this.updateAttrNodeTemplates();
-            }
-            getUpdatedTemplate(originalTemplate) {
-                let updatedTemplate = originalTemplate;
-                return templateVariables.forEach(attributeName => {
-                    // fallback on the default values or an empty string if there is no value for this attribute yet
-                    var attributeValue = this.getAttribute(attributeName) || defaultAttributeValues[attributeName] || "";
-                    updatedTemplate = updatedTemplate.replaceAll(`tl:${attributeName}:`, attributeValue);
-                }), updatedTemplate;
-            }
-            updateTextNodeTemplates() {
-                // go through each text node that has a template variable, and update them
-                this.templateValuesTextNodes.forEach(({
-                    textNode,
-                    originalTemplate
-                }) => {
-                    textNode.textContent = this.getUpdatedTemplate(originalTemplate);
-                });
-            }
-            updateAttrNodeTemplates() {
-                // go through each element with an attribute that has a template variable, and update those attribute values
-                this.templateValuesAttrNodes.forEach(({
-                    attrNode,
-                    element,
-                    originalTemplate
-                }) => {
-                    // set the attribute value to the new value (updated with all template variables)
-                    attrNode.value = this.getUpdatedTemplate(originalTemplate), 
-                    // these attributes are special, in order to update the live value (after a user has interacted with them),
-                    // they need to be set on the element as well
-                    [ "value", "checked", "selected" ].includes(attrNode.name) && (element[attrNode.name] = this.getUpdatedTemplate(originalTemplate));
-                });
-            }
-        }
\ No newline at end of file
diff --git a/src/TramLite.js b/src/TramLite.js
index 0874ebe..989cfbd 100644
--- a/src/TramLite.js
+++ b/src/TramLite.js
@@ -194,18 +194,18 @@ class TramLite {
 	 * {@link https://tram-one.io/tram-lite/#appendShadowRootProcessor Read the full docs here.}
 	 * @param {string} matcher
 	 * @param {{ connect: function }} componentClass
-	 * @param {(node: Node) => boolean} [rootNodeTest=() => true]
+	 * @param {ShadowRoot} [shadowRoot=ShadowRoot.prototype]
 	 */
-	static appendShadowRootProcessor(matcher, componentClass, rootNodeTest = () => true) {
+	static appendShadowRootProcessor(matcher, componentClass, shadowRoot = ShadowRoot.prototype) {
 		// save the original version of shadowRoot.append
-		const shAppend = ShadowRoot.prototype.append;
+		const shAppend = shadowRoot.append;
 
-		ShadowRoot.prototype.append = function (...nodes) {
+		shadowRoot.append = function (...nodes) {
 			shAppend.call(this, ...nodes);
 			// if any element in this shadowRoot matches our matcher,
 			//   run the `connect` function from this class
 			this.querySelectorAll(matcher).forEach((matchingElement) => {
-				if (rootNodeTest(matchingElement.getRootNode().host)) {
+				if (matchingElement.getRootNode().host) {
 					componentClass.connect(matchingElement);
 				}
 			});
diff --git a/src/build-component.js b/src/build-component.js
deleted file mode 100644
index 54761a0..0000000
--- a/src/build-component.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const fs = require('fs');
-const path = require('path');
-
-const jsdom = require('jsdom'); // used to create web interfaces (namely document.createElement)
-const { JSDOM } = jsdom;
-const { window } = new JSDOM('');
-global.document = window.document;
-global.HTMLElement = window.HTMLElement;
-
-// Load TramLite class
-const TramLite = require('../output/api');
-
-// Get the path from command line arguments
-const filePath = process.argv[2];
-
-if (!filePath) {
-	console.error('Error: No file path provided.');
-	process.exit(1);
-}
-
-// Construct the full path
-const fullPath = path.resolve(filePath);
-
-// Read the file content
-fs.readFile(fullPath, 'utf8', (err, data) => {
-	if (err) {
-		console.error('Error reading the file:', err);
-		process.exit(1);
-	}
-
-	const newClassComponent = TramLite.makeComponentClass(data);
-
-	// Output the result or do further processing...
-	// console.log(newClassComponent.toString());
-	fs.writeFileSync('./result.js', newClassComponent.toString());
-});
diff --git a/src/import-component.js b/src/import-component.js
new file mode 100644
index 0000000..eaa86ca
--- /dev/null
+++ b/src/import-component.js
@@ -0,0 +1,36 @@
+// usage - this script is intended to be used as part of a script tag
+// e.g. <script src=".../import-component.js" tl-components=".../my-component.html">
+
+// tl-components can have a space separated list of import paths
+const componentPaths = document.currentScript.getAttribute('tl-components').split(/\s+/);
+
+// for each path we have, process the component definition
+componentPaths.forEach(async (componentPath) => {
+	const componentResult = await fetch(componentPath);
+	if (!componentResult.ok) {
+		// if we couldn't fetch the component, don't process anything
+		return;
+	}
+
+	// load the content as text, and then build the template tag pieces
+	const componentContent = await componentResult.text();
+	const [componentRawStrings, componentTemplateVariables] =
+		ComponentDefinition.extractTemplateVariables(componentContent);
+
+	// make a component class based on the template tag pieces
+	// (this is done, over define, so we can attach shadow root processors)
+	const componentClass = TramLite.makeComponentClass(componentRawStrings, ...componentTemplateVariables);
+
+	// override attachShadow so that we can add shadowRootProcessors
+	const attachShadow = componentClass.prototype.attachShadow;
+	componentClass.prototype.attachShadow = function (...options) {
+		const shadowRoot = attachShadow.call(this, ...options);
+		TramLite.appendShadowRootProcessor('[tl-controlled]', ControlledInput, shadowRoot);
+		TramLite.appendShadowRootProcessor('[tl-effect]', ComponentEffect, shadowRoot);
+
+		return shadowRoot;
+	};
+
+	// define the component in the DOM
+	customElements.define(componentClass.tagName, componentClass);
+});
diff --git a/src/processors/ComponentDefinition.js b/src/processors/ComponentDefinition.js
index 20fbd55..26942f2 100644
--- a/src/processors/ComponentDefinition.js
+++ b/src/processors/ComponentDefinition.js
@@ -86,6 +86,22 @@ class ComponentDefinition {
 		});
 	}
 
+	/**
+	 * utility function to extract js template strings, so that they can be passed into a template tag function
+	 */
+	static extractTemplateVariables(templateString) {
+		// we expect template variables to be in the following pattern, matching "${'...'}"
+		const variablePattern = /\$\{\'(.*?)\'\}/;
+		// Split the string by the above pattern, which lets us get an alternating list of strings and variables
+		const parts = templateString.split(variablePattern);
+
+		// Extract the strings and the variables
+		const rawStrings = parts.filter((_, index) => index % 2 === 0);
+		const templateVaraibles = parts.filter((_, index) => index % 2 !== 0);
+
+		return [rawStrings, templateVaraibles];
+	}
+
 	/**
 	 * function to set up an observer to watch for when new templates are added,
 	 *   and process all the definitions in them
diff --git a/test.html b/test.html
deleted file mode 100644
index b7bfb5e..0000000
--- a/test.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<script src="./result.js"></script>
-
-<x-button></x-button>
diff --git a/x-button.html b/x-button.html
deleted file mode 100644
index ef13373..0000000
--- a/x-button.html
+++ /dev/null
@@ -1,3 +0,0 @@
-<x-button>
-	<button>Hello World!</button>
-</x-button>