@fluffjs/fluff 0.2.4 → 0.3.0

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/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/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;
-    }
-}