lit-observable

Decorators make lit-element observable.

Installation

$ npm i @realdennis/lit-observable

Usage

@subscribeProperty

subscribe observable stream and update the property & element.

import { subscribeProperty } from '@realdennis/lit-observable';
import { counter$ } from './stream';
export class ObservableExample extends LitElement {
    @subscribeProperty(counter$)
    counter!: number;
    public render() {
        return html`
            <p>counter = ${this.counter}</p>
            <button @click=${this.increment}>Increment</button>
        `;
    }

    private increment() {
        counter$.next(counter$.getValue() + 1);
    }
}

@subscribe

subscribe observable stream and triggered the callback method.

import { subscribeProperty } from '@realdennis/lit-observable';
import { counter$ } from './stream';

export class ObservableExample extends LitElement {
    @subscribe(counter$)
    callback(data: number) {
        console.log('observalbel from counter$:', data);
    }
}

See Demo.