A reactive programming library for Salesforce LWC
LWC Rxjs
lwc-rxjs A reactive programming library for salesforce lwc.
deploy lwc-rxjs
git clone https://github.com/exiahuang/lwc-rxjs.git
cd lwc-rxjs
sfdx force:source:deploy --loglevel fatal -p force-app/main/default/lwc/rxjs/rxjs.js-meta.xml --targetusername=$username_or_alias_for_your_sfdc_org
usage
create a lwc compnent
sfdx force:lightning:component:create --type lwc -n RxjsTest
import { Observable } from 'c/rxjs';
import { operator } from 'c/rxjs';
import { from, interval, fromEvent } from 'c/rxjs';
import { ajax } from 'c/rxjs';
export default class RxjsTest extends LightningElement {
rxjsSub;
handleRxjsClick(event) {
const observable = new Observable((subscriber) => {
subscriber.next(1);
subscriber.next(2);
subscriber.next(3);
});
observable.subscribe((x) => console.log(x));
}
handleRxjsOperatorClick(event) {
const { map, filter, switchMap } = operator;
const observable = from([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.pipe(
map((x) => x ** 2),
filter((x) => x > 5)
)
.subscribe((x) => console.log(`value: ${x}`));
}
handleRxjsSubClick(event) {
if (!this.rxjsSub) {
console.log('>>>>>>subscribe');
//emit value in sequence every 1 second
const source = interval(1000);
//output: 0,1,2,3,4,5....
this.rxjsSub = source.subscribe((val) => console.log(val));
}
}
handleRxjsUnSubClick(event) {
if (!!this.rxjsSub) {
console.log('>>>>>>unsubscribe');
this.rxjsSub.unsubscribe();
this.rxjsSub = undefined;
}
}
handleRxjsAjaxClick(event) {
console.log('>>>>>>handleRxjsAjaxClick');
const githubUsers = `https://jsonplaceholder.typicode.com/todos/1`;
const users = ajax(githubUsers);
const subscribe = users.subscribe(
(res) => {
console.log(res);
console.log(res.status);
console.log(res.responseType);
console.log(JSON.stringify(res.response));
console.log(res.xhr);
},
(err) => console.error(err)
);
}
}
<template>
<h1>hello Rxjs</h1>
<p>
<!-- Rxjs -->
<lightning-button label="Rxjs" title="Rxjs" onclick={handleRxjsClick} class="slds-m-left_x-small"></lightning-button>
</p>
<p>
<!-- Rxjs Operator -->
<lightning-button label="Rxjs Operator" title="Rxjs" onclick={handleRxjsOperatorClick} class="slds-m-left_x-small"></lightning-button>
</p>
<p>
<!-- Rxjs interval Subscribe -->
<lightning-button label="Rxjs interval Subscribe" title="Rxjs" onclick={handleRxjsSubClick} class="slds-m-left_x-small"></lightning-button>
</p>
<p>
<!-- Rxjs interval unSubscribe -->
<lightning-button label="Rxjs interval unSubscribe" title="Rxjs" onclick={handleRxjsUnSubClick} class="slds-m-left_x-small"></lightning-button>
</p>
<p>
<!-- Rxjs ajax -->
<lightning-button label="Rxjs ajax" title="Rxjs" onclick={handleRxjsAjaxClick} class="slds-m-left_x-small"></lightning-button>
</p>
</template>