BlockquoteControllerRxjs

Connect Observables with Lit

BlockquoteControllerRxjs is a Lit Reactive Controller that subscribes to an RxJS 9 / Web Platform Observable while the host is connected, stores the latest emitted value and requests a host update when it changes.

• One controller per stream, the latest value is available (typed) in value
• It subscribes on hostConnected and unsubscribes (AbortSignal) on hostDisconnected, so it re-subscribes if the element is moved in the DOM
• The stream can be replaced at any time by assigning stream$; the previous one is unsubscribed
• Repeated values (Object.is) do not trigger an update
• Optional callback, onError and onComplete handlers

Original idea by Adrian Fâciu - observables-litelement

Demo

Usage

new BlockquoteControllerRxjs(this, {stream$, initialValue?, callback?, onError?, onComplete?})

import {html, LitElement} from 'lit';
import {fromEventPattern} from 'rxjs/from-event-pattern';
import {map} from 'rxjs/map';
import {BlockquoteControllerRxjs} from '@blockquote-web-components/blockquote-controller-rxjs';

const mousemove$ = fromEventPattern(
  (handler) => window.addEventListener('mousemove', handler),
  (handler) => window.removeEventListener('mousemove', handler)
);

class BlockquoteControllerRxjsDemo extends LitElement {
  pos = new BlockquoteControllerRxjs(this, {
    stream$: mousemove$[map](({clientX, clientY}) => ({x: clientX, y: clientY})),
    initialValue: {x: 0, y: 0},
  });

  render() {
    const {x, y} = this.pos.value;
    return html`
      <p>The mouse is at:</p>
      <pre>x: ${x} y: ${y}</pre>
    `;
  }
}

Use callback to copy the value into a reactive property when you need it in willUpdate / updated:

new BlockquoteControllerRxjs(this, {
  stream$,
  callback: (value) => (this._pos = value),
});

src/BlockquoteControllerRxjs.ts:

class: BlockquoteControllerRxjs

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | ------------ | ------- | --------------------------------------- | -------------- | ------------------------------------------------------------------------- | -------------- | | host | | THost | | | | | value | | T \| I | initialValue | Latest value emitted by the stream (or `initialValue`). | | | error | | unknown | | Last error emitted by the stream, `undefined` otherwise. | | | completed | | boolean | false | `true` once the current stream has completed. | | | callback | | (value: T) => void \| undefined | callback | Called with every new (distinct) value emitted by the stream. | | | onError | | (error: unknown) => void \| undefined | onError | Called when the stream errors (falls back to `globalThis.reportError`). | | | onComplete | | () => void \| undefined | onComplete | Called when the stream completes. | | | stream$ | | ObservableLike<T> | | The current Observable. Assigning a different one re-subscribes. | | | subscribed | | boolean | | `true` while there is an active subscription. | |

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | ------------------ | ------- | ------------------------------------------------------- | ---------- | ------ | -------------- | | subscribe | | Subscribes to `stream$`. No-op if already subscribed. | | void | | | unsubscribe | | Aborts the current subscription, if any. | | void | | | hostConnected | | | | void | | | hostDisconnected | | | | void | |

Fields

| Name | Privacy | Type | Default | Description | Inherited From | | ------------------ | ------- | ------------------------------ | --------- | ----------- | -------------- | | #stream$ | private | ObservableLike<T> | stream$ | | | | #abortController | private | AbortController \| undefined | | | |

Methods

| Name | Privacy | Description | Parameters | Return | Inherited From | | --------- | ------- | ----------- | ---------------------------------- | ------ | -------------- | | #settle | private | | abortController: AbortController | void | |

Exports

| Kind | Name | Declaration | Module | Package | | ---- | -------------------------- | ------------------------ | ------------------------------- | ------- | | js | BlockquoteControllerRxjs | BlockquoteControllerRxjs | src/BlockquoteControllerRxjs.ts | |

src/index.ts:

Exports

| Kind | Name | Declaration | Module | Package | | ---- | --------------------------------- | ------------------------------- | ----------------------------- | ------- | | js | BlockquoteControllerRxjs | BlockquoteControllerRxjs | ./BlockquoteControllerRxjs.js | | | js | BlockquoteControllerRxjsOptions | BlockquoteControllerRxjsOptions | ./BlockquoteControllerRxjs.js | | | js | ObservableLike | ObservableLike | ./BlockquoteControllerRxjs.js | | | js | ObserverLike | ObserverLike | ./BlockquoteControllerRxjs.js | |