@fluffjs/fluff 0.1.12 → 0.1.14

package/package.json

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

package/runtime/FluffBase.d.ts

@@ -12,6 +12,10 @@ export interface BindingInfo {
     t?: string;
     d?: PropertyChain[];
     s?: string;
+    p?: {
+        n: string;
+        a: number[];
+    }[];
 }
 export declare abstract class FluffBase extends HTMLElement {
     static __e: ExpressionFn[];
@@ -27,6 +31,12 @@ export declare abstract class FluffBase extends HTMLElement {
     protected __applyBindingWithScope(el: HTMLElement, binding: BindingInfo, scope: Scope, subscriptions?: Subscription[]): void;
     protected __getCompiledExprFn(exprId: number): ExpressionFn;
     protected __getCompiledHandlerFn(handlerId: number): HandlerFn;
+    protected __applyPipes(value: unknown, pipes: {
+        n: string;
+        a: number[];
+    }[], locals: Record<string, unknown>): unknown;
+    private __applyPipe;
+    protected __getPipeFn(_name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __subscribeToExpressionInScope(deps: PropertyChain[] | undefined, scope: Scope, callback: () => void, subscriptions?: Subscription[]): void;
     private __subscribeToPropertyChain;
     private __subscribeToNestedChain;

package/runtime/FluffBase.js

@@ -74,6 +74,25 @@ export class FluffBase extends HTMLElement {
         }
         return fn;
     }
+    __applyPipes(value, pipes, locals) {
+        let result = value;
+        for (const pipe of pipes) {
+            result = this.__applyPipe(pipe.n, result, pipe.a, locals);
+        }
+        return result;
+    }
+    __applyPipe(name, value, argExprIds, locals) {
+        const pipeFn = this.__getPipeFn(name);
+        if (!pipeFn) {
+            console.warn(`Pipe "${name}" not found`);
+            return value;
+        }
+        const args = argExprIds.map(id => this.__getCompiledExprFn(id)(this, locals));
+        return pipeFn(value, ...args);
+    }
+    __getPipeFn(_name) {
+        return undefined;
+    }
     __subscribeToExpressionInScope(deps, scope, callback, subscriptions) {
         if (!deps)
             return;
@@ -222,7 +241,10 @@ export class FluffBase extends HTMLElement {
                     throw new Error(`Binding for ${binding.n} is missing exprId`);
                 }
                 const fn = this.__getCompiledExprFn(binding.e);
-                const value = fn(this, scope.locals);
+                let value = fn(this, scope.locals);
+                if (binding.p && binding.p.length > 0) {
+                    value = this.__applyPipes(value, binding.p, scope.locals);
+                }
                 this.__setChildProperty(el, binding.n, value);
             }
             catch (e) {

package/runtime/FluffElementImpl.d.ts

@@ -21,6 +21,7 @@ export declare abstract class FluffElement extends FluffBase {
     protected __setupBindings(): void;
     protected __addSubscription(sub: Subscription): void;
     protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
+    protected __getPipeFn(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __getShadowRoot(): ShadowRoot;
     protected __setMarkerConfigs(configJson: string): void;
     protected __initializeMarkers(MarkerManagerClass: new (host: FluffElement, shadowRoot: ShadowRoot) => MarkerManagerInterface): void;

package/runtime/FluffElementImpl.js

@@ -86,6 +86,9 @@ export class FluffElement extends FluffBase {
         }
         return pipe(value, ...args);
     }
+    __getPipeFn(name) {
+        return this.__pipes[name];
+    }
     __getShadowRoot() {
         return this._shadowRoot;
     }

package/runtime/MarkerController.d.ts

@@ -31,6 +31,8 @@ export declare abstract class MarkerController {
     protected getScope(): Scope;
     protected collectLocalsFromScope(scope: Scope): Record<string, unknown>;
     protected subscribeTo(deps: PropertyChain[], callback: () => void): void;
+    private subscribeToPropertyChain;
+    private subscribeToNestedChain;
     protected getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected createChildScope(locals: Record<string, unknown>): Scope;
     protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;

package/runtime/MarkerController.js

@@ -82,14 +82,95 @@ export class MarkerController {
     subscribeTo(deps, callback) {
         const scope = this.getScope();
         for (const dep of deps) {
-            const propName = Array.isArray(dep) ? dep[0] : dep;
-            if (propName.startsWith('['))
-                continue;
-            const reactiveProp = this.getReactivePropFromScope(propName, scope);
-            if (reactiveProp) {
-                const sub = reactiveProp.onChange.subscribe(callback);
-                this.subscriptions.push(sub);
+            if (Array.isArray(dep)) {
+                this.subscribeToPropertyChain(dep, scope, callback);
             }
+            else {
+                if (dep.startsWith('['))
+                    continue;
+                const reactiveProp = this.getReactivePropFromScope(dep, scope);
+                if (reactiveProp) {
+                    const sub = reactiveProp.onChange.subscribe(callback);
+                    this.subscriptions.push(sub);
+                }
+            }
+        }
+    }
+    subscribeToPropertyChain(chain, scope, callback) {
+        if (chain.length === 0)
+            return;
+        const [first, ...rest] = chain;
+        if (first.startsWith('['))
+            return;
+        const reactiveProp = this.getReactivePropFromScope(first, scope);
+        if (reactiveProp) {
+            if (rest.length === 0) {
+                this.subscriptions.push(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);
+                            this.subscriptions.push(sub);
+                        });
+                    }
+                    callback();
+                };
+                this.subscriptions.push(reactiveProp.onChange.subscribe(resubscribeNested));
+                const currentValue = reactiveProp.getValue();
+                if (currentValue !== null && currentValue !== undefined) {
+                    this.subscribeToNestedChain(currentValue, rest, callback, (sub) => {
+                        nestedSubs.push(sub);
+                        this.subscriptions.push(sub);
+                    });
+                }
+            }
+        }
+    }
+    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/TextController.js

@@ -1,3 +1,4 @@
+import { Property } from '../utils/Property.js';
 import { MarkerController } from './MarkerController.js';
 export class TextController extends MarkerController {
     config;
@@ -13,6 +14,9 @@ export class TextController extends MarkerController {
         const pipes = this.config.pipes ?? [];
         const update = () => {
             let result = this.evaluateExpr(this.config.exprId);
+            if (result instanceof Property) {
+                result = result.getValue();
+            }
             for (const pipe of pipes) {
                 result = this.applyPipe(pipe.name, result, pipe.argExprIds);
             }

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.d.ts

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

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -0,0 +1,27 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+import { MarkerManager } from '../MarkerManager.js';
+import { TestInterpolationNestedPropertyContainerClass } from './TestInterpolationNestedPropertyContainerClass.js';
+export class TestInterpolationNestedPropertyComponentBase extends FluffElement {
+    __hostClass = new Property({ initialValue: new TestInterpolationNestedPropertyContainerClass(), 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 = '<!--fluff:text:0--><!--/fluff:text:0-->';
+        this.__setMarkerConfigs(JSON.stringify([
+            [0, { type: 'text', exprId: 0, deps: [['hostClass', 'childProp']], pipes: [] }]
+        ]));
+    }
+    __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
+        super.__setupBindings();
+    }
+}

package/runtime/tests/TestInterpolationNestedPropertyContainerClass.d.ts

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

package/runtime/tests/TestInterpolationNestedPropertyContainerClass.js

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

package/runtime/tests/TestPropertyBindingPipeChildComponent.d.ts

@@ -0,0 +1,10 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare let testPropertyBindingPipeReceivedValue: unknown;
+export declare function resetTestPropertyBindingPipeReceivedValue(): void;
+export declare class TestPropertyBindingPipeChildComponent extends FluffElement {
+    __value: Property<unknown>;
+    get value(): unknown;
+    set value(val: unknown);
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyBindingPipeChildComponent.js

@@ -0,0 +1,19 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export let testPropertyBindingPipeReceivedValue = undefined;
+export function resetTestPropertyBindingPipeReceivedValue() {
+    testPropertyBindingPipeReceivedValue = undefined;
+}
+export class TestPropertyBindingPipeChildComponent extends FluffElement {
+    __value = new Property({ initialValue: undefined, propertyName: 'value' });
+    get value() {
+        return this.__value.getValue();
+    }
+    set value(val) {
+        this.__value.setValue(val);
+        testPropertyBindingPipeReceivedValue = val;
+    }
+    __render() {
+        this.__getShadowRoot().innerHTML = '<span>child</span>';
+    }
+}

package/runtime/tests/TestPropertyBindingPipeParentComponent.d.ts

@@ -0,0 +1,9 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export declare class TestPropertyBindingPipeParentComponent extends FluffElement {
+    __amount: Property<number>;
+    get amount(): number;
+    set amount(val: number);
+    __pipes: Record<string, (v: unknown, ...args: unknown[]) => unknown>;
+    protected __render(): void;
+}

package/runtime/tests/TestPropertyBindingPipeParentComponent.js

@@ -0,0 +1,18 @@
+import { Property } from '../../utils/Property.js';
+import { FluffElement } from '../FluffElement.js';
+export class TestPropertyBindingPipeParentComponent extends FluffElement {
+    __amount = new Property({ initialValue: 100, propertyName: 'amount' });
+    get amount() {
+        return this.__amount.getValue() ?? 0;
+    }
+    set amount(val) {
+        this.__amount.setValue(val);
+    }
+    __pipes = {
+        double: (v) => (typeof v === 'number' ? v * 2 : 0),
+        addSuffix: (v, suffix) => `${String(v)}${String(suffix)}`
+    };
+    __render() {
+        this.__getShadowRoot().innerHTML = '<test-child data-lid="l0"></test-child>';
+    }
+}

package/runtime/tests/createPropertyBindingPipeChildComponent.d.ts

@@ -0,0 +1,2 @@
+import { TestPropertyBindingPipeChildComponent } from './TestPropertyBindingPipeChildComponent.js';
+export declare function createChildComponent(): typeof TestPropertyBindingPipeChildComponent;

package/runtime/tests/createPropertyBindingPipeChildComponent.js

@@ -0,0 +1,5 @@
+import { TestPropertyBindingPipeChildComponent } from './TestPropertyBindingPipeChildComponent.js';
+export function createChildComponent() {
+    return class extends TestPropertyBindingPipeChildComponent {
+    };
+}

package/runtime/tests/createPropertyBindingPipeParentComponent.d.ts

@@ -0,0 +1,2 @@
+import { TestPropertyBindingPipeParentComponent } from './TestPropertyBindingPipeParentComponent.js';
+export declare function createParentComponent(): typeof TestPropertyBindingPipeParentComponent;

package/runtime/tests/createPropertyBindingPipeParentComponent.js

@@ -0,0 +1,5 @@
+import { TestPropertyBindingPipeParentComponent } from './TestPropertyBindingPipeParentComponent.js';
+export function createParentComponent() {
+    return class extends TestPropertyBindingPipeParentComponent {
+    };
+}

package/runtime/tests/createTestInterpolationNestedPropertyComponent.d.ts

@@ -0,0 +1,2 @@
+import { TestInterpolationNestedPropertyComponentBase } from './TestInterpolationNestedPropertyComponentBase.js';
+export declare function createTestInterpolationNestedPropertyComponent(): typeof TestInterpolationNestedPropertyComponentBase;

package/runtime/tests/createTestInterpolationNestedPropertyComponent.js

@@ -0,0 +1,5 @@
+import { TestInterpolationNestedPropertyComponentBase } from './TestInterpolationNestedPropertyComponentBase.js';
+export function createTestInterpolationNestedPropertyComponent() {
+    return class extends TestInterpolationNestedPropertyComponentBase {
+    };
+}