@fluffjs/fluff 0.2.4 → 0.3.0

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);
-    }
 }

package/runtime/tests/TestChildTasksListComponent.js

@@ -17,9 +17,9 @@ export class TestChildTasksListComponent extends FluffElement {
                         <div class="item"></div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'task', iterableExprId: 2, deps: ['tasks'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForComponent.js

@@ -10,9 +10,9 @@ export class TestForComponent extends FluffElement {
                         <test-for-child data-lid="l0"></test-for-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForReinsertBindsInputParentComponent.js

@@ -42,9 +42,9 @@ export class TestForReinsertBindsInputParentComponent extends FluffElement {
                         <div class="empty">empty</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestForTextMarkerCollisionNoTrackParentComponent.js

@@ -17,10 +17,10 @@ export class TestForTextMarkerCollisionNoTrackParentComponent extends FluffEleme
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], hasEmpty: false }],
             [9, { type: 'text', exprId: 1, deps: ['tag'] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForTextMarkerCollisionParentComponent.js

@@ -28,7 +28,7 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], trackBy: 'tag', hasEmpty: false }],
             [
                 9,
@@ -39,7 +39,7 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                     pipes: [{ name: 'lowercase', argExprIds: [] }, { name: 'capitalize', argExprIds: [] }]
                 }
             ]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestForUnsubscribeNestedParentComponent.js

@@ -20,9 +20,9 @@ export class TestForUnsubscribeNestedParentComponent extends TestUnsubscribeNest
                         <div class="empty">empty</div>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestGetterReactivityComponent.js

@@ -16,9 +16,9 @@ export class TestGetterReactivityComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="count"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 0, deps: ['items'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestHarness.d.ts

@@ -0,0 +1,9 @@
+import { type ExpressionFn, type HandlerFn } from '../FluffBase.js';
+export declare class TestHarness {
+    static setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[]): void;
+    static resetExpressionTable(): void;
+    static defineCustomElement(tag: string, ctor: CustomElementConstructor): void;
+    static mount(tag: string): HTMLElement;
+    static tick(count?: number): Promise<void>;
+    static waitForTimeout(): Promise<void>;
+}

package/runtime/tests/TestHarness.js

@@ -0,0 +1,29 @@
+import { FluffBase } from '../FluffBase.js';
+export class TestHarness {
+    static setExpressionTable(expressions, handlers) {
+        FluffBase.__setExpressionTable(expressions, handlers);
+    }
+    static resetExpressionTable() {
+        FluffBase.__setExpressionTable([], []);
+    }
+    static defineCustomElement(tag, ctor) {
+        if (!customElements.get(tag)) {
+            customElements.define(tag, ctor);
+        }
+    }
+    static mount(tag) {
+        const el = document.createElement(tag);
+        document.body.appendChild(el);
+        return el;
+    }
+    static async tick(count = 1) {
+        for (let i = 0; i < count; i++) {
+            await Promise.resolve();
+        }
+    }
+    static async waitForTimeout() {
+        await new Promise((resolve) => {
+            setTimeout(resolve, 0);
+        });
+    }
+}

package/runtime/tests/TestIfReinsertBindsInputChildComponent.js

@@ -28,9 +28,9 @@ export class TestIfReinsertBindsInputChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 2, deps: ['stats'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestIfReinsertBindsInputParentComponent.js

@@ -39,9 +39,9 @@ export class TestIfReinsertBindsInputParentComponent extends FluffElement {
                         <test-if-reinsert-binds-input-child x-fluff-component data-lid="l0"></test-if-reinsert-binds-input-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestIfUnsubscribeNestedParentComponent.js

@@ -17,9 +17,9 @@ export class TestIfUnsubscribeNestedParentComponent extends TestUnsubscribeNeste
                         <test-unsubscribe-nested-child x-fluff-component data-lid="l0"></test-unsubscribe-nested-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
         };

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -19,9 +19,9 @@ export class TestInterpolationNestedPropertyComponentBase extends FluffElement {
     }
     __render() {
         this.__getShadowRoot().innerHTML = '<!--fluff:text:0--><!--/fluff:text:0-->';
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'text', exprId: 0, deps: [['hostClass', 'childProp']], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestLateDefineForComponent.js

@@ -14,9 +14,9 @@ export class TestLateDefineForComponent extends FluffElement {
                         <late-define-for-child x-fluff-component="" data-lid="l0"></late-define-for-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'for', iterator: 'column', iterableExprId: 0, deps: ['columns'], hasEmpty: false }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestNullInputTextComponent.js

@@ -25,10 +25,10 @@ export class TestNullInputTextComponent extends FluffElement {
                     </template>
                     <template data-fluff-branch="test-null-input-text-0-1"></template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['isEditing'] }, { exprId: undefined, deps: [] }] }],
             [1, { type: 'text', exprId: 1, deps: ['task'], pipes: [] }]
-        ]));
+        ]);
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);

package/runtime/tests/TestOutputBindingParentComponent.js

@@ -23,9 +23,9 @@ export class TestOutputBindingParentComponent extends FluffElement {
                         <test-output-binding-child x-fluff-component data-lid="l0"></test-output-binding-child>
                     </template>
                 `;
-        this.__setMarkerConfigs(JSON.stringify([
+        this.__setMarkerConfigs([
             [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
-        ]));
+        ]);
         const bindings = {
             l0: [{ n: 'edit', b: 'event', h: 0, d: ['onChildEdit'] }]
         };