@runopencode/rx-stencil

This is a small utility library which provides a set of useful functions for working with Stencil components in conjunction with RxJS. RxJS is not, in general, well integrated with Stencil, nor core concepts of Stencil in regard to reactivity. However, certain problems can be solved much easier with RxJS, especially when it comes to working with problems related to executing HTTP request, with requirements such as debouncing, throttling, retrying, etc.

Major motivation for developing this library was to provide a simple way to integrate RxJS with Stencil since Stencil can be successfully used as framework-agnostic approach for developing design systems as well as smart components for server-side rendered applications. In conjunction with @runopencode/http Stencil can be used to communicate with RESTful APIs through RxJS and observables, instead of using imperative approach with Promises. This allows you to write very complex, glitch-free, components. Of course, you can use this library with any other HTTP client, or fetch API, wrapped by RxJS observables using function "fromFetch()".

Table of contents

• Components
  • rx-async - render observable/resolved promise value.
• Property decorators
  • @QuerySelector() - select single element from DOM within component subtree.
  • @QuerySelectorAll() - select multiple elements from DOM within component subtree.
• Operators
  • Creation operators
    • mutationObservable() - observe changes in DOM subtree.
    • propertyObservable() - observe changes of component properties.
    • propertiesObservable() - observe changes of multiple component properties.
    • renderObservable() - observe invocation of render() method of component.
  • Pipeable operators
    • scheduleRender() - schedule rendering of component after observable emits in next micro task.
    • toProperty() - stream value of observable to component property.
    • untilDisconnected() - unsubscribe from observable when component is disconnected from the DOM.
• Subscribers
  • setProperty() - set component property value.

TODO

• [ ] Add moar tests.
• [ ] Add observables for other Stencil lifecycle events.