@runopencode/rx-stencil 0.4.3 → 0.5.0

package/dist/cjs/loader.cjs.js

@@ -1,12 +1,12 @@
 'use strict';
 
-var index = require('./index-CbERigo8.js');
+var index = require('./index-DWhjpI-K.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["rx-async.cjs",[[0,"rx-async",{"value":[16]}]]]], options);
+  return index.bootstrapLazy([["rx-async.cjs",[[0,"rx-async",{"value":[16],"transform":[16],"_value":[32]}]]],["test-properties-observable.cjs",[[0,"test-properties-observable",{"foo":[1],"bar":[1],"baz":[1],"_value":[32]}]]],["test-property-observable.cjs",[[0,"test-property-observable",{"setValue":[64]}]]],["test-schedule-render.cjs",[[0,"test-schedule-render",{"increase":[64]}]]],["test-view-child-observable-shadow-dom.cjs",[[257,"test-view-child-observable-shadow-dom",{"which":[1],"getLog":[64],"clearLog":[64]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

package/dist/cjs/mutation-observable-qY7nC854.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var index$1 = require('./index-DWhjpI-K.js');
+var index = require('./index-Dssn3hdS.js');
+var stencil = require('./stencil-uD4ZIy1h.js');
+
+/**
+ * Returns an RxJS operator that emits only when the element changes, based on the provided comparator function.
+ *
+ * If boolean `true` is provided, the default comparator function will be used, which compares the elements by reference.
+ *
+ * If falsy value is provided, the operator will emit every time the source observable emits.
+ *
+ * @internal
+ */
+function distinctUntilElementChanged(comparator) {
+    if (!comparator) {
+        return index.cjsExports.identity;
+    }
+    if ('function' === typeof comparator) {
+        return index.cjsExports.distinctUntilChanged(comparator);
+    }
+    return index.cjsExports.distinctUntilChanged();
+}
+/**
+ * Returns an RxJS operator that emits only when the array of elements changes, based on the provided comparator function.
+ *
+ * If boolean `true` is provided, the default comparator function will be used, which compares the elements by reference.
+ *
+ * If falsy value is provided, the operator will emit every time the source observable emits.
+ *
+ * @internal
+ */
+function distinctUntilElementsChanged(comparator) {
+    if (!comparator) {
+        return index.cjsExports.identity;
+    }
+    // If the comparator is a function, use it to compare elements. Otherwise, use the default comparator that compares elements by reference.
+    let cmpFn = 'function' === typeof comparator ? comparator : (previous, current) => previous === current;
+    return index.cjsExports.distinctUntilChanged((previous, current) => {
+        var _a;
+        if (previous.length !== current.length) {
+            return false;
+        }
+        return (_a = previous === null || previous === void 0 ? void 0 : previous.every((item, index) => cmpFn(item, current[index]))) !== null && _a !== void 0 ? _a : false;
+    });
+}
+/**
+ * Observe the subtree of an element for mutations.
+ *
+ * This function returns an observable that emits an array of MutationRecords whenever a mutation occurs
+ * in the subtree of the specified element.
+ *
+ * @internal
+ */
+function observeSubtree(element) {
+    return mutationObservable(element, {
+        childList: true,
+        subtree: true,
+    }).pipe(index.cjsExports.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;
+    }));
+}
+
+let observables = new WeakMap();
+/**
+ * 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.
+ */
+function renderObservable(cmp) {
+    if ('function' !== typeof cmp.render) {
+        throw new Error(`Component "${stencil.getComponentTagName(cmp)}" does not have a render function.`);
+    }
+    let element = index$1.getElement(cmp);
+    if (!observables.has(element)) {
+        let previousRender = cmp.render;
+        let subject = new index.cjsExports.Subject();
+        cmp.render = function () {
+            Promise.resolve().then(() => {
+                subject.next();
+            });
+            return previousRender.call(this);
+        };
+        observables.set(element, subject.asObservable());
+    }
+    return observables.get(element).pipe(stencil.isRendered(cmp) ? index.cjsExports.startWith(() => void 0) : index.cjsExports.identity);
+}
+
+function viewChildObservable(cmp, selector, options) {
+    let element = index$1.getElement(cmp);
+    let hostRef = stencil.getHostRef(cmp);
+    let rendered = renderObservable(cmp);
+    options = Object.assign({ distinct: true }, options);
+    if ((hostRef.$renderCount$ || 0) > 0) {
+        rendered = rendered.pipe(index.cjsExports.startWith(void 0));
+    }
+    // In shadow DOM, this is quite cheap, we can query only shadow DOM and skip the light DOM.
+    if (stencil.usesShadowDom(cmp)) {
+        return rendered.pipe(index.cjsExports.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(index.cjsExports.map(() => {
+        let candidates = element.querySelectorAll(selector);
+        for (let i = 0; i < candidates.length; i++) {
+            let candidate = candidates[i];
+            if (stencil.isEmulatedViewChild(candidate, element)) {
+                return candidate;
+            }
+        }
+        return null;
+    }), distinctUntilElementChanged(options.distinct));
+}
+
+/**
+ * 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.
+ */
+function mutationObservable(target, options) {
+    return new index.cjsExports.Observable((observer) => {
+        let mutation = new MutationObserver((mutations) => {
+            observer.next(mutations);
+        });
+        mutation.observe(target, options);
+        return () => {
+            mutation.disconnect();
+        };
+    });
+}
+
+exports.distinctUntilElementChanged = distinctUntilElementChanged;
+exports.distinctUntilElementsChanged = distinctUntilElementsChanged;
+exports.mutationObservable = mutationObservable;
+exports.observeSubtree = observeSubtree;
+exports.renderObservable = renderObservable;
+exports.viewChildObservable = viewChildObservable;

package/dist/cjs/properties-observable-DXbVBslA.js

@@ -0,0 +1,23 @@
+'use strict';
+
+var index = require('./index-Dssn3hdS.js');
+var propertyObservable = require('./property-observable-CPp5WEjC.js');
+
+/**
+ * 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.
+ */
+function propertiesObservable(cmp, ...properties) {
+    if (0 === properties.length) {
+        throw new Error('At least one property must be specified.');
+    }
+    return index.cjsExports.combineLatest(properties.map((property) => {
+        return propertyObservable.propertyObservable(cmp, property);
+    }));
+}
+
+exports.propertiesObservable = propertiesObservable;

package/dist/cjs/property-observable-CPp5WEjC.js

@@ -0,0 +1,86 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var index$1 = require('./index-Dssn3hdS.js');
+var stencil = require('./stencil-uD4ZIy1h.js');
+
+/**
+ * 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.
+ */
+function propertyObservable(cmp, property) {
+    let element = index.getElement(cmp);
+    let initialize = false;
+    if (!subjects.has(element)) {
+        subjects.set(element, {});
+    }
+    if (!subjects.get(element)[property]) {
+        subjects.get(element)[property] = new index$1.cjsExports.BehaviorSubject(cmp[property]);
+        initialize = true;
+    }
+    if (!initialize) {
+        return subjects.get(element)[property]
+            .asObservable()
+            .pipe(index$1.cjsExports.distinctUntilChanged());
+    }
+    let subject = subjects.get(element)[property];
+    let isMember = stencil.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(index$1.cjsExports.distinctUntilChanged());
+    }
+    let hostRef = stencil.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.
+        index.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 = index.getElement(this);
+            let subject = subjects.get(element)[property];
+            subject.next(current);
+        };
+    }
+    hostRef.$cmpMeta$.$watchers$[property] = hostRef.$cmpMeta$.$watchers$[property] || [];
+    hostRef.$cmpMeta$.$watchers$[property].push({
+        [WATCHER_CALLBACK_NAME]: 0,
+    });
+    return subject
+        .asObservable()
+        .pipe(index$1.cjsExports.distinctUntilChanged());
+}
+
+exports.propertyObservable = propertyObservable;

package/dist/cjs/rx-async.cjs.entry.js

@@ -1,7 +1,11 @@
 'use strict';
 
-var index = require('./index-CbERigo8.js');
-var setProperty = require('./set-property-BZHuI0P5.js');
+var index = require('./index-DWhjpI-K.js');
+var index$1 = require('./index-Dssn3hdS.js');
+var propertyObservable = require('./property-observable-CPp5WEjC.js');
+var untilDisconnected = require('./until-disconnected-BTCr-3q2.js');
+var setProperty = require('./set-property-C3KARzdl.js');
+require('./stencil-uD4ZIy1h.js');
 
 const asyncCss = () => `:host{display:inline-block}`;
 
@@ -9,27 +13,30 @@ const Async = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.value = null;
+        this.transform = (value) => value;
         this._value = null;
     }
+    /**
+     * {@inheritdoc}
+     */
     connectedCallback() {
-        setProperty.propertyObservable(this, 'value').pipe(setProperty.cjsExports.switchMap((value) => {
-            if (setProperty.cjsExports.isObservable(value)) {
+        propertyObservable.propertyObservable(this, 'value')
+            .pipe(index$1.cjsExports.switchMap((value) => {
+            if (index$1.cjsExports.isObservable(value)) {
                 return value;
             }
             if (value instanceof Promise) {
-                return setProperty.cjsExports.from(value);
+                return index$1.cjsExports.from(value);
             }
-            return setProperty.cjsExports.of(value);
-        })).subscribe(setProperty.setProperty(this, '_value', {
-            scheduleRender: true,
-            nextTick: false,
-        }));
-    }
-    disconnectedCallback() {
-        // noop
+            return index$1.cjsExports.of(value);
+        }), untilDisconnected.untilDisconnected(this))
+            .subscribe(setProperty.setProperty(this, '_value'));
     }
+    /**
+     * {@inheritdoc}
+     */
     render() {
-        return (index.h(index.Host, { key: '83bc02eb1171d43e61d25232a0bc1ad024294e68' }, this._value));
+        return (index.h(index.Host, { key: 'f59ccdf7defbbb0d9d3b87bc20e3edaae9a2513b' }, this.transform(this._value)));
     }
 };
 Async.style = asyncCss();

package/dist/cjs/rx-stencil.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-CbERigo8.js');
+var index = require('./index-DWhjpI-K.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.43.1 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.45.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["rx-async.cjs",[[0,"rx-async",{"value":[16]}]]]], options);
+  return index.bootstrapLazy([["rx-async.cjs",[[0,"rx-async",{"value":[16],"transform":[16],"_value":[32]}]]],["test-properties-observable.cjs",[[0,"test-properties-observable",{"foo":[1],"bar":[1],"baz":[1],"_value":[32]}]]],["test-property-observable.cjs",[[0,"test-property-observable",{"setValue":[64]}]]],["test-schedule-render.cjs",[[0,"test-schedule-render",{"increase":[64]}]]],["test-view-child-observable-shadow-dom.cjs",[[257,"test-view-child-observable-shadow-dom",{"which":[1],"getLog":[64],"clearLog":[64]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/schedule-render-DG4hFv5E.js

@@ -0,0 +1,53 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var index$1 = require('./index-Dssn3hdS.js');
+
+function fromEvent(cmp, eventName, delegateOrOptions, options) {
+    let element = index.getElement(cmp);
+    let delegate = 'string' === typeof delegateOrOptions ? delegateOrOptions : undefined;
+    let configuration = 'object' === typeof delegateOrOptions ? delegateOrOptions : options;
+    return new index$1.cjsExports.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);
+        };
+    });
+}
+
+/**
+ * Schedule a render of the component. This is useful when you
+ * want to force a render of the component as result of changing
+ * the values of the component which are not tracked by Stencil,
+ * observables, for example.
+ *
+ * By default, the render is scheduled on the next tick, but you
+ * can disable this behavior by passing `false` as second argument.
+ */
+function scheduleRender(cmp, nextTick = true) {
+    return (source) => {
+        return source.pipe(index$1.cjsExports.tap(() => {
+            if (!nextTick) {
+                index.forceUpdate(cmp);
+                return;
+            }
+            Promise.resolve().then(() => index.forceUpdate(cmp));
+        }));
+    };
+}
+
+exports.fromEvent = fromEvent;
+exports.scheduleRender = scheduleRender;

package/dist/cjs/set-property-C3KARzdl.js

@@ -0,0 +1,33 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+
+/**
+ * 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.
+ */
+function setProperty(cmp, property, options = {}) {
+    let resolvedOptions = Object.assign({ scheduleRender: false, nextTick: true }, options);
+    return (value) => {
+        cmp[property] = value;
+        if (!resolvedOptions.scheduleRender) {
+            return;
+        }
+        if (!resolvedOptions.nextTick) {
+            index.forceUpdate(cmp);
+            return;
+        }
+        Promise.resolve().then(() => index.forceUpdate(cmp));
+    };
+}
+
+exports.setProperty = setProperty;

package/dist/cjs/stencil-uD4ZIy1h.js

@@ -0,0 +1,75 @@
+'use strict';
+
+/**
+ * Get the host reference of a component.
+ *
+ * This is useful for accessing the underlying DOM element of a Stencil component.
+ *
+ * @internal
+ */
+function getHostRef(cmp) {
+    return cmp.__stencil__getHostRef();
+}
+/**
+ * Check if a property is defined as a member of the component with @State or @Prop decorator.
+ *
+ * @internal
+ */
+function isPropOrState(cmp, property) {
+    let hostRef = getHostRef(cmp);
+    return !!hostRef.$cmpMeta$.$members$[property];
+}
+/**
+ * Check if a component uses Shadow DOM.
+ *
+ * @internal
+ */
+function usesShadowDom(cmp) {
+    let hostRef = getHostRef(cmp);
+    let flags = hostRef.$cmpMeta$.$flags$;
+    return (flags & (1 << 0)) !== 0;
+}
+/**
+ * Check if a node is an emulated view child node.
+ *
+ * We are checking if node is a child node of the component which is not
+ * in emulated slot.
+ *
+ * @internal
+ */
+function isEmulatedViewChild(node, element) {
+    // If the node has the 's-ol' property, it is not an emulated content child.
+    if ('s-ol' in node) {
+        return false;
+    }
+    // If it is direct child of the component, it is not an emulated content child.
+    if (node.parentElement === element) {
+        return false;
+    }
+    return isEmulatedViewChild(node.parentElement, element);
+}
+/**
+ * Get the tag name of a component.
+ *
+ * @internal
+ */
+function getComponentTagName(cmp) {
+    let hostRef = getHostRef(cmp);
+    return hostRef.$cmpMeta$.$tagName$;
+}
+/**
+ * Check if a component has been rendered at least once.
+ *
+ * @internal
+ */
+function isRendered(cmp) {
+    let hostRef = getHostRef(cmp);
+    return (hostRef.$renderCount$ || 0) > 0;
+}
+
+exports.getComponentTagName = getComponentTagName;
+exports.getHostRef = getHostRef;
+exports.isEmulatedViewChild = isEmulatedViewChild;
+exports.isPropOrState = isPropOrState;
+exports.isRendered = isRendered;
+exports.usesShadowDom = usesShadowDom;

package/dist/cjs/test-properties-observable.cjs.entry.js

@@ -0,0 +1,27 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var index$1 = require('./index-Dssn3hdS.js');
+var propertiesObservable = require('./properties-observable-DXbVBslA.js');
+var untilDisconnected = require('./until-disconnected-BTCr-3q2.js');
+require('./property-observable-CPp5WEjC.js');
+require('./stencil-uD4ZIy1h.js');
+
+const TestPropertiesObservable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._value = undefined;
+    }
+    connectedCallback() {
+        propertiesObservable.propertiesObservable(this, 'foo', 'bar', 'baz')
+            .pipe(index$1.cjsExports.map(([foo, bar, baz]) => {
+            this._value = `Foo: "${foo}", Bar: "${bar}", Baz: "${baz}"`;
+        }), untilDisconnected.untilDisconnected(this))
+            .subscribe();
+    }
+    render() {
+        return (index.h(index.Host, { key: 'b69107bec9636608215a705991bbbb0bf17ad303' }, this._value));
+    }
+};
+
+exports.test_properties_observable = TestPropertiesObservable;

package/dist/cjs/test-property-observable.cjs.entry.js

@@ -0,0 +1,31 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var propertyObservable = require('./property-observable-CPp5WEjC.js');
+var untilDisconnected = require('./until-disconnected-BTCr-3q2.js');
+var setProperty = require('./set-property-C3KARzdl.js');
+require('./index-Dssn3hdS.js');
+require('./stencil-uD4ZIy1h.js');
+
+const TestPropertyObservable = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        // @ts-ignore
+        this.prop = 'foo';
+    }
+    connectedCallback() {
+        propertyObservable.propertyObservable(this, 'prop')
+            .pipe(untilDisconnected.untilDisconnected(this))
+            .subscribe(setProperty.setProperty(this, 'value', {
+            scheduleRender: true,
+        }));
+    }
+    async setValue(value) {
+        this.prop = value;
+    }
+    render() {
+        return (index.h(index.Host, { key: '092d6fe0477d9ddfc771b152fe132c26e5dc04f0' }, this.value));
+    }
+};
+
+exports.test_property_observable = TestPropertyObservable;

package/dist/cjs/test-schedule-render.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var scheduleRender = require('./schedule-render-DG4hFv5E.js');
+var untilDisconnected = require('./until-disconnected-BTCr-3q2.js');
+require('./index-Dssn3hdS.js');
+
+const TestScheduleRender = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this._counter = 0;
+    }
+    connectedCallback() {
+        scheduleRender.fromEvent(this, 'click')
+            .pipe(scheduleRender.scheduleRender(this), untilDisconnected.untilDisconnected(this))
+            .subscribe(() => {
+            this._counter++;
+        });
+    }
+    async increase() {
+        this._counter++;
+    }
+    render() {
+        return (index.h(index.Host, { key: '66f26c1ef51b9e595d13926b1e46d1c7cb015566' }, this._counter));
+    }
+};
+
+exports.test_schedule_render = TestScheduleRender;

package/dist/cjs/test-view-child-observable-shadow-dom.cjs.entry.js

@@ -0,0 +1,40 @@
+'use strict';
+
+var index = require('./index-DWhjpI-K.js');
+var mutationObservable = require('./mutation-observable-qY7nC854.js');
+require('./index-Dssn3hdS.js');
+require('./stencil-uD4ZIy1h.js');
+
+const TestViewChildObservableShadowDom = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.which = 'all';
+        this._log = [];
+    }
+    async getLog() {
+        return this._log;
+    }
+    async clearLog() {
+        this._log = [];
+    }
+    /**
+     * {@inheritdoc}
+     */
+    connectedCallback() {
+        mutationObservable.viewChildObservable(this, 'div')
+            .subscribe((el) => {
+            this._log.push(`viewChildObservable@connectedCallback: ${el === null || el === void 0 ? void 0 : el.id}`);
+        });
+    }
+    render() {
+        return (index.h(index.Host, { key: '3d253195f6c56cf48990e6daf7dde10971753a74' }, this.which !== 'even'
+            ? (index.h("div", { id: "test-1", class: "odd all", key: "test-1" }, "1"))
+            : null, this.which !== 'odd'
+            ? (index.h("div", { id: "test-2", class: "even all", key: "test-2" }, "2"))
+            : null, this.which !== 'even'
+            ? (index.h("div", { id: "test-3", class: "odd all", key: "test-3" }, "3"))
+            : null, index.h("slot", { key: '141bd2c2626e1b89acc55ee79d7fa89e4b767e52' })));
+    }
+};
+
+exports.test_view_child_observable_shadow_dom = TestViewChildObservableShadowDom;