@runopencode/rx-stencil 0.4.3 → 0.5.0

package/dist/collection/rx/observable/render-observable.js

@@ -1,23 +1,32 @@
-import { Observable, } from "rxjs";
+import { getElement, } from "@stencil/core";
+import { identity, startWith, Subject, } from "rxjs";
+import { getComponentTagName, isRendered, } from "../../utils/stencil";
+let observables = new WeakMap();
 /**
- * Returns an observable that emits when the component render()
+ * Returns an observable that emits when the component `render()`
  * function is called. Value will be emitted after the next
  * microtask (next tick).
+ *
+ * If component is already rendered, the observable will emit
+ * immediately.
+ *
+ * Uses hot observable pattern.
  */
 export function renderObservable(cmp) {
     if ('function' !== typeof cmp.render) {
-        throw new Error('Component does not have a render function.');
+        throw new Error(`Component "${getComponentTagName(cmp)}" does not have a render function.`);
     }
-    return new Observable((subscriber) => {
+    let element = getElement(cmp);
+    if (!observables.has(element)) {
         let previousRender = cmp.render;
+        let subject = new Subject();
         cmp.render = function () {
             Promise.resolve().then(() => {
-                subscriber.next();
+                subject.next();
             });
             return previousRender.call(this);
         };
-        return () => {
-            cmp.render = previousRender;
-        };
-    });
+        observables.set(element, subject.asObservable());
+    }
+    return observables.get(element).pipe(isRendered(cmp) ? startWith(() => void 0) : identity);
 }

package/dist/collection/rx/observable/view-child-observable.js

@@ -0,0 +1,30 @@
+import { getElement, } from "@stencil/core";
+import { map, startWith, } from "rxjs";
+import { getHostRef, isEmulatedViewChild, usesShadowDom, } from "../../utils/stencil";
+import { distinctUntilElementChanged } from "../../utils/rxjs";
+import { renderObservable } from "./render-observable";
+export function viewChildObservable(cmp, selector, options) {
+    let element = getElement(cmp);
+    let hostRef = getHostRef(cmp);
+    let rendered = renderObservable(cmp);
+    options = Object.assign({ distinct: true }, options);
+    if ((hostRef.$renderCount$ || 0) > 0) {
+        rendered = rendered.pipe(startWith(void 0));
+    }
+    // In shadow DOM, this is quite cheap, we can query only shadow DOM and skip the light DOM.
+    if (usesShadowDom(cmp)) {
+        return rendered.pipe(map(() => element.shadowRoot.querySelector(selector)), distinctUntilElementChanged(options.distinct));
+    }
+    // When shadow DOM is emulated, this is more expensive, we need to query light DOM and use first element
+    // which matches the selector, and it is not a child of any emulated slot node.
+    return rendered.pipe(map(() => {
+        let candidates = element.querySelectorAll(selector);
+        for (let i = 0; i < candidates.length; i++) {
+            let candidate = candidates[i];
+            if (isEmulatedViewChild(candidate, element)) {
+                return candidate;
+            }
+        }
+        return null;
+    }), distinctUntilElementChanged(options.distinct));
+}

package/dist/collection/rx/observable/view-children-observable.js

@@ -0,0 +1,21 @@
+import { getElement, } from "@stencil/core";
+import { map, startWith, } from "rxjs";
+import { getHostRef, isEmulatedViewChild, usesShadowDom, } from "../../utils/stencil";
+import { distinctUntilElementsChanged } from "../../utils/rxjs";
+import { renderObservable } from "./render-observable";
+export function viewChildrenObservable(cmp, selector, options) {
+    let element = getElement(cmp);
+    let hostRef = getHostRef(cmp);
+    let rendered = renderObservable(cmp);
+    options = Object.assign({ distinct: true }, options);
+    if ((hostRef.$renderCount$ || 0) > 0) {
+        rendered = rendered.pipe(startWith(void 0));
+    }
+    // In shadow DOM, this is quite cheap, we can query only shadow DOM and skip the light DOM.
+    if (usesShadowDom(cmp)) {
+        return rendered.pipe(map(() => Array.from(element.shadowRoot.querySelectorAll(selector))), distinctUntilElementsChanged(options.distinct));
+    }
+    // When shadow DOM is emulated, this is more expensive, we need to query light DOM and use elements
+    // which matches the selector, and it is not a child of any emulated slot node.
+    return rendered.pipe(map(() => Array.from(element.querySelectorAll(selector))), map((candidates) => candidates.filter((candidate) => isEmulatedViewChild(candidate, element))), distinctUntilElementsChanged(options.distinct));
+}

package/dist/collection/rx/operator/index.js

@@ -1,3 +1,4 @@
-export { scheduleRender } from './schedule-render';
-export { toProperty } from './to-property';
-export { untilDisconnected } from './until-disconnected';
+export * from './schedule-render';
+export * from './to-property';
+export * from './until-disconnected';
+export * from './while-connected';

package/dist/collection/rx/operator/to-property.js

@@ -1,15 +1,15 @@
+import { Build, } from "@stencil/core";
 import { tap, } from "rxjs";
-import { getPropertyDescriptor } from "../../utils";
+import { getHostRef } from "../../utils";
 /**
  * Use this function to tap into a value stream and flush value to
- * component property. You may also use this function as subscription
- * function (function will detect that value is passed instead of
- * observable).
+ * component property.
  */
 export function toProperty(cmp, property) {
-    // ensure that the property is defined on the component.
-    getPropertyDescriptor(cmp, property);
-    // @ts-ignore
+    if (Build.isDev && !cmp.hasOwnProperty(property)) {
+        let ref = getHostRef(cmp);
+        console.warn(`It seams that ${property} does not exist on component ${ref.$cmpMeta$.$tagName$}. This warning will not be displayed in production environment.`);
+    }
     return (source) => {
         return source.pipe(tap((value) => {
             cmp[property] = value;

package/dist/collection/rx/operator/until-disconnected.js

@@ -1,104 +1,22 @@
 import { getElement, } from "@stencil/core";
-import { Observable, Subject, takeUntil, } from "rxjs";
-/**
- * A map of component observables that are being watched for
- * disconnect callback invocation. A weak map is being used
- * so that the component instance can be garbage collected.
- *
- * {@internal}
- */
-let disconnectObservables = new WeakMap();
-/**
- * Creates an observable that emits a value when the component
- * is disconnected from DOM and method `disconnectedCallback()`
- * is invoked. StencilJS will supress the invocation of this
- * method if it is not defined on the component.
- *
- * {@internal}
- */
-let createUsingDisconnectedCallback = function (cmp) {
-    let previousDisconnected = cmp.disconnectedCallback;
-    if (!previousDisconnected) {
-        throw new Error(`Component "${cmp.constructor.name}" does not have a "disconnectedCallback()" method defined.`);
-    }
-    let disconnectedSubject$ = new Subject();
-    cmp.disconnectedCallback = function () {
-        if (previousDisconnected) {
-            previousDisconnected.call(cmp);
-        }
-        disconnectedSubject$.next();
-    };
-    return disconnectedSubject$.asObservable();
-};
-/**
- * Mutation observer is our next heuristic. We will monitor parent
- * node of the component and emit a value when the component is
- * disconnected from DOM. This will only work, of course, if the
- * component is not the root node of the application and component
- * is already within DOM.
- *
- * {@internal}
- */
-let createUsingMutationObserver = function (cmp) {
-    let element = getElement(cmp);
-    if (null === element.parentNode) {
-        throw new Error(`Component "${cmp.constructor.name}" is not within DOM.`);
-    }
-    return new Observable((observer) => {
-        let mutationObserver = new MutationObserver((mutations) => {
-            mutations.forEach((record) => {
-                for (let node of Array.from(record.removedNodes)) {
-                    if (node !== element) {
-                        continue;
-                    }
-                    observer.next();
-                    observer.complete();
-                }
-            });
-        });
-        mutationObserver.observe(element.parentNode, {
-            childList: true,
-            subtree: true,
-        });
-        return () => {
-            mutationObserver.disconnect();
-            // we can not re-use this observable, so we have to delete it
-            disconnectObservables.delete(cmp);
-        };
-    });
-};
-/**
- * Creates an observable that emits a value when the component
- * is disconnected from DOM.
- *
- * {@internal}
- */
-function createDisconnectObservable(cmp) {
-    let functions = [
-        createUsingDisconnectedCallback,
-        createUsingMutationObserver,
-    ];
-    for (let fn of functions) {
-        try {
-            disconnectObservables.set(cmp, fn(cmp));
-            return;
-        }
-        catch (e) {
-            // noop
-        }
-    }
-    throw new Error(`Could not create disconnect observable for component "${cmp.constructor.name}".`);
-}
+import { Subject, takeUntil, } from "rxjs";
+let observables = new WeakMap();
 /**
  * Operator that unsubscribes from the source observable when
  * the component is disconnected from DOM.
  */
 export function untilDisconnected(cmp) {
     return (source) => {
-        if (!disconnectObservables.has(cmp)) {
-            createDisconnectObservable(cmp);
+        let element = getElement(cmp);
+        if (!observables.has(element)) {
+            let observable = new Subject();
+            let previous = cmp.disconnectedCallback;
+            cmp.disconnectedCallback = function () {
+                previous === null || previous === void 0 ? void 0 : previous.call(this);
+                observable.next();
+            };
+            observables.set(element, observable.asObservable());
         }
-        let disconnectObservable$ = disconnectObservables.get(cmp);
-        return source.pipe(takeUntil(disconnectObservable$));
+        return source.pipe(takeUntil(observables.get(element)));
     };
 }

package/dist/collection/rx/operator/while-connected.js

@@ -0,0 +1,39 @@
+import { getElement, } from "@stencil/core";
+import { filter, Subject, tap, merge, } from "rxjs";
+/**
+ * Operator that emits values from the source observable only
+ * while the component is connected to DOM.
+ *
+ * This can be useful for cases where you want to move components in and out of the DOM,
+ * but still want to receive values from an observable while the component is connected
+ * and react to them.
+ */
+export function whileConnected(cmp, options) {
+    return (source) => {
+        let element = getElement(cmp);
+        let reemit = (options === null || options === void 0 ? void 0 : options.reemit) || false;
+        if (!reemit) {
+            return source.pipe(filter(() => element.isConnected));
+        }
+        let captured = false;
+        let last = undefined;
+        let reemiter = new Subject();
+        let previousConnectedCallback = cmp.connectedCallback;
+        cmp.connectedCallback = function () {
+            previousConnectedCallback === null || previousConnectedCallback === void 0 ? void 0 : previousConnectedCallback.call(this);
+            if (!captured) {
+                return;
+            }
+            reemiter.next(last);
+            captured = false;
+            last = undefined;
+        };
+        return merge(reemiter, source.pipe(tap((value) => {
+            if (element.isConnected) {
+                return;
+            }
+            captured = true;
+            last = value;
+        }), filter(() => element.isConnected)));
+    };
+}

package/dist/collection/rx/subscriber/index.js

@@ -1 +1 @@
-export { setProperty, } from './set-property';
+export * from './set-property';

package/dist/collection/rx/subscriber/set-property.js

@@ -1,4 +1,17 @@
 import { forceUpdate, } from "@stencil/core";
+/**
+ * Set a property on a Stencil component and optionally schedule a render.
+ *
+ * This function returns a setter function that can be used to update the property value. Common use case
+ * is to set it as subscriber to an observable, so that the property is updated whenever the observable
+ * emits a new value.
+ *
+ * @param {ComponentInterface} cmp Component instance on which the property is to be set.
+ * @param {string} property Name of the property to be set on the component.
+ * @param {SetPropertyOptions} options Options to control the behavior of the property setter,
+ *                                     such as whether to schedule a render and whether to do
+ *                                     it on the next tick.
+ */
 export function setProperty(cmp, property, options = {}) {
     let resolvedOptions = Object.assign({ scheduleRender: false, nextTick: true }, options);
     return (value) => {

package/dist/collection/rx/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/tests/rx/observable/from-event/test-from-event.component.js

@@ -0,0 +1,30 @@
+import { Host, h, } from "@stencil/core";
+import { fromEvent, untilDisconnected, } from "../../../../rx";
+export class TestFromEvent {
+    constructor() {
+        this._elementCounter = 0;
+        this._delegateCounter = 0;
+    }
+    connectedCallback() {
+        fromEvent(this, 'click')
+            .pipe(untilDisconnected(this))
+            .subscribe(() => {
+            this._elementCounter++;
+        });
+        fromEvent(this, 'click', 'span')
+            .pipe(untilDisconnected(this))
+            .subscribe(() => {
+            this._delegateCounter++;
+        });
+    }
+    render() {
+        return (h(Host, { key: '7a79760391921fbf7fb2a5f253bb01d060dd61e4' }, this._elementCounter, "/", h("span", { key: '74da459845a6d1c635d21ab7d781b70ab41fbbc5', id: "delegate" }, this._delegateCounter)));
+    }
+    static get is() { return "test-from-event"; }
+    static get states() {
+        return {
+            "_elementCounter": {},
+            "_delegateCounter": {}
+        };
+    }
+}

package/dist/collection/tests/rx/observable/properties-observable/test-properties-observable.component.js

@@ -0,0 +1,85 @@
+import { Host, h, } from "@stencil/core";
+import { map, } from "rxjs";
+import { propertiesObservable, untilDisconnected, } from "../../../../rx";
+export class TestPropertiesObservable {
+    constructor() {
+        this._value = undefined;
+    }
+    connectedCallback() {
+        propertiesObservable(this, 'foo', 'bar', 'baz')
+            .pipe(map(([foo, bar, baz]) => {
+            this._value = `Foo: "${foo}", Bar: "${bar}", Baz: "${baz}"`;
+        }), untilDisconnected(this))
+            .subscribe();
+    }
+    render() {
+        return (h(Host, { key: 'b69107bec9636608215a705991bbbb0bf17ad303' }, this._value));
+    }
+    static get is() { return "test-properties-observable"; }
+    static get properties() {
+        return {
+            "foo": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "foo"
+            },
+            "bar": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "bar"
+            },
+            "baz": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "baz"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "_value": {}
+        };
+    }
+}

package/dist/collection/tests/rx/observable/property-observable/test-property-observable.component.js

@@ -0,0 +1,47 @@
+import { Host, h, } from "@stencil/core";
+import { propertyObservable, setProperty, untilDisconnected, } from "../../../../rx";
+export class TestPropertyObservable {
+    constructor() {
+        // @ts-ignore
+        this.prop = 'foo';
+    }
+    connectedCallback() {
+        propertyObservable(this, 'prop')
+            .pipe(untilDisconnected(this))
+            .subscribe(setProperty(this, 'value', {
+            scheduleRender: true,
+        }));
+    }
+    async setValue(value) {
+        this.prop = value;
+    }
+    render() {
+        return (h(Host, { key: '092d6fe0477d9ddfc771b152fe132c26e5dc04f0' }, this.value));
+    }
+    static get is() { return "test-property-observable"; }
+    static get methods() {
+        return {
+            "setValue": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<void>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/tests/rx/observable/render-observable.unit.js

@@ -0,0 +1,38 @@
+import { describe, it, expect, } from "@stencil/vitest";
+import { vi } from "vitest";
+import { renderObservable } from "../../../rx";
+vi.mock('../../../utils/stencil', () => ({
+    getComponentTagName: vi.fn(() => 'foo'),
+    isRendered: vi.fn(() => false),
+}));
+describe('renderObservable()', () => {
+    it('Emits on each render.', async () => {
+        let cmp = new ComponentMockWithRender();
+        let count = 0;
+        let subscription = renderObservable(cmp).subscribe(() => {
+            count++;
+        });
+        cmp.render();
+        cmp.render();
+        cmp.render();
+        await Promise.resolve();
+        expect(count).toStrictEqual(3);
+        subscription.unsubscribe();
+        cmp.render();
+        await Promise.resolve();
+        expect(count).toStrictEqual(3);
+    });
+    it('Throws if component does not have a render function.', () => {
+        let cmp = new ComponentMockWithoutRender();
+        expect(() => {
+            renderObservable(cmp);
+        }).toThrow('Component "foo" does not have a render function.');
+    });
+});
+class ComponentMockWithoutRender {
+}
+class ComponentMockWithRender {
+    render() {
+        // noop.
+    }
+}

package/dist/collection/tests/rx/observable/view-child-observable/test-view-child-observable-shadow-dom.component.js

@@ -0,0 +1,96 @@
+import { Host, h, } from "@stencil/core";
+import { viewChildObservable } from "../../../../rx";
+export class TestViewChildObservableShadowDom {
+    constructor() {
+        this.which = 'all';
+        this._log = [];
+    }
+    async getLog() {
+        return this._log;
+    }
+    async clearLog() {
+        this._log = [];
+    }
+    /**
+     * {@inheritdoc}
+     */
+    connectedCallback() {
+        viewChildObservable(this, 'div')
+            .subscribe((el) => {
+            this._log.push(`viewChildObservable@connectedCallback: ${el === null || el === void 0 ? void 0 : el.id}`);
+        });
+    }
+    render() {
+        return (h(Host, { key: '3d253195f6c56cf48990e6daf7dde10971753a74' }, this.which !== 'even'
+            ? (h("div", { id: "test-1", class: "odd all", key: "test-1" }, "1"))
+            : null, this.which !== 'odd'
+            ? (h("div", { id: "test-2", class: "even all", key: "test-2" }, "2"))
+            : null, this.which !== 'even'
+            ? (h("div", { id: "test-3", class: "odd all", key: "test-3" }, "3"))
+            : null, h("slot", { key: '141bd2c2626e1b89acc55ee79d7fa89e4b767e52' })));
+    }
+    static get is() { return "test-view-child-observable-shadow-dom"; }
+    static get encapsulation() { return "shadow"; }
+    static get properties() {
+        return {
+            "which": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'even' | 'odd' | 'all'",
+                    "resolved": "\"all\" | \"even\" | \"odd\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "which",
+                "defaultValue": "'all'"
+            }
+        };
+    }
+    static get methods() {
+        return {
+            "getLog": {
+                "complexType": {
+                    "signature": "() => Promise<string[]>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<string[]>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "clearLog": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}

package/dist/collection/tests/rx/operator/schedule-render/test-schedule-render.component.js

@@ -0,0 +1,42 @@
+import { Host, h, } from "@stencil/core";
+import { fromEvent, scheduleRender, untilDisconnected, } from "../../../../rx";
+export class TestScheduleRender {
+    constructor() {
+        this._counter = 0;
+    }
+    connectedCallback() {
+        fromEvent(this, 'click')
+            .pipe(scheduleRender(this), untilDisconnected(this))
+            .subscribe(() => {
+            this._counter++;
+        });
+    }
+    async increase() {
+        this._counter++;
+    }
+    render() {
+        return (h(Host, { key: '66f26c1ef51b9e595d13926b1e46d1c7cb015566' }, this._counter));
+    }
+    static get is() { return "test-schedule-render"; }
+    static get methods() {
+        return {
+            "increase": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}