@fluffjs/fluff 0.1.16 → 0.1.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.1.16",
+  "version": "0.1.18",
   "type": "module",
   "main": "./index.js",
   "module": "./index.js",

package/runtime/FluffElementImpl.js

@@ -191,9 +191,6 @@ export class FluffElement extends FluffBase {
             this.__bindOutputOnElement(el, outputName, handler);
     }
     __setChildProperty(el, propName, value) {
-        if (value instanceof Property) {
-            value = value.getValue();
-        }
         if (el instanceof HTMLElement && el.hasAttribute('x-fluff-component')) {
             const tagName = el.tagName.toLowerCase();
             if (customElements.get(tagName) === undefined) {

package/runtime/ForController.js

@@ -36,6 +36,7 @@ export class ForController extends MarkerController {
                 };
                 this.cloneAndInsertTemplate(this.itemTemplate, itemContext, renderContext, this.bindingsSubscriptions);
             }
+            this.refreshParentBindings();
         };
         this.subscribeTo(deps, update);
         update();

package/runtime/IfController.js

@@ -38,6 +38,7 @@ export class IfController extends MarkerController {
                 if (matchedIndex >= 0 && matchedIndex < this.templates.length) {
                     this.cloneAndInsertTemplate(this.templates[matchedIndex], this.loopContext, undefined, this.bindingsSubscriptions);
                 }
+                this.refreshParentBindings();
             }
         };
         this.subscribeTo(allDeps, update);

package/runtime/MarkerController.d.ts

@@ -37,6 +37,7 @@ export declare abstract class MarkerController {
     protected createChildScope(locals: Record<string, unknown>): Scope;
     protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;
     protected insertBeforeEndMarker(node: Node): void;
+    protected refreshParentBindings(): void;
     protected processBindingsOnElement(el: HTMLElement, scope: Scope): void;
     protected processBindingsOnElementWithSubscriptions(el: HTMLElement, scope: Scope, subscriptions: Subscription[]): void;
     private __getFluffElementHost;

package/runtime/MarkerController.js

@@ -227,6 +227,18 @@ export class MarkerController {
             return;
         parent.insertBefore(node, this.endMarker);
     }
+    refreshParentBindings() {
+        const parent = this.startMarker.parentNode;
+        if (!(parent instanceof HTMLElement))
+            return;
+        if (!parent.hasAttribute('data-lid'))
+            return;
+        const fluffHost = this.__getFluffElementHost();
+        if (!fluffHost)
+            return;
+        const scope = this.getScope();
+        fluffHost.__processBindingsOnElementPublic(parent, scope);
+    }
     processBindingsOnElement(el, scope) {
         const fluffHost = this.__getFluffElementHost();
         if (!fluffHost)

package/runtime/SwitchController.js

@@ -35,6 +35,7 @@ export class SwitchController extends MarkerController {
                     shouldFallthrough = caseInfo.fallthrough;
                 }
             }
+            this.refreshParentBindings();
         };
         this.subscribeTo(deps, update);
         update();

package/runtime/tests/createPropBindChildComponent.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+interface ChildComponentInstance extends FluffElement {
+    theProp: number;
+    __theProp: Property<number>;
+}
+type ChildComponentConstructor = new () => ChildComponentInstance;
+export declare function createPropBindChildComponent(): ChildComponentConstructor;
+export {};

package/runtime/tests/createPropBindChildComponent.js

@@ -0,0 +1,20 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export function createPropBindChildComponent() {
+    class ChildComponent extends FluffElement {
+        __theProp = new Property({ initialValue: 0, propertyName: 'theProp' });
+        get theProp() {
+            return this.__theProp.getValue() ?? 0;
+        }
+        set theProp(val) {
+            this.__theProp.setValue(val);
+        }
+        __render() {
+            this.__getShadowRoot().innerHTML = '<span>Child value: </span>';
+        }
+        __setupBindings() {
+            super.__setupBindings();
+        }
+    }
+    return ChildComponent;
+}

package/runtime/tests/createPropBindParentComponent.d.ts

@@ -0,0 +1,8 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+interface ParentComponentInstance extends FluffElement {
+    sourceProperty: Property<number>;
+}
+type ParentComponentConstructor = new () => ParentComponentInstance;
+export declare function createPropBindParentComponent(childTag: string): ParentComponentConstructor;
+export {};

package/runtime/tests/createPropBindParentComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export function createPropBindParentComponent(childTag) {
+    class ParentComponent extends FluffElement {
+        sourceProperty = new Property({ initialValue: 2, propertyName: 'sourceProperty' });
+        __render() {
+            this.__getShadowRoot().innerHTML = `
+                <${childTag} x-fluff-component data-lid="l0"></${childTag}>
+            `;
+        }
+        __setupBindings() {
+            super.__setupBindings();
+        }
+    }
+    ParentComponent.__bindings = {
+        l0: [{ n: 'theProp', b: 'property', e: 0, d: [] }]
+    };
+    return ParentComponent;
+}

package/utils/Property.d.ts

@@ -9,11 +9,18 @@ export declare class Property<T> {
     private committed;
     private _isChanging;
     private readonly _propName?;
+    private _parentProperty?;
+    private _parentSubscription?;
     constructor(options: {
         initialValue: T;
         propertyName?: string;
     } | T);
-    setValue(val: T, inbound?: boolean, commit?: boolean): void;
+    setValue(val: T | Property<T>, inbound?: boolean, commit?: boolean): void;
+    private linkToParent;
+    private setValueInternal;
+    private pushToParent;
+    private clearParentLink;
+    reset(): void;
     triggerChange(direction?: Direction): void;
     subscribe(direction: Direction, cb: (val: T) => void): Subscription;
     getValue(): T | null;

package/utils/Property.js

@@ -20,6 +20,8 @@ export class Property {
     committed = true;
     _isChanging = false;
     _propName;
+    _parentProperty;
+    _parentSubscription;
     constructor(options) {
         if (this.isOptionsObject(options)) {
             if (options.initialValue !== undefined) {
@@ -34,6 +36,10 @@ export class Property {
         }
     }
     setValue(val, inbound = false, commit = true) {
+        if (val instanceof Property) {
+            this.linkToParent(val);
+            return;
+        }
         if (this._isChanging) {
             console.error((this._propName ? this._propName + ': ' : '') + 'Binding loop detected: setValue called while change is in progress');
             return;
@@ -58,11 +64,68 @@ export class Property {
                     this.onOutboundChange.emit(this.value);
                 }
             }
+            if (!inbound && this._parentProperty) {
+                this.pushToParent(val);
+            }
         }
         finally {
             this._isChanging = false;
         }
     }
+    linkToParent(source) {
+        this.clearParentLink();
+        let root = source;
+        while (root._parentProperty) {
+            root = root._parentProperty;
+        }
+        this._parentProperty = root;
+        this._parentSubscription = root.subscribe(Direction.Any, (val) => {
+            this.setValueInternal(val, true);
+        });
+        const currentValue = root.getValue();
+        if (currentValue !== null) {
+            this.setValueInternal(currentValue, true);
+        }
+    }
+    setValueInternal(val, inbound) {
+        if (this._isChanging)
+            return;
+        const changed = val !== this.value && safeStringify(val) !== safeStringify(this.value);
+        if (!changed)
+            return;
+        this._isChanging = true;
+        try {
+            this.value = val;
+            this.onChange.emit(val);
+            if (inbound) {
+                this.onInboundChange.emit(val);
+            }
+        }
+        finally {
+            this._isChanging = false;
+        }
+    }
+    pushToParent(val) {
+        if (!this._parentProperty)
+            return;
+        const sub = this._parentSubscription;
+        this._parentSubscription = undefined;
+        sub?.unsubscribe();
+        this._parentProperty.setValue(val);
+        this._parentSubscription = this._parentProperty.subscribe(Direction.Any, (v) => {
+            this.setValueInternal(v, true);
+        });
+    }
+    clearParentLink() {
+        if (this._parentSubscription) {
+            this._parentSubscription.unsubscribe();
+            this._parentSubscription = undefined;
+        }
+        this._parentProperty = undefined;
+    }
+    reset() {
+        this.clearParentLink();
+    }
     triggerChange(direction = Direction.Any) {
         if (this.value === undefined)
             return;