Skip to content

adrianfaciu/rx-lit

master
Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Rx Lit

Build npm version

Reasoning

Working with Observables inside a LitElement component is easy enough, but it involves a bit of code. We need at least to subscribe, unsubscribe and make sure we schedule an update when we get a new value. An implementation might look like this:

class DemoElement extends LitElement {
  unsubscribe$ = new Subject();
  streamValues: number;

  connectedCallback() {
    super.connectedCallback();
    stream$.pipe(takeUntil(this.unsubscribe$)).subscribe((res) => {
      this.streamValues = number;
      this.requestUpdate();
    });
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.unsubscribe$.next();
  }
}

We can avoid writing this code for each Observable using RxLitElement base class.

RxLitElement

RxLitElement is a base class, that extends LitElement, and provides a subscribe method.

Definition: subscribe(propKey, stream$). We pass in the property we want to assign values to and the Observable we want to subscribe.

Using it we can rewrite the above code:

class DemoElement extends RxLitElement {
  streamValues: number;

  connectedCallback() {
    super.connectedCallback();
    this.subscribe('streamValues', stream$);
  }
}

Beside abstracting away some of the code, we have some other benefits:

  • type safety (we can use only existing property names and Observable objects)
  • unsubscribes when the component is removed
  • unsubscribes from old observable if called again on the same property with different Observable
  • ignores calls on the same property with the same Observable

Decorator

In some cases, we can use a decorator to simplify further. If the Observable we want to subscribe to is not a property of our class, we can simplify the code:

class DemoElement extends RxLitElement {
  @subscribe(stream$)
  streamValues: number;

  @subscribe(from([1]))
  anotherStreamValues: number;
}

Why

Why not a simple function?

You cannot monkey patch life cycle hooks of custom elements. This means we cannot extend the functionality of disconnectedCallback to know when the element was removed and unsubscribe.

Why not a lit-html directive?

There is not straight forward way of knowing when the element is removed. So again, we cannot unsubscribe from our Observable.

If you know a solution to this problems or have a different idea, feel free to open a pull request :)

About

Base class for LitElement that makes working with Observables easier.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published