@fluffjs/fluff 0.1.8 → 0.1.10

package/package.json

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

package/runtime/FluffBase.js

@@ -158,6 +158,9 @@ export class FluffBase extends HTMLElement {
                     if (el instanceof FluffBase) {
                         update();
                     }
+                    else {
+                        console.warn(`Element <${tagName}> is not a FluffBase instance after whenDefined - binding for "${binding.n}" skipped`);
+                    }
                 });
             }
         }

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) {
@@ -269,9 +272,6 @@ export class FluffElement extends FluffBase {
             if (closestComponent && closestComponent !== el)
                 continue;
             if (el instanceof HTMLElement) {
-                const tagName = el.tagName.toLowerCase();
-                if (customElements.get(tagName))
-                    continue;
                 this.__processBindingsOnElement(el, scope);
             }
         }

package/runtime/tests/TestDirectChildComponent.d.ts

@@ -0,0 +1,6 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestDirectChildComponent extends FluffElement {
+    value: string;
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestDirectChildComponent.js

@@ -0,0 +1,10 @@
+import { FluffElement } from '../FluffElement.js';
+export class TestDirectChildComponent extends FluffElement {
+    value = '';
+    __render() {
+        this.__getShadowRoot().innerHTML = `<span class="value">${this.value}</span>`;
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestDirectParentComponent.d.ts

@@ -0,0 +1,6 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestDirectParentComponent extends FluffElement {
+    itemName: string;
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestDirectParentComponent.js

@@ -0,0 +1,10 @@
+import { FluffElement } from '../FluffElement.js';
+export class TestDirectParentComponent extends FluffElement {
+    itemName = 'test-item';
+    __render() {
+        this.__getShadowRoot().innerHTML = '<test-direct-child data-lid="l0" x-fluff-component></test-direct-child>';
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+}

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>';
+    }
+}