@fluffjs/fluff 0.2.3 → 0.3.0

package/runtime/tests/TestChildTasksListComponent.js

@@ -17,9 +17,9 @@ export class TestChildTasksListComponent extends FluffElement {
                         <div class="item"></div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'task', iterableExprId: 2, deps: ['tasks'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForComponent.js

@@ -10,9 +10,9 @@ export class TestForComponent extends FluffElement {
                         <test-for-child data-lid="l0"></test-for-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForReinsertBindsInputParentComponent.js

@@ -42,9 +42,9 @@ export class TestForReinsertBindsInputParentComponent extends FluffElement {
                         <div class="empty">empty</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestForTextMarkerCollisionNoTrackParentComponent.js

@@ -17,10 +17,10 @@ export class TestForTextMarkerCollisionNoTrackParentComponent extends FluffEleme
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], hasEmpty: false }],
             [9, { type: 'text', exprId: 1, deps: ['tag'] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForTextMarkerCollisionParentComponent.js

@@ -28,7 +28,7 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], trackBy: 'tag', hasEmpty: false }],
             [
                 9,
@@ -39,7 +39,7 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                     pipes: [{ name: 'lowercase', argExprIds: [] }, { name: 'capitalize', argExprIds: [] }]
                 }
             ]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForUnsubscribeNestedParentComponent.js

@@ -20,9 +20,9 @@ export class TestForUnsubscribeNestedParentComponent extends TestUnsubscribeNest
                         <div class="empty">empty</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestGetterReactivityComponent.js

@@ -16,9 +16,9 @@ export class TestGetterReactivityComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="count"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 0, deps: ['items'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestHarness.d.ts

@@ -0,0 +1,9 @@
+import { type ExpressionFn, type HandlerFn } from '../FluffBase.js';
+export declare class TestHarness {
+    static setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[]): void;
+    static resetExpressionTable(): void;
+    static defineCustomElement(tag: string, ctor: CustomElementConstructor): void;
+    static mount(tag: string): HTMLElement;
+    static tick(count?: number): Promise<void>;
+    static waitForTimeout(): Promise<void>;
+}

package/runtime/tests/TestHarness.js

@@ -0,0 +1,29 @@
+import { FluffBase } from '../FluffBase.js';
+export class TestHarness {
+    static setExpressionTable(expressions, handlers) {
+        FluffBase.__setExpressionTable(expressions, handlers);
+    }
+    static resetExpressionTable() {
+        FluffBase.__setExpressionTable([], []);
+    }
+    static defineCustomElement(tag, ctor) {
+        if (!customElements.get(tag)) {
+            customElements.define(tag, ctor);
+        }
+    }
+    static mount(tag) {
+        const el = document.createElement(tag);
+        document.body.appendChild(el);
+        return el;
+    }
+    static async tick(count = 1) {
+        for (let i = 0; i < count; i++) {
+            await Promise.resolve();
+        }
+    }
+    static async waitForTimeout() {
+        await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+        });
+    }
+}

package/runtime/tests/TestIfReinsertBindsInputChildComponent.js

@@ -28,9 +28,9 @@ export class TestIfReinsertBindsInputChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 2, deps: ['stats'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestIfReinsertBindsInputParentComponent.js

@@ -39,9 +39,9 @@ export class TestIfReinsertBindsInputParentComponent extends FluffElement {
                         <test-if-reinsert-binds-input-child x-fluff-component data-lid="l0"></test-if-reinsert-binds-input-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestIfUnsubscribeNestedParentComponent.js

@@ -17,9 +17,9 @@ export class TestIfUnsubscribeNestedParentComponent extends TestUnsubscribeNeste
                         <test-unsubscribe-nested-child x-fluff-component data-lid="l0"></test-unsubscribe-nested-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -19,9 +19,9 @@ export class TestInterpolationNestedPropertyComponentBase extends FluffElement {
     }
     __render() {
         this.__getShadowRoot().innerHTML = '<!--fluff:text:0--><!--/fluff:text:0-->';
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 0, deps: [['hostClass', 'childProp']], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestLateDefineForComponent.js

@@ -14,9 +14,9 @@ export class TestLateDefineForComponent extends FluffElement {
                         <late-define-for-child x-fluff-component="" data-lid="l0"></late-define-for-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'column', iterableExprId: 0, deps: ['columns'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestNullInputTextComponent.js

@@ -25,10 +25,10 @@ export class TestNullInputTextComponent extends FluffElement {
                     </template>
                     <template data-fluff-branch="test-null-input-text-0-1"></template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['isEditing'] }, { exprId: undefined, deps: [] }] }],
             [1, { type: 'text', exprId: 1, deps: ['task'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestOutputBindingParentComponent.js

@@ -23,9 +23,9 @@ export class TestOutputBindingParentComponent extends FluffElement {
                         <test-output-binding-child x-fluff-component data-lid="l0"></test-output-binding-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'edit', b: 'event', h: 0, d: ['onChildEdit'] }]
         };

package/runtime/tests/TestParentBindsTasksComponent.js

@@ -11,9 +11,9 @@ export class TestParentBindsTasksComponent extends FluffElement {
                         <test-child-tasks-list x-fluff-component="" data-lid="l0"></test-child-tasks-list>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'child', iterableExprId: 0, deps: ['childList'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestSwitchReinsertBindsInputChildComponent.js

@@ -28,9 +28,9 @@ export class TestSwitchReinsertBindsInputChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 4, deps: ['stats'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestSwitchReinsertBindsInputParentComponent.js

@@ -42,7 +42,7 @@ export class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
                         <test-switch-reinsert-binds-input-child x-fluff-component data-lid="l1"></test-switch-reinsert-binds-input-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [
                 0, {
                     type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
@@ -51,7 +51,7 @@ export class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
                     ]
                 }
             ]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }],
             l1: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]

package/runtime/tests/TestSwitchUnsubscribeNestedParentComponent.js

@@ -20,7 +20,7 @@ export class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeN
                         <div class="placeholder">placeholder</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [
                 0, {
                     type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
@@ -29,7 +29,7 @@ export class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeN
                     ]
                 }
             ]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]
         };

package/runtime/tests/TestTemplateNestedMarkersComponent.js

@@ -27,10 +27,10 @@ export class TestTemplateNestedMarkersComponent extends FluffElement {
                         <div class="fallback">Fallback</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }, { exprId: undefined, deps: [] }] }],
             [1, { type: 'text', exprId: 1, deps: ['text'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestUnsubscribeNestedGrandchildComponent.js

@@ -28,9 +28,9 @@ export class TestUnsubscribeNestedGrandchildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 5, deps: ['stats'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/createPipeUnwrapTestComponent.js

@@ -19,9 +19,9 @@ export function createPipeUnwrapTestComponent(state) {
         };
         __render() {
             this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
-            this.__setMarkerConfigs(JSON.stringify([
+            this.__setMarkerConfigs([
                 [0, { type: 'text', exprId: 0, deps: ['testProp'], pipes: [{ name: 'capture', argExprIds: [] }] }]
-            ]));
+            ]);
         }
         __setupBindings() {
             this.__initializeMarkers(MarkerManager);

package/runtime/tests/createPropertyUnwrapNativeTestComponents.d.ts

@@ -0,0 +1,4 @@
+export declare function createClassBindingTestComponent(): CustomElementConstructor;
+export declare function createStyleBindingTestComponent(): CustomElementConstructor;
+export declare function createPropertyBindingTestComponent(): CustomElementConstructor;
+export declare function createAttributeBindingTestComponent(): CustomElementConstructor;

package/runtime/tests/createPropertyUnwrapNativeTestComponents.js

@@ -0,0 +1,23 @@
+import { FluffElement } from '../FluffElement.js';
+function createTestComponent(html) {
+    return class extends FluffElement {
+        __render() {
+            this.__getShadowRoot().innerHTML = html;
+        }
+        __setupBindings() {
+            this.__processBindings();
+        }
+    };
+}
+export function createClassBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}
+export function createStyleBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}
+export function createPropertyBindingTestComponent() {
+    return createTestComponent('<button data-lid="l0">test</button>');
+}
+export function createAttributeBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}

package/runtime/tests/createTestInterpolationPipeComponent.js

@@ -22,9 +22,9 @@ export function createTestInterpolationPipeComponent() {
         };
         __render() {
             this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
-            this.__setMarkerConfigs(JSON.stringify([
+            this.__setMarkerConfigs([
                 [0, { type: 'text', exprId: 0, deps: ['message'], pipes: [{ name: 'uppercase', argExprIds: [] }] }]
-            ]));
+            ]);
         }
         __setupBindings() {
             this.__initializeMarkers(MarkerManager);

package/runtime/tests/createTestInterpolationPipeWithArgsComponent.js

@@ -22,9 +22,9 @@ export function createTestInterpolationPipeWithArgsComponent() {
         };
         __render() {
             this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
-            this.__setMarkerConfigs(JSON.stringify([
+            this.__setMarkerConfigs([
                 [0, { type: 'text', exprId: 0, deps: ['message'], pipes: [{ name: 'truncate', argExprIds: [1] }] }]
-            ]));
+            ]);
         }
         __setupBindings() {
             this.__initializeMarkers(MarkerManager);

package/runtime/tests/typeguards.d.ts

@@ -1,3 +1,4 @@
+import type { Property } from '../../utils/Property.js';
 import type { TestLateDefineForColumn } from './TestLateDefineForComponent.js';
 import type { TestTask } from './TestNullInputTextComponent.js';
 export declare function hasItem(t: unknown): t is {
@@ -18,3 +19,23 @@ export declare function hasValue(t: unknown): t is {
 export declare function hasTaskId(e: unknown): e is {
     taskId: number;
 };
+export declare function hasItemSelected(obj: unknown): obj is {
+    item: {
+        selected: Property<boolean>;
+    };
+};
+export declare function hasItemColor(obj: unknown): obj is {
+    item: {
+        color: Property<string>;
+    };
+};
+export declare function hasItemDisabled(obj: unknown): obj is {
+    item: {
+        disabled: Property<boolean>;
+    };
+};
+export declare function hasItemValue(obj: unknown): obj is {
+    item: {
+        value: Property<string>;
+    };
+};

package/runtime/tests/typeguards.js

@@ -16,3 +16,51 @@ export function hasValue(t) {
 export function hasTaskId(e) {
     return e !== null && typeof e === 'object' && 'taskId' in e && typeof e.taskId === 'number';
 }
+export function hasItemSelected(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('selected' in item))
+        return false;
+    return true;
+}
+export function hasItemColor(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('color' in item))
+        return false;
+    return true;
+}
+export function hasItemDisabled(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('disabled' in item))
+        return false;
+    return true;
+}
+export function hasItemValue(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('value' in item))
+        return false;
+    return true;
+}

package/utils/Property.d.ts

@@ -9,12 +9,17 @@ export declare class Property<T> {
     private value?;
     private committed;
     private _isChanging;
-    private readonly _propName?;
     private _parentProperty?;
     private _parentSubscription?;
+    private _commitTriggerSub?;
+    private _pendingCommitValue?;
+    private _options?;
     constructor(options: {
-        initialValue: T;
+        initialValue?: T;
         propertyName?: string;
+        direction?: Direction;
+        commitTrigger?: Property<unknown>;
+        linkHandler?: (prop: Property<T>) => void;
     } | T);
     prop(): Property<T> | undefined;
     setValue(val: T | Property<T>, inbound?: boolean, commit?: boolean): void;
@@ -22,6 +27,7 @@ export declare class Property<T> {
     private setValueInternal;
     private pushToParent;
     private clearParentLink;
+    setCommitTrigger(trigger: Property<unknown>): void;
     reset(): void;
     triggerChange(direction?: Direction): void;
     subscribe(direction: Direction, cb: (val: T) => void): Subscription;

package/utils/Property.js

@@ -20,16 +20,19 @@ export class Property {
     value;
     committed = true;
     _isChanging = false;
-    _propName;
     _parentProperty;
     _parentSubscription;
+    _commitTriggerSub;
+    _pendingCommitValue;
+    _options;
     constructor(options) {
         if (this.isOptionsObject(options)) {
+            this._options = options;
             if (options.initialValue !== undefined) {
                 this.value = options.initialValue;
             }
-            if (options.propertyName !== undefined) {
-                this._propName = options.propertyName;
+            if (options.commitTrigger !== undefined) {
+                this.setCommitTrigger(options.commitTrigger);
             }
         }
         else {
@@ -41,16 +44,22 @@ export class Property {
     }
     setValue(val, inbound = false, commit = true) {
         if (val instanceof Property) {
+            const linkHandler = this._options?.linkHandler;
+            if (linkHandler) {
+                linkHandler(val);
+            }
             this.linkToParent(val);
             return;
         }
         if (this._isChanging) {
-            console.error((this._propName ? this._propName + ': ' : '') + 'Binding loop detected: setValue called while change is in progress');
+            const propName = this._options?.propertyName;
+            console.error((propName ? propName + ': ' : '') + 'Binding loop detected: setValue called while change is in progress');
             return;
         }
         const changed = val !== this.value && safeStringify(val) !== safeStringify(this.value);
-        if (!changed)
+        if (!changed && !(commit && !this.committed)) {
             return;
+        }
         this._isChanging = true;
         try {
             this.value = val;
@@ -62,7 +71,7 @@ export class Property {
                 this.committed = true;
                 this.onInboundChange.emit(val);
             }
-            else if (commit || !this.committed) {
+            else if (commit) {
                 this.committed = true;
                 if (this.value !== undefined) {
                     this.onOutboundChange.emit(this.value);
@@ -83,7 +92,8 @@ export class Property {
             root = root._parentProperty;
         }
         this._parentProperty = root;
-        this._parentSubscription = root.subscribe(Direction.Any, (val) => {
+        const direction = this._options?.direction ?? Direction.Any;
+        this._parentSubscription = root.subscribe(direction, (val) => {
             this.setValueInternal(val, true);
         });
         const currentValue = root.getValue();
@@ -112,11 +122,22 @@ export class Property {
     pushToParent(val) {
         if (!this._parentProperty)
             return;
+        const commitTrigger = this._options?.commitTrigger;
+        if (commitTrigger) {
+            const shouldCommit = Boolean(commitTrigger.getValue());
+            if (!shouldCommit) {
+                this._pendingCommitValue = { value: val };
+                this._parentProperty.setValue(val, false, false);
+                return;
+            }
+            this._pendingCommitValue = undefined;
+        }
         const sub = this._parentSubscription;
         this._parentSubscription = undefined;
         sub?.unsubscribe();
         this._parentProperty.setValue(val);
-        this._parentSubscription = this._parentProperty.subscribe(Direction.Any, (v) => {
+        const direction = this._options?.direction ?? Direction.Any;
+        this._parentSubscription = this._parentProperty.subscribe(direction, (v) => {
             this.setValueInternal(v, true);
         });
     }
@@ -127,6 +148,25 @@ export class Property {
         }
         this._parentProperty = undefined;
     }
+    setCommitTrigger(trigger) {
+        if (this._commitTriggerSub) {
+            this._commitTriggerSub.unsubscribe();
+            this._commitTriggerSub = undefined;
+        }
+        this._options ??= {};
+        this._options.commitTrigger = trigger;
+        this._commitTriggerSub = trigger.onChange.subscribe((val) => {
+            if (!val)
+                return;
+            if (!this._parentProperty)
+                return;
+            if (!this._pendingCommitValue)
+                return;
+            const pending = this._pendingCommitValue.value;
+            this._pendingCommitValue = undefined;
+            this._parentProperty.setValue(pending, false, true);
+        });
+    }
     reset() {
         this.clearParentLink();
     }

package/utils/DomUtils.d.ts

@@ -1,3 +0,0 @@
-export declare class DomUtils {
-    static isCustomElement(el: Element): boolean;
-}

package/utils/DomUtils.js

@@ -1,6 +0,0 @@
-export class DomUtils {
-    static isCustomElement(el) {
-        const tagName = el.tagName.toLowerCase();
-        return customElements.get(tagName) !== undefined;
-    }
-}