open-index/open-npm huggingface dataset:
npm package: @runopencode/rx-stencil
Description: ReactiveX (RxJS) utilities for Stencil
Latest version: 0.4.4

# @runopencode/rx-stencil

[![npm version](https://badge.fury.io/js/@runopencode%2Frx-stencil.svg)](https://badge.fury.io/js/@runopencode%2Frx-stencil)

This is a small utility library which provides a set of useful functions for working
with [Stencil](https://stenciljs.com) components in conjunction with [RxJS](https://rxjs.dev). 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](https://github.com/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()](https://rxjs.dev/api/fetch/fromFetch)".

## Table of contents

- [Components](docs/components.md)
    - [rx-async](docs/components.md#rx-async) - render observable/resolved promise value.
- Property decorators
    - [@QuerySelector()](docs/query-selector-decorator.md) - select single element from DOM within component subtree.
    - [@QuerySelectorAll()](docs/query-selector-all-decorator.md) - select multiple elements from DOM within component subtree.
- Operators
    - [Creation operators](docs/creation-operators.md)
        - [mutationObservable()](docs/creation-operators.md#mutationobservable) - observe changes in DOM subtree.
        - [propertyObservable()](docs/creation-operators.md#propertyobservable) - observe changes of component properties.
        - [propertiesObservable()](docs/creation-operators.md#propertiesobservable) - observe changes of multiple component properties.
        - [renderObservable()](docs/creation-operators.md#renderobservable) - observe invocation of `render()` method of component.
    - [Pipeable operators](docs/pipeable-operators.md)
        - [scheduleRender()](docs/pipeable-operators.md#schedulerender) - schedule rendering of component after observable emits in next micro task.
        - [toProperty()](docs/pipeable-operators.md#toproperty) - stream value of observable to component property.
        - [untilDisconnected()](docs/pipeable-operators.md#untildisconnected) - unsubscribe from observable when component is disconnected from the DOM.
- [Subscribers](docs/subscribers.md)
    - [setProperty()](docs/subscribers.md#setproperty) - set component property value.

## TODO

- [ ] Add moar tests.
- [ ] Add observables for other Stencil lifecycle events.
npm package: @runopencode/stencil-signal
Description: Integration of @preact/signals-core into Stencil.
Latest version: 0.3.2

# @runopencode/stencil-signal

[![npm version](https://badge.fury.io/js/%40runopencode%2Fstencil-signal.svg)](https://badge.fury.io/js/%40runopencode%2Fstencil-signal)

Lit (Google's web component framework)
started [experimental support](https://github.com/lit/lit/tree/3.0/packages/labs/preact-signals)
for signals from `@preact\signal-core` library. As they stated in
their [blog](https://lit.dev/blog/2023-09-27-lit-3.0-prerelease-2):

> ...we think signals promise to offer a convenient and relatively simple option for shared observable state, a 
> recurring need in our community. So we are starting to explore what it would look like to integrate signals with Lit 
> with a new @lit-labs/preact-signals package.

So, if Lit has it, why Stencil shouldn't?

![signals.jpg](docs/signals.jpg)

So this library brings exactly that - integration with `@preact\signal-core` library which allows you to use signals in
your Stencil components. Only requirement is to decorate `render()` method of your component with `@Preactive()`
decorator and for each value change of signal/computed value used in your `render()` method, DOM will be updated.

Why? Because we can! Do you need it? Well, probably not, Stencil already has a decent reactivity system. What we believe 
that Stencil is missing in terms of reactivity is better integration with [RxJS](https://rxjs.dev/) library. However, we
have compiled some of our commonly used functions in experimental library 
[@runopencode/rx-stencil](https://github.com/RunOpenCode/rx-stencil) which you can use to tackle more advanced tasks.

## Example

```typescript jsx
import { Component, ComponentInterface, h } from '@stencil/core';
import { Preactive }                        from '@runopencode/stencil-signal';
import { Signal, signal}                    from '@preact/signals-core';

let counter: Signal<number> = signal<number>('counter', 0);

@Component({
    tag: 'my-component',
    shadow: true
})
export class MyComponent implements ComponentInterface {

    @Preactive()
    render(): any {
        return <div onClick={(): void => { counter.value++; }}>{counter.value}</div>;
    }
}
```

## Caveats

In order to avoid memory leaks, and considering that method `render()` of each component is registered as "effect",
cleanup is required which is executed when component is disconnected from DOM. However, Stencil is not consistent in
invoking `disconnectedCallback()` method of components - if your library doesn't have any component which defines this
method, Stencil will not invoke it for any component. So, in order to avoid this, you should define this method in at
least one component.

For this inconvenience, we intend to open RFC which would address this issue.

## TODO:

- [ ] Write tests.