@fluffjs/fluff 0.1.9 → 0.1.11

package/package.json

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

package/runtime/FluffBase.d.ts

@@ -28,6 +28,8 @@ export declare abstract class FluffBase extends HTMLElement {
     protected __getCompiledExprFn(exprId: number): ExpressionFn;
     protected __getCompiledHandlerFn(handlerId: number): HandlerFn;
     protected __subscribeToExpressionInScope(deps: PropertyChain[] | undefined, scope: Scope, callback: () => void, subscriptions?: Subscription[]): void;
+    private __subscribeToPropertyChain;
+    private __subscribeToNestedChain;
     protected __getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected __setChildProperty(el: Element, propName: string, value: unknown): void;
     private __applyPropertyBindingWithScope;

package/runtime/FluffBase.js

@@ -77,21 +77,105 @@ export class FluffBase extends HTMLElement {
     __subscribeToExpressionInScope(deps, scope, callback, subscriptions) {
         if (!deps)
             return;
+        const addSub = (sub) => {
+            if (subscriptions) {
+                subscriptions.push(sub);
+            }
+            else {
+                this.__baseSubscriptions.push(sub);
+            }
+        };
         for (const dep of deps) {
-            const propName = Array.isArray(dep) ? dep[0] : dep;
-            const reactiveProp = this.__getReactivePropFromScope(propName, scope);
-            if (reactiveProp) {
-                const sub = reactiveProp.onChange.subscribe(callback);
-                if (subscriptions) {
-                    subscriptions.push(sub);
+            if (Array.isArray(dep)) {
+                this.__subscribeToPropertyChain(dep, scope, callback, addSub);
+            }
+            else {
+                const reactiveProp = this.__getReactivePropFromScope(dep, scope);
+                if (reactiveProp) {
+                    addSub(reactiveProp.onChange.subscribe(callback));
                 }
-                else {
-                    this.__baseSubscriptions.push(sub);
+                else if (!(dep in scope.locals) && !(dep in scope.host)) {
+                    console.warn(`Binding dependency "${dep}" not found on component ${scope.host.constructor.name}`);
+                }
+            }
+        }
+    }
+    __subscribeToPropertyChain(chain, scope, callback, addSub) {
+        if (chain.length === 0)
+            return;
+        const [first, ...rest] = chain;
+        const reactiveProp = this.__getReactivePropFromScope(first, scope);
+        if (reactiveProp) {
+            if (rest.length === 0) {
+                addSub(reactiveProp.onChange.subscribe(callback));
+            }
+            else {
+                let nestedSubs = [];
+                const resubscribeNested = () => {
+                    for (const sub of nestedSubs) {
+                        sub.unsubscribe();
+                    }
+                    nestedSubs = [];
+                    const currentValue = reactiveProp.getValue();
+                    if (currentValue !== null && currentValue !== undefined) {
+                        this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                            nestedSubs.push(sub);
+                            addSub(sub);
+                        });
+                    }
+                    callback();
+                };
+                addSub(reactiveProp.onChange.subscribe(resubscribeNested));
+                const currentValue = reactiveProp.getValue();
+                if (currentValue !== null && currentValue !== undefined) {
+                    this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                        nestedSubs.push(sub);
+                        addSub(sub);
+                    });
                 }
             }
-            else if (!(propName in scope.locals) && !(propName in scope.host)) {
-                console.warn(`Binding dependency "${propName}" not found on component ${scope.host.constructor.name}`);
+        }
+        else if (!(first in scope.locals) && !(first in scope.host)) {
+            console.warn(`Binding dependency "${first}" not found on component ${scope.host.constructor.name}`);
+        }
+    }
+    __subscribeToNestedChain(obj, chain, callback, addSub) {
+        if (chain.length === 0 || obj === null || obj === undefined)
+            return;
+        const [first, ...rest] = chain;
+        const prop = Reflect.get(obj, first);
+        if (prop instanceof Property) {
+            if (rest.length === 0) {
+                addSub(prop.onChange.subscribe(callback));
             }
+            else {
+                let nestedSubs = [];
+                const resubscribeNested = () => {
+                    for (const sub of nestedSubs) {
+                        sub.unsubscribe();
+                    }
+                    nestedSubs = [];
+                    const currentValue = prop.getValue();
+                    if (currentValue !== null && currentValue !== undefined) {
+                        this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                            nestedSubs.push(sub);
+                            addSub(sub);
+                        });
+                    }
+                    callback();
+                };
+                addSub(prop.onChange.subscribe(resubscribeNested));
+                const currentValue = prop.getValue();
+                if (currentValue !== null && currentValue !== undefined) {
+                    this.__subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                        nestedSubs.push(sub);
+                        addSub(sub);
+                    });
+                }
+            }
+        }
+        else if (rest.length > 0 && prop !== null && prop !== undefined) {
+            this.__subscribeToNestedChain(prop, rest, callback, addSub);
         }
     }
     __getReactivePropFromScope(propName, scope) {

package/runtime/FluffElementImpl.d.ts

@@ -15,7 +15,7 @@ export declare abstract class FluffElement extends FluffBase {
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
-    $watch: (_properties: string[], callback: () => void) => Subscription;
+    $watch: (_properties: string[], callback: (changed: string) => void) => Subscription;
     __processBindingsOnElementPublic(el: HTMLElement, scope: Scope, subscriptions?: Subscription[]): void;
     protected abstract __render(): void;
     protected __setupBindings(): void;

package/runtime/FluffElementImpl.js

@@ -62,7 +62,7 @@ export class FluffElement extends FluffBase {
         this.__baseSubscriptions = [];
     }
     $watch = (_properties, callback) => {
-        callback();
+        callback('');
         return {
             unsubscribe: () => {
             }
@@ -187,6 +187,9 @@ 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/TestPropertyUnwrapChildComponent.d.ts

@@ -0,0 +1,10 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare let testPropertyUnwrapReceivedValue: number | null;
+export declare function resetTestPropertyUnwrapReceivedValue(): void;
+export declare class TestPropertyUnwrapChildComponent extends FluffElement {
+    __property: Property<number | null>;
+    get property(): number | null;
+    set property(val: number | null);
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyUnwrapChildComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export let testPropertyUnwrapReceivedValue = null;
+export function resetTestPropertyUnwrapReceivedValue() {
+    testPropertyUnwrapReceivedValue = null;
+}
+export class TestPropertyUnwrapChildComponent extends FluffElement {
+    __property = new Property({ initialValue: null, propertyName: 'property' });
+    get property() {
+        return this.__property.getValue();
+    }
+    set property(val) {
+        testPropertyUnwrapReceivedValue = val;
+        this.__property.setValue(val);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<span></span>';
+    }
+}

package/runtime/tests/TestPropertyUnwrapContainerClass.d.ts

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export declare class TestPropertyUnwrapContainerClass {
+    childProp: Property<number>;
+}

package/runtime/tests/TestPropertyUnwrapContainerClass.js

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export class TestPropertyUnwrapContainerClass {
+    childProp = new Property({ initialValue: 42, propertyName: 'childProp' });
+}

package/runtime/tests/TestPropertyUnwrapParentComponent.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { TestPropertyUnwrapContainerClass } from './TestPropertyUnwrapContainerClass.js';
+export declare class TestPropertyUnwrapParentComponent extends FluffElement {
+    __hostClass: Property<TestPropertyUnwrapContainerClass>;
+    get hostClass(): TestPropertyUnwrapContainerClass;
+    set hostClass(val: TestPropertyUnwrapContainerClass);
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyUnwrapParentComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { TestPropertyUnwrapContainerClass } from './TestPropertyUnwrapContainerClass.js';
+export class TestPropertyUnwrapParentComponent extends FluffElement {
+    __hostClass = new Property({ initialValue: new TestPropertyUnwrapContainerClass(), propertyName: 'hostClass' });
+    get hostClass() {
+        const val = this.__hostClass.getValue();
+        if (!val) {
+            throw new Error('hostClass is null');
+        }
+        return val;
+    }
+    set hostClass(val) {
+        this.__hostClass.setValue(val);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<test-prop-unwrap-child data-lid="l0"></test-prop-unwrap-child>';
+    }
+}

package/runtime/tests/TestWatchNestedPropertyChildComponent.d.ts

@@ -0,0 +1,13 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare let testWatchNestedPropertyCallCount: number;
+export declare let testWatchNestedPropertyLastValue: number | null;
+export declare function resetTestWatchNestedPropertyState(): void;
+export declare class TestWatchNestedPropertyChildComponent extends FluffElement {
+    __property: Property<number | null>;
+    get property(): number | null;
+    set property(val: number | null);
+    constructor();
+    onPropertyChange(): void;
+    protected __render(): void;
+}

package/runtime/tests/TestWatchNestedPropertyChildComponent.js

@@ -0,0 +1,30 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export let testWatchNestedPropertyCallCount = 0;
+export let testWatchNestedPropertyLastValue = null;
+export function resetTestWatchNestedPropertyState() {
+    testWatchNestedPropertyCallCount = 0;
+    testWatchNestedPropertyLastValue = null;
+}
+export class TestWatchNestedPropertyChildComponent extends FluffElement {
+    __property = new Property({ initialValue: null, propertyName: 'property' });
+    get property() {
+        return this.__property.getValue();
+    }
+    set property(val) {
+        this.__property.setValue(val);
+    }
+    constructor() {
+        super();
+        this.__baseSubscriptions.push(this.__property.onChange.subscribe(() => {
+            this.onPropertyChange();
+        }));
+    }
+    onPropertyChange() {
+        testWatchNestedPropertyCallCount++;
+        testWatchNestedPropertyLastValue = this.property;
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<span></span>';
+    }
+}

package/runtime/tests/TestWatchNestedPropertyChildComponent2.d.ts

@@ -0,0 +1,3 @@
+import { TestWatchNestedPropertyChildComponent } from './TestWatchNestedPropertyChildComponent.js';
+export declare class TestWatchNestedPropertyChildComponent2 extends TestWatchNestedPropertyChildComponent {
+}

package/runtime/tests/TestWatchNestedPropertyChildComponent2.js

@@ -0,0 +1,3 @@
+import { TestWatchNestedPropertyChildComponent } from './TestWatchNestedPropertyChildComponent.js';
+export class TestWatchNestedPropertyChildComponent2 extends TestWatchNestedPropertyChildComponent {
+}

package/runtime/tests/TestWatchNestedPropertyContainerClass.d.ts

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export declare class TestWatchNestedPropertyContainerClass {
+    childProp: Property<number>;
+}

package/runtime/tests/TestWatchNestedPropertyContainerClass.js

@@ -0,0 +1,4 @@
+import { Property } from '../../utils/Property.js';
+export class TestWatchNestedPropertyContainerClass {
+    childProp = new Property({ initialValue: 0, propertyName: 'childProp' });
+}

package/runtime/tests/TestWatchNestedPropertyParentComponent.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { TestWatchNestedPropertyContainerClass } from './TestWatchNestedPropertyContainerClass.js';
+export declare class TestWatchNestedPropertyParentComponent extends FluffElement {
+    __hostClass: Property<TestWatchNestedPropertyContainerClass>;
+    get hostClass(): TestWatchNestedPropertyContainerClass;
+    set hostClass(val: TestWatchNestedPropertyContainerClass);
+    protected __render(): void;
+}

package/runtime/tests/TestWatchNestedPropertyParentComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { TestWatchNestedPropertyContainerClass } from './TestWatchNestedPropertyContainerClass.js';
+export class TestWatchNestedPropertyParentComponent extends FluffElement {
+    __hostClass = new Property({ initialValue: new TestWatchNestedPropertyContainerClass(), propertyName: 'hostClass' });
+    get hostClass() {
+        const val = this.__hostClass.getValue();
+        if (!val) {
+            throw new Error('hostClass is null');
+        }
+        return val;
+    }
+    set hostClass(val) {
+        this.__hostClass.setValue(val);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<test-watch-nested-child data-lid="l0"></test-watch-nested-child>';
+    }
+}

package/runtime/tests/TestWatchNestedPropertyParentComponent2.d.ts

@@ -0,0 +1,3 @@
+import { TestWatchNestedPropertyParentComponent } from './TestWatchNestedPropertyParentComponent.js';
+export declare class TestWatchNestedPropertyParentComponent2 extends TestWatchNestedPropertyParentComponent {
+}

package/runtime/tests/TestWatchNestedPropertyParentComponent2.js

@@ -0,0 +1,3 @@
+import { TestWatchNestedPropertyParentComponent } from './TestWatchNestedPropertyParentComponent.js';
+export class TestWatchNestedPropertyParentComponent2 extends TestWatchNestedPropertyParentComponent {
+}