Social Media Photo by Ryan Stone on Unsplash
🔀 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.
Installation
Install from NPM or use from Unpkg CDN
Npm
npm install --save lit-directive-reactiveUnpkg
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);
