@fluffjs/fluff 0.0.7 → 0.1.0

package/runtime/tests/TestParentBindsTasksComponent.js

@@ -0,0 +1,22 @@
+import { FluffElement } from '../FluffElement.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestParentBindsTasksComponent extends FluffElement {
+    tasksForChild = [1, 2, 3];
+    childList = [0];
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <!--fluff:for:0-->
+                    <!--/fluff:for:0-->
+                    <template data-fluff-tpl="test-parent-binds-tasks-0">
+                        <test-child-tasks-list x-fluff-component="" data-lid="l0"></test-child-tasks-list>
+                    </template>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'for', iterator: 'child', iterableExprId: 0, deps: ['childList'], hasEmpty: false }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestSwitchReinsertBindsInputChildComponent.d.ts

@@ -0,0 +1,9 @@
+import { FluffElement } from '../FluffElementImpl.js';
+import type { TaskStats } from './TaskStats.js';
+export declare class TestSwitchReinsertBindsInputChildComponent extends FluffElement {
+    private readonly __stats;
+    get stats(): TaskStats;
+    set stats(value: TaskStats);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestSwitchReinsertBindsInputChildComponent.js

@@ -0,0 +1,39 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestSwitchReinsertBindsInputChildComponent extends FluffElement {
+    __stats = new Property({
+        initialValue: {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        },
+        propertyName: 'stats'
+    });
+    get stats() {
+        return this.__stats.getValue() ?? {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        };
+    }
+    set stats(value) {
+        this.__stats.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'text', exprId: 4, deps: ['stats'], pipes: [] }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestSwitchReinsertBindsInputParentComponent.d.ts

@@ -0,0 +1,12 @@
+import { FluffElement } from '../FluffElementImpl.js';
+import type { TaskStats } from './TaskStats.js';
+export declare class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
+    private readonly __mode;
+    private readonly __stats;
+    get mode(): string;
+    set mode(value: string);
+    get stats(): TaskStats;
+    set stats(value: TaskStats);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestSwitchReinsertBindsInputParentComponent.js

@@ -0,0 +1,65 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
+    __mode = new Property({ initialValue: 'a', propertyName: 'mode' });
+    __stats = new Property({
+        initialValue: {
+            total: 8,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 8 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        },
+        propertyName: 'stats'
+    });
+    get mode() {
+        return this.__mode.getValue() ?? 'a';
+    }
+    set mode(value) {
+        this.__mode.setValue(value);
+    }
+    get stats() {
+        return this.__stats.getValue() ?? {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        };
+    }
+    set stats(value) {
+        this.__stats.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <!--fluff:switch:0-->
+                    <!--/fluff:switch:0-->
+                    <template data-fluff-case="test-switch-reinsert-binds-input-parent-0-0">
+                        <test-switch-reinsert-binds-input-child x-fluff-component data-lid="l0"></test-switch-reinsert-binds-input-child>
+                    </template>
+                    <template data-fluff-case="test-switch-reinsert-binds-input-parent-0-1">
+                        <test-switch-reinsert-binds-input-child x-fluff-component data-lid="l1"></test-switch-reinsert-binds-input-child>
+                    </template>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [
+                0, {
+                    type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
+                        { valueExprId: 1, isDefault: false, fallthrough: false },
+                        { valueExprId: 2, isDefault: false, fallthrough: false }
+                    ]
+                }
+            ]
+        ]));
+        const bindings = {
+            l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }],
+            l1: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]
+        };
+        Reflect.set(this.constructor, '__bindings', bindings);
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestSwitchUnsubscribeNestedParentComponent.d.ts

@@ -0,0 +1,8 @@
+import { TestUnsubscribeNestedParentBaseComponent } from './TestUnsubscribeNestedParentBaseComponent.js';
+export declare class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeNestedParentBaseComponent {
+    private readonly __mode;
+    get mode(): string;
+    set mode(value: string);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestSwitchUnsubscribeNestedParentComponent.js

@@ -0,0 +1,42 @@
+import { Property } from '../../utils/Property.js';
+import { MarkerManager } from '../MarkerManager.js';
+import { TestUnsubscribeNestedParentBaseComponent } from './TestUnsubscribeNestedParentBaseComponent.js';
+export class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeNestedParentBaseComponent {
+    __mode = new Property({ initialValue: 'a', propertyName: 'mode' });
+    get mode() {
+        return this.__mode.getValue() ?? 'a';
+    }
+    set mode(value) {
+        this.__mode.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <!--fluff:switch:0-->
+                    <!--/fluff:switch:0-->
+                    <template data-fluff-case="test-switch-unsubscribe-nested-parent-0-0">
+                        <test-unsubscribe-nested-child x-fluff-component data-lid="l0"></test-unsubscribe-nested-child>
+                    </template>
+                    <template data-fluff-case="test-switch-unsubscribe-nested-parent-0-1">
+                        <div class="placeholder">placeholder</div>
+                    </template>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [
+                0, {
+                    type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
+                        { valueExprId: 1, isDefault: false, fallthrough: false },
+                        { valueExprId: 2, isDefault: false, fallthrough: false }
+                    ]
+                }
+            ]
+        ]));
+        const bindings = {
+            l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]
+        };
+        Reflect.set(this.constructor, '__bindings', bindings);
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestTemplateNestedMarkersComponent.d.ts

@@ -0,0 +1,11 @@
+import { FluffElement } from '../FluffElement.js';
+export declare class TestTemplateNestedMarkersComponent extends FluffElement {
+    private readonly __show;
+    private readonly __text;
+    get show(): boolean;
+    set show(value: boolean);
+    get text(): string;
+    set text(value: string);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestTemplateNestedMarkersComponent.js

@@ -0,0 +1,39 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestTemplateNestedMarkersComponent extends FluffElement {
+    __show = new Property(true);
+    __text = new Property('Hello');
+    get show() {
+        return this.__show.getValue() ?? false;
+    }
+    set show(value) {
+        this.__show.setValue(value);
+    }
+    get text() {
+        return this.__text.getValue() ?? '';
+    }
+    set text(value) {
+        this.__text.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <!--fluff:if:0-->
+                    <!--/fluff:if:0-->
+                    <template data-fluff-branch="test-template-nested-markers-0-0">
+                        <div class="title"><!--fluff:text:1--><!--/fluff:text:1--></div>
+                    </template>
+                    <template data-fluff-branch="test-template-nested-markers-0-1">
+                        <div class="fallback">Fallback</div>
+                    </template>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }, { exprId: undefined, deps: [] }] }],
+            [1, { type: 'text', exprId: 1, deps: ['text'], pipes: [] }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestUnsubscribeNestedChildComponent.d.ts

@@ -0,0 +1,11 @@
+import { FluffElement } from '../FluffElementImpl.js';
+import type { TaskStats } from './TaskStats.js';
+export declare class TestUnsubscribeNestedChildComponent extends FluffElement {
+    private readonly __stats;
+    private _statsSetCount;
+    get statsSetCount(): number;
+    get stats(): TaskStats;
+    set stats(value: TaskStats);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestUnsubscribeNestedChildComponent.js

@@ -0,0 +1,43 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export class TestUnsubscribeNestedChildComponent extends FluffElement {
+    __stats = new Property({
+        initialValue: {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        },
+        propertyName: 'stats'
+    });
+    _statsSetCount = 0;
+    get statsSetCount() {
+        return this._statsSetCount;
+    }
+    get stats() {
+        return this.__stats.getValue() ?? {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        };
+    }
+    set stats(value) {
+        this._statsSetCount++;
+        this.__stats.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <test-unsubscribe-nested-grandchild x-fluff-component data-lid="l0"></test-unsubscribe-nested-grandchild>
+                `;
+        const bindings = {
+            l0: [{ n: 'stats', b: 'property', e: 4, d: ['stats'] }]
+        };
+        Reflect.set(this.constructor, '__bindings', bindings);
+    }
+    __setupBindings() {
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestUnsubscribeNestedGrandchildComponent.d.ts

@@ -0,0 +1,9 @@
+import { FluffElement } from '../FluffElementImpl.js';
+import type { TaskStats } from './TaskStats.js';
+export declare class TestUnsubscribeNestedGrandchildComponent extends FluffElement {
+    private readonly __stats;
+    get stats(): TaskStats;
+    set stats(value: TaskStats);
+    protected __render(): void;
+    protected __setupBindings(): void;
+}

package/runtime/tests/TestUnsubscribeNestedGrandchildComponent.js

@@ -0,0 +1,39 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+import { MarkerManager } from '../MarkerManager.js';
+export class TestUnsubscribeNestedGrandchildComponent extends FluffElement {
+    __stats = new Property({
+        initialValue: {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        },
+        propertyName: 'stats'
+    });
+    get stats() {
+        return this.__stats.getValue() ?? {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        };
+    }
+    set stats(value) {
+        this.__stats.setValue(value);
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = `
+                    <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
+                `;
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'text', exprId: 5, deps: ['stats'], pipes: [] }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestUnsubscribeNestedParentBaseComponent.d.ts

@@ -0,0 +1,8 @@
+import { FluffElement } from '../FluffElementImpl.js';
+import type { TaskStats } from './TaskStats.js';
+export declare abstract class TestUnsubscribeNestedParentBaseComponent extends FluffElement {
+    private readonly __stats;
+    get stats(): TaskStats;
+    set stats(value: TaskStats);
+    setStatsTotal(total: number): void;
+}

package/runtime/tests/TestUnsubscribeNestedParentBaseComponent.js

@@ -0,0 +1,33 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElementImpl.js';
+export class TestUnsubscribeNestedParentBaseComponent extends FluffElement {
+    __stats = new Property({
+        initialValue: {
+            total: 8,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 8 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        },
+        propertyName: 'stats'
+    });
+    get stats() {
+        return this.__stats.getValue() ?? {
+            total: 0,
+            byStatus: { 'todo': 0, 'in-progress': 0, 'done': 0 },
+            byPriority: { 'low': 0, 'medium': 0, 'high': 0, 'urgent': 0 },
+            overdue: 0,
+            dueToday: 0
+        };
+    }
+    set stats(value) {
+        this.__stats.setValue(value);
+    }
+    setStatsTotal(total) {
+        const current = this.stats;
+        this.stats = {
+            ...current,
+            total
+        };
+    }
+}

package/utils/DomUtils.d.ts

@@ -0,0 +1,3 @@
+export declare class DomUtils {
+    static isCustomElement(el: Element): boolean;
+}

package/utils/DomUtils.js

@@ -0,0 +1,6 @@
+export class DomUtils {
+    static isCustomElement(el) {
+        const tagName = el.tagName.toLowerCase();
+        return customElements.get(tagName) !== undefined;
+    }
+}

package/utils/Property.d.ts

@@ -1,6 +1,6 @@
 import { Direction } from '../enums/Direction.js';
 import type { Subscription } from '../interfaces/Subscription.js';
-import { Publisher } from '../utils/Publisher.js';
+import { Publisher } from './Publisher.js';
 export declare class Property<T> {
     readonly onChange: Publisher<T>;
     readonly onInboundChange: Publisher<T>;
@@ -8,9 +8,14 @@ export declare class Property<T> {
     private value?;
     private committed;
     private _isChanging;
-    constructor(initialValue?: T);
+    private readonly _propName?;
+    constructor(options: {
+        initialValue: T;
+        propertyName?: string;
+    } | T);
     setValue(val: T, inbound?: boolean, commit?: boolean): void;
-    triggerChange(direction?: Direction): Promise<void>;
+    triggerChange(direction?: Direction): void;
     subscribe(direction: Direction, cb: (val: T) => void): Subscription;
     getValue(): T | null;
+    private isOptionsObject;
 }

package/utils/Property.js

@@ -1,5 +1,5 @@
 import { Direction } from '../enums/Direction.js';
-import { Publisher } from '../utils/Publisher.js';
+import { Publisher } from './Publisher.js';
 function safeStringify(obj) {
     const seen = new WeakSet();
     return JSON.stringify(obj, (_key, value) => {
@@ -19,12 +19,24 @@ export class Property {
     value;
     committed = true;
     _isChanging = false;
-    constructor(initialValue) {
-        this.value = initialValue;
+    _propName;
+    constructor(options) {
+        if (this.isOptionsObject(options)) {
+            if (options.initialValue !== undefined) {
+                this.value = options.initialValue;
+            }
+            if (options.propertyName !== undefined) {
+                this._propName = options.propertyName;
+            }
+        }
+        else {
+            this.value = options;
+        }
     }
     setValue(val, inbound = false, commit = true) {
         if (this._isChanging) {
-            throw new Error('Binding loop detected: setValue called while change is in progress');
+            console.error((this._propName ? this._propName + ': ' : '') + 'Binding loop detected: setValue called while change is in progress');
+            return;
         }
         const changed = val !== this.value && safeStringify(val) !== safeStringify(this.value);
         if (!changed)
@@ -32,27 +44,18 @@ export class Property {
         this._isChanging = true;
         try {
             this.value = val;
-            this.onChange.emit(val)
-                .catch((e) => {
-                console.error(e);
-            });
+            this.onChange.emit(val);
             if (!commit) {
                 this.committed = false;
             }
             if (inbound) {
                 this.committed = true;
-                this.onInboundChange.emit(val)
-                    .catch((e) => {
-                    console.error(e);
-                });
+                this.onInboundChange.emit(val);
             }
             else if (commit || !this.committed) {
                 this.committed = true;
                 if (this.value !== undefined) {
-                    this.onOutboundChange.emit(this.value)
-                        .catch((e) => {
-                        console.error(e);
-                    });
+                    this.onOutboundChange.emit(this.value);
                 }
             }
         }
@@ -60,15 +63,15 @@ export class Property {
             this._isChanging = false;
         }
     }
-    async triggerChange(direction = Direction.Any) {
+    triggerChange(direction = Direction.Any) {
         if (this.value === undefined)
             return;
-        await this.onChange.emit(this.value);
+        this.onChange.emit(this.value);
         if (direction == Direction.Outbound) {
-            await this.onOutboundChange.emit(this.value);
+            this.onOutboundChange.emit(this.value);
         }
         if (direction == Direction.Inbound) {
-            await this.onOutboundChange.emit(this.value);
+            this.onOutboundChange.emit(this.value);
         }
     }
     subscribe(direction, cb) {
@@ -94,4 +97,7 @@ export class Property {
         }
         return this.value;
     }
+    isOptionsObject(options) {
+        return typeof options === 'object' && options !== null && ('initialValue' in options);
+    }
 }

package/utils/Publisher.d.ts

@@ -2,7 +2,8 @@ import type { Subscription } from '../interfaces/Subscription.js';
 type Callback<T> = (value: T) => void | Promise<void>;
 export declare class Publisher<T> {
     private readonly callbacks;
-    emit(value: T): Promise<void>;
+    emit(value: T): void;
+    emitAsync(value: T): Promise<void>;
     subscribe(callback: Callback<T>): Subscription;
     subscribeOnce(callback: Callback<T>): Subscription;
 }

package/utils/Publisher.js

@@ -1,6 +1,21 @@
 export class Publisher {
     callbacks = new Set();
-    async emit(value) {
+    emit(value) {
+        for (const callback of this.callbacks) {
+            try {
+                const result = callback(value);
+                if (result instanceof Promise) {
+                    result.catch((e) => {
+                        console.error(e);
+                    });
+                }
+            }
+            catch (e) {
+                console.error(e);
+            }
+        }
+    }
+    async emitAsync(value) {
         for (const callback of this.callbacks) {
             try {
                 await callback(value);