@fluffjs/cli 0.0.8 → 0.1.0

package/CodeGenerator.js

@@ -1,767 +1,372 @@
+import { parse } from '@babel/parser';
+import * as t from '@babel/types';
 import * as parse5 from 'parse5';
-import { addThisPrefix, addThisPrefixSafe, expressionUsesVariable, extractRootIdentifier, parseInterpolations, parsePipedExpression, renameVariable, transformForExpression, transformForExpressionKeepIterator, transformPipedExpression } from './ExpressionTransformer.js';
+import { generate, parseMethodBody } from './BabelHelpers.js';
+import { ExpressionTransformer } from './ExpressionTransformer.js';
+import { Parse5Helpers } from './Parse5Helpers.js';
+const RESTRICTED_ELEMENT_PREFIX = 'x-fluff-el-';
 export class CodeGenerator {
-    reactiveProperties = new Set();
-    templateRefs = [];
-    setReactiveProperties(props) {
-        this.reactiveProperties = props;
-    }
-    setTemplateRefs(refs) {
-        this.templateRefs = refs;
+    componentSelectors;
+    componentSelector;
+    static globalExprIdsByExpr = new Map();
+    static globalExprs = [];
+    static globalHandlerIdsByExpr = new Map();
+    static globalHandlers = [];
+    markerId = 0;
+    markerConfigs = new Map();
+    usedExprIds = [];
+    usedHandlerIds = [];
+    bindingsMap = new Map();
+    rootFragment = null;
+    collectedTemplates = [];
+    constructor(componentSelectors = new Set(), componentSelector = '') {
+        this.componentSelectors = componentSelectors;
+        this.componentSelector = componentSelector;
+    }
+    static resetGlobalState() {
+        CodeGenerator.globalExprIdsByExpr.clear();
+        CodeGenerator.globalExprs = [];
+        CodeGenerator.globalHandlerIdsByExpr.clear();
+        CodeGenerator.globalHandlers = [];
+    }
+    generateRenderMethod(template, styles) {
+        this.markerId = 0;
+        this.markerConfigs.clear();
+        const html = this.generateHtml(template);
+        const configJson = JSON.stringify(Array.from(this.markerConfigs.entries()));
+        return this.generateRenderMethodFromHtml(html, styles, configJson);
+    }
+    generateHtml(template) {
+        this.rootFragment = parse5.parseFragment('');
+        this.collectedTemplates.length = 0;
+        this.renderNodesToParent(template.root, this.rootFragment);
+        for (const tpl of this.collectedTemplates) {
+            tpl.parentNode = this.rootFragment;
+            this.rootFragment.childNodes.push(tpl);
+        }
+        return parse5.serialize(this.rootFragment);
     }
-    generateRenderMethod(html, styles) {
-        let content = '';
+    generateRenderMethodFromHtml(html, styles, markerConfigJson) {
+        let content = html;
         if (styles) {
-            content += `<style>${styles}</style>`;
+            const fragment = parse5.parseFragment(html);
+            const styleElement = Parse5Helpers.createElement('style', []);
+            Parse5Helpers.appendText(styleElement, styles);
+            fragment.childNodes.unshift(styleElement);
+            styleElement.parentNode = fragment;
+            content = parse5.serialize(fragment);
         }
-        content += html;
-        content = this.escapeForTemplateLiteral(content);
-        return `this.__getShadowRoot().innerHTML = \`${content}\`;`;
-    }
-    generateBindingsSetup(bindings, controlFlows) {
-        const lines = [];
-        for (const binding of bindings) {
-            lines.push(this.generateBindingCode(binding));
+        const statements = [];
+        statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__getShadowRoot')), []), t.identifier('innerHTML')), t.stringLiteral(content))));
+        if (markerConfigJson) {
+            statements.push(t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__setMarkerConfigs')), [t.stringLiteral(markerConfigJson)])));
         }
-        lines.push('const __renderById = {};');
-        lines.push(`const __triggerNested = (container) => {
-            const walker = document.createTreeWalker(container, NodeFilter.SHOW_COMMENT);
-            while (walker.nextNode()) {
-                const id = walker.currentNode.textContent;
-                if (__renderById[id]) __renderById[id]();
-            }
-        };`);
-        for (const cf of controlFlows) {
-            lines.push(this.generateControlFlowCode(cf));
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
+    }
+    getMarkerConfigJson() {
+        return JSON.stringify(Array.from(this.markerConfigs.entries()));
+    }
+    generateBindingsSetup() {
+        const statements = [
+            t.expressionStatement(t.callExpression(t.memberExpression(t.thisExpression(), t.identifier('__initializeMarkers')), [t.identifier('MarkerManager')])),
+            t.expressionStatement(t.callExpression(t.memberExpression(t.super(), t.identifier('__setupBindings')), []))
+        ];
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
+    }
+    getBindingsMap() {
+        return Object.fromEntries(this.bindingsMap.entries());
+    }
+    generateExpressionAssignments() {
+        const statements = [];
+        for (const id of this.usedExprIds) {
+            const expr = CodeGenerator.globalExprs[id];
+            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(expr);
+            const arrowFunc = CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
+            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__e')), t.numericLiteral(id), true), arrowFunc)));
         }
-        return lines.join('\n        ');
-    }
-    getPropertyRef(propName) {
-        if (this.reactiveProperties.has(propName)) {
-            return `__${propName}`;
+        for (const id of this.usedHandlerIds) {
+            const handler = CodeGenerator.globalHandlers[id];
+            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(handler);
+            const arrowFunc = CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
+            statements.push(t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.memberExpression(t.identifier('FluffBase'), t.identifier('__h')), t.numericLiteral(id), true), arrowFunc)));
+        }
+        if (statements.length === 0) {
+            return '';
         }
-        return propName;
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
     }
-    extractBaseProp(expr) {
-        const result = extractRootIdentifier(expr);
-        if (result === null) {
-            throw new Error(`Failed to extract base property from expression: "${expr}"`);
+    static generateGlobalExprTable() {
+        const exprElements = CodeGenerator.globalExprs.map(e => {
+            const normalizedExpr = CodeGenerator.normalizeCompiledExpr(e);
+            return CodeGenerator.buildExpressionArrowFunction(['t', 'l'], normalizedExpr);
+        });
+        const handlerElements = CodeGenerator.globalHandlers.map(h => {
+            const normalizedHandler = CodeGenerator.normalizeCompiledExpr(h);
+            return CodeGenerator.buildHandlerArrowFunction(['t', 'l', '__ev'], normalizedHandler);
+        });
+        const statements = [
+            t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier('FluffBase'), t.identifier('__e')), t.arrayExpression(exprElements))),
+            t.expressionStatement(t.assignmentExpression('=', t.memberExpression(t.identifier('FluffBase'), t.identifier('__h')), t.arrayExpression(handlerElements)))
+        ];
+        const program = t.program(statements);
+        return generate(program, { compact: false }).code;
+    }
+    static buildExpressionArrowFunction(params, bodyExpr) {
+        const paramNodes = params.map(p => t.identifier(p));
+        const exprAst = parse(`(${bodyExpr})`, { sourceType: 'module' });
+        const [exprStmt] = exprAst.program.body;
+        if (t.isExpressionStatement(exprStmt)) {
+            return t.arrowFunctionExpression(paramNodes, exprStmt.expression);
         }
-        return result;
+        return t.arrowFunctionExpression(paramNodes, t.identifier('undefined'));
     }
-    escapeForTemplateLiteral(content) {
-        return content.replace(/`/g, '\\`')
-            .replace(/\$/g, '\\$');
+    static buildHandlerArrowFunction(params, bodyCode) {
+        const paramNodes = params.map(p => t.identifier(p));
+        const bodyStatements = parseMethodBody(bodyCode);
+        return t.arrowFunctionExpression(paramNodes, t.blockStatement(bodyStatements));
     }
-    escapeForTemplateLiteralPreservingExpressions(content) {
-        let result = content.replace(/`/g, '\\`');
-        result = result.replace(/\$(?!\{)/g, '\\$');
+    static normalizeCompiledExpr(expr) {
+        let result = expr;
+        if (result.includes('this')) {
+            result = ExpressionTransformer.replaceThisExpression(result, 't');
+        }
+        if (result.includes('$event')) {
+            result = ExpressionTransformer.renameVariable(result, '$event', '__ev');
+        }
         return result;
     }
-    dotsToDashes(str) {
-        return str.replace(/\./g, '-');
+    nextMarkerId() {
+        return this.markerId++;
     }
-    removeIndexSuffix(str) {
-        return str.replace(/-\d+$/, '');
+    renderNodesToParent(nodes, parent) {
+        for (const node of nodes) {
+            this.renderNodeToParent(node, parent);
+        }
     }
-    generateBindingCode(binding) {
-        const { id, type, expression, target, eventName, className, styleProp } = binding;
-        switch (type) {
+    renderNodeToParent(node, parent) {
+        switch (node.type) {
+            case 'element':
+                this.renderElementToParent(node, parent);
+                break;
             case 'text':
-                return this.generateTextBinding(id, expression);
-            case 'property':
-                return target ? this.generatePropertyBinding(id, target, expression) : '';
-            case 'event':
-                return eventName ? this.generateEventBinding(id, eventName, expression) : '';
-            case 'class':
-                return className ? this.generateClassBinding(id, className, expression) : '';
-            case 'style':
-                return styleProp ? this.generateStyleBinding(id, styleProp, expression) : '';
-            default:
-                return '';
+                this.renderTextToParent(node, parent);
+                break;
+            case 'interpolation':
+                this.renderInterpolationToParent(node, parent);
+                break;
+            case 'comment':
+                this.renderCommentToParent(node, parent);
+                break;
+            case 'if':
+                this.renderIfToParent(node, parent);
+                break;
+            case 'for':
+                this.renderForToParent(node, parent);
+                break;
+            case 'switch':
+                this.renderSwitchToParent(node, parent);
+                break;
+            case 'break':
+                this.renderBreakToParent(parent);
+                break;
         }
     }
-    generateTextBinding(id, expression) {
-        const { expression: baseExpr, pipes } = parsePipedExpression(expression);
-        const hasPipes = pipes.length > 0;
-        const baseProp = this.extractBaseProp(baseExpr);
-        const propRef = this.getPropertyRef(baseProp);
-        const restPath = baseExpr.split('.')
-            .slice(1);
-        const safeAccess = restPath.length > 0 ? `Array.isArray(val) ? val.${restPath.join('.')} : (val && typeof val === 'object' ? val.${restPath.join('.')} : val)` : 'val';
-        const reactivePropsArray = Array.from(this.reactiveProperties);
-        const subscribeToAll = reactivePropsArray.map(p => `if (this.__${p}?.onChange) this.__bindPropertyChange(this.__${p}, __update);`)
-            .join('\n                ');
-        if (hasPipes) {
-            const transformedExpr = transformPipedExpression(expression);
-            return `{
-                const __update = () => {
-                    const result = ${transformedExpr};
-                    this.__setText("${id}", String(result ?? ''));
-                };
-                ${subscribeToAll}
-                __update();
-            }`;
+    renderElementToParent(node, parent) {
+        const attrs = [];
+        if (this.isComponentTag(node.tagName)) {
+            attrs.push({ name: 'x-fluff-component', value: '' });
         }
-        return `{
-            const prop = this.${propRef};
-            if (prop && prop.onChange) {
-                const __getText = (val) => {
-                    if (val == null) return '';
-                    ${restPath.length > 0 ? `return String(${safeAccess} ?? '');` : 'return String(val ?? \'\');'}
-                };
-                this.__bindPropertyChange(prop, (val) => {
-                    this.__setText("${id}", __getText(val));
-                });
-            } else {
-                const __update = () => {
-                    const raw = this.${propRef};
-                    const val = (raw && typeof raw === 'object' && raw.getValue) ? raw.getValue() : raw;
-                    ${restPath.length > 0 ? `const result = val != null ? val.${restPath.join('.')} : undefined;` : 'const result = val;'}
-                    this.__setText("${id}", String(result ?? ''));
-                };
-                ${subscribeToAll}
-                __update();
-            }
-        }`;
-    }
-    generatePropertyBinding(id, target, expression) {
-        const baseProp = this.extractBaseProp(expression);
-        const propRef = this.getPropertyRef(baseProp);
-        const targetCamel = this.kebabToCamel(target);
-        const restPath = expression.split('.')
-            .slice(1);
-        const valueExpr = restPath.length > 0 ? `val?.${restPath.join('.')}` : 'val';
-        return `{
-            const prop = this.${propRef};
-            if (prop && prop.onChange) {
-                this.__bindPropertyChange(prop, (val) => {
-                    this.__bindToChild("${id}", "${targetCamel}", ${valueExpr});
-                });
-            } else {
-                const val = (this.${propRef} && typeof this.${propRef} === 'object' && this.${propRef}.getValue) ? this.${propRef}.getValue() : this.${propRef};
-                this.__bindToChild("${id}", "${targetCamel}", ${restPath.length > 0 ? `val?.${restPath.join('.')}` : 'val'});
-            }
-        }`;
-    }
-    generateEventBinding(id, eventName, expression) {
-        const [baseEvent, ...modifiers] = eventName.split('.');
-        const handlerCode = renameVariable(expression, '$event', '__ev');
-        const eventCamel = this.kebabToCamel(baseEvent);
-        const refLookups = this.generateRefLookups(expression);
-        if (modifiers.length > 0) {
-            const conditions = modifiers.map(m => {
-                if (m === 'enter')
-                    return '__ev.key === "Enter"';
-                if (m === 'escape')
-                    return '__ev.key === "Escape"';
-                if (m === 'space')
-                    return '__ev.key === " "';
-                return 'true';
-            })
-                .join(' && ');
-            return `this.__bindEvent("${id}", "${baseEvent}", (__ev) => { ${refLookups}if (${conditions}) { this.${handlerCode}; } });`;
+        for (const [name, value] of Object.entries(node.attributes)) {
+            attrs.push({ name, value });
         }
-        return `this.__bindOutput("${id}", "${eventCamel}", (__ev: any) => { ${refLookups}this.${handlerCode}; });`;
-    }
-    generateRefLookups(expression) {
-        const usedRefs = this.templateRefs.filter(ref => new RegExp(`\\b${ref}\\b`).test(expression));
-        if (usedRefs.length === 0)
-            return '';
-        return usedRefs.map(ref => `const ${ref} = this.__getShadowRoot().querySelector('[data-ref="${ref}"]');`)
-            .join(' ') + ' ';
-    }
-    generateClassBinding(id, className, expression) {
-        const baseProp = this.extractBaseProp(expression);
-        const propRef = this.getPropertyRef(baseProp);
-        const restPath = expression.split('.')
-            .slice(1);
-        const safeExpr = restPath.length > 0 ? `this.${baseProp}?.${restPath.join('.')}` : `this.${baseProp}`;
-        return `{
-            const prop = this.${propRef};
-            const el = this.__getElement("${id}");
-            if (prop && prop.onChange) {
-                this.__bindPropertyChange(prop, (val) => {
-                    const finalVal = ${restPath.length > 0 ? `val?.${restPath.join('.')}` : 'val'};
-                    if (finalVal) { this.__addClass("${id}", "${className}"); }
-                    else { this.__removeClass("${id}", "${className}"); }
-                });
-            } else if (el) {
-                if (${safeExpr}) { el.classList.add("${className}"); }
-                else { el.classList.remove("${className}"); }
+        if (node.id) {
+            attrs.push({ name: 'data-lid', value: node.id });
+        }
+        if (node.bindings.length > 0) {
+            if (!node.id) {
+                throw new Error(`Bindings on <${node.tagName}> require a data-lid`);
             }
-        }`;
-    }
-    generateStyleBinding(id, styleProp, expression) {
-        const reactivePropsArray = Array.from(this.reactiveProperties);
-        const subscribeToAll = reactivePropsArray.map(p => `if (this.__${p}?.onChange) this.__bindPropertyChange(this.__${p}, __update);`)
-            .join('\n                ');
-        const transformedExpr = addThisPrefix(expression);
-        const stylePropCamel = this.kebabToCamel(styleProp);
-        return `{
-            const el = this.__getElement("${id}");
-            const __update = () => {
-                if (el) {
-                    (el as HTMLElement).style.${stylePropCamel} = ${transformedExpr};
-                }
-            };
-            ${subscribeToAll}
-            __update();
-        }`;
-    }
-    generateControlFlowCode(cf) {
-        if (cf.type === 'if') {
-            return this.generateIfCode(cf);
+            const bindingsPayload = node.bindings.map(b => this.serializeBinding(b));
+            this.bindingsMap.set(node.id, bindingsPayload);
         }
-        else if (cf.type === 'for') {
-            return this.generateForCode(cf);
+        const refBinding = node.bindings.find(binding => binding.binding === 'ref');
+        if (refBinding) {
+            attrs.push({ name: 'data-ref', value: refBinding.name });
         }
-        else if (cf.type === 'switch') {
-            return this.generateSwitchCode(cf);
+        let { tagName } = node;
+        if (tagName.startsWith(RESTRICTED_ELEMENT_PREFIX)) {
+            tagName = tagName.slice(RESTRICTED_ELEMENT_PREFIX.length);
         }
-        return '';
-    }
-    processContentBindings(content, prefix, skipEscape = false) {
-        const events = new Set();
-        let bindIdx = 0;
-        const fragment = parse5.parseFragment(content);
-        this.walkAndTransformBindings(fragment.childNodes, prefix, events, () => bindIdx++);
-        let processed = parse5.serialize(fragment);
-        if (!skipEscape) {
-            processed = this.escapeForTemplateLiteral(processed);
+        const el = Parse5Helpers.createElement(tagName, attrs);
+        Parse5Helpers.appendChild(parent, el);
+        this.renderNodesToParent(node.children, el);
+    }
+    renderTextToParent(node, parent) {
+        Parse5Helpers.appendText(parent, node.content);
+    }
+    isComponentTag(tagName) {
+        const resolvedTagName = tagName.startsWith(RESTRICTED_ELEMENT_PREFIX)
+            ? tagName.slice(RESTRICTED_ELEMENT_PREFIX.length)
+            : tagName;
+        return this.componentSelectors.has(resolvedTagName);
+    }
+    serializeBinding(binding) {
+        const result = {
+            n: binding.name,
+            b: binding.binding
+        };
+        if (binding.binding === 'ref') {
+            return result;
         }
-        return { processed, events: [...events] };
-    }
-    walkAndTransformBindings(nodes, prefix, events, getBindIdx) {
-        for (const node of nodes) {
-            if (this.isParse5Element(node)) {
-                const attrsToRemove = [];
-                const attrsToAdd = [];
-                const subscribeMap = new Map();
-                for (const attr of node.attrs) {
-                    if (attr.name === '[subscribe]') {
-                        const parts = attr.value.split(':');
-                        if (parts.length === 2) {
-                            subscribeMap.set(parts[0].trim(), parts[1].trim());
-                        }
-                    }
-                }
-                for (const attr of node.attrs) {
-                    if (attr.name === '[subscribe]') {
-                        attrsToRemove.push(attr.name);
-                        continue;
-                    }
-                    if (attr.name.startsWith('#')) {
-                        const refName = attr.name.slice(1);
-                        attrsToRemove.push(attr.name);
-                        attrsToAdd.push({ name: 'data-ref', value: refName });
-                        continue;
-                    }
-                    if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
-                        let event = '';
-                        let handler = '';
-                        if (attr.value.startsWith('[')) {
-                            try {
-                                const parsed = JSON.parse(attr.value);
-                                if (Array.isArray(parsed) && typeof parsed[0] === 'string' && typeof parsed[1] === 'string') {
-                                    [event, handler] = parsed;
-                                }
-                            }
-                            catch {
-                                event = attr.name.slice(1, -1);
-                                handler = attr.value;
-                            }
-                        }
-                        else {
-                            event = attr.name.slice(1, -1);
-                            handler = attr.value;
-                        }
-                        const safeEvent = this.dotsToDashes(event);
-                        events.add(safeEvent);
-                        attrsToRemove.push(attr.name);
-                        attrsToAdd.push({
-                            name: `data-${prefix}-event-${safeEvent}`,
-                            value: JSON.stringify([event, handler])
-                        });
-                    }
-                    else if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
-                        let prop = '';
-                        let expr = '';
-                        if (attr.value.startsWith('[')) {
-                            try {
-                                const parsed = JSON.parse(attr.value);
-                                if (Array.isArray(parsed) && typeof parsed[0] === 'string' && typeof parsed[1] === 'string') {
-                                    [prop, expr] = parsed;
-                                }
-                            }
-                            catch {
-                                prop = attr.name.slice(1, -1);
-                                expr = attr.value;
-                            }
-                        }
-                        else {
-                            prop = attr.name.slice(1, -1);
-                            expr = attr.value;
-                        }
-                        const dangerousProps = ['innerHTML', 'outerHTML', 'href', 'src'];
-                        const isUnsafe = prop.endsWith('.unsafe');
-                        const baseProp = isUnsafe ? prop.slice(0, -7) : prop;
-                        if (dangerousProps.includes(baseProp) && !isUnsafe) {
-                            throw new Error(`XSS Protection: [${prop}] binding is blocked. ` + `Use [${prop}.unsafe] if you understand the security implications ` + 'and have sanitized user input.');
-                        }
-                        const safeProp = this.dotsToDashes(baseProp);
-                        attrsToRemove.push(attr.name);
-                        const subscribeTo = subscribeMap.get(prop) ?? subscribeMap.get(baseProp);
-                        const bindingData = subscribeTo ? [baseProp, expr, subscribeTo] : [baseProp, expr];
-                        attrsToAdd.push({
-                            name: `data-${prefix}-bind-${safeProp}-${getBindIdx()}`,
-                            value: JSON.stringify(bindingData)
-                        });
-                    }
-                }
-                node.attrs = node.attrs.filter(a => !attrsToRemove.includes(a.name));
-                for (const newAttr of attrsToAdd) {
-                    node.attrs.push(newAttr);
-                }
-                if (node.childNodes) {
-                    this.walkAndTransformBindings(node.childNodes, prefix, events, getBindIdx);
-                }
-            }
+        if (binding.deps) {
+            result.d = binding.deps;
         }
-    }
-    isParse5Element(node) {
-        return 'tagName' in node;
-    }
-    processAndGenerateBindings(content, prefix) {
-        const result = this.processContentBindings(content, prefix, true);
-        const withInterpolations = this.transformInterpolationsInContent(result.processed);
-        const escaped = this.escapeForTemplateLiteralPreservingExpressions(withInterpolations);
-        const bindingSetup = this.generateBindingSetupCode(prefix, result.events, withInterpolations);
-        return { processed: escaped, bindingSetup };
-    }
-    transformInterpolationsInContent(content, iteratorVar) {
-        const interpolations = parseInterpolations(content);
-        if (interpolations.length === 0)
-            return content;
-        let newContent = '';
-        let lastEnd = 0;
-        for (const { start, end, expr } of interpolations) {
-            newContent += content.slice(lastEnd, start);
-            const { expression: baseExpr, pipes } = parsePipedExpression(expr);
-            if (pipes.length > 0) {
-                let result = iteratorVar && expressionUsesVariable(baseExpr, iteratorVar) ? baseExpr : `this.${baseExpr}`;
-                for (const pipe of pipes) {
-                    const argsStr = pipe.args.length > 0 ? ', ' + pipe.args.join(', ') : '';
-                    result = `this.__pipe('${pipe.name}', ${result}${argsStr})`;
-                }
-                newContent += `\${${result} ?? ''}`;
-            }
-            else {
-                const usesIterator = iteratorVar && expressionUsesVariable(expr, iteratorVar);
-                if (usesIterator) {
-                    newContent += `\${${expr}}`;
-                }
-                else {
-                    newContent += `\${this.${expr} ?? ''}`;
-                }
-            }
-            lastEnd = end;
-        }
-        newContent += content.slice(lastEnd);
-        return newContent;
-    }
-    generateBindingSetupCode(prefix, events, content) {
-        const lines = [];
-        for (const event of events) {
-            lines.push(`this.__wireEvents(container, 'data-${prefix}-event-${event}');`);
-        }
-        const textBindings = this.extractTextBindings(content);
-        for (const { id, expr } of textBindings) {
-            const subscriptions = Array.from(this.reactiveProperties)
-                .map(p => `if (this.__${p}?.onChange) this.__bindPropertyChange(this.__${p}, __update);`)
-                .join('\n                    ');
-            lines.push(`{
-                const el = container.querySelector('[data-lid="${id}"]');
-                if (el) {
-                    const __update = () => { 
-                        const __val = ${expr};
-                        el.textContent = __val != null ? String(__val) : '';
-                    };
-                    ${subscriptions}
-                    __update();
-                }
-            }`);
+        if (binding.subscribe) {
+            result.s = binding.subscribe;
         }
-        const propBindings = this.extractPropertyBindings(content, prefix);
-        for (const { prop, expr, fullAttr } of propBindings) {
-            const transformedExpr = addThisPrefix(expr);
-            const baseProp = this.extractBaseProp(expr);
-            const propRef = this.reactiveProperties.has(baseProp) ? `__${baseProp}` : baseProp;
-            if (prop.startsWith('class.')) {
-                const className = prop.slice(6);
-                lines.push(`{
-                    const __updateClass = () => {
-                        container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach(el => {
-                            if (${transformedExpr}) el.classList.add('${className}');
-                            else el.classList.remove('${className}');
-                        });
-                    };
-                    if (this.${propRef}?.onChange) this.__bindPropertyChange(this.${propRef}, __updateClass);
-                    __updateClass();
-                }`);
-            }
-            else {
-                const propCamel = this.kebabToCamel(prop);
-                lines.push(`{
-                    const __updateProp = () => {
-                        container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach(el => {
-                            this.__setChildPropertyDeferred(el, '${propCamel}', ${transformedExpr});
-                        });
-                    };
-                    if (this.${propRef}?.onChange) this.__bindPropertyChange(this.${propRef}, __updateProp);
-                    __updateProp();
-                }`);
+        if (binding.binding === 'event') {
+            if (!binding.expression) {
+                throw new Error(`Event binding for ${binding.name} is missing expression`);
             }
+            result.h = this.internHandler(binding.expression);
+            return result;
         }
-        return lines.join('\n                        ');
-    }
-    extractPropertyBindings(content, prefix) {
-        const bindings = [];
-        const fragment = parse5.parseFragment(content);
-        const attrPrefix = `data-${prefix}-bind-`;
-        this.walkAndExtractPropertyBindings(fragment.childNodes, attrPrefix, bindings);
-        return bindings;
-    }
-    generateUnifiedRender(id, baseProp, contentEvalCode, bindingSetupCode) {
-        const propRef = this.getPropertyRef(baseProp);
-        return `{
-            const __findMarkers = () => {
-                const walker = document.createTreeWalker(this.__getShadowRoot(), NodeFilter.SHOW_COMMENT);
-                let start = null, end = null;
-                while (walker.nextNode()) {
-                    const text = walker.currentNode.textContent;
-                    if (text === '${id}') start = walker.currentNode;
-                    else if (text === '/${id}') end = walker.currentNode;
-                }
-                return { start, end };
-            };
-            const prop = this.${propRef};
-            
-            const __render = () => {
-                const { start: marker, end: endMarker } = __findMarkers();
-                if (!marker) return;
-                
-                if (endMarker) {
-                    while (marker.nextSibling && marker.nextSibling !== endMarker) {
-                        marker.nextSibling.remove();
-                    }
-                }
-                
-                ${contentEvalCode}
-                
-                const __tmp = document.createElement('div');
-                __tmp.innerHTML = __content;
-                const __frag = document.createDocumentFragment();
-                const __newNodes = [];
-                while (__tmp.firstChild) {
-                    __newNodes.push(__tmp.firstChild);
-                    __frag.appendChild(__tmp.firstChild);
-                }
-                marker.parentNode.insertBefore(__frag, endMarker || marker.nextSibling);
-                const container = marker.parentNode;
-                
-                ${bindingSetupCode}
-                
-                __newNodes.forEach(n => {
-                    if (n.nodeType === 1) __triggerNested(n);
-                    else if (n.nodeType === 8 && __renderById[n.textContent]) __renderById[n.textContent]();
-                });
-            };
-            
-            __renderById['${id}'] = __render;
-            if (prop && prop.onChange) {
-                this.__bindPropertyChange(prop, __render);
+        if (binding.binding === 'two-way') {
+            if (!binding.expression) {
+                throw new Error(`Two-way binding for ${binding.name} is missing expression`);
             }
-            __render();
-        }`;
-    }
-    generateIfCode(cf) {
-        const { id, condition, ifContent, elseContent } = cf;
-        if (!condition)
-            return '';
-        const baseProp = this.extractBaseProp(condition);
-        const transformedCondition = addThisPrefixSafe(condition);
-        const ifBranch = this.processAndGenerateBindings(ifContent ?? '', `${id}-if`);
-        const elseBranch = this.processAndGenerateBindings(elseContent ?? '', `${id}-else`);
-        const contentEvalCode = `const rawCond = ${transformedCondition};
-                const cond = (rawCond && typeof rawCond === 'object' && rawCond.getValue) ? rawCond.getValue() : rawCond;
-                const __content = cond ? \`${ifBranch.processed}\` : \`${elseBranch.processed}\`;
-                const __bindingFn = cond 
-                    ? () => { ${ifBranch.bindingSetup} }
-                    : () => { ${elseBranch.bindingSetup} };`;
-        const bindingSetupCode = '__bindingFn();';
-        return this.generateUnifiedRender(id, baseProp, contentEvalCode, bindingSetupCode);
-    }
-    generateForCode(cf) {
-        const { id, iterator, iterable, content } = cf;
-        if (!iterator || !iterable)
-            return '';
-        const baseProp = this.extractBaseProp(iterable);
-        const isOptionContent = (content ?? '').trim()
-            .startsWith('<option');
-        const markerId = isOptionContent ? `for-${id}` : id;
-        const prefix = `${id}-for`;
-        const processed = this.processContentBindings(content ?? '', prefix, true);
-        let forContent = processed.processed;
-        const interpolations = parseInterpolations(forContent);
-        if (interpolations.length > 0) {
-            let newContent = '';
-            let lastEnd = 0;
-            for (const { start, end, expr } of interpolations) {
-                newContent += forContent.slice(lastEnd, start);
-                if (expr.includes(iterator)) {
-                    newContent += `\${${expr}}`;
-                }
-                else {
-                    newContent += `\${this.${expr}}`;
-                }
-                lastEnd = end;
+            if (!binding.expression.startsWith('this.')) {
+                throw new Error(`Two-way binding for ${binding.name} must target a component property`);
             }
-            newContent += forContent.slice(lastEnd);
-            forContent = newContent;
-        }
-        const bindingSetup = this.generateForBindingSetup(prefix, processed.events, forContent, iterator);
-        const escapedForContent = this.escapeForTemplateLiteralPreservingExpressions(forContent);
-        const contentEvalCode = `const __items = this.${iterable};
-                if (!Array.isArray(__items)) return;
-                const __content = __items.map((${iterator}, __idx) => \`${escapedForContent}\`).join('');`;
-        return this.generateUnifiedRender(markerId, baseProp, contentEvalCode, bindingSetup);
-    }
-    generateForBindingSetup(prefix, _events, content, iterator) {
-        const lines = [];
-        const eventBindings = this.extractEventBindings(content, prefix);
-        for (const { event, handler, safeEvent } of eventBindings) {
-            lines.push(`container.querySelectorAll('[data-${prefix}-event-${safeEvent}]').forEach((el, __idx) => {
-                const __item = __items[__idx];
-                this.__bindOutputOnElement(el, '${event}', ($event) => {
-                    const fn = new Function('${iterator}', '$event', 'return this.${handler}').bind(this);
-                    fn(__item, $event);
-                });
-            });`);
+            result.t = binding.expression.slice('this.'.length);
         }
-        const propBindings = this.extractPropertyBindings(content, prefix);
-        for (const { prop, expr, fullAttr, subscribeTo } of propBindings) {
-            const propCamel = this.kebabToCamel(prop);
-            const evalExpr = expr === iterator ? '__items[__idx]' : transformForExpression(expr, iterator, '__items[__idx]');
-            const baseProp = this.extractBaseProp(expr);
-            const exprUsesIterator = expressionUsesVariable(expr, iterator);
-            if (subscribeTo) {
-                const exprWithThis = transformForExpressionKeepIterator(expr, iterator);
-                const subscribeProps = subscribeTo.split(',')
-                    .map(p => p.trim());
-                const subscriptions = subscribeProps
-                    .map(p => `if (this.__${p}?.onChange) this.__bindPropertyChange(this.__${p}, __updateProp);`)
-                    .join('\n                        ');
-                lines.push(`{
-                        const __updateProp = () => {
-                            const __currentItems = prop?.getValue ? prop.getValue() : __items;
-                            if (!Array.isArray(__currentItems)) return;
-                            container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach((el, __idx) => {
-                                if (__idx < __currentItems.length) {
-                                    const ${iterator} = __currentItems[__idx];
-                                    this.__setChildPropertyDeferred(el, '${propCamel}', ${exprWithThis});
-                                }
-                            });
-                        };
-                        ${subscriptions}
-                        __updateProp();
-                    }`);
-            }
-            else if (baseProp !== iterator && this.reactiveProperties.has(baseProp)) {
-                const propRef = `__${baseProp}`;
-                if (exprUsesIterator) {
-                    const exprWithThis = transformForExpressionKeepIterator(expr, iterator);
-                    lines.push(`{
-                        const __updateProp = () => {
-                            const __currentItems = prop?.getValue ? prop.getValue() : __items;
-                            if (!Array.isArray(__currentItems)) return;
-                            container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach((el, __idx) => {
-                                if (__idx < __currentItems.length) {
-                                    const ${iterator} = __currentItems[__idx];
-                                    this.__setChildPropertyDeferred(el, '${propCamel}', ${exprWithThis});
-                                }
-                            });
-                        };
-                        if (this.${propRef}?.onChange) this.__bindPropertyChange(this.${propRef}, __updateProp);
-                        __updateProp();
-                    }`);
-                }
-                else {
-                    lines.push(`{
-                        const __updateProp = () => {
-                            container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach((el) => {
-                                this.__setChildPropertyDeferred(el, '${propCamel}', ${evalExpr});
-                            });
-                        };
-                        if (this.${propRef}?.onChange) this.__bindPropertyChange(this.${propRef}, __updateProp);
-                        __updateProp();
-                    }`);
-                }
-            }
-            else {
-                lines.push(`container.querySelectorAll('[data-${prefix}-bind-${fullAttr}]').forEach((el, __idx) => {
-                    this.__setChildPropertyDeferred(el, '${propCamel}', ${evalExpr});
-                });`);
-            }
+        if (!binding.expression) {
+            throw new Error(`Binding for ${binding.name} is missing expression`);
         }
-        return lines.join('\n                ');
-    }
-    extractEventBindings(content, prefix) {
-        const bindings = [];
-        const fragment = parse5.parseFragment(content);
-        const attrPrefix = `data-${prefix}-event-`;
-        this.walkAndExtractEventBindings(fragment.childNodes, attrPrefix, bindings);
-        return bindings;
+        result.e = this.internExpression(binding.expression);
+        return result;
     }
-    walkAndExtractEventBindings(nodes, attrPrefix, bindings) {
-        for (const node of nodes) {
-            if (this.isParse5Element(node)) {
-                for (const attr of node.attrs) {
-                    if (attr.name.startsWith(attrPrefix)) {
-                        const safeEvent = attr.name.slice(attrPrefix.length);
-                        let event = '';
-                        let handler = '';
-                        if (attr.value.startsWith('[')) {
-                            try {
-                                const unescaped = attr.value.replace(/\\\$/g, '$');
-                                const parsed = JSON.parse(unescaped);
-                                if (Array.isArray(parsed) && typeof parsed[0] === 'string' && typeof parsed[1] === 'string') {
-                                    [event, handler] = parsed;
-                                }
-                            }
-                            catch (e) {
-                                console.error('Failed to parse event binding JSON:', attr.value, e);
-                                event = this.kebabToCamel(safeEvent);
-                                handler = attr.value;
-                            }
-                        }
-                        else {
-                            event = this.kebabToCamel(safeEvent);
-                            handler = attr.value;
-                        }
-                        bindings.push({ event, handler, safeEvent });
-                    }
-                }
-                if (node.childNodes) {
-                    this.walkAndExtractEventBindings(node.childNodes, attrPrefix, bindings);
-                }
+    internExpression(expr) {
+        const existing = CodeGenerator.globalExprIdsByExpr.get(expr);
+        if (existing !== undefined) {
+            if (!this.usedExprIds.includes(existing)) {
+                this.usedExprIds.push(existing);
             }
+            return existing;
         }
-    }
-    generateSwitchCode(cf) {
-        const { id, expression, cases } = cf;
-        if (!expression)
-            return '';
-        const baseProp = this.extractBaseProp(expression);
-        const transformedExpr = addThisPrefixSafe(expression);
-        const processedCases = (cases ?? []).map((c, idx) => {
-            const { processed, bindingSetup } = this.processAndGenerateBindings(c.content, `${id}-case-${idx}`);
-            return {
-                value: c.value, fallthrough: c.fallthrough, content: processed, bindingSetup
-            };
-        });
-        const caseContents = processedCases.map(c => `\`${c.content}\``)
-            .join(', ');
-        const caseConditions = processedCases.map((c, idx) => {
-            if (c.value === null)
-                return `{ idx: ${idx}, match: true }`;
-            return `{ idx: ${idx}, match: __switchVal === (${addThisPrefixSafe(c.value)}) }`;
-        })
-            .join(', ');
-        const caseBindings = processedCases.map(c => `(container) => { ${c.bindingSetup} }`)
-            .join(', ');
-        const fallthrough = processedCases.map(c => c.fallthrough.toString())
-            .join(', ');
-        const contentEvalCode = `const __switchVal = ${transformedExpr};
-                const __cases = [${caseContents}];
-                const __conditions = [${caseConditions}];
-                const __bindings = [${caseBindings}];
-                const __fallthrough = [${fallthrough}];
-                
-                let __content = '';
-                let __bindingFns = [];
-                let __matched = false;
-                for (let i = 0; i < __conditions.length; i++) {
-                    if (__matched || __conditions[i].match) {
-                        __matched = true;
-                        __content += __cases[i];
-                        __bindingFns.push(__bindings[i]);
-                        if (!__fallthrough[i]) break;
-                    }
-                }`;
-        const bindingSetupCode = '__bindingFns.forEach(fn => fn(container));';
-        return this.generateUnifiedRender(id, baseProp, contentEvalCode, bindingSetupCode);
-    }
-    kebabToCamel(str) {
-        return str.replace(/-([a-z])/g, (_, c) => c.toUpperCase());
-    }
-    extractTextBindings(content) {
-        const bindings = [];
-        const fragment = parse5.parseFragment(content);
-        this.walkAndExtractTextBindings(fragment.childNodes, bindings);
-        return bindings;
-    }
-    walkAndExtractTextBindings(nodes, bindings) {
-        for (const node of nodes) {
-            if (this.isParse5Element(node)) {
-                if (node.tagName === 'span') {
-                    const textBindAttr = node.attrs.find(a => a.name === 'data-text-bind');
-                    const lidAttr = node.attrs.find(a => a.name === 'data-lid');
-                    if (textBindAttr && lidAttr) {
-                        bindings.push({ expr: textBindAttr.value, id: lidAttr.value });
-                    }
-                }
-                if (node.childNodes) {
-                    this.walkAndExtractTextBindings(node.childNodes, bindings);
-                }
+        const id = CodeGenerator.globalExprs.length;
+        CodeGenerator.globalExprs.push(expr);
+        CodeGenerator.globalExprIdsByExpr.set(expr, id);
+        this.usedExprIds.push(id);
+        return id;
+    }
+    internHandler(expr) {
+        const existing = CodeGenerator.globalHandlerIdsByExpr.get(expr);
+        if (existing !== undefined) {
+            if (!this.usedHandlerIds.includes(existing)) {
+                this.usedHandlerIds.push(existing);
             }
+            return existing;
         }
-    }
-    walkAndExtractPropertyBindings(nodes, attrPrefix, bindings) {
-        for (const node of nodes) {
-            if (this.isParse5Element(node)) {
-                for (const attr of node.attrs) {
-                    if (attr.name.startsWith(attrPrefix)) {
-                        const fullAttr = attr.name.slice(attrPrefix.length);
-                        let prop = '';
-                        let expr = '';
-                        let subscribeTo = undefined;
-                        if (attr.value.startsWith('[')) {
-                            try {
-                                const parsed = JSON.parse(attr.value);
-                                if (Array.isArray(parsed) && typeof parsed[0] === 'string' && typeof parsed[1] === 'string') {
-                                    [prop, expr] = parsed;
-                                    if (typeof parsed[2] === 'string') {
-                                        [, , subscribeTo] = parsed;
-                                    }
-                                }
-                            }
-                            catch {
-                                prop = this.removeIndexSuffix(fullAttr);
-                                expr = attr.value;
-                            }
-                        }
-                        else {
-                            prop = this.removeIndexSuffix(fullAttr);
-                            expr = attr.value;
-                        }
-                        bindings.push({ prop, expr, fullAttr, subscribeTo });
-                    }
-                }
-                if (node.childNodes) {
-                    this.walkAndExtractPropertyBindings(node.childNodes, attrPrefix, bindings);
-                }
-            }
+        const id = CodeGenerator.globalHandlers.length;
+        CodeGenerator.globalHandlers.push(expr);
+        CodeGenerator.globalHandlerIdsByExpr.set(expr, id);
+        this.usedHandlerIds.push(id);
+        return id;
+    }
+    renderInterpolationToParent(node, parent) {
+        const id = this.nextMarkerId();
+        const config = {
+            type: 'text',
+            exprId: this.internExpression(node.expression),
+            deps: node.deps,
+            pipes: node.pipes?.map(pipe => ({
+                name: pipe.name,
+                argExprIds: pipe.args.map(arg => this.internExpression(arg))
+            }))
+        };
+        this.markerConfigs.set(id, config);
+        Parse5Helpers.appendComment(parent, `fluff:text:${id}`);
+        Parse5Helpers.appendComment(parent, `/fluff:text:${id}`);
+    }
+    renderCommentToParent(node, parent) {
+        Parse5Helpers.appendComment(parent, node.content);
+    }
+    renderIfToParent(node, parent) {
+        const id = this.nextMarkerId();
+        const config = {
+            type: 'if',
+            branches: node.branches.map(b => ({
+                exprId: b.condition ? this.internExpression(b.condition) : undefined,
+                deps: b.conditionDeps
+            }))
+        };
+        this.markerConfigs.set(id, config);
+        Parse5Helpers.appendComment(parent, `fluff:if:${id}`);
+        for (let i = 0; i < node.branches.length; i++) {
+            const branch = node.branches[i];
+            const templateId = `${this.componentSelector}-${id}-${i}`;
+            const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-branch', value: templateId }]);
+            this.renderNodesToParent(branch.children, Parse5Helpers.getTemplateContent(tpl));
+            this.collectedTemplates.push(tpl);
+        }
+        Parse5Helpers.appendComment(parent, `/fluff:if:${id}`);
+    }
+    renderForToParent(node, parent) {
+        const id = this.nextMarkerId();
+        const config = {
+            type: 'for',
+            iterator: node.iterator,
+            iterableExprId: this.internExpression(node.iterable),
+            deps: node.iterableDeps,
+            trackBy: node.trackBy,
+            hasEmpty: !!node.emptyContent
+        };
+        this.markerConfigs.set(id, config);
+        Parse5Helpers.appendComment(parent, `fluff:for:${id}`);
+        const templateId = `${this.componentSelector}-${id}`;
+        const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-tpl', value: templateId }]);
+        this.renderNodesToParent(node.children, Parse5Helpers.getTemplateContent(tpl));
+        this.collectedTemplates.push(tpl);
+        if (node.emptyContent) {
+            const emptyTpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-empty', value: templateId }]);
+            this.renderNodesToParent(node.emptyContent, Parse5Helpers.getTemplateContent(emptyTpl));
+            this.collectedTemplates.push(emptyTpl);
+        }
+        Parse5Helpers.appendComment(parent, `/fluff:for:${id}`);
+    }
+    renderSwitchToParent(node, parent) {
+        const id = this.nextMarkerId();
+        const config = {
+            type: 'switch',
+            expressionExprId: this.internExpression(node.expression),
+            deps: node.expressionDeps,
+            cases: node.cases.map(c => ({
+                valueExprId: c.valueExpression ? this.internExpression(c.valueExpression) : undefined,
+                isDefault: c.isDefault,
+                fallthrough: c.fallthrough
+            }))
+        };
+        this.markerConfigs.set(id, config);
+        Parse5Helpers.appendComment(parent, `fluff:switch:${id}`);
+        for (let i = 0; i < node.cases.length; i++) {
+            const caseNode = node.cases[i];
+            const templateId = `${this.componentSelector}-${id}-${i}`;
+            const tpl = Parse5Helpers.createElement('template', [{ name: 'data-fluff-case', value: templateId }]);
+            this.renderNodesToParent(caseNode.children, Parse5Helpers.getTemplateContent(tpl));
+            this.collectedTemplates.push(tpl);
         }
+        Parse5Helpers.appendComment(parent, `/fluff:switch:${id}`);
+    }
+    renderBreakToParent(parent) {
+        const id = this.nextMarkerId();
+        const config = {
+            type: 'break'
+        };
+        this.markerConfigs.set(id, config);
+        Parse5Helpers.appendComment(parent, `fluff:break:${id}`);
     }
 }