@fluffjs/fluff 0.2.2 → 0.2.4

package/package.json

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

package/{src/runtime → runtime}/FluffBase.d.ts

@@ -42,6 +42,7 @@ export declare abstract class FluffBase extends HTMLElement {
     private __subscribeToNestedChain;
     protected __getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected __setChildProperty(el: Element, propName: string, value: unknown): void;
+    private __unwrap;
     private __applyPropertyBindingWithScope;
     private __applyEventBindingWithScope;
     private __applyOutputBinding;

package/{src/runtime → runtime}/FluffBase.js

@@ -156,7 +156,13 @@ export class FluffBase extends HTMLElement {
                 }
             }
         }
-        else if (!(first in scope.locals) && !(first in scope.host)) {
+        else if (first in scope.locals) {
+            const localValue = scope.locals[first];
+            if (localValue !== null && localValue !== undefined && rest.length > 0) {
+                this.__subscribeToNestedChain(localValue, rest, callback, addSub);
+            }
+        }
+        else if (!(first in scope.host)) {
             console.warn(`Binding dependency "${first}" not found on component ${scope.host.constructor.name}`);
         }
     }
@@ -220,12 +226,21 @@ export class FluffBase extends HTMLElement {
         if (prop instanceof Property) {
             prop.setValue(value, true);
         }
-        else if (propName in el && el instanceof HTMLElement) {
+        else if (el instanceof FluffBase) {
             Reflect.set(el, propName, value);
         }
+        else if (propName in el && el instanceof HTMLElement) {
+            Reflect.set(el, propName, this.__unwrap(value));
+        }
         else {
-            el.setAttribute(propName, String(value));
+            el.setAttribute(propName, String(this.__unwrap(value)));
+        }
+    }
+    __unwrap(value) {
+        if (value instanceof Property) {
+            return value.getValue();
         }
+        return value;
     }
     __applyPropertyBindingWithScope(el, binding, scope, subscriptions) {
         const tagName = el.tagName.toLowerCase();
@@ -343,7 +358,7 @@ export class FluffBase extends HTMLElement {
                     throw new Error(`Class binding for ${binding.n} is missing exprId`);
                 }
                 const fn = this.__getCompiledExprFn(binding.e);
-                const value = fn(this, scope.locals);
+                const value = this.__unwrap(fn(this, scope.locals));
                 if (value) {
                     el.classList.add(binding.n);
                 }
@@ -365,7 +380,7 @@ export class FluffBase extends HTMLElement {
                     throw new Error(`Style binding for ${binding.n} is missing exprId`);
                 }
                 const fn = this.__getCompiledExprFn(binding.e);
-                const value = fn(this, scope.locals);
+                const value = this.__unwrap(fn(this, scope.locals));
                 if (this.__hasStyle(el)) {
                     el.style.setProperty(binding.n, String(value));
                 }

package/runtime/tests/createPropertyUnwrapNativeTestComponents.d.ts

@@ -0,0 +1,4 @@
+export declare function createClassBindingTestComponent(): CustomElementConstructor;
+export declare function createStyleBindingTestComponent(): CustomElementConstructor;
+export declare function createPropertyBindingTestComponent(): CustomElementConstructor;
+export declare function createAttributeBindingTestComponent(): CustomElementConstructor;

package/runtime/tests/createPropertyUnwrapNativeTestComponents.js

@@ -0,0 +1,23 @@
+import { FluffElement } from '../FluffElement.js';
+function createTestComponent(html) {
+    return class extends FluffElement {
+        __render() {
+            this.__getShadowRoot().innerHTML = html;
+        }
+        __setupBindings() {
+            this.__processBindings();
+        }
+    };
+}
+export function createClassBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}
+export function createStyleBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}
+export function createPropertyBindingTestComponent() {
+    return createTestComponent('<button data-lid="l0">test</button>');
+}
+export function createAttributeBindingTestComponent() {
+    return createTestComponent('<div data-lid="l0">test</div>');
+}

package/{src/runtime → runtime}/tests/typeguards.d.ts

@@ -1,3 +1,4 @@
+import type { Property } from '../../utils/Property.js';
 import type { TestLateDefineForColumn } from './TestLateDefineForComponent.js';
 import type { TestTask } from './TestNullInputTextComponent.js';
 export declare function hasItem(t: unknown): t is {
@@ -18,3 +19,23 @@ export declare function hasValue(t: unknown): t is {
 export declare function hasTaskId(e: unknown): e is {
     taskId: number;
 };
+export declare function hasItemSelected(obj: unknown): obj is {
+    item: {
+        selected: Property<boolean>;
+    };
+};
+export declare function hasItemColor(obj: unknown): obj is {
+    item: {
+        color: Property<string>;
+    };
+};
+export declare function hasItemDisabled(obj: unknown): obj is {
+    item: {
+        disabled: Property<boolean>;
+    };
+};
+export declare function hasItemValue(obj: unknown): obj is {
+    item: {
+        value: Property<string>;
+    };
+};

package/runtime/tests/typeguards.js

@@ -0,0 +1,66 @@
+export function hasItem(t) {
+    return t !== null && typeof t === 'object' && 'item' in t;
+}
+export function hasItemName(t) {
+    return t !== null && typeof t === 'object' && 'itemName' in t && typeof t.itemName === 'string';
+}
+export function hasTask(t) {
+    return t !== null && typeof t === 'object' && 'task' in t;
+}
+export function isLateDefineForColumn(l) {
+    return l !== null && typeof l === 'object' && 'column' in l;
+}
+export function hasValue(t) {
+    return t !== null && typeof t === 'object' && 'value' in t && typeof t.value === 'string';
+}
+export function hasTaskId(e) {
+    return e !== null && typeof e === 'object' && 'taskId' in e && typeof e.taskId === 'number';
+}
+export function hasItemSelected(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('selected' in item))
+        return false;
+    return true;
+}
+export function hasItemColor(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('color' in item))
+        return false;
+    return true;
+}
+export function hasItemDisabled(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('disabled' in item))
+        return false;
+    return true;
+}
+export function hasItemValue(obj) {
+    if (obj === null || typeof obj !== 'object')
+        return false;
+    if (!('item' in obj))
+        return false;
+    const { item } = obj;
+    if (item === null || typeof item !== 'object')
+        return false;
+    if (!('value' in item))
+        return false;
+    return true;
+}

package/src/runtime/tests/typeguards.js

@@ -1,18 +0,0 @@
-export function hasItem(t) {
-    return t !== null && typeof t === 'object' && 'item' in t;
-}
-export function hasItemName(t) {
-    return t !== null && typeof t === 'object' && 'itemName' in t && typeof t.itemName === 'string';
-}
-export function hasTask(t) {
-    return t !== null && typeof t === 'object' && 'task' in t;
-}
-export function isLateDefineForColumn(l) {
-    return l !== null && typeof l === 'object' && 'column' in l;
-}
-export function hasValue(t) {
-    return t !== null && typeof t === 'object' && 'value' in t && typeof t.value === 'string';
-}
-export function hasTaskId(e) {
-    return e !== null && typeof e === 'object' && 'taskId' in e && typeof e.taskId === 'number';
-}