@fluffjs/fluff 0.2.3 → 0.3.0

package/runtime/FluffElementImpl.js

@@ -1,16 +1,16 @@
 import { getPipeTransform } from '../decorators/Pipe.js';
-import { DomUtils } from '../utils/DomUtils.js';
 import { Property } from '../utils/Property.js';
-import { Publisher } from '../utils/Publisher.js';
 import { FluffBase } from './FluffBase.js';
+import { MarkerManager } from './MarkerManager.js';
 import { getScope } from './ScopeRegistry.js';
 export class FluffElement extends FluffBase {
     __pipes = {};
     _shadowRoot;
     _subscriptions = [];
     _initialized = false;
+    _pendingInit = false;
     _markerManager = null;
-    _markerConfigJson = null;
+    _markerConfigEntries = null;
     _MarkerManagerClass = null;
     constructor() {
         super();
@@ -18,6 +18,16 @@ export class FluffElement extends FluffBase {
     }
     connectedCallback() {
         if (!this._initialized) {
+            if (!FluffBase.__areExpressionsReady()) {
+                if (!this._pendingInit) {
+                    this._pendingInit = true;
+                    FluffBase.__addPendingInit(() => {
+                        this._pendingInit = false;
+                        this.connectedCallback();
+                    });
+                }
+                return;
+            }
             const scopeId = this.getAttribute('data-fluff-scope-id');
             if (scopeId && !this.__parentScope) {
                 this.__parentScope = getScope(scopeId);
@@ -73,12 +83,10 @@ export class FluffElement extends FluffBase {
         this.__processBindingsOnElement(el, scope, subscriptions);
     }
     __setupBindings() {
+        this.__initializeMarkers(MarkerManager);
         this.__processBindings();
         this.__initializeMarkersInternal();
     }
-    __addSubscription(sub) {
-        this._subscriptions.push(sub);
-    }
     __pipe(name, value, ...args) {
         const pipe = this.__pipes[name];
         if (!pipe) {
@@ -93,102 +101,47 @@ export class FluffElement extends FluffBase {
     __getShadowRoot() {
         return this._shadowRoot;
     }
-    __setMarkerConfigs(configJson) {
-        this._markerConfigJson = configJson;
+    __createProp(name, options) {
+        const prop = new Property(options);
+        Object.defineProperty(this, name, {
+            get() {
+                return prop.getValue();
+            },
+            set(v) {
+                prop.setValue(v);
+            },
+            enumerable: true,
+            configurable: true
+        });
+        return prop;
+    }
+    __defineClassHostBinding(name, className, privateName) {
+        Object.defineProperty(this, name, {
+            get: () => Boolean(Reflect.get(this, privateName)),
+            set: (v) => {
+                Reflect.set(this, privateName, v);
+                if (v) {
+                    this.classList.add(className);
+                }
+                else {
+                    this.classList.remove(className);
+                }
+            },
+            enumerable: true,
+            configurable: true
+        });
+    }
+    __setMarkerConfigs(entries) {
+        this._markerConfigEntries = entries;
     }
     __initializeMarkers(MarkerManagerClass) {
         this._MarkerManagerClass = MarkerManagerClass;
     }
     __initializeMarkersInternal() {
-        if (!this._markerConfigJson || !this._MarkerManagerClass)
+        if (!this._markerConfigEntries || !this._MarkerManagerClass)
             return;
         this._markerManager = new this._MarkerManagerClass(this, this._shadowRoot);
-        this._markerManager.initializeFromConfig(this._markerConfigJson);
-    }
-    __getElement(id) {
-        return this._shadowRoot.querySelector(`[data-lid="${id}"]`);
-    }
-    __setText(id, text) {
-        const el = this.__getElement(id);
-        if (el)
-            el.textContent = text;
-    }
-    __bindText(id, getter) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        const expr = el.getAttribute('data-text-bind') ?? '';
-        const propMatch = /this\.([a-zA-Z_][a-zA-Z0-9_]*)/.exec(expr);
-        const update = () => {
-            try {
-                el.textContent = getter();
-            }
-            catch {
-                el.textContent = '';
-            }
-        };
-        if (propMatch) {
-            const [, propName] = propMatch;
-            const reactiveProp = this.__getReactiveProp(propName);
-            if (reactiveProp) {
-                this.__bindPropertyChange(reactiveProp, update);
-            }
-        }
-        update();
-    }
-    __setProperty(id, prop, value) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el)) {
-            if (prop in el) {
-                Reflect.set(el, prop, value);
-            }
-            else {
-                el.setAttribute(prop, String(value));
-            }
-        }
-    }
-    __addClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.add(className);
-    }
-    __removeClass(id, className) {
-        const el = this.__getElement(id);
-        if (this.isHTMLElement(el))
-            el.classList.remove(className);
-    }
-    __bindEvent(id, event, handler) {
-        const el = this.__getElement(id);
-        if (el) {
-            el.addEventListener(event, handler);
-        }
-    }
-    __bindPropertyChange(prop, callback) {
-        const sub = prop.onChange.subscribe(callback);
-        this._subscriptions.push(sub);
-        const currentVal = prop.getValue();
-        if (currentVal !== null) {
-            callback(currentVal);
-        }
-    }
-    __connectProperties(source, target) {
-        const sub = source.onChange.subscribe((val) => {
-            target.setValue(val, true);
-        });
-        this._subscriptions.push(sub);
-        const currentVal = source.getValue();
-        if (currentVal !== null) {
-            target.setValue(currentVal, true);
-        }
-    }
-    __connectOutput(source, handler) {
-        const sub = source.subscribe(handler);
-        this._subscriptions.push(sub);
-    }
-    __bindOutput(id, outputName, handler) {
-        const el = this.__getElement(id);
-        if (el)
-            this.__bindOutputOnElement(el, outputName, handler);
+        this._markerManager.initializeFromConfig(this._markerConfigEntries);
     }
     __setChildProperty(el, propName, value) {
         if (el instanceof HTMLElement && el.hasAttribute('x-fluff-component')) {
@@ -202,47 +155,6 @@ export class FluffElement extends FluffBase {
         }
         super.__setChildProperty(el, propName, value);
     }
-    __bindToChild(id, propName, value) {
-        const el = this.__getElement(id);
-        if (!el)
-            return;
-        this.__setChildPropertyDeferred(el, propName, value);
-    }
-    __setChildPropertyDeferred(el, propName, value) {
-        if (Reflect.get(el, propName) !== undefined) {
-            this.__setChildProperty(el, propName, value);
-            return;
-        }
-        if (DomUtils.isCustomElement(el)) {
-            this.__whenDefined(el.tagName.toLowerCase(), () => {
-                this.__setChildProperty(el, propName, value);
-            });
-        }
-        else {
-            this.__setChildProperty(el, propName, value);
-        }
-    }
-    __bindOutputOnElement(el, outputName, handler) {
-        const maybeOutput = Reflect.get(el, outputName);
-        if (maybeOutput instanceof Publisher) {
-            this.__connectOutput(maybeOutput, handler);
-            return;
-        }
-        if (DomUtils.isCustomElement(el)) {
-            this.__whenDefined(el.tagName.toLowerCase(), () => {
-                const innerOutput = Reflect.get(el, outputName);
-                if (innerOutput instanceof Publisher) {
-                    this.__connectOutput(innerOutput, handler);
-                }
-                else {
-                    el.addEventListener(outputName, handler);
-                }
-            });
-        }
-        else {
-            el.addEventListener(outputName, handler);
-        }
-    }
     __getReactivePropFromScope(propName, scope) {
         const key = `__${propName}`;
         if (key in scope.host) {
@@ -286,20 +198,7 @@ export class FluffElement extends FluffBase {
         }
         Reflect.deleteProperty(this, '__pendingProps');
     }
-    isHTMLElement(el) {
-        return el !== null;
-    }
     isRecord(value) {
         return value !== null && typeof value === 'object' && !Array.isArray(value);
     }
-    __getReactiveProp(propName) {
-        const key = `__${propName}`;
-        if (key in this) {
-            const candidate = Reflect.get(this, key);
-            if (candidate instanceof Property) {
-                return candidate;
-            }
-        }
-        return undefined;
-    }
 }

package/runtime/ForController.js

@@ -38,7 +38,6 @@ export class ForController extends MarkerController {
             }
             this.refreshParentBindings();
         };
-        this.subscribeTo(deps, update);
-        update();
+        this.subscribeAndRun(deps, update);
     }
 }

package/runtime/IfController.js

@@ -41,7 +41,6 @@ export class IfController extends MarkerController {
                 this.refreshParentBindings();
             }
         };
-        this.subscribeTo(allDeps, update);
-        update();
+        this.subscribeAndRun(allDeps, update);
     }
 }

package/runtime/MarkerConfigGuards.d.ts

@@ -1,12 +1,10 @@
 import type { BreakMarkerConfig } from '../interfaces/BreakMarkerConfig.js';
-import type { FluffHostElement } from '../interfaces/FluffHostElement.js';
 import type { ForMarkerConfig } from '../interfaces/ForMarkerConfig.js';
 import type { IfMarkerConfig } from '../interfaces/IfMarkerConfig.js';
 import type { MarkerConfig } from '../interfaces/MarkerConfig.js';
 import type { SwitchMarkerConfig } from '../interfaces/SwitchMarkerConfig.js';
 import type { TextMarkerConfig } from '../interfaces/TextMarkerConfig.js';
 export declare class MarkerConfigGuards {
-    static isFluffHostElement(el: Element): el is FluffHostElement;
     static isIfConfig(config: MarkerConfig): config is IfMarkerConfig;
     static isForConfig(config: MarkerConfig): config is ForMarkerConfig;
     static isSwitchConfig(config: MarkerConfig): config is SwitchMarkerConfig;

package/runtime/MarkerConfigGuards.js

@@ -1,7 +1,4 @@
 export class MarkerConfigGuards {
-    static isFluffHostElement(el) {
-        return '__getReactiveProp' in el;
-    }
     static isIfConfig(config) {
         return config.type === 'if';
     }

package/runtime/MarkerController.d.ts

@@ -2,7 +2,6 @@ import type { FluffHostElement } from '../interfaces/FluffHostElement.js';
 import type { PropertyChain } from '../interfaces/PropertyChain.js';
 import type { RenderContext } from '../interfaces/RenderContext.js';
 import type { Subscription } from '../interfaces/Subscription.js';
-import { Property } from '../utils/Property.js';
 import { type Scope } from './ScopeRegistry.js';
 interface MarkerManagerLike {
     getController: (id: number, startMarker: Comment) => MarkerController | undefined;
@@ -27,22 +26,15 @@ export declare abstract class MarkerController {
     cleanup(): void;
     updateRenderContext(renderContext?: RenderContext): void;
     protected evaluateExpr(exprId: number): unknown;
-    private getCompiledExprFn;
     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 subscribeAndRun(deps: PropertyChain[], callback: () => void): void;
     protected createChildScope(locals: Record<string, unknown>): Scope;
     protected clearContentBetweenMarkersWithCleanup(bindingsSubscriptions: Subscription[]): void;
     protected insertBeforeEndMarker(node: Node): void;
     protected refreshParentBindings(): void;
-    protected processBindingsOnElement(el: HTMLElement, scope: Scope): void;
-    protected processBindingsOnElementWithSubscriptions(el: HTMLElement, scope: Scope, subscriptions: Subscription[]): void;
     private __getFluffElementHost;
     protected setScopeOnChildren(node: Node, scope: Scope, renderContext?: RenderContext, markerManager?: MarkerManagerLike, bindingsSubscriptions?: Subscription[]): void;
-    protected insertAndScopeTemplateContent(content: Node, nodes: Node[], scope: Scope, renderContext: RenderContext | undefined, markerManager: MarkerManagerLike | undefined, bindingsSubscriptions: Subscription[]): void;
     protected cloneAndInsertTemplate(template: HTMLTemplateElement, context: Record<string, unknown>, renderContext: RenderContext | undefined, bindingsSubscriptions: Subscription[]): void;
     protected processBindingsOnNode(node: HTMLElement, scope: Scope, bindingsSubscriptions?: Subscription[]): void;
 }

package/runtime/MarkerController.js

@@ -1,9 +1,7 @@
-import { DomUtils } from '../utils/DomUtils.js';
-import { Property } from '../utils/Property.js';
 import { FluffBase } from './FluffBase.js';
 import { FluffElement } from './FluffElement.js';
-import { MarkerConfigGuards } from './MarkerConfigGuards.js';
 import { registerScope } from './ScopeRegistry.js';
+const MARKER_REGEX = /^fluff:(if|for|switch|text|break):(\d+)$/;
 export class MarkerController {
     id;
     startMarker;
@@ -44,21 +42,20 @@ export class MarkerController {
     evaluateExpr(exprId) {
         const scope = this.getScope();
         const allLocals = this.collectLocalsFromScope(scope);
-        const fn = this.getCompiledExprFn(exprId);
+        if (scope.host.__evaluateExpr) {
+            return scope.host.__evaluateExpr(exprId, allLocals);
+        }
+        const fn = FluffBase.__e[exprId];
+        if (typeof fn !== 'function') {
+            return undefined;
+        }
         try {
             return fn(scope.host, allLocals);
         }
-        catch (e) {
+        catch {
             return undefined;
         }
     }
-    getCompiledExprFn(exprId) {
-        const fn = FluffBase.__e[exprId];
-        if (typeof fn !== 'function') {
-            throw new Error(`Missing compiled expression function for exprId ${exprId}`);
-        }
-        return fn;
-    }
     getScope() {
         if (this.parentScope) {
             return this.parentScope;
@@ -79,114 +76,18 @@ export class MarkerController {
         Object.assign(result, scope.locals);
         return result;
     }
-    subscribeTo(deps, callback) {
+    subscribeAndRun(deps, callback) {
         const scope = this.getScope();
-        for (const dep of deps) {
+        const filteredDeps = deps.filter(dep => {
             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);
-                    });
-                }
+                return dep.length > 0 && !dep[0].startsWith('[');
             }
+            return !dep.startsWith('[');
+        });
+        if (scope.host.__subscribeToExpression) {
+            scope.host.__subscribeToExpression(filteredDeps, scope, callback, this.subscriptions);
         }
-        else if (rest.length > 0 && prop !== null && prop !== undefined) {
-            this.subscribeToNestedChain(prop, rest, callback, addSub);
-        }
-    }
-    getReactivePropFromScope(propName, scope) {
-        if (propName in scope.locals) {
-            return undefined;
-        }
-        if (scope.parent) {
-            return this.getReactivePropFromScope(propName, scope.parent);
-        }
-        if (MarkerConfigGuards.isFluffHostElement(scope.host) && scope.host.__getReactiveProp) {
-            const reactiveProp = scope.host.__getReactiveProp(propName);
-            if (reactiveProp instanceof Property) {
-                return reactiveProp;
-            }
-        }
-        return undefined;
+        callback();
     }
     createChildScope(locals) {
         return {
@@ -207,7 +108,7 @@ export class MarkerController {
         while (current && current !== this.endMarker) {
             const next = current.nextSibling;
             if (current instanceof Comment) {
-                const markerMatch = /^fluff:(if|for|switch|text|break):(\d+)$/.exec(current.data);
+                const markerMatch = MARKER_REGEX.exec(current.data);
                 if (markerMatch && this.markerManager?.cleanupController) {
                     const markerId = parseInt(markerMatch[2], 10);
                     this.markerManager.cleanupController(markerId, current);
@@ -239,24 +140,12 @@ export class MarkerController {
         const scope = this.getScope();
         fluffHost.__processBindingsOnElementPublic(parent, scope);
     }
-    processBindingsOnElement(el, scope) {
-        const fluffHost = this.__getFluffElementHost();
-        if (!fluffHost)
-            return;
-        fluffHost.__processBindingsOnElementPublic(el, scope);
-    }
-    processBindingsOnElementWithSubscriptions(el, scope, subscriptions) {
-        const fluffHost = this.__getFluffElementHost();
-        if (!fluffHost)
-            return;
-        fluffHost.__processBindingsOnElementPublic(el, scope, subscriptions);
-    }
     __getFluffElementHost() {
         return this.host instanceof FluffElement ? this.host : null;
     }
     setScopeOnChildren(node, scope, renderContext, markerManager, bindingsSubscriptions) {
         if (node instanceof Comment) {
-            const markerMatch = /^fluff:(if|for|switch|text|break):(\d+)$/.exec(node.data);
+            const markerMatch = MARKER_REGEX.exec(node.data);
             if (markerMatch && markerManager) {
                 const [, markerType, markerIdStr] = markerMatch;
                 const markerId = parseInt(markerIdStr, 10);
@@ -290,7 +179,7 @@ export class MarkerController {
             node.__parentScope = scope;
             this.processBindingsOnNode(node, scope, bindingsSubscriptions);
         }
-        else if (node instanceof HTMLElement && DomUtils.isCustomElement(node)) {
+        else if (node instanceof HTMLElement && customElements.get(node.tagName.toLowerCase()) !== undefined) {
             const scopeId = registerScope(scope);
             node.setAttribute('data-fluff-scope-id', scopeId);
             this.processBindingsOnNode(node, scope, bindingsSubscriptions);
@@ -302,12 +191,6 @@ export class MarkerController {
             this.setScopeOnChildren(child, scope, renderContext, markerManager, bindingsSubscriptions);
         }
     }
-    insertAndScopeTemplateContent(content, nodes, scope, renderContext, markerManager, bindingsSubscriptions) {
-        this.insertBeforeEndMarker(content);
-        for (const node of nodes) {
-            this.setScopeOnChildren(node, scope, renderContext, markerManager, bindingsSubscriptions);
-        }
-    }
     cloneAndInsertTemplate(template, context, renderContext, bindingsSubscriptions) {
         const content = template.content.cloneNode(true);
         if (!(content instanceof DocumentFragment)) {
@@ -315,14 +198,15 @@ export class MarkerController {
         }
         const nodes = Array.from(content.childNodes);
         const scope = this.createChildScope(context);
-        this.insertAndScopeTemplateContent(content, nodes, scope, renderContext, this.markerManager, bindingsSubscriptions);
+        this.insertBeforeEndMarker(content);
+        for (const node of nodes) {
+            this.setScopeOnChildren(node, scope, renderContext, this.markerManager, bindingsSubscriptions);
+        }
     }
     processBindingsOnNode(node, scope, bindingsSubscriptions) {
-        if (bindingsSubscriptions) {
-            this.processBindingsOnElementWithSubscriptions(node, scope, bindingsSubscriptions);
-        }
-        else {
-            this.processBindingsOnElement(node, scope);
-        }
+        const fluffHost = this.__getFluffElementHost();
+        if (!fluffHost)
+            return;
+        fluffHost.__processBindingsOnElementPublic(node, scope, bindingsSubscriptions);
     }
 }

package/runtime/MarkerManager.d.ts

@@ -1,3 +1,4 @@
+import type { MarkerConfigEntries } from './MarkerManagerInterface.js';
 import type { MarkerController } from './MarkerController.js';
 export declare class MarkerManager {
     private readonly controllers;
@@ -5,7 +6,7 @@ export declare class MarkerManager {
     private readonly host;
     private readonly shadowRoot;
     constructor(host: HTMLElement, shadowRoot: ShadowRoot);
-    initializeFromConfig(configJson: string): void;
+    initializeFromConfig(entries: MarkerConfigEntries): void;
     ensureController(id: number, type: string, startMarker: Comment, endMarker: Comment | null): MarkerController | undefined;
     getController(id: number, startMarker: Comment): MarkerController | undefined;
     cleanupController(id: number, startMarker?: Comment): void;

package/runtime/MarkerManager.js

@@ -13,8 +13,7 @@ export class MarkerManager {
         this.host = host;
         this.shadowRoot = shadowRoot;
     }
-    initializeFromConfig(configJson) {
-        const entries = JSON.parse(configJson);
+    initializeFromConfig(entries) {
         this.configs.clear();
         for (const [id, config] of entries) {
             this.configs.set(id, config);

package/runtime/MarkerManagerInterface.d.ts

@@ -1,4 +1,6 @@
+import type { MarkerConfig } from '../interfaces/MarkerConfig.js';
+export type MarkerConfigEntries = [number, MarkerConfig][];
 export interface MarkerManagerInterface {
-    initializeFromConfig: (configJson: string) => void;
+    initializeFromConfig: (entries: MarkerConfigEntries) => void;
     cleanup: () => void;
 }

package/runtime/SwitchController.js

@@ -37,7 +37,6 @@ export class SwitchController extends MarkerController {
             }
             this.refreshParentBindings();
         };
-        this.subscribeTo(deps, update);
-        update();
+        this.subscribeAndRun(deps, update);
     }
 }

package/runtime/TextController.d.ts

@@ -6,5 +6,4 @@ export declare class TextController extends MarkerController {
     constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: TextMarkerConfig);
     initialize(): void;
     private formatValue;
-    private applyPipe;
 }

package/runtime/TextController.js

@@ -1,5 +1,3 @@
-import { getPipeTransform } from '../decorators/Pipe.js';
-import { Property } from '../utils/Property.js';
 import { MarkerController } from './MarkerController.js';
 export class TextController extends MarkerController {
     config;
@@ -15,18 +13,16 @@ 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);
+            if (this.host.__applyPipesForController) {
+                const scope = this.getScope();
+                const allLocals = this.collectLocalsFromScope(scope);
+                result = this.host.__applyPipesForController(result, pipes, allLocals);
             }
             if (this.textNode) {
                 this.textNode.textContent = this.formatValue(result);
             }
         };
-        this.subscribeTo(deps, update);
-        update();
+        this.subscribeAndRun(deps, update);
     }
     formatValue(result) {
         if (result === null || result === undefined) {
@@ -43,14 +39,4 @@ export class TextController extends MarkerController {
         }
         return '';
     }
-    applyPipe(name, value, args) {
-        const pipes = this.host.__pipes;
-        const pipeFn = pipes?.[name] ?? getPipeTransform(name);
-        if (!pipeFn) {
-            console.warn(`Pipe "${name}" not found`);
-            return value;
-        }
-        const evaluatedArgs = args.map(arg => this.evaluateExpr(arg));
-        return pipeFn(value, ...evaluatedArgs);
-    }
 }