docs(examples): optimize source code of some components

Author: estherbrunner

docs-src/components/form-gauge/form-gauge.css

@@ -91,6 +91,7 @@ form-gauge {
 
 	&[disabled] {
 		height: calc(0.8 * var(--form-gauge-size));
+		overflow-y: hidden;
 
 		& button {
 			display: none;

docs-src/components/form-gauge/form-gauge.ts

@@ -4,16 +4,16 @@ import {
 	component,
 	computed,
 	fromDOM,
-	fromEvents,
 	getProperty,
+	on,
 	setAttribute,
 	setProperty,
 	setStyle,
 	setText,
 } from '../../..'
 
 export type FormGaugeProps = {
-	readonly value: number
+	value: number
 }
 
 export type FormGaugeThreshold = {
@@ -24,29 +24,11 @@ export type FormGaugeThreshold = {
 
 export default component(
 	'form-gauge',
-	{
-		value: fromEvents<number>(
-			'button',
-			{
-				click: ({ target, value }) =>
-					value + (target.classList.contains('decrement') ? -1 : 1),
-				keydown: ({ event, value }) => {
-					const { key } = event as KeyboardEvent
-					if (['ArrowUp', 'ArrowDown', '-', '+'].includes(key)) {
-						event.stopPropagation()
-						event.preventDefault()
-						return (
-							value +
-							(key === 'ArrowDown' || key === '-' ? -1 : 1)
-						)
-					}
-				},
-			},
-			fromDOM({ progress: getProperty('value') }, asInteger()),
-		),
-	},
-	(el, { first }) => {
-		const max = el.querySelector('progress')?.max ?? 100
+	{ value: asInteger(fromDOM({ progress: getProperty('value') }, 0)) },
+	(el, { first, useElement }) => {
+		const max =
+			useElement('progress', 'Add a native <progress> element.').max ??
+			100
 		const thresholds: FormGaugeThreshold[] = (() => {
 			const attr = el.getAttribute('thresholds')
 			if (!attr) return []
@@ -58,9 +40,7 @@ export default component(
 		})()
 		const qualification = computed(
 			() =>
-				thresholds.find(
-					threshold => el.getSignal('value').get() >= threshold.min,
-				) || {
+				thresholds.find(threshold => el.value >= threshold.min) || {
 					label: '',
 					color: 'var(--color-primary)',
 				},
@@ -78,14 +58,31 @@ export default component(
 				() => `${(240 * el.value) / max}deg`,
 			),
 			setStyle('--form-gauge-color', () => qualification.get().color),
-			first(
-				'small',
-				setText(() => qualification.get().label),
-			),
+			first('small', [setText(() => qualification.get().label)]),
 
-			// Enable/disable buttons based on value
-			first('button.increment', setProperty('disabled', () => el.value >= max)),
-			first('button.decrement', setProperty('disabled', () => el.value <= 0))
+			// Event handlers on buttons and their disabled state
+			first('button.increment', [
+				setProperty('disabled', () => el.value >= max),
+				on('click', ({ event }) => {
+					el.value += event.shiftKey ? 10 : 1
+				}),
+			]),
+			first('button.decrement', [
+				setProperty('disabled', () => el.value <= 0),
+				on('click', ({ event }) => {
+					el.value -= event.shiftKey ? 10 : 1
+				}),
+			]),
+			on('keydown', ({ event }) => {
+				const { key, shiftKey } = event
+				if ((key === 'ArrowLeft' || key === '-') && el.value > 0)
+					el.value -= shiftKey ? 10 : 1
+				else if (
+					(key === 'ArrowRight' || key === '+') &&
+					el.value < max
+				)
+					el.value += shiftKey ? 10 : 1
+			}),
 		]
 	},
 )

docs-src/components/hello-world/hello-world.ts

@@ -1,16 +1,20 @@
-import { asString, type Component, component, on, setText } from '../../..'
+import {
+	asString,
+	type Component,
+	component,
+	fromDOM,
+	getText,
+	on,
+	setText,
+} from '../../..'
 
 export type HelloWorldProps = {
 	name: string
 }
 
 export default component(
 	'hello-world',
-	{
-		name: asString(
-			el => el.querySelector('span')?.textContent?.trim() ?? '',
-		),
-	},
+	{ name: asString(fromDOM({ span: getText() }, '')) },
 	(el, { first }) => {
 		const fallback = el.name
 		return [

docs-src/components/module-dialog/module-dialog.ts

@@ -34,12 +34,11 @@ export default component(
 					if (event.key === 'Escape') el.open = false
 				}),
 			]),
-			first(
-				'dialog .close',
+			first('dialog .close', [
 				on('click', () => {
 					el.open = false
 				}),
-			),
+			]),
 			() =>
 				effect(() => {
 					if (el.open) {

docs-src/components/module-pagination/module-pagination.ts

@@ -2,6 +2,8 @@ import {
 	asInteger,
 	type Component,
 	component,
+	fromDOM,
+	getProperty,
 	on,
 	setAttribute,
 	setProperty,
@@ -17,32 +19,36 @@ export type ModulePaginationProps = {
 export default component(
 	'module-pagination',
 	{
-		value: asInteger(1),
-		max: asInteger(1),
+		value: asInteger(fromDOM({ input: getProperty('value') }, 1)),
+		max: asInteger(fromDOM({ input: getProperty('max') }, 1)),
 	},
 	(el, { first }) => [
+		// Reflect attributes of module-pagination component
 		show(() => el.max > 1),
 		setAttribute('value', () => String(el.value)),
 		setAttribute('max', () => String(el.max)),
-		first('.value', setText(() => String(el.value))),
-		first('.max', setText(() => String(el.max))),
-		on('keyup', ({ event }) => {
-			if ((event.target as HTMLElement)?.localName === 'input') return
-			const key = event.key
-			if (key === 'ArrowLeft' && el.value > 1) el.value--
-			else if (key === 'ArrowRight' && el.value < el.max) el.value++
-		}),
+
+		// Text content	for current and max page numbers
+		first('.value', [setText(() => String(el.value))]),
+		first('.max', [setText(() => String(el.max))]),
+
+		// Event handler on input and its value and max properties
 		first(
 			'input',
 			[
 				on('change', ({ target }) => {
-					el.value = Math.max(1, Math.min(target.valueAsNumber, el.max))
+					el.value = Math.max(
+						1,
+						Math.min(target.valueAsNumber, el.max),
+					)
 				}),
 				setProperty('value', () => String(el.value)),
 				setProperty('max', () => String(el.max)),
 			],
-			'Add an <input[type="number"]> to enter the page number to go to.'
+			'Add an <input[type="number"]> to enter the page number to go to.',
 		),
+
+		// Event handlers on buttons and their disabled state
 		first(
 			'button.prev',
 			[
@@ -51,7 +57,7 @@ export default component(
 				}),
 				setProperty('disabled', () => el.value <= 1),
 			],
-			'Add a <button.prev> to go to previous page.',
+			'Add a <button.prev> to go to the previous page.',
 		),
 		first(
 			'button.next',
@@ -61,8 +67,15 @@ export default component(
 				}),
 				setProperty('disabled', () => el.value >= el.max),
 			],
-			'Add a <button.next> to go to next page.',
+			'Add a <button.next> to go to the next page.',
 		),
+		on('keyup', ({ event }) => {
+			if ((event.target as HTMLElement)?.localName === 'input') return
+			const key = event.key
+			if ((key === 'ArrowLeft' || key === '-') && el.value > 1) el.value--
+			else if ((key === 'ArrowRight' || key === '+') && el.value < el.max)
+				el.value++
+		}),
 	],
 )
 

docs-src/pages/api/classes/CircularMutationError.md

@@ -6,7 +6,7 @@
 
 # Class: CircularMutationError
 
-Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L10)
+Defined in: [src/core/errors.ts:10](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L10)
 
 Error thrown when a circular dependency is detected in a selection signal
 
@@ -24,7 +24,7 @@ Error thrown when a circular dependency is detected in a selection signal
 
 > **new CircularMutationError**(`host`, `selector`): `CircularMutationError`
 
-Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L15)
+Defined in: [src/core/errors.ts:15](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L15)
 
 #### Parameters
 

docs-src/pages/api/classes/DependencyTimeoutError.md

@@ -6,7 +6,7 @@
 
 # Class: DependencyTimeoutError
 
-Defined in: [src/core/errors.ts:115](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L115)
+Defined in: [src/core/errors.ts:115](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L115)
 
 Error when a component's dependencies are not met within a specified timeout
 
@@ -24,7 +24,7 @@ Error when a component's dependencies are not met within a specified timeout
 
 > **new DependencyTimeoutError**(`host`, `missing`): `DependencyTimeoutError`
 
-Defined in: [src/core/errors.ts:116](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L116)
+Defined in: [src/core/errors.ts:116](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L116)
 
 #### Parameters
 

docs-src/pages/api/classes/InvalidComponentNameError.md

@@ -6,7 +6,7 @@
 
 # Class: InvalidComponentNameError
 
-Defined in: [src/core/errors.ts:28](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L28)
+Defined in: [src/core/errors.ts:28](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L28)
 
 Error thrown when component name violates rules for custom element names
 
@@ -24,7 +24,7 @@ Error thrown when component name violates rules for custom element names
 
 > **new InvalidComponentNameError**(`component`): `InvalidComponentNameError`
 
-Defined in: [src/core/errors.ts:32](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L32)
+Defined in: [src/core/errors.ts:32](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L32)
 
 #### Parameters
 

docs-src/pages/api/classes/InvalidEffectsError.md

@@ -6,7 +6,7 @@
 
 # Class: InvalidEffectsError
 
-Defined in: [src/core/errors.ts:64](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L64)
+Defined in: [src/core/errors.ts:64](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L64)
 
 Error thrown when setup function does not return effects
 
@@ -24,7 +24,7 @@ Error thrown when setup function does not return effects
 
 > **new InvalidEffectsError**(`host`, `cause?`): `InvalidEffectsError`
 
-Defined in: [src/core/errors.ts:69](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L69)
+Defined in: [src/core/errors.ts:69](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L69)
 
 #### Parameters
 

docs-src/pages/api/classes/InvalidPropertyNameError.md

@@ -6,7 +6,7 @@
 
 # Class: InvalidPropertyNameError
 
-Defined in: [src/core/errors.ts:45](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L45)
+Defined in: [src/core/errors.ts:45](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L45)
 
 Error thrown when trying to assign a property name that conflicts with reserved words or inherited HTMLElement properties
 
@@ -24,7 +24,7 @@ Error thrown when trying to assign a property name that conflicts with reserved
 
 > **new InvalidPropertyNameError**(`component`, `prop`, `reason`): `InvalidPropertyNameError`
 
-Defined in: [src/core/errors.ts:51](https://github.com/zeixcom/ui-element/blob/e094bd31ef74080268e6d1b7a25d938efebeb3ee/src/core/errors.ts#L51)
+Defined in: [src/core/errors.ts:51](https://github.com/zeixcom/ui-element/blob/df58db6949960ec0cd0685fb302ff1878e15bf79/src/core/errors.ts#L51)
 
 #### Parameters