working import-component output

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');
+	});
+});

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');
+	});
+});

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>

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>

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>

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/[email protected]/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>