Social Media Photo by Ryan Stone on Unsplash

:twisted_rightwards_arrows: Directiva lit-html para la programación rectiva

This lit-html directive is for use some parts of your templates like an observable (Reactive programming).

Use with RxJs, most.js and xstream or wharever library with Observable and Subject implementation.

See the demo with example.

Installation

Install from NPM or use from Unpkg CDN

Npm

npm install --save lit-directive-reactive

Unpkg

import {subscribeDirective, toSubjectDirective} from 'https://unpkg.com/lit-directive-reactive?module'

API

# subscribe(observable)

Support for AttributePart, BooleanAttributePart, EventPart, NodePart, PropertyPart

Update template Part value with received value on Observable (next method)

Parameters

• observable: Observable object to subscribe

Return value

return template Part of lit-html

Example

import {render, html} from 'lit-html'
import {subscribeDirective} from 'lit-directive-reactive';
import { Observable } from 'rxjs';

const counterObservable = new Observable(subscriber => {
  let count = 0;
  subscriber.next(count);
  setTimeout(() => {
    subscriber.next(++count);
  }, 1000);
});

render(html`
      <span> ${subscribeDirective(counterObservable)} </span>
      <input value="${subscribeDirective(counterObservable)}" />
      `, window.container);

# toSubject(subject)

Currently support for EventPart

Emit event value to Subject

Parameters

• subject: Subject to emit event value

Return value

return template Part of lit-html

Example

import {render, html} from 'lit-html'
import {toSubjectDirective} from 'lit-directive-reactive';
import { Subject } from 'rxjs';

const subject = new Subject();

subject.subscribe(ev => console.log(ev));

render(html`
      <button @click=${toSubject(subject)}> +1 </button>
      `, window.container);