@fluffjs/fluff 0.1.17 → 0.2.0

package/decorators/InputProperty.d.ts

@@ -0,0 +1 @@
+export declare function InputProperty(): PropertyDecorator;

package/decorators/InputProperty.js

@@ -0,0 +1,4 @@
+export function InputProperty() {
+    return (_target, _propertyKey) => {
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluffjs/fluff",
-  "version": "0.1.17",
+  "version": "0.2.0",
   "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/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

@@ -5,15 +5,24 @@ export declare class Property<T> {
     readonly onChange: Publisher<T>;
     readonly onInboundChange: Publisher<T>;
     readonly onOutboundChange: Publisher<T>;
+    readonly onMetadataChange: Publisher<T>;
     private value?;
     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;
+    prop(): Property<T> | undefined;
+    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

@@ -16,10 +16,13 @@ export class Property {
     onChange = new Publisher();
     onInboundChange = new Publisher();
     onOutboundChange = new Publisher();
+    onMetadataChange = new Publisher();
     value;
     committed = true;
     _isChanging = false;
     _propName;
+    _parentProperty;
+    _parentSubscription;
     constructor(options) {
         if (this.isOptionsObject(options)) {
             if (options.initialValue !== undefined) {
@@ -33,7 +36,14 @@ export class Property {
             this.value = options;
         }
     }
+    prop() {
+        return this._parentProperty;
+    }
     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 +68,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;