@runopencode/rx-stencil 0.4.4 → 0.5.0

package/dist/cjs/until-disconnected-BTCr-3q2.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var index$1 = require('./index-Dssn3hdS.js');
+
+let observables = new WeakMap();
+/**
+ * Operator that unsubscribes from the source observable when
+ * the component is disconnected from DOM.
+ */
+function untilDisconnected(cmp) {
+    return (source) => {
+        let element = index.getElement(cmp);
+        if (!observables.has(element)) {
+            let observable = new index$1.cjsExports.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());
+        }
+        return source.pipe(index$1.cjsExports.takeUntil(observables.get(element)));
+    };
+}
+
+exports.untilDisconnected = untilDisconnected;

package/dist/collection/collection-manifest.json

@@ -1,10 +1,17 @@
 {
   "entries": [
-    "components/async/async.js"
+    "components/async/async.js",
+    "tests/rx/observable/from-event/test-from-event.component.js",
+    "tests/rx/observable/properties-observable/test-properties-observable.component.js",
+    "tests/rx/observable/property-observable/test-property-observable.component.js",
+    "tests/rx/observable/view-child-observable/test-view-child-observable-shadow-dom.component.js",
+    "tests/rx/operator/schedule-render/test-schedule-render.component.js",
+    "tests/rx/operator/while-connected/test-while-connected.component.js"
   ],
+  "mixins": [],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.43.1",
+    "version": "4.45.0",
     "typescriptVersion": "5.8.3"
   },
   "collections": [],

package/dist/collection/components/async/async.js

@@ -1,13 +1,18 @@
 import { h, Host, } from "@stencil/core";
 import { from, isObservable, of, switchMap, } from "rxjs";
-import { propertyObservable, setProperty, } from "../../rx";
+import { propertyObservable, setProperty, untilDisconnected, } from "../../rx";
 export class Async {
     constructor() {
         this.value = null;
+        this.transform = (value) => value;
         this._value = null;
     }
+    /**
+     * {@inheritdoc}
+     */
     connectedCallback() {
-        propertyObservable(this, 'value').pipe(switchMap((value) => {
+        propertyObservable(this, 'value')
+            .pipe(switchMap((value) => {
             if (isObservable(value)) {
                 return value;
             }
@@ -15,16 +20,14 @@ export class Async {
                 return from(value);
             }
             return of(value);
-        })).subscribe(setProperty(this, '_value', {
-            scheduleRender: true,
-            nextTick: false,
-        }));
-    }
-    disconnectedCallback() {
-        // noop
+        }), untilDisconnected(this))
+            .subscribe(setProperty(this, '_value'));
     }
+    /**
+     * {@inheritdoc}
+     */
     render() {
-        return (h(Host, { key: '83bc02eb1171d43e61d25232a0bc1ad024294e68' }, this._value));
+        return (h(Host, { key: 'f59ccdf7defbbb0d9d3b87bc20e3edaae9a2513b' }, this.transform(this._value)));
     }
     static get is() { return "rx-async"; }
     static get originalStyleUrls() {
@@ -62,7 +65,36 @@ export class Async {
                 "getter": false,
                 "setter": false,
                 "defaultValue": "null"
+            },
+            "transform": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "ValueTransformFn",
+                    "resolved": "unknown",
+                    "references": {
+                        "ValueTransformFn": {
+                            "location": "local",
+                            "path": "/Users/thecelavi/Sites/RunOpenCode/stencil-libs/rx-stencil/src/components/async/async.tsx",
+                            "id": "src/components/async/async.tsx::ValueTransformFn"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "defaultValue": "(value: unknown | null | undefined): any => value"
             }
         };
     }
+    static get states() {
+        return {
+            "_value": {}
+        };
+    }
 }

package/dist/collection/components/index.js

@@ -1 +1 @@
-export { Async, } from './async/async';
+export * from './async/async';

package/dist/collection/rx/decorator/content-child.js

@@ -0,0 +1,34 @@
+import { Build, getElement, } from "@stencil/core";
+import { applyOperators } from "../../utils/decorator";
+import { getRegistry, } from "../../utils/values-registry";
+import { contentChildObservable } from "../observable/content-child-observable";
+export function ContentChild(selector, options) {
+    return function (cmp, property) {
+        let connectedCallback = cmp.connectedCallback;
+        cmp.connectedCallback = function () {
+            this[property]; // Access the property to initialize it and set up the observable.
+            connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        let descriptor = Object.getOwnPropertyDescriptor(cmp.prototype, property) || {
+            configurable: true,
+            enumerable: true,
+        };
+        delete descriptor['value'];
+        delete descriptor['writable'];
+        Object.defineProperty(cmp, property, Object.assign(Object.assign({}, descriptor), { set(_value) {
+                if (Build.isDev) {
+                    console.warn(`@ContentChild property "${property}" is read-only and cannot be set.`);
+                }
+            },
+            get() {
+                let element = getElement(this);
+                let registry = getRegistry('@ContentChild');
+                if (!registry.has(element, property)) {
+                    let observable = contentChildObservable(this, selector, options);
+                    observable = applyOperators(observable, this, options);
+                    registry.set(element, property, observable);
+                }
+                return registry.value(element, property);
+            } }));
+    };
+}

package/dist/collection/rx/decorator/content-children.js

@@ -0,0 +1,34 @@
+import { Build, getElement, } from "@stencil/core";
+import { applyOperators } from "../../utils/decorator";
+import { getRegistry, } from "../../utils/values-registry";
+import { contentChildrenObservable } from "../observable/content-children-observable";
+export function ContentChildren(selector, options) {
+    return function (cmp, property) {
+        let connectedCallback = cmp.connectedCallback;
+        cmp.connectedCallback = function () {
+            this[property]; // Access the property to initialize it and set up the observable.
+            connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        let descriptor = Object.getOwnPropertyDescriptor(cmp.prototype, property) || {
+            configurable: true,
+            enumerable: true,
+        };
+        delete descriptor['value'];
+        delete descriptor['writable'];
+        Object.defineProperty(cmp, property, Object.assign(Object.assign({}, descriptor), { set(_value) {
+                if (Build.isDev) {
+                    console.warn(`@ContentChildren property "${property}" is read-only and cannot be set.`);
+                }
+            },
+            get() {
+                let element = getElement(cmp);
+                let registry = getRegistry('@ContentChildren');
+                if (!registry.has(element, property)) {
+                    let observable = contentChildrenObservable(this, selector, options);
+                    observable = applyOperators(observable, this, options);
+                    registry.set(element, property, observable);
+                }
+                return registry.value(element, property);
+            } }));
+    };
+}

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

@@ -1,2 +1,6 @@
-export { QuerySelector, } from './query-selector';
-export { QuerySelectorAll, } from './query-selector-all';
+export * from './content-child';
+export * from './content-children';
+export * from './query-selector';
+export * from './query-selector-all';
+export * from './view-child';
+export * from './view-children';

package/dist/collection/rx/decorator/query-selector-all.js

@@ -1,40 +1,8 @@
-import { getElement, } from "@stencil/core";
-import { distinctUntilChanged, map, shareReplay, startWith, } from "rxjs";
-import { renderObservable } from "../observable";
-import { observeSubNodes } from "./query-selector";
-/**
- * Property decorator inspired by Angular's @ViewChild/@ContentChild.
- *
- * After each render, the decorated property will be set to the first element
- * matching the given selector. If no element is found, the property will be
- * set to null.
- */
+import { ContentChildren, } from "./content-children";
+import { ViewChildren, } from "./view-children";
 export function QuerySelectorAll(selector, options) {
-    return (target, property) => {
-        let descriptor = {
-            set: function () {
-                throw new Error(`Property "${property}" is read-only.`);
-            },
-            get: function () {
-                let observableProperty = `__rx__query_selector_all__observable__shadow_root__${(options === null || options === void 0 ? void 0 : options.shadowRoot) ? 'yes' : 'no'}__mutation_observer__${(options === null || options === void 0 ? void 0 : options.mutationObserver) ? 'yes' : 'no'}__selector__${selector}__`;
-                if (!this[observableProperty]) {
-                    let root = (options === null || options === void 0 ? void 0 : options.shadowRoot) ? getElement(this).shadowRoot : getElement(this);
-                    let observable = (options === null || options === void 0 ? void 0 : options.mutationObserver) ? observeSubNodes(root) : renderObservable(this);
-                    this[observableProperty] = observable.pipe(startWith(), map(() => Array.from(root.querySelectorAll(selector))), distinctUntilChanged((previous, current) => {
-                        if (previous.length !== current.length) {
-                            return false;
-                        }
-                        for (let i = 0; i < previous.length; i++) {
-                            if (previous[i] !== current[i]) {
-                                return false;
-                            }
-                        }
-                        return true;
-                    }), shareReplay(1));
-                }
-                return this[observableProperty];
-            },
-        };
-        Object.defineProperty(target, property, descriptor);
-    };
+    if ('content' === (options === null || options === void 0 ? void 0 : options.target)) {
+        return ContentChildren(selector, options);
+    }
+    return ViewChildren(selector, options);
 }

package/dist/collection/rx/decorator/query-selector.js

@@ -1,53 +1,8 @@
-import { getElement, } from "@stencil/core";
-import { distinctUntilChanged, filter, map, shareReplay, startWith, } from "rxjs";
-import { mutationObservable, renderObservable, } from "../observable";
-/**
- * Observe all sub nodes of the given node and notify
- * when any of them is removed and/or added.
- *
- * {@internal}
- */
-export function observeSubNodes(target) {
-    return mutationObservable(target, {
-        subtree: true,
-        childList: true,
-    }).pipe(filter((records) => {
-        for (let i = 0; i < records.length; i++) {
-            if ('childList' !== records[i].type) {
-                continue;
-            }
-            if (records[i].addedNodes.length || records[i].removedNodes.length) {
-                return true;
-            }
-        }
-        return false;
-    }), map(() => {
-        /* noop */
-    }));
-}
-/**
- * Property decorator inspired by Angular's @ViewChild/@ContentChild.
- *
- * After each render, the decorated property will be set to the first element
- * matching the given selector. If no element is found, the property will be
- * set to null.
- */
+import { ContentChild, } from "./content-child";
+import { ViewChild, } from "./view-child";
 export function QuerySelector(selector, options) {
-    return (target, property) => {
-        let descriptor = {
-            set: function () {
-                throw new Error(`Property "${property}" is read-only.`);
-            },
-            get: function () {
-                let observableProperty = `__rx__query_selector__observable__shadow_root__${(options === null || options === void 0 ? void 0 : options.shadowRoot) ? 'yes' : 'no'}__mutation_observer__${(options === null || options === void 0 ? void 0 : options.mutationObserver) ? 'yes' : 'no'}__selector__${selector}__`;
-                if (!this[observableProperty]) {
-                    let root = (options === null || options === void 0 ? void 0 : options.shadowRoot) ? getElement(this).shadowRoot : getElement(this);
-                    let observable = (options === null || options === void 0 ? void 0 : options.mutationObserver) ? observeSubNodes(root) : renderObservable(this);
-                    this[observableProperty] = observable.pipe(startWith(), map(() => root.querySelector(selector)), distinctUntilChanged(), shareReplay(1));
-                }
-                return this[observableProperty];
-            },
-        };
-        Object.defineProperty(target, property, descriptor);
-    };
+    if ('content' === (options === null || options === void 0 ? void 0 : options.target)) {
+        return ContentChild(selector, options);
+    }
+    return ViewChild(selector, options);
 }

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

@@ -0,0 +1,34 @@
+import { Build, getElement, } from "@stencil/core";
+import { applyOperators } from "../../utils/decorator";
+import { getRegistry, } from "../../utils/values-registry";
+import { viewChildObservable, } from "../observable/view-child-observable";
+export function ViewChild(selector, options) {
+    return function (cmp, property) {
+        let connectedCallback = cmp.connectedCallback;
+        cmp.connectedCallback = function () {
+            this[property]; // Access the property to initialize it and set up the observable.
+            connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        let descriptor = Object.getOwnPropertyDescriptor(cmp.prototype, property) || {
+            configurable: true,
+            enumerable: true,
+        };
+        delete descriptor['value'];
+        delete descriptor['writable'];
+        Object.defineProperty(cmp, property, Object.assign(Object.assign({}, descriptor), { set(_value) {
+                if (Build.isDev) {
+                    console.warn(`@ViewChild property "${property}" is read-only and cannot be set.`);
+                }
+            },
+            get() {
+                let element = getElement(this);
+                let registry = getRegistry('@ViewChild');
+                if (!registry.has(element, property)) {
+                    let observable = viewChildObservable(this, selector, options);
+                    observable = applyOperators(observable, this, options);
+                    registry.set(element, property, observable);
+                }
+                return registry.value(element, property);
+            } }));
+    };
+}

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

@@ -0,0 +1,34 @@
+import { Build, getElement, } from "@stencil/core";
+import { applyOperators } from "../../utils/decorator";
+import { getRegistry, } from "../../utils/values-registry";
+import { viewChildrenObservable } from "../observable/view-children-observable";
+export function ViewChildren(selector, options) {
+    return function (cmp, property) {
+        let connectedCallback = cmp.connectedCallback;
+        cmp.connectedCallback = function () {
+            this[property]; // Access the property to initialize it and set up the observable.
+            connectedCallback === null || connectedCallback === void 0 ? void 0 : connectedCallback.call(this);
+        };
+        let descriptor = Object.getOwnPropertyDescriptor(cmp.prototype, property) || {
+            configurable: true,
+            enumerable: true,
+        };
+        delete descriptor['value'];
+        delete descriptor['writable'];
+        Object.defineProperty(cmp, property, Object.assign(Object.assign({}, descriptor), { set(_value) {
+                if (Build.isDev) {
+                    console.warn(`@ViewChildren property "${property}" is read-only and cannot be set.`);
+                }
+            },
+            get() {
+                let element = getElement(cmp);
+                let registry = getRegistry('@ViewChildren');
+                if (!registry.has(element, property)) {
+                    let observable = viewChildrenObservable(this, selector, options);
+                    observable = applyOperators(observable, this, options);
+                    registry.set(element, property, observable);
+                }
+                return registry.value(element, property);
+            } }));
+    };
+}

package/dist/collection/rx/index.js

@@ -2,3 +2,4 @@ export * from './decorator';
 export * from './observable';
 export * from './operator';
 export * from './subscriber';
+export * from './types';

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

@@ -0,0 +1,27 @@
+import { getElement, } from "@stencil/core";
+import { BehaviorSubject, } from "rxjs";
+let observables = new WeakMap();
+/**
+ * Returns an observable that emits `true` when the component is connected to DOM,
+ * and `false` when it is disconnected from DOM.
+ *
+ * Uses hot observable pattern.
+ */
+export function connectedObservable(cmp) {
+    let element = getElement(cmp);
+    if (!observables.has(element)) {
+        let previousConnected = cmp.connectedCallback;
+        let previousDisconnected = cmp.disconnectedCallback;
+        let observable = new BehaviorSubject(element.isConnected);
+        cmp.connectedCallback = function () {
+            previousConnected === null || previousConnected === void 0 ? void 0 : previousConnected.call(this);
+            observable.next(true);
+        };
+        cmp.disconnectedCallback = function () {
+            previousDisconnected === null || previousDisconnected === void 0 ? void 0 : previousDisconnected.call(this);
+            observable.next(false);
+        };
+        observables.set(element, observable.asObservable());
+    }
+    return observables.get(element);
+}

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

@@ -0,0 +1,24 @@
+import { getElement, } from "@stencil/core";
+import { map, startWith, } from "rxjs";
+import { isEmulatedViewChild, usesShadowDom, } from "../../utils/stencil";
+import { distinctUntilElementChanged, observeSubtree, } from "../../utils/rxjs";
+export function contentChildObservable(cmp, selector, options) {
+    let element = getElement(cmp);
+    let mutations = observeSubtree(element).pipe(map(() => void 0), startWith(void 0));
+    options = Object.assign({ distinct: true }, options);
+    // In shadow DOM, we can just listen for the mutations and query the element directly.
+    if (usesShadowDom(cmp)) {
+        return mutations.pipe(map(() => element.querySelector(selector)), distinctUntilElementChanged(options.distinct));
+    }
+    // When shadow DOM is emulated, we need to filter out elements that are part of the emulated view child.
+    return mutations.pipe(map(() => {
+        let candidates = Array.from(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/content-children-observable.js

@@ -0,0 +1,15 @@
+import { getElement, } from "@stencil/core";
+import { map, startWith, } from "rxjs";
+import { isEmulatedViewChild, usesShadowDom, } from "../../utils/stencil";
+import { distinctUntilElementsChanged, observeSubtree, } from "../../utils/rxjs";
+export function contentChildrenObservable(cmp, selector, options) {
+    let element = getElement(cmp);
+    let mutations = observeSubtree(element).pipe(map(() => void 0), startWith(void 0));
+    options = Object.assign({ distinct: true }, options);
+    // In shadow DOM, we can just listen for the mutations and query the element directly.
+    if (usesShadowDom(cmp)) {
+        return mutations.pipe(map(() => Array.from(element.querySelectorAll(selector))), distinctUntilElementsChanged(options.distinct));
+    }
+    // When shadow DOM is emulated, we need to filter out elements that are part of the emulated view child.
+    return mutations.pipe(map(() => Array.from(element.querySelectorAll(selector)).filter((candidate) => !isEmulatedViewChild(candidate, element))), distinctUntilElementsChanged(options.distinct));
+}

package/dist/collection/rx/observable/from-event.js

@@ -0,0 +1,26 @@
+import { getElement, } from "@stencil/core";
+import { Observable, } from "rxjs";
+export function fromEvent(cmp, eventName, delegateOrOptions, options) {
+    let element = getElement(cmp);
+    let delegate = 'string' === typeof delegateOrOptions ? delegateOrOptions : undefined;
+    let configuration = 'object' === typeof delegateOrOptions ? delegateOrOptions : options;
+    return new Observable((subscriber) => {
+        let handler = (event) => {
+            if (!delegate) {
+                subscriber.next(event);
+                return;
+            }
+            if (!(event.target instanceof Element)) {
+                return;
+            }
+            if (!event.target.closest(delegate)) {
+                return;
+            }
+            subscriber.next(event);
+        };
+        element.addEventListener(eventName, handler, configuration);
+        return () => {
+            element.removeEventListener(eventName, handler, configuration);
+        };
+    });
+}

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

@@ -1,4 +1,9 @@
-export { mutationObservable } from './mutation-observable';
-export { propertyObservable } from './property-observable';
-export { propertiesObservable } from './properties-observable';
-export { renderObservable } from './render-observable';
+export * from './content-child-observable';
+export * from './content-children-observable';
+export * from './from-event';
+export * from './mutation-observable';
+export * from './properties-observable';
+export * from './property-observable';
+export * from './render-observable';
+export * from './view-child-observable';
+export * from './view-children-observable';

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

@@ -1,4 +1,10 @@
 import { Observable, } from "rxjs";
+/**
+ * Create mutation observer and return observable that emits mutation records when the target node is mutated.
+ *
+ * @param {Node} target The target node to observe for mutations.
+ * @param {MutationObserverInit} options The options for the mutation observer.
+ */
 export function mutationObservable(target, options) {
     return new Observable((observer) => {
         let mutation = new MutationObserver((mutations) => {

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

@@ -2,6 +2,11 @@ import { combineLatest, } from "rxjs";
 import { propertyObservable } from "./property-observable";
 /**
  * Returns an observable that emits an array of values from the given properties.
+ *
+ * It always emits an array of values, even if only one property is specified. The order
+ * of the values in the emitted array corresponds to the order of the properties specified.
+ *
+ * Do note that `combineLatest()` operator is used to combine the observables.
  */
 export function propertiesObservable(cmp, ...properties) {
     if (0 === properties.length) {

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

@@ -1,27 +1,82 @@
+import { getElement, } from "@stencil/core";
+import { BUILD } from "@stencil/core/internal/app-data";
 import { BehaviorSubject, distinctUntilChanged, } from "rxjs";
-import { getPropertyDescriptor } from "../../utils";
+import { getHostRef, isPropOrState, } from "../../utils";
+/**
+ * A WeakMap to store BehaviorSubjects for each component property.
+ *
+ * The key is the HTMLElement (component instance), and the value is a record of property names to BehaviorSubjects.
+ *
+ * @internal
+ */
+let subjects = new WeakMap();
+/**
+ * The name of the watcher callback function that will be registered on the component instance.
+ */
+const WATCHER_CALLBACK_NAME = '__runopencode_rx_stencil_watcher';
 /**
  * Returns an observable that emits property value when the component property value changes.
  */
 export function propertyObservable(cmp, property) {
-    let subjectProperty = `__rx__subject_for_property__${property}__`;
-    if (!cmp[subjectProperty]) {
-        let descriptor = getPropertyDescriptor(cmp, property);
-        let previousSetter = descriptor.set;
-        let previousGetter = descriptor.get;
-        // we have to invoke previous getter on component instance to get the current value
-        let currentValue = undefined !== previousGetter ? previousGetter.call(cmp) : descriptor.value;
-        let subject = new BehaviorSubject(currentValue);
-        descriptor.set = function (value) {
-            if (previousSetter) {
-                previousSetter.call(this, value);
-            }
-            subject.next(value);
+    let element = getElement(cmp);
+    let initialize = false;
+    if (!subjects.has(element)) {
+        subjects.set(element, {});
+    }
+    if (!subjects.get(element)[property]) {
+        subjects.get(element)[property] = new BehaviorSubject(cmp[property]);
+        initialize = true;
+    }
+    if (!initialize) {
+        return subjects.get(element)[property]
+            .asObservable()
+            .pipe(distinctUntilChanged());
+    }
+    let subject = subjects.get(element)[property];
+    let isMember = isPropOrState(cmp, property);
+    // If the property is not a member of the component (not decorated with @Prop or @State), 
+    // we can watch it by modifying the property descriptor directly.
+    if (!isMember) {
+        let descriptor = Object.getOwnPropertyDescriptor(cmp, property);
+        Object.defineProperty(cmp, property, {
+            get() {
+                return subject.value;
+            },
+            set(value) {
+                subject.next(value);
+                if (descriptor && descriptor.set) {
+                    descriptor.set.call(this, value);
+                }
+            },
+            configurable: true,
+            enumerable: true,
+        });
+        return subject
+            .asObservable()
+            .pipe(distinctUntilChanged());
+    }
+    let hostRef = getHostRef(cmp);
+    // If callback function is not registered on the component, we need to register it and ensure that some of the
+    // stencil internal flags are set to ensure that the callback will be called when the property changes.
+    if (!cmp[WATCHER_CALLBACK_NAME]) {
+        // This flag ensures that Stencil will call the prop change callback when the property changes.
+        BUILD.propChangeCallback = true;
+        // $flags$ needs to include 128 (0x80) to indicate that the component has watchers.
+        hostRef.$flags$ |= 128;
+        // $watchers$ object needs to exist so we can add them for property.
+        hostRef.$cmpMeta$.$watchers$ = hostRef.$cmpMeta$.$watchers$ || {};
+        // Finally, we need to register the watcher callback function on the component instance.
+        cmp[WATCHER_CALLBACK_NAME] = function (current, _previous, property) {
+            let element = getElement(this);
+            let subject = subjects.get(element)[property];
+            subject.next(current);
         };
-        Object.defineProperty(cmp, property, descriptor);
-        cmp[subjectProperty] = subject;
     }
-    return cmp[subjectProperty]
+    hostRef.$cmpMeta$.$watchers$[property] = hostRef.$cmpMeta$.$watchers$[property] || [];
+    hostRef.$cmpMeta$.$watchers$[property].push({
+        [WATCHER_CALLBACK_NAME]: 0,
+    });
+    return subject
         .asObservable()
         .pipe(distinctUntilChanged());
 }