Merge pull request #59 from zeixcom/feature/extend-hmr

Feature/extend hmr

Author: estherbrunner

README.md

@@ -1,6 +1,6 @@
 # UIElement
 
-Version 0.13.3
+Version 0.13.4
 
 **UIElement** - a HTML-first library for reactive Web Components
 

bun.lockb

@@ -14,7 +14,9 @@
 		</basic-button>
 
 		<basic-button id="test2" disabled>
-			<button type="submit" class="primary" disabled>Submit</button>
+			<button type="submit" class="primary" disabled>
+				<span class="label">Submit</span>
+			</button>
 		</basic-button>
 
 		<basic-button id="test3">
@@ -23,16 +25,6 @@
 			</button>
 		</basic-button>
 
-		<basic-button id="test4">
-			<button type="button">
-				<span class="badge">99</span>
-			</button>
-		</basic-button>
-
-		<basic-button id="test5">
-			<button type="button">Simple Button</button>
-		</basic-button>
-
 		<script type="module">
 			import { runTests } from '@web/test-runner-mocha'
 			import { assert } from '@esm-bundle/chai'
@@ -58,13 +50,7 @@
 				describe('Basic Button Component', () => {
 					beforeEach(async () => {
 						// Reset all test components before each test
-						const testIds = [
-							'test1',
-							'test2',
-							'test3',
-							'test4',
-							'test5',
-						]
+						const testIds = ['test1', 'test2', 'test3']
 						for (const id of testIds) {
 							const el = document.getElementById(id)
 							if (el) await resetButton(el)
@@ -206,47 +192,6 @@
 						assert.equal(labelEl.textContent, 'Add to Cart')
 					})
 
-					it('should work with button that has only badge', async () => {
-						const el = document.getElementById('test4')
-						const labelEl = el.querySelector('.label')
-						const badgeEl = el.querySelector('.badge')
-
-						assert.isNull(labelEl)
-						assert.isNotNull(badgeEl)
-
-						// Should work normally with just badge
-						el.badge = '42'
-						await tick()
-
-						assert.equal(badgeEl.textContent, '42')
-					})
-
-					it('should work with simple button without label or badge elements', async () => {
-						const el = document.getElementById('test5')
-						const button = el.querySelector('button')
-						const labelEl = el.querySelector('.label')
-						const badgeEl = el.querySelector('.badge')
-
-						assert.isNotNull(button)
-						assert.isNull(labelEl)
-						assert.isNull(badgeEl)
-
-						// Should still handle disabled state
-						el.disabled = true
-						await tick()
-
-						assert.equal(button.disabled, true)
-
-						// Label and badge properties should not cause errors
-						el.label = 'Will not show'
-						el.badge = 'Will not show'
-						await tick()
-
-						// Should not throw errors, even though elements don't exist
-						assert.equal(el.label, 'Will not show')
-						assert.equal(el.badge, 'Will not show')
-					})
-
 					it('should handle boolean disabled values correctly', async () => {
 						const el = document.getElementById('test1')
 						const button = el.querySelector('button')
@@ -381,30 +326,6 @@
 						assert.isTrue(button.classList.contains('primary'))
 					})
 
-					it('should handle component without button element gracefully', () => {
-						// Create a minimal component structure for edge case testing
-						const tempDiv = document.createElement('div')
-						tempDiv.innerHTML = `
-                        <basic-button>
-                            <div>Not a button</div>
-                        </basic-button>
-                    `
-						document.body.appendChild(tempDiv)
-
-						const tempEl = tempDiv.querySelector('basic-button')
-
-						// Component should initialize without throwing
-						assert.isNotNull(tempEl)
-
-						// Setting properties should not cause errors
-						tempEl.disabled = true
-						tempEl.label = 'Test'
-						tempEl.badge = 'Test'
-
-						// Cleanup
-						document.body.removeChild(tempDiv)
-					})
-
 					it('should handle RESET values correctly', async () => {
 						const el = document.getElementById('test1')
 						const labelEl = el.querySelector('.label')

docs-src/components/basic-button/basic-button-test.html

@@ -25,7 +25,8 @@ basic-button {
 			cursor: pointer;
 			opacity: var(--opacity-solid);
 
-			&:hover {
+			&:hover,
+			&:focus {
 				background-color: var(--color-secondary-hover);
 			}
 
@@ -42,7 +43,8 @@ basic-button {
 			&:not(:disabled) {
 				opacity: var(--opacity-solid);
 
-				&:hover {
+				&:hover,
+				&:focus {
 					background-color: var(--color-primary-hover);
 				}
 
@@ -60,7 +62,8 @@ basic-button {
 			&:not(:disabled) {
 				opacity: var(--opacity-solid);
 
-				&:hover {
+				&:hover,
+				&:focus {
 					background-color: var(--color-error-hover);
 				}
 
@@ -78,7 +81,8 @@ basic-button {
 			&:not(:disabled) {
 				opacity: var(--opacity-solid);
 
-				&:hover {
+				&:hover,
+				&:focus {
 					background-color: var(--color-success-hover);
 				}
 
@@ -88,6 +92,63 @@ basic-button {
 			}
 		}
 
+		&.tertiary {
+			background: transparent;
+			border: 0 solid transparent;
+			padding: var(--space-xs);
+			height: auto;
+			color: var(--color-primary);
+
+			&:not(:disabled) {
+				opacity: var(--opacity-solid);
+
+				&:hover,
+				&:focus {
+					background-color: rgba(0, 0, 0, 0.05);
+					color: var(--color-primary-hover);
+				}
+
+				&:active {
+					background-color: rgba(0, 0, 0, 0.1);
+					color: var(--color-primary-active);
+				}
+			}
+
+			&.constructive {
+				color: var(--color-success);
+
+				&:not(:disabled) {
+					opacity: var(--opacity-solid);
+
+					&:hover,
+					&:focus {
+						color: var(--color-success-hover);
+					}
+
+					&:active {
+						color: var(--color-success-active);
+					}
+				}
+			}
+
+			&.destructive {
+				color: var(--color-error);
+
+				&:not(:disabled) {
+					opacity: var(--opacity-solid);
+
+					&:hover,
+					&:focus {
+						color: var(--color-error-hover);
+					}
+
+					&:active {
+						color: var(--color-error-active);
+					}
+				}
+			}
+		}
+
 		&.small {
 			--input-height: var(--space-l);
 			font-size: var(--font-size-xs);

docs-src/components/basic-button/basic-button.css

@@ -25,14 +25,19 @@
 
 			const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
 			const animationFrame = () => new Promise(requestAnimationFrame)
+			const microtask = () => new Promise(queueMicrotask)
+			const tick = async () => {
+				await animationFrame() // Wait for effects to execute
+				await microtask() // Wait for DOM to reflect changes
+			}
 
 			runTests(() => {
 				describe('Basic Counter Component', () => {
 					it('should initialize with count from attribute', async () => {
 						const el = document.getElementById('test1')
 						const countSpan = el.querySelector('span')
 
-						await animationFrame() // Wait for scheduled effect execution
+						await tick()
 
 						assert.equal(el.count, 42)
 						assert.equal(countSpan.textContent, '42')
@@ -42,7 +47,7 @@
 						const el = document.getElementById('test2')
 						const countSpan = el.querySelector('span')
 
-						await animationFrame() // Wait for scheduled effect execution
+						await tick()
 
 						assert.equal(el.count, 0)
 						assert.equal(countSpan.textContent, '0')
@@ -52,7 +57,7 @@
 						const el = document.getElementById('test3')
 						const countSpan = el.querySelector('span')
 
-						await animationFrame() // Wait for scheduled effect execution
+						await tick()
 
 						assert.equal(el.count, -5)
 						assert.equal(countSpan.textContent, '-5')
@@ -65,7 +70,7 @@
 
 						const initialCount = el.count
 						incrementBtn.click()
-						await animationFrame() // Wait for event handling and effect execution
+						await tick()
 
 						assert.equal(el.count, initialCount + 1)
 						assert.equal(
@@ -83,7 +88,7 @@
 						incrementBtn.click()
 						incrementBtn.click()
 						incrementBtn.click()
-						await animationFrame() // Wait for all event handling and effect execution
+						await tick()
 
 						assert.equal(el.count, 3)
 						assert.equal(countSpan.textContent, '3')
@@ -92,9 +97,35 @@
 					it('should not allow programmatic count updates', async () => {
 						const el = document.getElementById('test2')
 						const countSpan = el.querySelector('span')
+						const originalCount = el.count
+
+						// Should throw TypeError when trying to set count
 						assert.throws(() => {
 							el.count = 100
 						}, TypeError)
+
+						// Count should remain unchanged after failed assignment
+						assert.equal(el.count, originalCount)
+						assert.equal(
+							countSpan.textContent,
+							String(originalCount),
+						)
+
+						// Should throw for different value types
+						assert.throws(() => {
+							el.count = 'invalid'
+						}, TypeError)
+
+						assert.throws(() => {
+							el.count = null
+						}, TypeError)
+
+						assert.throws(() => {
+							el.count = undefined
+						}, TypeError)
+
+						// Verify count is still the original value
+						assert.equal(el.count, originalCount)
 					})
 
 					it('should maintain count across increment cycles', async () => {
@@ -103,11 +134,11 @@
 
 						const initialCount = el.count
 						incrementBtn.click()
-						await animationFrame() // Wait for event handling and effect execution
+						await tick()
 						assert.equal(el.count, initialCount + 1)
 
 						incrementBtn.click()
-						await animationFrame() // Wait for event handling and effect execution
+						await tick()
 						assert.equal(el.count, initialCount + 2)
 					})
 				})

docs-src/components/basic-counter/basic-counter-test.html

@@ -7,7 +7,7 @@ import {
 } from '../../..'
 
 export type BasicCounterProps = {
-	count: number
+	readonly count: number
 }
 
 export default component(

docs-src/components/basic-counter/basic-counter.ts

@@ -8,10 +8,10 @@ import {
 } from '../../../'
 
 export type ContextMediaProps = {
-	'media-motion': boolean
-	'media-theme': 'light' | 'dark'
-	'media-viewport': 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-	'media-orientation': 'portrait' | 'landscape'
+	readonly 'media-motion': boolean
+	readonly 'media-theme': 'light' | 'dark'
+	readonly 'media-viewport': 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	readonly 'media-orientation': 'portrait' | 'landscape'
 }
 
 /* === Exported Contexts === */

docs-src/components/context-media/context-media.ts

@@ -42,6 +42,11 @@ <h2>Custom Outlet Initial Content</h2>
 
 			const wait = ms => new Promise(resolve => setTimeout(resolve, ms))
 			const animationFrame = () => new Promise(requestAnimationFrame)
+			const microtask = () => new Promise(queueMicrotask)
+			const tick = async () => {
+				await animationFrame() // Wait for effects to execute
+				await microtask() // Wait for DOM to reflect changes
+			}
 
 			runTests(() => {
 				describe('Client Router Component - Structure', () => {
@@ -126,7 +131,7 @@ <h2>Custom Outlet Initial Content</h2>
 						invalidLink.href = 'not-a-valid-url'
 						el.querySelector('nav').appendChild(invalidLink)
 
-						await animationFrame()
+						await tick()
 
 						// Should not crash and should not be marked as active
 						assert.isFalse(invalidLink.classList.contains('active'))