🔗 📚 API Reference
Functions, types, and constants
🔗 Component
Create a Web Component of type Component with reactive properties that extend ComponentProps.
- component defines a custom element with reactive properties and declarative effects
🔗 Signals
Create a signal of type Signal.
Helper functions:
🔗 Parsers
Declare how attributes are parsed. Functions returning Parser that will be used to create State writable reactive properties on the component.
| Function | Description |
|---|---|
| asBoolean() | Converts "true" / "false" to a boolean (true / false). Also treats empty attributes (checked) as true and missing attributes as false. |
| asInteger() | Converts a numeric string (e.g., "42") to an integer (42). |
| asNumber() | Converts a numeric string (e.g., "3.14") to a floating-point number (3.14). |
| asString() | Returns the attribute value as a string (unchanged). |
| asEnum(values) | Ensures the string matches one of the allowed values. Example: asEnum(["small", "medium", "large"]). If the value is not in the list, it defaults to the first option. |
| asJSON(fallback) | Parses a JSON string (e.g., '["a", "b", "c"]') into an array or object. If invalid, returns the fallback object. |
The pre-defined parsers asInteger(), asNumber() and asString() allow to set a custom fallback value as parameter.
The asEnum() parser requires an array of valid values, while the first will be the fallback value for invalid results.
The asJSON() parser requires a fallback object as parameter as {} probably won't match the type you're expecting.
🔗 Extractors
Declare derived reactive properties. Functions returning type Extractor that will be used to create Computed read-only reactive properties on the component.
- fromContext consumes a context value from nearest ancestor context provider component
- fromDOM creates a computed signal reflecting a property of a descendant element
- fromEvents creates a computed signal from event transformers on descendant elements
- fromSelector creates a computed signal of descendant elements matching a CSS selector
🔗 Effects
Declare effects of type Effect to be applied when signals change:
| Function | Description |
|---|---|
| setText() | Updates text content with a string signal value (while preserving comment nodes). |
| setProperty() | Updates a given property with any signal value. |
| show() | Updates the visibility of an element with a boolean signal value. |
| setAttribute() | Updates a given attribute with a string signal value. |
| toggleAttribute() | Toggles a given boolean attribute with a boolean signal value. |
| toggleClass() | Toggles a given CSS class with a boolean signal value. |
| setStyle() | Updates a given CSS property with a string signal value. |
| dangerouslySetInnerHTML() | Sets HTML content with a string signal value. |
| insertOrRemoveElement() | Inserts (positive integer) or removes (negative integer) elements with a number signal value. |
| emitEvent() | Dispatches custom events when signals change. |
| on() | Attaches event listeners to elements. |
| pass() | Passes signal values to descendant component properties. |
| provideContexts() | Provides context values to descendant components. |
| updateElement() | Base function for updating elements, used by other effects. |
Tip: TypeScript will check whether a typed value is assignable to a certain element property. Prefer setProperty() over setAttribute() for increased type safety. Setting string attributes is possible for all elements, but will have an effect only on some.