@fluffjs/fluff 0.4.5 → 0.5.0

package/runtime/TextController.d.ts

@@ -1,9 +1,7 @@
-import type { TextMarkerConfig } from '../interfaces/TextMarkerConfig.js';
+import { type CompactTextConfig } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
-export declare class TextController extends MarkerController {
-    private readonly config;
+export declare class TextController extends MarkerController<CompactTextConfig> {
     private textNode;
-    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: TextMarkerConfig);
     initialize(): void;
     private formatValue;
 }

package/runtime/TextController.js

@@ -1,18 +1,16 @@
+import { FluffBase } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
 export class TextController extends MarkerController {
-    config;
     textNode = null;
-    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
-        super(id, startMarker, endMarker, host, shadowRoot);
-        this.config = config;
-    }
     initialize() {
         this.textNode = document.createTextNode('');
         this.insertBeforeEndMarker(this.textNode);
-        const deps = this.config.deps ?? [];
-        const pipes = this.config.pipes ?? [];
+        // CompactTextConfig: [2, exprId, deps, pipes]  —  pipes = [pipeNameIdx, argExprIds[]][]
+        const [, exprId, compactDeps, compactPipes] = this.config;
+        const deps = FluffBase.__decodeDeps(compactDeps) ?? [];
+        const pipes = compactPipes ?? [];
         const update = () => {
-            let result = this.evaluateExpr(this.config.exprId);
+            let result = this.evaluateExpr(exprId);
             if (this.host.__applyPipesForController) {
                 const scope = this.getScope();
                 const allLocals = this.collectLocalsFromScope(scope);
@@ -25,18 +23,12 @@ export class TextController extends MarkerController {
         this.subscribeAndRun(deps, update);
     }
     formatValue(result) {
-        if (result === null || result === undefined) {
-            return '';
-        }
-        if (typeof result === 'object') {
-            return JSON.stringify(result);
-        }
         if (typeof result === 'string') {
             return result;
         }
-        if (typeof result === 'number' || typeof result === 'boolean') {
+        if (typeof result === 'number' || typeof result === 'boolean' || typeof result === 'bigint') {
             return String(result);
         }
-        return '';
+        return JSON.stringify(result);
     }
 }

package/runtime/tests/DirectOutputParent.js

@@ -1,3 +1,4 @@
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 export class DirectOutputParent extends FluffElement {
     receivedValue = null;
@@ -6,8 +7,10 @@ export class DirectOutputParent extends FluffElement {
     }
     __render() {
         this.__getShadowRoot().innerHTML = '<direct-output-child x-fluff-component data-lid="l0"></direct-output-child>';
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('submit');
         const bindings = {
-            l0: [{ n: 'submit', b: 'event', h: 0, d: ['onSubmit'] }]
+            l0: [[si, 1, null, 0]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestChildTasksListComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestChildTasksListComponent extends FluffElement {
@@ -17,8 +18,10 @@ export class TestChildTasksListComponent extends FluffElement {
                         <div class="item"></div>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('task', 'tasks');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'task', iterableExprId: 2, deps: ['tasks'], hasEmpty: false }]
+            [0, [1, si, 2, false, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestForComponent.js

@@ -1,3 +1,4 @@
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestForComponent extends FluffElement {
@@ -10,8 +11,10 @@ export class TestForComponent extends FluffElement {
                         <test-for-child data-lid="l0"></test-for-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('item', 'items');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: false }]
+            [0, [1, si, 0, false, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestForReinsertBindsInputParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestForReinsertBindsInputParentComponent extends FluffElement {
@@ -42,11 +43,15 @@ export class TestForReinsertBindsInputParentComponent extends FluffElement {
                         <div class="empty">empty</div>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('item', 'items');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
+            [0, [1, si, 0, true, [si + 1], null]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 1]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestForTextMarkerCollisionNoTrackParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestForTextMarkerCollisionNoTrackParentComponent extends FluffElement {
@@ -17,9 +18,11 @@ export class TestForTextMarkerCollisionNoTrackParentComponent extends FluffEleme
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('tag', 'tags');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], hasEmpty: false }],
-            [9, { type: 'text', exprId: 1, deps: ['tag'] }]
+            [0, [1, si, 0, false, [si + 1], null]],
+            [9, [2, 1, [si], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestForTextMarkerCollisionParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestForTextMarkerCollisionParentComponent extends FluffElement {
@@ -28,17 +29,11 @@ export class TestForTextMarkerCollisionParentComponent extends FluffElement {
                         <span class="tag"><!--fluff:text:9--><!--/fluff:text:9--></span>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('tag', 'tags', 'lowercase', 'capitalize');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'tag', iterableExprId: 0, deps: ['tags'], trackBy: 'tag', hasEmpty: false }],
-            [
-                9,
-                {
-                    type: 'text',
-                    exprId: 1,
-                    deps: ['tag'],
-                    pipes: [{ name: 'lowercase', argExprIds: [] }, { name: 'capitalize', argExprIds: [] }]
-                }
-            ]
+            [0, [1, si, 0, false, [si + 1], si]],
+            [9, [2, 1, [si], [[si + 2, []], [si + 3, []]]]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestForUnsubscribeNestedParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { MarkerManager } from '../MarkerManager.js';
 import { TestUnsubscribeNestedParentBaseComponent } from './TestUnsubscribeNestedParentBaseComponent.js';
 export class TestForUnsubscribeNestedParentComponent extends TestUnsubscribeNestedParentBaseComponent {
@@ -20,11 +21,15 @@ export class TestForUnsubscribeNestedParentComponent extends TestUnsubscribeNest
                         <div class="empty">empty</div>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('item', 'items');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'item', iterableExprId: 0, deps: ['items'], hasEmpty: true }]
+            [0, [1, si, 0, true, [si + 1], null]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 1]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestGetterReactivityComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestGetterReactivityComponent extends FluffElement {
@@ -16,8 +17,10 @@ export class TestGetterReactivityComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="count"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('items');
         this.__setMarkerConfigs([
-            [0, { type: 'text', exprId: 0, deps: ['items'], pipes: [] }]
+            [0, [2, 0, [si], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestHarness.d.ts

@@ -1,6 +1,6 @@
 import { type ExpressionFn, type HandlerFn } from '../FluffBase.js';
 export declare class TestHarness {
-    static setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[]): void;
+    static setExpressionTable(expressions: ExpressionFn[], handlers: HandlerFn[], strings?: string[]): void;
     static resetExpressionTable(): void;
     static defineCustomElement(tag: string, ctor: CustomElementConstructor): void;
     static mount(tag: string): HTMLElement;

package/runtime/tests/TestHarness.js

@@ -1,10 +1,10 @@
 import { FluffBase } from '../FluffBase.js';
 export class TestHarness {
-    static setExpressionTable(expressions, handlers) {
-        FluffBase.__setExpressionTable(expressions, handlers);
+    static setExpressionTable(expressions, handlers, strings) {
+        FluffBase.__setExpressionTable(expressions, handlers, strings);
     }
     static resetExpressionTable() {
-        FluffBase.__setExpressionTable([], []);
+        FluffBase.__setExpressionTable([], [], []);
     }
     static defineCustomElement(tag, ctor) {
         if (!customElements.get(tag)) {

package/runtime/tests/TestIfReinsertBindsInputChildComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestIfReinsertBindsInputChildComponent extends FluffElement {
@@ -28,8 +29,10 @@ export class TestIfReinsertBindsInputChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         this.__setMarkerConfigs([
-            [0, { type: 'text', exprId: 2, deps: ['stats'], pipes: [] }]
+            [0, [2, 2, [si], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestIfReinsertBindsInputParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestIfReinsertBindsInputParentComponent extends FluffElement {
@@ -39,11 +40,15 @@ export class TestIfReinsertBindsInputParentComponent extends FluffElement {
                         <test-if-reinsert-binds-input-child x-fluff-component data-lid="l0"></test-if-reinsert-binds-input-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('show');
         this.__setMarkerConfigs([
-            [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
+            [0, [0, [[0, [si]]]]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 1]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestIfUnsubscribeNestedParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { MarkerManager } from '../MarkerManager.js';
 import { TestUnsubscribeNestedParentBaseComponent } from './TestUnsubscribeNestedParentBaseComponent.js';
 export class TestIfUnsubscribeNestedParentComponent extends TestUnsubscribeNestedParentBaseComponent {
@@ -17,11 +18,15 @@ export class TestIfUnsubscribeNestedParentComponent extends TestUnsubscribeNeste
                         <test-unsubscribe-nested-child x-fluff-component data-lid="l0"></test-unsubscribe-nested-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('show');
         this.__setMarkerConfigs([
-            [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
+            [0, [0, [[0, [si]]]]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 1, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 1]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestInterpolationNestedPropertyComponentBase.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 import { TestInterpolationNestedPropertyContainerClass } from './TestInterpolationNestedPropertyContainerClass.js';
@@ -19,8 +20,10 @@ export class TestInterpolationNestedPropertyComponentBase extends FluffElement {
     }
     __render() {
         this.__getShadowRoot().innerHTML = '<!--fluff:text:0--><!--/fluff:text:0-->';
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('hostClass', 'childProp');
         this.__setMarkerConfigs([
-            [0, { type: 'text', exprId: 0, deps: [['hostClass', 'childProp']], pipes: [] }]
+            [0, [2, 0, [[si, si + 1]], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestLateDefineForComponent.js

@@ -1,3 +1,4 @@
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestLateDefineForComponent extends FluffElement {
@@ -14,8 +15,10 @@ export class TestLateDefineForComponent extends FluffElement {
                         <late-define-for-child x-fluff-component="" data-lid="l0"></late-define-for-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('column', 'columns');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'column', iterableExprId: 0, deps: ['columns'], hasEmpty: false }]
+            [0, [1, si, 0, false, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestNullInputTextComponent.js

@@ -1,4 +1,5 @@
 import { Property as PropertyImpl } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestNullInputTextComponent extends FluffElement {
@@ -25,9 +26,11 @@ export class TestNullInputTextComponent extends FluffElement {
                     </template>
                     <template data-fluff-branch="test-null-input-text-0-1"></template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('isEditing', 'task');
         this.__setMarkerConfigs([
-            [0, { type: 'if', branches: [{ exprId: 0, deps: ['isEditing'] }, { exprId: undefined, deps: [] }] }],
-            [1, { type: 'text', exprId: 1, deps: ['task'], pipes: [] }]
+            [0, [0, [[0, [si]], []]]],
+            [1, [2, 1, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestOutputBindingChildComponent.js

@@ -1,4 +1,5 @@
 import { Publisher } from '../../utils/Publisher.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestOutputBindingChildComponent extends FluffElement {
@@ -8,8 +9,10 @@ export class TestOutputBindingChildComponent extends FluffElement {
     }
     __render() {
         this.__getShadowRoot().innerHTML = '<button data-lid="l0">Edit</button>';
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('click');
         const bindings = {
-            l0: [{ n: 'click', b: 'event', h: 1, d: ['onEdit'] }]
+            l0: [[bi, 1, null, 1]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestOutputBindingParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestOutputBindingParentComponent extends FluffElement {
@@ -23,11 +24,15 @@ export class TestOutputBindingParentComponent extends FluffElement {
                         <test-output-binding-child x-fluff-component data-lid="l0"></test-output-binding-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('show');
         this.__setMarkerConfigs([
-            [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }] }]
+            [0, [0, [[0, [si]]]]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('edit');
         const bindings = {
-            l0: [{ n: 'edit', b: 'event', h: 0, d: ['onChildEdit'] }]
+            l0: [[bi, 1, null, 0]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestParentBindsTasksComponent.js

@@ -1,3 +1,4 @@
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestParentBindsTasksComponent extends FluffElement {
@@ -11,8 +12,10 @@ export class TestParentBindsTasksComponent extends FluffElement {
                         <test-child-tasks-list x-fluff-component="" data-lid="l0"></test-child-tasks-list>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('child', 'childList');
         this.__setMarkerConfigs([
-            [0, { type: 'for', iterator: 'child', iterableExprId: 0, deps: ['childList'], hasEmpty: false }]
+            [0, [1, si, 0, false, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestSwitchReinsertBindsInputChildComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestSwitchReinsertBindsInputChildComponent extends FluffElement {
@@ -28,8 +29,10 @@ export class TestSwitchReinsertBindsInputChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         this.__setMarkerConfigs([
-            [0, { type: 'text', exprId: 4, deps: ['stats'], pipes: [] }]
+            [0, [2, 4, [si], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestSwitchReinsertBindsInputParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
@@ -42,19 +43,16 @@ export class TestSwitchReinsertBindsInputParentComponent extends FluffElement {
                         <test-switch-reinsert-binds-input-child x-fluff-component data-lid="l1"></test-switch-reinsert-binds-input-child>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('mode');
         this.__setMarkerConfigs([
-            [
-                0, {
-                    type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
-                        { valueExprId: 1, isDefault: false, fallthrough: false },
-                        { valueExprId: 2, isDefault: false, fallthrough: false }
-                    ]
-                }
-            ]
+            [0, [3, 0, [si], [[false, false, 1], [false, false, 2]]]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }],
-            l1: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 3]],
+            l1: [[bi, 0, [bi], 3]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestSwitchUnsubscribeNestedParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { MarkerManager } from '../MarkerManager.js';
 import { TestUnsubscribeNestedParentBaseComponent } from './TestUnsubscribeNestedParentBaseComponent.js';
 export class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeNestedParentBaseComponent {
@@ -20,18 +21,15 @@ export class TestSwitchUnsubscribeNestedParentComponent extends TestUnsubscribeN
                         <div class="placeholder">placeholder</div>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('mode');
         this.__setMarkerConfigs([
-            [
-                0, {
-                    type: 'switch', expressionExprId: 0, deps: ['mode'], cases: [
-                        { valueExprId: 1, isDefault: false, fallthrough: false },
-                        { valueExprId: 2, isDefault: false, fallthrough: false }
-                    ]
-                }
-            ]
+            [0, [3, 0, [si], [[false, false, 1], [false, false, 2]]]]
         ]);
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 3, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 3]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestTemplateNestedMarkersComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElement.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestTemplateNestedMarkersComponent extends FluffElement {
@@ -27,9 +28,11 @@ export class TestTemplateNestedMarkersComponent extends FluffElement {
                         <div class="fallback">Fallback</div>
                     </template>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('show', 'text');
         this.__setMarkerConfigs([
-            [0, { type: 'if', branches: [{ exprId: 0, deps: ['show'] }, { exprId: undefined, deps: [] }] }],
-            [1, { type: 'text', exprId: 1, deps: ['text'], pipes: [] }]
+            [0, [0, [[0, [si]], []]]],
+            [1, [2, 1, [si + 1], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/TestUnsubscribeNestedChildComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 export class TestUnsubscribeNestedChildComponent extends FluffElement {
     __stats = new Property({
@@ -32,8 +33,10 @@ export class TestUnsubscribeNestedChildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <test-unsubscribe-nested-grandchild x-fluff-component data-lid="l0"></test-unsubscribe-nested-grandchild>
                 `;
+        const bi = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         const bindings = {
-            l0: [{ n: 'stats', b: 'property', e: 4, d: ['stats'] }]
+            l0: [[bi, 0, [bi], 4]]
         };
         Reflect.set(this.constructor, '__bindings', bindings);
     }

package/runtime/tests/TestUnsubscribeNestedGrandchildComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export class TestUnsubscribeNestedGrandchildComponent extends FluffElement {
@@ -28,8 +29,10 @@ export class TestUnsubscribeNestedGrandchildComponent extends FluffElement {
         this.__getShadowRoot().innerHTML = `
                     <div class="total"><!--fluff:text:0--><!--/fluff:text:0--></div>
                 `;
+        const si = FluffBase.__s.length;
+        FluffBase.__s.push('stats');
         this.__setMarkerConfigs([
-            [0, { type: 'text', exprId: 5, deps: ['stats'], pipes: [] }]
+            [0, [2, 5, [si], null]]
         ]);
     }
     __setupBindings() {

package/runtime/tests/createPipeUnwrapTestComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 import { MarkerManager } from '../MarkerManager.js';
 export function createPipeUnwrapTestComponent(state) {
@@ -19,8 +20,10 @@ export function createPipeUnwrapTestComponent(state) {
         };
         __render() {
             this.__getShadowRoot().innerHTML = '<span><!--fluff:text:0--><!--/fluff:text:0--></span>';
+            const si = FluffBase.__s.length;
+            FluffBase.__s.push('testProp', 'capture');
             this.__setMarkerConfigs([
-                [0, { type: 'text', exprId: 0, deps: ['testProp'], pipes: [{ name: 'capture', argExprIds: [] }] }]
+                [0, [2, 0, [si], [[si + 1, []]]]]
             ]);
         }
         __setupBindings() {

package/runtime/tests/createPropBindParentComponent.js

@@ -1,4 +1,5 @@
 import { Property } from '../../utils/Property.js';
+import { FluffBase } from '../FluffBase.js';
 import { FluffElement } from '../FluffElementImpl.js';
 export function createPropBindParentComponent(childTag) {
     class ParentComponent extends FluffElement {
@@ -12,8 +13,10 @@ export function createPropBindParentComponent(childTag) {
             super.__setupBindings();
         }
     }
+    const bi = FluffBase.__s.length;
+    FluffBase.__s.push('theProp');
     ParentComponent.__bindings = {
-        l0: [{ n: 'theProp', b: 'property', e: 0, d: [] }]
+        l0: [[bi, 0, null, 0]]
     };
     return ParentComponent;
 }