Merge pull request #58 from zeixcom/feature/effects-refactor

Feature/effects refactor

Author: estherbrunner

.rules

@@ -95,18 +95,9 @@ You are an expert TypeScript engineer assisting with a TypeScript library for re
 - Maintain focus on simplicity and Web Platform alignment
 - Balance feature completeness with library size constraints
 
-## LLM Note-Taking Process
-
-- Maintain LLM_NOTES.md to document unexpected behavior and solutions
-- When encountering unexpected library behavior, check if similar issues are documented
-- For new issues, document:
-  - What was expected vs actual behavior
-  - Root cause analysis
-  - Solution or workaround found
-  - Lessons learned and takeaways
-- Use these notes to identify patterns and potential library improvements
-- Flag recurring issues as candidates for library design changes
-- Structure notes with clear dates, components, and problem descriptions
+## LLM Documentation
+
+- Maintain llms.txt to document core API usage in a form suitable for LLMs to quickly grasp the intent and functionality
 
 ## Always ask for user guidance when:
 

README.md

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

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

@@ -1,3 +1,4 @@
+import { requireDescendant } from '../../..'
 import {
 	type Component,
 	RESET,
@@ -19,13 +20,18 @@ export default component(
 	{
 		disabled: asBoolean(),
 		label: asString(RESET),
-		badge: asString(RESET),
+		badge: asString(),
+	},
+	(el, { first }) => {
+		requireDescendant(el, 'button')
+		requireDescendant(el, '.label')
+
+		return [
+			first('button', setProperty('disabled')),
+			first('.label', setText('label')),
+			first('.badge', setText('badge')),
+		]
 	},
-	(_, { first }) => [
-		first('button', setProperty('disabled')),
-		first('.label', setText('label')),
-		first('.badge', setText('badge')),
-	],
 )
 
 declare global {

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

@@ -27,7 +27,7 @@
 			const animationFrame = () => new Promise(requestAnimationFrame)
 
 			runTests(() => {
-				describe('My Counter Component', () => {
+				describe('Basic Counter Component', () => {
 					it('should initialize with count from attribute', async () => {
 						const el = document.getElementById('test1')
 						const countSpan = el.querySelector('span')
@@ -79,9 +79,6 @@
 						const incrementBtn = el.querySelector('button')
 						const countSpan = el.querySelector('span')
 
-						el.count = 0
-						await animationFrame() // Wait for scheduled effect execution
-
 						// Click multiple times rapidly
 						incrementBtn.click()
 						incrementBtn.click()
@@ -92,45 +89,26 @@
 						assert.equal(countSpan.textContent, '3')
 					})
 
-					it('should handle programmatic count updates', async () => {
-						const el = document.getElementById('test2')
-						const countSpan = el.querySelector('span')
-
-						el.count = 100
-						await animationFrame() // Wait for scheduled effect execution
-
-						assert.equal(countSpan.textContent, '100')
-
-						el.count = 101
-						await animationFrame() // Wait for scheduled effect execution
-
-						assert.equal(countSpan.textContent, '101')
-					})
-
-					it('should handle zero correctly', async () => {
+					it('should not allow programmatic count updates', async () => {
 						const el = document.getElementById('test2')
 						const countSpan = el.querySelector('span')
-
-						el.count = 0
-						await animationFrame()
-
-						assert.equal(countSpan.textContent, '0')
+						assert.throws(() => {
+							el.count = 100
+						}, TypeError)
 					})
 
 					it('should maintain count across increment cycles', async () => {
 						const el = document.getElementById('test2')
 						const incrementBtn = el.querySelector('button')
 
-						el.count = 10
-						await animationFrame() // Wait for initial state update
-
+						const initialCount = el.count
 						incrementBtn.click()
 						await animationFrame() // Wait for event handling and effect execution
-						assert.equal(el.count, 11)
+						assert.equal(el.count, initialCount + 1)
 
 						incrementBtn.click()
 						await animationFrame() // Wait for event handling and effect execution
-						assert.equal(el.count, 12)
+						assert.equal(el.count, initialCount + 2)
 					})
 				})
 			})

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

@@ -1,3 +1,3 @@
-<basic-counter count="42">
+<basic-counter>
 	<button type="button">💐 <span>42</span></button>
 </basic-counter>

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

@@ -1,4 +1,10 @@
-import { type Component, asInteger, component, on, setText } from '../../..'
+import {
+	type Component,
+	asInteger,
+	component,
+	fromEvents,
+	setText,
+} from '../../..'
 
 export type BasicCounterProps = {
 	count: number
@@ -7,17 +13,15 @@ export type BasicCounterProps = {
 export default component(
 	'basic-counter',
 	{
-		count: asInteger(),
-	},
-	(el, { first }) => [
-		first('span', setText('count')),
-		first(
+		count: fromEvents(
+			el => asInteger()(el, el.querySelector('span')?.textContent),
 			'button',
-			on('click', () => {
-				el.count++
-			}),
+			{
+				click: ({ value }) => ++value,
+			},
 		),
-	],
+	},
+	(_, { first }) => [first('span', setText('count'))],
 )
 
 declare global {

docs-src/components/calc-table/calc-table.ts

@@ -10,7 +10,7 @@ import {
 	state,
 } from '../../../'
 
-import { SpinButtonProps } from '../form-spinbutton/form-spinbutton'
+import { FormSpinbuttonProps } from '../form-spinbutton/form-spinbutton'
 
 export type CalcTableProps = {
 	columns: number
@@ -59,14 +59,14 @@ export default component(
 			setProperty(
 				'rows',
 				() =>
-					el.querySelector<Component<SpinButtonProps>>(
+					el.querySelector<Component<FormSpinbuttonProps>>(
 						'.rows form-spinbutton',
 					)?.value,
 			),
 			setProperty(
 				'columns',
 				() =>
-					el.querySelector<Component<SpinButtonProps>>(
+					el.querySelector<Component<FormSpinbuttonProps>>(
 						'.columns form-spinbutton',
 					)?.value,
 			),
@@ -191,7 +191,7 @@ export default component(
 			/* Update column values when cells change */
 			all(
 				'tbody input',
-				on('change', (e: Event) => {
+				on('change', e => {
 					const colKey = (e.target as HTMLInputElement)?.dataset[
 						'key'
 					]
@@ -202,7 +202,7 @@ export default component(
 			/* Update sums for each column */
 			all(
 				'tfoot td',
-				setText((target: HTMLTableCellElement) =>
+				setText(target =>
 					String(colSums.get(target.dataset['key']!)!.get()),
 				),
 			),

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

@@ -3,7 +3,7 @@ import {
 	type Context,
 	type State,
 	component,
-	provide,
+	provideContexts,
 	state,
 } from '../../../'
 
@@ -59,7 +59,7 @@ export default component(
 		},
 
 		// Context for screen viewport size
-		[MEDIA_VIEWPORT]: el => {
+		[MEDIA_VIEWPORT]: (el: HTMLElement) => {
 			const getBreakpoint = (attr: string, fallback: string) => {
 				const value = el.getAttribute(attr)
 				const trimmed = value?.trim()
@@ -114,7 +114,12 @@ export default component(
 		},
 	},
 	() => [
-		provide([MEDIA_MOTION, MEDIA_THEME, MEDIA_VIEWPORT, MEDIA_ORIENTATION]),
+		provideContexts([
+			MEDIA_MOTION,
+			MEDIA_THEME,
+			MEDIA_VIEWPORT,
+			MEDIA_ORIENTATION,
+		]),
 	],
 )
 

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

@@ -8,7 +8,7 @@ import {
 	computed,
 	dangerouslySetInnerHTML,
 	on,
-	provide,
+	provideContexts,
 	setText,
 	show,
 	state,
@@ -134,7 +134,7 @@ export default component(
 
 		return [
 			// Provide contexts
-			provide([ROUTER_PATHNAME, ROUTER_QUERY]),
+			provideContexts([ROUTER_PATHNAME, ROUTER_QUERY]),
 
 			// Navigate and update 'active' class
 			all(
@@ -145,7 +145,7 @@ export default component(
 						isInternalLink(target) &&
 						el[ROUTER_PATHNAME] === target.pathname,
 				),
-				on('click', (e: Event) => {
+				on('click', e => {
 					if (!isInternalLink(e.target)) return
 					const url = new URL(e.target.href)
 					if (url.origin === window.location.origin) {