Function Fluctuate

Component prototype property decorator factory. Applying this Fluctuate decorator to a property of a custom Component while supplying a streamFactory that returns an ObservableInput upon invocation will subscribe the Component.fluctuationChangedCallback method to each emission from this ObservableInput and replace the decorated property with a getter returning its last emitted value. Further, the resulting subscription, referenced by the decorated property, is assigned to the Component.observedFluctuations property and may be terminated by unsubscribing manually. Finally, the Component will seize to Fluctuate automatically when it's disconnected from the Document.

Example

A Component that Fluctuates:

import { Component, Fluctuate } from '@sgrud/shell';
import { fromEvent } from 'rxjs';

declare global {
  interface HTMLElementTagNameMap {
    'example-component': ExampleComponent;
  }
}

⁠@Component('example-component')
export class ExampleComponent extends HTMLElement implements Component {

  ⁠@Fluctuate(() => fromEvent(document, 'click'))
  private readonly pointer?: MouseEvent;

  public get template(): JSX.Element {
    return <span>Clicked at ({this.pointer?.x}, {this.pointer?.y})</span>;
  }

}
Copy

See

Component