SparkComponent class abstract

A reactive Web Component for Spark.

SparkComponent provides a declarative API for building components using a Virtual DOM. It manages updates efficiently by comparing the new virtual DOM with the previous one.

Lifecycle

Build: The build method returns the virtual DOM structure.
Render (Server): render generates the initial HTML string.
Hydrate (Browser): The component attaches to the existing DOM.
Update: State changes trigger update, which re-runs build and patches the DOM.

Example

@Component(tag: 'my-counter')
class Counter {
  @Attribute())
  int value = 0;

  @override
  html.Element build() {
    return html.div(
      ['Count: $value'],  // Use generated public getter
      onClick: (_) => value++,  // Generated setter triggers update
    );
  }
}

For reactive state that auto-updates the UI, use private fields (with _ prefix) and the generated public getter/setter will automatically trigger updates when the value changes.

Inheritance

Object
WebComponent
SparkComponent

Constructors

SparkComponent()

Properties

adoptedStyleSheets → Stylesheet?: Returns the stylesheet to apply to this component's shadow DOM.
no setter
dumpedAttributes → Map<String, String>: Returns a map of attributes to be rendered on the host element during SSR.
no setter
element → HTMLElement: Gets the underlying DOM element.
no setterinherited
hashCode → int: The hash code for this object.
no setterinherited
isHydrated → bool: Whether this component has been hydrated.
no setterinherited
observedAttributes → List<String>: Returns a list of attribute names to observe for changes.
no setterinherited
runtimeType → Type: A representation of the runtime type of the object.
no setterinherited
shadowRoot → ShadowRoot?: Gets the shadow root of this component.
no setterinherited
tagName → String: The custom element tag name (e.g., 'my-counter').
no setterinherited

Methods

adoptStyleSheets(List<String> cssTexts) → void: Applies CSS strings as adopted stylesheets to this component's shadow root.
inherited
attributeChangedCallback(String name, String? oldValue, String? newValue) → void: Called when an observed attribute changes.
override
build() → Element: Builds the reactive Virtual DOM structure for this component.
hasAttr(String name) → bool: Checks if the element has the specified attribute.
inherited
hydrate(HTMLElement element) → void: Hydrates this component with the given DOM element.
inherited
noSuchMethod(Invocation invocation) → dynamic: Invoked when a nonexistent method or property is accessed.
inherited
onHydrating() → void: Called during hydration, before initial attributes are notified.
override
onMount() → void: Called when the component is mounted/hydrated in the browser.
override
onUnmount() → void: Called when the component is unmounted from the DOM.
inherited
prop(String key, [String fallback = '']) → String: Reads an attribute value from the element.
inherited
propBool(String key, [bool fallback = false]) → bool: Reads a boolean attribute value.
inherited
propDouble(String key, [double fallback = 0.0]) → double: Reads a double attribute value.
inherited
propInt(String key, [int fallback = 0]) → int: Reads an integer attribute value.
inherited
query(String selector) → Element?: Queries for an element within this component's shadow root or element.
inherited
queryAll(String selector) → List<Element>: Queries for all matching elements within this component.
inherited
removeAttr(String name) → void: Removes an attribute from the element.
inherited
render() → Element: Renders the component for SSR (Server-Side Rendering).
override
scheduleUpdate() → void: Called by generated setters when state changes. Batches multiple changes within same microtask into single update.
setAttr(String name, String? value) → void: Sets an attribute on the element.
inherited
syncAttributes() → void: Called by generated code to sync fields to attributes.
toggleAttr(String name, [bool? force]) → bool: Toggles a boolean attribute on the element.
inherited
toString() → String: A string representation of this object.
inherited
update() → void: Forces a re-render of the component.

Operators

operator ==(Object other) → bool: The equality operator.
inherited