@fluffjs/fluff 0.4.5 → 0.5.0

package/runtime/FluffElementImpl.d.ts

@@ -1,9 +1,10 @@
 import type { Subscription } from '../interfaces/Subscription.js';
-import { Property } from '../utils/Property.js';
 import { FluffBase } from './FluffBase.js';
 import type { MarkerConfigEntries, MarkerManagerInterface } from './MarkerManagerInterface.js';
 import { type Scope } from './ScopeRegistry.js';
 export declare abstract class FluffElement extends FluffBase {
+    private static readonly __globalStyleSheets;
+    static __addGlobalStyleSheet(sheet: CSSStyleSheet): void;
     protected __pipes: Record<string, (value: unknown, ...args: unknown[]) => unknown>;
     protected readonly _shadowRoot: ShadowRoot;
     private _subscriptions;
@@ -12,27 +13,21 @@ export declare abstract class FluffElement extends FluffBase {
     private _markerManager;
     private _markerConfigEntries;
     private _MarkerManagerClass;
+    private _scopeId;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private __destroyDirectives;
     $watch: (_properties: string[], callback: (changed: string) => void) => Subscription;
     __processBindingsOnElementPublic(el: Element, scope: Scope, subscriptions?: Subscription[]): void;
     protected abstract __render(): void;
     protected __setupBindings(): void;
-    protected __pipe(name: string, value: unknown, ...args: unknown[]): unknown;
+    private __instantiateDirectives;
     protected __getPipeFn(name: string): ((value: unknown, ...args: unknown[]) => unknown) | undefined;
     protected __getShadowRoot(): ShadowRoot;
-    protected __createProp<T>(nameOrIdx: string | number, options: T | {
-        initialValue: T;
-        [key: string]: unknown;
-    }): Property<T>;
-    protected __defineClassHostBinding(name: string, className: string, privateName: string): void;
     protected __setMarkerConfigs(entries: MarkerConfigEntries): void;
     protected __initializeMarkers(MarkerManagerClass: new (host: FluffElement, shadowRoot: ShadowRoot) => MarkerManagerInterface): void;
     private __initializeMarkersInternal;
     protected __setChildProperty(el: Element, propName: string, value: unknown): void;
-    protected __getReactivePropFromScope(propName: string, scope: Scope): Property<unknown> | undefined;
     protected __processBindings(): void;
-    private __applyPendingProps;
-    private isRecord;
 }

package/runtime/FluffElementImpl.js

@@ -1,9 +1,13 @@
+import { getDirectiveClass } from '../decorators/Directive.js';
 import { getPipeTransform } from '../decorators/Pipe.js';
-import { Property } from '../utils/Property.js';
 import { FluffBase } from './FluffBase.js';
 import { MarkerManager } from './MarkerManager.js';
-import { getScope } from './ScopeRegistry.js';
+import { getScope, unregisterScope } from './ScopeRegistry.js';
 export class FluffElement extends FluffBase {
+    static __globalStyleSheets = [];
+    static __addGlobalStyleSheet(sheet) {
+        FluffElement.__globalStyleSheets.push(sheet);
+    }
     __pipes = {};
     _shadowRoot;
     _subscriptions = [];
@@ -12,9 +16,13 @@ export class FluffElement extends FluffBase {
     _markerManager = null;
     _markerConfigEntries = null;
     _MarkerManagerClass = null;
+    _scopeId = null;
     constructor() {
         super();
         this._shadowRoot = this.attachShadow({ mode: 'open' });
+        if (FluffElement.__globalStyleSheets.length > 0) {
+            this._shadowRoot.adoptedStyleSheets = [...FluffElement.__globalStyleSheets];
+        }
     }
     connectedCallback() {
         if (!this._initialized) {
@@ -28,9 +36,9 @@ export class FluffElement extends FluffBase {
                 }
                 return;
             }
-            const scopeId = this.getAttribute('data-fluff-scope-id');
-            if (scopeId && !this.__parentScope) {
-                this.__parentScope = getScope(scopeId);
+            this._scopeId = this.getAttribute('data-fluff-scope-id');
+            if (this._scopeId && !this.__parentScope) {
+                this.__parentScope = getScope(this._scopeId);
                 if (this.__parentScope) {
                     this.__loopContext = this.__parentScope.locals;
                 }
@@ -46,7 +54,8 @@ export class FluffElement extends FluffBase {
             this.__applyPendingProps();
             this.__render();
             this.__setupBindings();
-            if (this.getAttribute('data-fluff-scope-id')) {
+            this.__initHostBindings();
+            if (this._scopeId) {
                 this.__processBindings();
             }
             this._initialized = true;
@@ -59,6 +68,7 @@ export class FluffElement extends FluffBase {
         if ('onDestroy' in this && typeof this.onDestroy === 'function') {
             this.onDestroy();
         }
+        this.__destroyDirectives();
         if (this._markerManager) {
             this._markerManager.cleanup();
             this._markerManager = null;
@@ -71,6 +81,22 @@ export class FluffElement extends FluffBase {
             sub.unsubscribe();
         }
         this.__baseSubscriptions = [];
+        if (this._scopeId) {
+            unregisterScope(this._scopeId);
+            this._scopeId = null;
+        }
+    }
+    __destroyDirectives() {
+        const elements = this._shadowRoot.querySelectorAll('[data-fluff-directives]');
+        for (const el of Array.from(elements)) {
+            const directives = el.__fluffDirectives;
+            if (directives) {
+                for (const directive of directives) {
+                    directive.destroy();
+                }
+                el.__fluffDirectives = undefined;
+            }
+        }
     }
     $watch = (_properties, callback) => {
         callback('');
@@ -84,16 +110,31 @@ export class FluffElement extends FluffBase {
     }
     __setupBindings() {
         this.__initializeMarkers(MarkerManager);
+        this.__instantiateDirectives();
         this.__processBindings();
         this.__initializeMarkersInternal();
     }
-    __pipe(name, value, ...args) {
-        const pipe = this.__pipes[name];
-        if (!pipe) {
-            console.warn(`Pipe "${name}" not found`);
-            return value;
+    __instantiateDirectives() {
+        const elements = this._shadowRoot.querySelectorAll('[data-fluff-directives]');
+        for (const el of Array.from(elements)) {
+            const directiveAttr = el.getAttribute('data-fluff-directives');
+            if (!directiveAttr)
+                continue;
+            const selectors = directiveAttr.split(',');
+            const directives = [];
+            for (const selector of selectors) {
+                const DirectiveClass = getDirectiveClass(selector.trim());
+                if (DirectiveClass && el instanceof HTMLElement) {
+                    const instance = new DirectiveClass();
+                    instance.__setHostElement(el);
+                    directives.push(instance);
+                    instance.initialize();
+                }
+            }
+            if (directives.length > 0) {
+                el.__fluffDirectives = directives;
+            }
         }
-        return pipe(value, ...args);
     }
     __getPipeFn(name) {
         return this.__pipes[name] ?? getPipeTransform(name);
@@ -101,37 +142,6 @@ export class FluffElement extends FluffBase {
     __getShadowRoot() {
         return this._shadowRoot;
     }
-    __createProp(nameOrIdx, options) {
-        const name = typeof nameOrIdx === 'number' ? FluffBase.__decodeString(nameOrIdx) : nameOrIdx;
-        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;
     }
@@ -155,19 +165,14 @@ export class FluffElement extends FluffBase {
             }
         }
         super.__setChildProperty(el, propName, value);
-    }
-    __getReactivePropFromScope(propName, scope) {
-        const key = `__${propName}`;
-        if (key in scope.host) {
-            const candidate = Reflect.get(scope.host, key);
-            if (candidate instanceof Property) {
-                return candidate;
+        const directives = el.__fluffDirectives;
+        if (directives) {
+            for (const directive of directives) {
+                if (propName in directive) {
+                    Reflect.set(directive, propName, value);
+                }
             }
         }
-        if (scope.parent) {
-            return this.__getReactivePropFromScope(propName, scope.parent);
-        }
-        return undefined;
     }
     __processBindings() {
         const elements = this._shadowRoot.querySelectorAll('[data-lid]');
@@ -179,27 +184,4 @@ export class FluffElement extends FluffBase {
             this.__processBindingsOnElement(el, scope);
         }
     }
-    __applyPendingProps() {
-        const existing = Reflect.get(this, '__pendingProps');
-        if (!this.isRecord(existing)) {
-            return;
-        }
-        for (const [propName, value] of Object.entries(existing)) {
-            console.log('apply-pending-prop', { propName, value, el: this.tagName });
-            const key = `__${propName}`;
-            if (key in this) {
-                const prop = Reflect.get(this, key);
-                if (prop instanceof Property) {
-                    prop.setValue(value, true);
-                }
-            }
-            else if (propName in this) {
-                Reflect.set(this, propName, value);
-            }
-        }
-        Reflect.deleteProperty(this, '__pendingProps');
-    }
-    isRecord(value) {
-        return value !== null && typeof value === 'object' && !Array.isArray(value);
-    }
 }

package/runtime/FluffMarkers.d.ts

@@ -1,5 +1,4 @@
 export { MarkerManager } from './MarkerManager.js';
-export { MarkerConfigGuards } from './MarkerConfigGuards.js';
 export { MarkerController } from './MarkerController.js';
 export { IfController } from './IfController.js';
 export { ForController } from './ForController.js';

package/runtime/FluffMarkers.js

@@ -1,5 +1,4 @@
 export { MarkerManager } from './MarkerManager.js';
-export { MarkerConfigGuards } from './MarkerConfigGuards.js';
 export { MarkerController } from './MarkerController.js';
 export { IfController } from './IfController.js';
 export { ForController } from './ForController.js';

package/runtime/ForController.d.ts

@@ -1,10 +1,7 @@
-import type { ForMarkerConfig } from '../interfaces/ForMarkerConfig.js';
+import { type CompactForConfig } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
-export declare class ForController extends MarkerController {
-    private readonly config;
+export declare class ForController extends MarkerController<CompactForConfig> {
     private itemTemplate;
     private emptyTemplate;
-    private readonly bindingsSubscriptions;
-    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: ForMarkerConfig);
     initialize(): void;
 }

package/runtime/ForController.js

@@ -1,22 +1,20 @@
+import { FluffBase } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
 export class ForController extends MarkerController {
-    config;
     itemTemplate = null;
     emptyTemplate = null;
-    bindingsSubscriptions = [];
-    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
-        super(id, startMarker, endMarker, host, shadowRoot);
-        this.config = config;
-    }
     initialize() {
         const hostTag = this.host.tagName.toLowerCase();
         const templateId = `${hostTag}-${this.id}`;
         this.itemTemplate = this.shadowRoot.querySelector(`template[data-fluff-tpl="${templateId}"]`);
         this.emptyTemplate = this.shadowRoot.querySelector(`template[data-fluff-empty="${templateId}"]`);
-        const deps = this.config.deps ?? [];
+        // CompactForConfig: [1, iteratorNameIdx, iterableExprId, hasEmpty, deps, trackByNameIdx]
+        const [, iteratorIdx, iterableExprId, , compactDeps] = this.config;
+        const iterator = FluffBase.__s[iteratorIdx];
+        const deps = FluffBase.__decodeDeps(compactDeps) ?? [];
         const update = () => {
             this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);
-            const items = this.evaluateExpr(this.config.iterableExprId);
+            const items = this.evaluateExpr(iterableExprId);
             if (!Array.isArray(items) || items.length === 0) {
                 if (this.emptyTemplate) {
                     this.cloneAndInsertTemplate(this.emptyTemplate, this.loopContext, undefined, this.bindingsSubscriptions);
@@ -32,7 +30,7 @@ export class ForController extends MarkerController {
                 if (renderContext.shouldBreak)
                     break;
                 const itemContext = {
-                    ...this.loopContext, [this.config.iterator]: items[i], $index: i
+                    ...this.loopContext, [iterator]: items[i], $index: i
                 };
                 this.cloneAndInsertTemplate(this.itemTemplate, itemContext, renderContext, this.bindingsSubscriptions);
             }

package/runtime/IfController.d.ts

@@ -1,10 +1,7 @@
-import type { IfMarkerConfig } from '../interfaces/IfMarkerConfig.js';
+import { type CompactIfConfig } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
-export declare class IfController extends MarkerController {
-    private readonly config;
+export declare class IfController extends MarkerController<CompactIfConfig> {
     private templates;
     private currentBranchIndex;
-    private readonly bindingsSubscriptions;
-    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: IfMarkerConfig);
     initialize(): void;
 }

package/runtime/IfController.js

@@ -1,32 +1,31 @@
+import { FluffBase } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
 export class IfController extends MarkerController {
-    config;
     templates = [];
     currentBranchIndex = -1;
-    bindingsSubscriptions = [];
-    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
-        super(id, startMarker, endMarker, host, shadowRoot);
-        this.config = config;
-    }
     initialize() {
         const hostTag = this.host.tagName.toLowerCase();
         const templateIdPrefix = `${hostTag}-${this.id}-`;
         this.templates = Array.from(this.shadowRoot.querySelectorAll(`template[data-fluff-branch^="${templateIdPrefix}"]`));
+        // CompactIfConfig: [0, branches[]]  —  branch = [exprId?, deps?] or [] for else
+        const [, branches] = this.config;
         const allDeps = [];
-        for (const branch of this.config.branches) {
-            if (branch.deps) {
-                allDeps.push(...branch.deps);
+        for (const branch of branches) {
+            if (branch.length > 1 && branch[1]) {
+                const decoded = FluffBase.__decodeDeps(branch[1]);
+                if (decoded)
+                    allDeps.push(...decoded);
             }
         }
         const update = () => {
             let matchedIndex = -1;
-            for (let i = 0; i < this.config.branches.length; i++) {
-                const branch = this.config.branches[i];
-                if (branch.exprId === undefined) {
+            for (let i = 0; i < branches.length; i++) {
+                const branch = branches[i];
+                if (branch.length === 0 || branch[0] === null) {
                     matchedIndex = i;
                     break;
                 }
-                const result = this.evaluateExpr(branch.exprId);
+                const result = this.evaluateExpr(branch[0]);
                 if (result) {
                     matchedIndex = i;
                     break;

package/runtime/MarkerController.d.ts

@@ -2,26 +2,25 @@ 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 { type CompactMarkerConfig } from './FluffBase.js';
+import type { MarkerManagerInterface } from './MarkerManagerInterface.js';
 import { type Scope } from './ScopeRegistry.js';
-interface MarkerManagerLike {
-    getController: (id: number, startMarker: Comment) => MarkerController | undefined;
-    ensureController?: (id: number, type: string, startMarker: Comment, endMarker: Comment | null) => MarkerController | undefined;
-    cleanupController?: (id: number, startMarker?: Comment) => void;
-}
-export declare abstract class MarkerController {
+export declare abstract class MarkerController<TConfig extends CompactMarkerConfig = CompactMarkerConfig> {
     protected readonly id: number;
     protected readonly startMarker: Comment;
     protected readonly endMarker: Comment | null;
+    protected readonly config: TConfig;
     protected readonly subscriptions: Subscription[];
+    protected readonly bindingsSubscriptions: Subscription[];
     protected readonly host: FluffHostElement;
     protected readonly shadowRoot: ShadowRoot;
     protected parentScope: Scope | undefined;
     protected loopContext: Record<string, unknown>;
-    protected markerManager: MarkerManagerLike | undefined;
-    protected constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: FluffHostElement, shadowRoot: ShadowRoot);
+    protected markerManager: MarkerManagerInterface | undefined;
+    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: FluffHostElement, shadowRoot: ShadowRoot, config: TConfig);
     setParentScope(scope: Scope | undefined): void;
     setLoopContext(context: Record<string, unknown>): void;
-    setMarkerManager(markerManager: MarkerManagerLike): void;
+    setMarkerManager(markerManager: MarkerManagerInterface): void;
     abstract initialize(): void;
     cleanup(): void;
     updateRenderContext(renderContext?: RenderContext): void;
@@ -34,9 +33,8 @@ export declare abstract class MarkerController {
     protected insertBeforeEndMarker(node: Node): void;
     protected refreshParentBindings(): void;
     private __getFluffElementHost;
-    protected setScopeOnChildren(node: Node, scope: Scope, renderContext?: RenderContext, markerManager?: MarkerManagerLike, bindingsSubscriptions?: Subscription[]): void;
+    protected setScopeOnChildren(node: Node, scope: Scope, renderContext?: RenderContext, markerManager?: MarkerManagerInterface, bindingsSubscriptions?: Subscription[]): void;
     protected cloneAndInsertTemplate(template: HTMLTemplateElement, context: Record<string, unknown>, renderContext: RenderContext | undefined, bindingsSubscriptions: Subscription[]): void;
     private unwrapNamespaceWrapper;
     protected processBindingsOnNode(node: Element, scope: Scope, bindingsSubscriptions?: Subscription[]): void;
 }
-export {};

package/runtime/MarkerController.js

@@ -6,16 +6,19 @@ export class MarkerController {
     id;
     startMarker;
     endMarker;
+    config;
     subscriptions = [];
+    bindingsSubscriptions = [];
     host;
     shadowRoot;
     parentScope;
     loopContext = {};
     markerManager;
-    constructor(id, startMarker, endMarker, host, shadowRoot) {
+    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
         this.id = id;
         this.startMarker = startMarker;
         this.endMarker = endMarker;
+        this.config = config;
         this.host = host;
         this.shadowRoot = shadowRoot;
     }
@@ -109,7 +112,7 @@ export class MarkerController {
             const next = current.nextSibling;
             if (current instanceof Comment) {
                 const markerMatch = MARKER_REGEX.exec(current.data);
-                if (markerMatch && this.markerManager?.cleanupController) {
+                if (markerMatch && this.markerManager) {
                     const markerId = parseInt(markerMatch[2], 10);
                     this.markerManager.cleanupController(markerId, current);
                 }
@@ -152,7 +155,7 @@ export class MarkerController {
                 const endPattern = `/fluff:${markerType}:${markerId}`;
                 let controller = markerManager.getController(markerId, node);
                 const shouldInitialize = controller === undefined;
-                if (!controller && markerManager.ensureController) {
+                if (!controller) {
                     let endMarker = null;
                     let current = node.nextSibling;
                     while (current) {

package/runtime/MarkerManager.d.ts

@@ -1,14 +1,11 @@
-import type { MarkerConfigEntries } from './MarkerManagerInterface.js';
+import type { MarkerConfigEntries, MarkerManagerInterface } from './MarkerManagerInterface.js';
 import type { MarkerController } from './MarkerController.js';
-export declare class MarkerManager {
+export declare class MarkerManager implements MarkerManagerInterface {
     private readonly controllers;
     private readonly configs;
     private readonly host;
     private readonly shadowRoot;
     constructor(host: HTMLElement, shadowRoot: ShadowRoot);
-    private decodeConfig;
-    private isMarkerConfig;
-    private isCompactMarkerConfig;
     initializeFromConfig(entries: MarkerConfigEntries): void;
     ensureController(id: number, type: string, startMarker: Comment, endMarker: Comment | null): MarkerController | undefined;
     getController(id: number, startMarker: Comment): MarkerController | undefined;

package/runtime/MarkerManager.js

@@ -1,10 +1,9 @@
 import { BreakController } from './BreakController.js';
-import { FluffBase } from './FluffBase.js';
 import { ForController } from './ForController.js';
 import { IfController } from './IfController.js';
-import { MarkerConfigGuards } from './MarkerConfigGuards.js';
 import { SwitchController } from './SwitchController.js';
 import { TextController } from './TextController.js';
+const MARKER_TYPES = ['if', 'for', 'text', 'switch', 'break'];
 export class MarkerManager {
     controllers = new Map();
     configs = new Map();
@@ -14,46 +13,16 @@ export class MarkerManager {
         this.host = host;
         this.shadowRoot = shadowRoot;
     }
-    decodeConfig(config) {
-        if (this.isCompactMarkerConfig(config)) {
-            const decoded = FluffBase.__decodeMarkerConfig(config);
-            if (this.isMarkerConfig(decoded)) {
-                return decoded;
-            }
-            throw new Error('Decoded marker config is invalid');
-        }
-        if (!Array.isArray(config)) {
-            return config;
-        }
-        throw new Error('Invalid marker config format');
-    }
-    isMarkerConfig(value) {
-        if (typeof value !== 'object' || value === null)
-            return false;
-        if (!('type' in value))
-            return false;
-        const typeVal = value.type;
-        return typeof typeVal === 'string' && ['if', 'for', 'text', 'switch', 'break'].includes(typeVal);
-    }
-    isCompactMarkerConfig(config) {
-        if (!Array.isArray(config))
-            return false;
-        if (config.length === 0)
-            return false;
-        const firstElement = config[0];
-        return typeof firstElement === 'number' && firstElement >= 0 && firstElement <= 4;
-    }
     initializeFromConfig(entries) {
         this.configs.clear();
-        for (const [id, rawConfig] of entries) {
-            const config = this.decodeConfig(rawConfig);
+        for (const [id, config] of entries) {
             this.configs.set(id, config);
         }
         for (const [id] of entries) {
             const config = this.configs.get(id);
             if (!config)
                 continue;
-            const { startMarker, endMarker } = this.findMarkers(id, config.type);
+            const { startMarker, endMarker } = this.findMarkers(id, MARKER_TYPES[config[0]]);
             if (!startMarker) {
                 continue;
             }
@@ -77,7 +46,7 @@ export class MarkerManager {
             return existing;
         }
         const config = this.configs.get(id);
-        if (config?.type !== type) {
+        if (!config || MARKER_TYPES[config[0]] !== type) {
             return undefined;
         }
         const controller = this.createController(id, startMarker, endMarker, config);
@@ -149,21 +118,13 @@ export class MarkerManager {
         return { startMarker, endMarker };
     }
     createController(id, startMarker, endMarker, config) {
-        if (MarkerConfigGuards.isIfConfig(config)) {
-            return new IfController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
-        }
-        if (MarkerConfigGuards.isForConfig(config)) {
-            return new ForController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
-        }
-        if (MarkerConfigGuards.isSwitchConfig(config)) {
-            return new SwitchController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
-        }
-        if (MarkerConfigGuards.isTextConfig(config)) {
-            return new TextController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
-        }
-        if (MarkerConfigGuards.isBreakConfig(config)) {
-            return new BreakController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+        switch (config[0]) {
+            case 0: return new IfController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+            case 1: return new ForController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+            case 2: return new TextController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+            case 3: return new SwitchController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+            case 4: return new BreakController(id, startMarker, endMarker, this.host, this.shadowRoot, config);
+            default: return null;
         }
-        return null;
     }
 }

package/runtime/MarkerManagerInterface.d.ts

@@ -1,7 +1,10 @@
-import type { MarkerConfig } from '../interfaces/MarkerConfig.js';
 import type { CompactMarkerConfig } from './FluffBase.js';
-export type MarkerConfigEntries = [number, MarkerConfig | CompactMarkerConfig][];
+import type { MarkerController } from './MarkerController.js';
+export type MarkerConfigEntries = [number, CompactMarkerConfig][];
 export interface MarkerManagerInterface {
     initializeFromConfig: (entries: MarkerConfigEntries) => void;
+    getController: (id: number, startMarker: Comment) => MarkerController | undefined;
+    ensureController: (id: number, type: string, startMarker: Comment, endMarker: Comment | null) => MarkerController | undefined;
+    cleanupController: (id: number, startMarker?: Comment) => void;
     cleanup: () => void;
 }

package/runtime/SwitchController.d.ts

@@ -1,9 +1,6 @@
-import type { SwitchMarkerConfig } from '../interfaces/SwitchMarkerConfig.js';
+import { type CompactSwitchConfig } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
-export declare class SwitchController extends MarkerController {
-    private readonly config;
+export declare class SwitchController extends MarkerController<CompactSwitchConfig> {
     private templates;
-    private readonly bindingsSubscriptions;
-    constructor(id: number, startMarker: Comment, endMarker: Comment | null, host: HTMLElement, shadowRoot: ShadowRoot, config: SwitchMarkerConfig);
     initialize(): void;
 }

package/runtime/SwitchController.js

@@ -1,38 +1,35 @@
+import { FluffBase } from './FluffBase.js';
 import { MarkerController } from './MarkerController.js';
 export class SwitchController extends MarkerController {
-    config;
     templates = [];
-    bindingsSubscriptions = [];
-    constructor(id, startMarker, endMarker, host, shadowRoot, config) {
-        super(id, startMarker, endMarker, host, shadowRoot);
-        this.config = config;
-    }
     initialize() {
         const hostTag = this.host.tagName.toLowerCase();
         const templateIdPrefix = `${hostTag}-${this.id}-`;
         this.templates = Array.from(this.shadowRoot.querySelectorAll(`template[data-fluff-case^="${templateIdPrefix}"]`));
-        const deps = this.config.deps ?? [];
+        // CompactSwitchConfig: [3, exprId, deps, cases[]]  —  case = [isDefault, fallthrough, valueExprId]
+        const [, expressionExprId, compactDeps, cases] = this.config;
+        const deps = FluffBase.__decodeDeps(compactDeps) ?? [];
         const update = () => {
             this.clearContentBetweenMarkersWithCleanup(this.bindingsSubscriptions);
-            const switchValue = this.evaluateExpr(this.config.expressionExprId);
+            const switchValue = this.evaluateExpr(expressionExprId);
             let matched = false;
             let shouldFallthrough = false;
             const renderContext = {
                 shouldBreak: false
             };
-            for (let i = 0; i < this.config.cases.length; i++) {
+            for (let i = 0; i < cases.length; i++) {
                 if (renderContext.shouldBreak)
                     break;
-                const caseInfo = this.config.cases[i];
+                const [isDefault, fallthrough, valueExprId] = cases[i];
                 const template = this.templates[i];
                 if (!template)
                     continue;
-                const caseMatches = caseInfo.isDefault
-                    || (caseInfo.valueExprId !== undefined && this.evaluateExpr(caseInfo.valueExprId) === switchValue);
+                const caseMatches = isDefault
+                    || (valueExprId !== null && this.evaluateExpr(valueExprId) === switchValue);
                 if (shouldFallthrough || (!matched && caseMatches)) {
                     matched = true;
                     this.cloneAndInsertTemplate(template, this.loopContext, renderContext, this.bindingsSubscriptions);
-                    shouldFallthrough = caseInfo.fallthrough;
+                    shouldFallthrough = fallthrough;
                 }
             }
             this.refreshParentBindings();