Simplified value handling using multimethods. Each component registers its parse/normalize functions once.
The Pattern:
Simplified value handling using multimethods. Each component registers its parse/normalize functions once. The Pattern: 1. Parse any input format to internal value 2. Compare parsed values to detect changes 3. Sync to property, attribute, and state 4. Normalize for consistent attribute display
(define-value-property! el)Define a custom value property setter that triggers sync. This ensures programmatic updates also maintain transparency.
Call this in component initialization.
Define a custom value property setter that triggers sync. This ensures programmatic updates also maintain transparency. Call this in component initialization.
(external-value-changed? el new-raw-value)Check if value changed externally by comparing PARSED values. This avoids issues with different string formats that represent the same internal value.
Check if value changed externally by comparing PARSED values. This avoids issues with different string formats that represent the same internal value.
(get-attribute el attr-name)Get current attribute value (the string in HTML).
Get current attribute value (the string in HTML).
(get-value el)Get current value from element, checking property first, then attribute. Returns the raw value (property takes precedence for programmatic access).
Get current value from element, checking property first, then attribute. Returns the raw value (property takes precedence for programmatic access).
(handle-attr-change el attr-name _old-value new-value render-fn)Standard handler for value attribute changes. Use this in component's :attr callback.
Standard handler for value attribute changes. Use this in component's :attr callback.
(normalize-array parsed-array)Format array as comma-separated string.
Format array as comma-separated string.
Normalize internal value to string for attribute display. Components register their normalizers via defmethod.
Normalize internal value to string for attribute display. Components register their normalizers via defmethod.
(parse-array value)Parse comma-separated or array values.
Parse comma-separated or array values.
(parse-attr-float el attr-name default-value)Safely parse float attribute with default fallback.
Examples: (parse-attr-float el "opacity" 1.0) => 1.0 if opacity="abc" or missing (parse-attr-float el "opacity" 1.0) => 0.5 if opacity="0.5"
Safely parse float attribute with default fallback. Examples: (parse-attr-float el "opacity" 1.0) => 1.0 if opacity="abc" or missing (parse-attr-float el "opacity" 1.0) => 0.5 if opacity="0.5"
(parse-attr-int el attr-name default-value)Safely parse integer attribute with default fallback.
Examples: (parse-attr-int el "width" 100) => 100 if width="abc" or missing (parse-attr-int el "width" 100) => 42 if width="42"
This is perfect for component attributes that need safe defaults.
Safely parse integer attribute with default fallback. Examples: (parse-attr-int el "width" 100) => 100 if width="abc" or missing (parse-attr-int el "width" 100) => 42 if width="42" This is perfect for component attributes that need safe defaults.
(parse-boolean value)Parse boolean values following HTML standard.
HTML Standard Behavior:
Examples: (parse-boolean nil) => false (attribute absent) (parse-boolean "") => true (HTML boolean: <input checked>) (parse-boolean "true") => true (parse-boolean "false") => false (parse-boolean "TRUE") => true (parse-boolean "0") => false (parse-boolean "1") => true (parse-boolean "anything") => true (parse-boolean true) => true (parse-boolean false) => false
Parse boolean values following HTML standard. HTML Standard Behavior: - null/absent attribute → false - empty string "" → true (attribute present but empty: <input checked>) - "false" or "0" → false (explicit false values) - everything else → true Examples: (parse-boolean nil) => false (attribute absent) (parse-boolean "") => true (HTML boolean: <input checked>) (parse-boolean "true") => true (parse-boolean "false") => false (parse-boolean "TRUE") => true (parse-boolean "0") => false (parse-boolean "1") => true (parse-boolean "anything") => true (parse-boolean true) => true (parse-boolean false) => false
(parse-float-safe value)Safely parse float from string or number, returns nil for invalid input.
Examples: (parse-float-safe "42.5") => 42.5 (parse-float-safe "abc") => nil (parse-float-safe nil) => nil (parse-float-safe 42.5) => 42.5
Safely parse float from string or number, returns nil for invalid input. Examples: (parse-float-safe "42.5") => 42.5 (parse-float-safe "abc") => nil (parse-float-safe nil) => nil (parse-float-safe 42.5) => 42.5
(parse-integer value)Safely parse integer from string or number, returns nil for invalid input.
Examples: (parse-integer "42") => 42 (parse-integer "abc") => nil (parse-integer nil) => nil (parse-integer 42) => 42
Safely parse integer from string or number, returns nil for invalid input. Examples: (parse-integer "42") => 42 (parse-integer "abc") => nil (parse-integer nil) => nil (parse-integer 42) => 42
(parse-string value)Parse string values, nil for empty.
Parse string values, nil for empty.
Parse raw input to internal format based on element tag name. Components register their parsers via defmethod.
Parse raw input to internal format based on element tag name. Components register their parsers via defmethod.
(setup-component! el update-state-fn)Initialize a component with its state update function. Always syncs initial value to ensure attribute visibility. Call this in component's connected callback.
Initialize a component with its state update function. Always syncs initial value to ensure attribute visibility. Call this in component's connected callback.
(sync-value! el raw-value)Parse input once and sync to all three places:
Returns the parsed value.
Parse input once and sync to all three places: - Property (parsed value for programmatic access) - Attribute (normalized string for HTML visibility) - State (internal component state if applicable) Returns the parsed value.
cljdoc builds & hosts documentation for Clojure/Script libraries
| Ctrl+k | Jump to recent docs |
| ← | Move to previous article |
| → | Move to next article |
| Ctrl+/ | Jump to the search field |