Merge pull request #57 from zeixcom/feature/dom-refactor

Feature/dom refactor

Author: estherbrunner

README.md

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

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

@@ -1,12 +1,13 @@
 import {
 	type Component,
+	type Computed,
 	RESET,
 	UNSET,
 	batch,
 	component,
 	effect,
+	fromSelector,
 	on,
-	selection,
 	setAttribute,
 	setProperty,
 	setText,
@@ -43,10 +44,9 @@ export default component<FormComboboxProps>(
 		const focusIndex = state(-1)
 		const filterText = state('')
 		const showPopup = state(false)
-		const options = selection<HTMLLIElement>(
-			el,
+		const options = fromSelector<HTMLLIElement>(
 			'[role="option"]:not([hidden])',
-		)
+		)(el) as Computed<HTMLLIElement[]>
 		const isExpanded = () => mode.get() === 'editing' && showPopup.get()
 
 		// Internal function

docs-src/components/input-field/input-field.ts

@@ -1,7 +1,7 @@
 import {
 	type AttributeParser,
 	type Component,
-	type FxFunction,
+	type Effect,
 	UNSET,
 	component,
 	computed,
@@ -74,8 +74,7 @@ export default component(
 		},
 	},
 	(el: Component<InputFieldProps>, { first }) => {
-		const fns: FxFunction<InputFieldProps, Component<InputFieldProps>>[] =
-			[]
+		const fns: Effect<InputFieldProps, Component<InputFieldProps>>[] = []
 		const input = el.querySelector('input')
 		if (!input) throw new Error('No input element found')
 		const typeNumber = input.type === 'number'

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

@@ -1,4 +1,5 @@
 import { type Component, component, fromDescendants, pass } from '../../..'
+import { BasicButtonProps } from '../basic-button/basic-button'
 
 export type ModuleCatalogProps = {
 	total: number
@@ -7,7 +8,7 @@ export type ModuleCatalogProps = {
 export default component(
 	'module-catalog',
 	{
-		total: fromDescendants<number, HTMLElement & { value: number }>(
+		total: fromDescendants(
 			'form-spinbutton',
 			(sum, item) => sum + item.value,
 			0,
@@ -16,7 +17,7 @@ export default component(
 	(el, { first }) => [
 		first(
 			'basic-button',
-			pass({
+			pass<ModuleCatalogProps, Component<BasicButtonProps>>({
 				badge: () => (el.total > 0 ? String(el.total) : ''),
 				disabled: () => !el.total,
 			}),

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

@@ -1,17 +1,17 @@
 import {
 	type Component,
 	component,
+	fromDescendant,
 	fromSelector,
 	on,
-	read,
 	setAttribute,
 	setProperty,
 	setText,
 	show,
 } from '../../..'
 import type { BasicButtonProps } from '../basic-button/basic-button'
 import type { FormCheckboxProps } from '../form-checkbox/form-checkbox'
-import type { FormRadiogroupProps } from '../form-radiogroup/form-radiogroup'
+import '../form-radiogroup/form-radiogroup'
 import type { FormTextboxProps } from '../form-textbox/form-textbox'
 
 export type ModuleTodoProps = {
@@ -34,12 +34,12 @@ export default component(
 		const list = el.querySelector('ol')
 		if (!list) throw new Error('No list found')
 
-		const inputLength = read(input, 'length', 0)
-		const filterValue = read(
-			el.querySelector<Component<FormRadiogroupProps>>('form-radiogroup'),
+		const inputLength = fromDescendant('form-textbox', 'length', 0)(el)
+		const filterValue = fromDescendant(
+			'form-radiogroup',
 			'value',
 			'all',
-		)
+		)(el)
 
 		return [
 			// Control todo input form

docs-src/layout.html

@@ -12,7 +12,7 @@
 		<context-router>
 			<header class="content-grid">
 				<h1 class="content">
-					UIElement Docs <small>Version 0.13.1</small>
+					UIElement Docs <small>Version 0.13.2</small>
 				</h1>
 				{{ include 'menu.html' }}
 				<card-callout class="content danger" hidden>

docs-src/pages/about.md

@@ -52,7 +52,7 @@ A copy of the license can be found in the [LICENSE](https://github.com/zeixcom/u
 
 ## Version History
 
-### Current Version: 0.13.0
+### Current Version: 0.13.2
 
 <card-callout class="caution">
 

docs-src/pages/api.md

@@ -21,7 +21,7 @@ description: 'Functions, types, and constants'
 
 Create a Web Component of type [Component](api/type-aliases/Component.html) with reactive properties that extend [ComponentProps](api/type-aliases/ComponentProps.html).
 
-- [component](api/functions/component.html)
+- [component](api/functions/component.html) defines a custom element with reactive properties and declarative effects
 
 </section>
 
@@ -32,8 +32,6 @@ Create a Web Component of type [Component](api/type-aliases/Component.html) with
 Create a signal of type [Signal](api/type-aliases/Signal.html).
 
 - [computed](api/functions/computed.html) creates a [Computed](api/type-aliases/Computed.html) signal derived from other signals
-- [selection](api/functions/selection.html) creates a [Computed](api/type-aliases/Computed.html) signal that updates according to a dynamic CSS selector
-- [sensor](api/functions/sensor.html) creates a [Computed](api/type-aliases/Computed.html) signal that updates according to events
 - [state](api/functions/state.html) creates a [State](api/type-aliases/State.html) signal
 
 Helper functions:
@@ -50,20 +48,20 @@ Helper functions:
 
 Declare how attributes are parsed. Functions returning [AttributeParser](api/type-aliases/AttributeParser.html) that will be used to create [State](api/type-aliases/State.html) signals as reactive properties on the component.
 
-- [asBoolean](api/functions/asBoolean.html)
-- [asEnum](api/functions/asEnum.html)
-- [asInteger](api/functions/asInteger.html)
-- [asJSON](api/functions/asJSON.html)
-- [asNumber](api/functions/asNumber.html)
-- [asString](api/functions/asString.html)
+- [asBoolean](api/functions/asBoolean.html) parses boolean attributes (presence indicates true)
+- [asEnum](api/functions/asEnum.html) parses string attributes constrained to specific values
+- [asInteger](api/functions/asInteger.html) parses integer attributes with validation
+- [asJSON](api/functions/asJSON.html) parses JSON attributes into JavaScript objects
+- [asNumber](api/functions/asNumber.html) parses numeric attributes as floating-point numbers
+- [asString](api/functions/asString.html) parses string attributes
 
 </section>
 
 <section>
 
-## Signal Initializers
+## Signal Producers
 
-Declare how signals are initialized. Variable of type or function returning [SignalInitializer](api/type-aliases/SignalInitializer.html):
+Declare how signals are initialized. Variable of type or function returning [SignalProducer](api/type-aliases/SignalProducer.html):
 
 - [fromContext](api/functions/fromContext.html) consumes a context value from nearest ancestor context provider component
 - [fromDescendant](api/functions/fromDescendant.html) gets a reactive property of a descendant component
@@ -79,19 +77,19 @@ Declare how signals are initialized. Variable of type or function returning [Sig
 
 Declare effects of type [FxFunction](api/type-aliases/FxFunction.html) to be applied when signals change:
 
-- [dangerouslySetInnerHTML](api/functions/dangerouslySetInnerHTML.html)
-- [emit](api/functions/emit.html)
-- [insertOrRemoveElement](api/functions/insertOrRemoveElement.html)
-- [on](api/functions/on.html)
-- [pass](api/functions/pass.html)
-- [provide](api/functions/provide.html)
-- [setAttribute](api/functions/setAttribute.html)
-- [setProperty](api/functions/setProperty.html)
-- [setStyle](api/functions/setStyle.html)
-- [setText](api/functions/setText.html)
-- [show](api/functions/show.html)
-- [toggleAttribute](api/functions/toggleAttribute.html)
-- [toggleClass](api/functions/toggleClass.html)
-- [updateElement](api/functions/updateElement.html)
+- [dangerouslySetInnerHTML](api/functions/dangerouslySetInnerHTML.html) sets inner HTML content from a signal
+- [emit](api/functions/emit.html) dispatches custom events when signals change
+- [insertOrRemoveElement](api/functions/insertOrRemoveElement.html) conditionally inserts or removes elements
+- [on](api/functions/on.html) attaches event listeners to elements
+- [pass](api/functions/pass.html) passes signal values to descendant component properties
+- [provide](api/functions/provide.html) provides context values to descendant components
+- [setAttribute](api/functions/setAttribute.html) sets element attributes from signals
+- [setProperty](api/functions/setProperty.html) sets element properties from signals
+- [setStyle](api/functions/setStyle.html) sets CSS styles from signals
+- [setText](api/functions/setText.html) sets text content from signals
+- [show](api/functions/show.html) conditionally shows or hides elements
+- [toggleAttribute](api/functions/toggleAttribute.html) toggles attributes based on signal values
+- [toggleClass](api/functions/toggleClass.html) toggles CSS classes based on signal values
+- [updateElement](api/functions/updateElement.html) base function for updating elements, used for [setText](api/functions/setText.html), [show](api/functions/show.html), [toggleClass](api/functions/toggleClass.html), [toggleAttribute](api/functions/toggleAttribute.html), [setAttribute](api/functions/setAttribute.html), [setProperty](api/functions/setProperty.html), [setStyle](api/functions/setStyle.html)
 
 </section>

docs-src/pages/api/README.md

@@ -4,7 +4,7 @@
 
 # UIElement
 
-Version 0.13.1
+Version 0.13.2
 
 **UIElement** - a HTML-first library for reactive Web Components
 

docs-src/pages/api/functions/asBoolean.md

@@ -8,7 +8,7 @@
 
 > **asBoolean**(): [`AttributeParser`](../type-aliases/AttributeParser.md)\<`boolean`\>
 
-Defined in: [src/lib/parsers.ts:23](https://github.com/zeixcom/ui-element/blob/051e9e1bc23b455abad71bf33880530a33e32030/src/lib/parsers.ts#L23)
+Defined in: [src/lib/parsers.ts:23](https://github.com/zeixcom/ui-element/blob/d13febaf363936558771161c1c4f66e2034f5ec3/src/lib/parsers.ts#L23)
 
 Parse a boolean attribute as an actual boolean value