@fluffjs/cli 0.0.8 → 0.1.1

package/TemplateParser.js

@@ -1,330 +1,524 @@
+import { parseExpression } from '@babel/parser';
+import * as t from '@babel/types';
+import he from 'he';
 import * as parse5 from 'parse5';
-import { html as parse5Html } from 'parse5';
-import { ControlFlowParser } from './ControlFlowParser.js';
-import { expressionUsesVariable, parseInterpolations, transformInterpolation } from './ExpressionTransformer.js';
+import { DomPreProcessor } from './DomPreProcessor.js';
+import { ExpressionTransformer } from './ExpressionTransformer.js';
+import { Typeguards } from './Typeguards.js';
 export class TemplateParser {
     bindingId = 0;
-    bindings = [];
-    controlFlows = [];
-    controlFlowParser = new ControlFlowParser();
     templateRefs = new Set();
-    parse(html) {
+    scopeStack = [];
+    getterDependencyMap = new Map();
+    testYieldBeforeGetterDepsLookup = null;
+    setGetterDependencyMap(map) {
+        this.getterDependencyMap = map;
+    }
+    __setTestYieldBeforeGetterDepsLookup(callback) {
+        this.testYieldBeforeGetterDepsLookup = callback;
+    }
+    async parse(html) {
         this.bindingId = 0;
-        this.bindings = [];
-        this.controlFlows = [];
         this.templateRefs = new Set();
-        let result = html;
-        result = this.processControlFlowBlocks(result);
-        result = this.processWithParse5(result);
+        this.scopeStack = [{ variables: new Set() }];
+        const preProcessor = new DomPreProcessor();
+        const normalized = await preProcessor.process(html);
+        const fragment = parse5.parseFragment(normalized);
+        const root = await this.processNodes(fragment.childNodes);
         return {
-            html: result,
-            bindings: this.bindings,
-            controlFlows: this.controlFlows,
+            root,
             templateRefs: Array.from(this.templateRefs)
         };
     }
-    processControlFlowBlocks(html) {
-        let result = this.processSwitchBlocksNew(html);
-        result = this.processForBlocksNew(result);
-        result = this.processIfBlocksNew(result);
-        return result;
-    }
-    processSwitchBlocksNew(html) {
-        const { result: parsed, blocks } = this.controlFlowParser.parseSwitchBlocks(html);
-        let result = parsed;
-        for (let i = 0; i < blocks.length; i++) {
-            const block = blocks[i];
-            if (!block)
-                continue;
-            const id = `l${this.bindingId++}`;
-            const processedCases = block.cases.map(c => ({
-                value: c.value,
-                content: this.processControlFlowBlocks(this.processControlFlowContent(c.content))
-                    .trim(),
-                fallthrough: c.fallthrough
-            }));
-            this.controlFlows.push({
-                id, type: 'switch', expression: block.expression, cases: processedCases
-            });
-            const placeholder = `__SWITCH_BLOCK_${i}__`;
-            const replacement = `<!--${id}--><!--/${id}-->`;
-            result = result.replace(placeholder, replacement);
-        }
-        return result;
-    }
-    processForBlocksNew(html) {
-        const { result: parsed, blocks } = this.controlFlowParser.parseForBlocks(html);
-        let result = parsed;
-        for (let i = 0; i < blocks.length; i++) {
-            const block = blocks[i];
-            if (!block)
+    async processNodes(nodes) {
+        const result = [];
+        let i = 0;
+        while (i < nodes.length) {
+            const node = nodes[i];
+            if (Typeguards.isElement(node) && node.tagName === 'x-fluff-if') {
+                const ifNode = await this.processConsolidatedIf(nodes, i);
+                result.push(ifNode.node);
+                i = ifNode.nextIndex;
                 continue;
-            const id = `l${this.bindingId++}`;
-            let content = this.processControlFlowBlocks(block.content);
-            content = this.processControlFlowContent(content, block.iterator);
-            const trimmedContent = content.trim();
-            const isOptionContent = trimmedContent.startsWith('<option');
-            this.controlFlows.push({
-                id,
-                type: 'for',
-                iterator: block.iterator,
-                iterable: block.iterable,
-                trackBy: block.trackBy,
-                content: trimmedContent
-            });
-            const placeholder = `__FOR_BLOCK_${i}__`;
-            const replacement = isOptionContent ? `<!--for-${id}--><!--/for-${id}-->` : `<!--${id}--><!--/${id}-->`;
-            result = result.replace(placeholder, replacement);
-        }
-        return result;
-    }
-    processIfBlocksNew(html) {
-        const { result: parsed, blocks } = this.controlFlowParser.parseIfBlocks(html);
-        let result = parsed;
-        for (let i = 0; i < blocks.length; i++) {
-            const block = blocks[i];
-            if (!block)
+            }
+            if (Typeguards.isElement(node) && node.tagName === 'x-fluff-for') {
+                const forNode = await this.processConsolidatedFor(nodes, i);
+                result.push(forNode.node);
+                i = forNode.nextIndex;
                 continue;
-            const id = `l${this.bindingId++}`;
-            let ifContent = this.processControlFlowBlocks(block.ifContent);
-            ifContent = this.processControlFlowContent(ifContent);
-            let elseContent = '';
-            if (block.elseContent) {
-                elseContent = this.processControlFlowBlocks(block.elseContent);
-                elseContent = this.processControlFlowContent(elseContent);
             }
-            this.controlFlows.push({
-                id, type: 'if', condition: block.condition, ifContent: ifContent.trim(), elseContent: elseContent.trim()
-            });
-            const placeholder = `__IF_BLOCK_${i}__`;
-            const replacement = `<!--${id}--><!--/${id}-->`;
-            result = result.replace(placeholder, replacement);
+            const processed = await this.processNode(node);
+            if (processed) {
+                result.push(processed);
+            }
+            i++;
         }
         return result;
     }
-    processWithParse5(html) {
-        const fragment = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
-        this.walkNodes(fragment.childNodes, html);
-        return parse5.serialize(fragment);
-    }
-    walkNodes(nodes, source) {
-        for (let i = 0; i < nodes.length; i++) {
+    async processConsolidatedIf(nodes, startIndex) {
+        const branches = [];
+        let i = startIndex;
+        while (i < nodes.length) {
             const node = nodes[i];
-            if (this.isElement(node)) {
-                this.processElement(node, source);
-                if (node.childNodes) {
-                    this.walkNodes(node.childNodes, source);
+            if (!Typeguards.isElement(node)) {
+                if (Typeguards.isTextNode(node) && node.value.trim() === '') {
+                    i++;
+                    continue;
                 }
+                break;
             }
-            else if (this.isTextNode(node)) {
-                const newNodes = this.processTextNode(node);
-                if (newNodes.length > 0) {
-                    nodes.splice(i, 1, ...newNodes);
-                    i += newNodes.length - 1;
-                }
+            if (node.tagName === 'x-fluff-if' && branches.length === 0) {
+                const conditionRaw = this.getAttr(node, 'x-fluff-condition') ?? '';
+                const children = await this.processNodes(node.childNodes ?? []);
+                const conditionDeps = await this.extractDeps(conditionRaw);
+                const condition = this.transformWithLocals(conditionRaw);
+                branches.push({
+                    condition,
+                    conditionDeps: conditionDeps.length > 0 ? conditionDeps : undefined,
+                    children
+                });
+                i++;
+            }
+            else if (node.tagName === 'x-fluff-else-if' && branches.length > 0) {
+                const conditionRaw = this.getAttr(node, 'x-fluff-condition') ?? '';
+                const children = await this.processNodes(node.childNodes ?? []);
+                const conditionDeps = await this.extractDeps(conditionRaw);
+                const condition = this.transformWithLocals(conditionRaw);
+                branches.push({
+                    condition,
+                    conditionDeps: conditionDeps.length > 0 ? conditionDeps : undefined,
+                    children
+                });
+                i++;
+            }
+            else if (node.tagName === 'x-fluff-else' && branches.length > 0) {
+                const children = await this.processNodes(node.childNodes ?? []);
+                branches.push({
+                    children
+                });
+                i++;
+                break;
+            }
+            else {
+                break;
             }
         }
+        return {
+            node: {
+                type: 'if',
+                branches,
+                localVariables: this.getCurrentLocalVariables()
+            },
+            nextIndex: i
+        };
     }
-    isTextNode(node) {
-        return 'value' in node && !('tagName' in node);
-    }
-    processTextNode(textNode, iteratorVar, inControlFlow = false) {
-        const text = textNode.value;
-        const interpolations = parseInterpolations(text);
-        if (interpolations.length === 0) {
-            return [textNode];
+    async processConsolidatedFor(nodes, startIndex) {
+        const forElement = nodes[startIndex];
+        if (!Typeguards.isElement(forElement)) {
+            throw new Error('Expected element node');
         }
-        const nodes = [];
-        let lastIndex = 0;
-        for (const { start, end, expr } of interpolations) {
-            if (start > lastIndex) {
-                nodes.push(this.createTextNode(text.slice(lastIndex, start)));
-            }
-            if (inControlFlow) {
-                const usesIterator = iteratorVar && expressionUsesVariable(expr, iteratorVar);
-                const transformed = transformInterpolation(expr, iteratorVar);
-                if (usesIterator) {
-                    nodes.push(this.createTextNode(`\${${transformed}}`));
-                }
-                else {
-                    const id = `l${this.bindingId++}`;
-                    nodes.push(this.createSpanWithTextBind(transformed, id));
+        const forNode = await this.processForElement(forElement);
+        let i = startIndex + 1;
+        while (i < nodes.length) {
+            const node = nodes[i];
+            if (!Typeguards.isElement(node)) {
+                if (Typeguards.isTextNode(node) && node.value.trim() === '') {
+                    i++;
+                    continue;
                 }
+                break;
+            }
+            if (node.tagName === 'x-fluff-empty') {
+                forNode.emptyContent = await this.processNodes(node.childNodes ?? []);
+                i++;
+                break;
             }
             else {
-                const id = `l${this.bindingId++}`;
-                this.bindings.push({
-                    id, type: 'text', expression: expr
-                });
-                nodes.push(this.createSpanElement(id));
+                break;
+            }
+        }
+        return {
+            node: forNode,
+            nextIndex: i
+        };
+    }
+    async processNode(node) {
+        if (Typeguards.isElement(node)) {
+            return this.processElement(node);
+        }
+        else if (Typeguards.isTextNode(node)) {
+            const text = node.value.trim();
+            if (text.length === 0) {
+                return null;
             }
-            lastIndex = end;
+            return { type: 'text', content: node.value };
         }
-        if (lastIndex < text.length) {
-            nodes.push(this.createTextNode(text.slice(lastIndex)));
+        else if (Typeguards.isCommentNode(node)) {
+            return { type: 'comment', content: node.data };
         }
-        return nodes;
+        return null;
     }
-    createTextNode(value) {
+    async processElement(element) {
+        const { tagName } = element;
+        if (tagName === 'x-fluff-if') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-else-if') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-else') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-for') {
+            return this.processForElement(element);
+        }
+        else if (tagName === 'x-fluff-switch') {
+            return this.processSwitchElement(element);
+        }
+        else if (tagName === 'x-fluff-case') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-default') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-empty') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-fallthrough') {
+            return null;
+        }
+        else if (tagName === 'x-fluff-break') {
+            return { type: 'break' };
+        }
+        else if (tagName === 'x-fluff-text') {
+            return this.processTextElement(element);
+        }
+        return this.processRegularElement(element);
+    }
+    async processForElement(element) {
+        const iterator = this.getAttr(element, 'x-fluff-iterator') ?? 'item';
+        const iterableRaw = this.getAttr(element, 'x-fluff-iterable') ?? '';
+        const trackBy = this.getAttr(element, 'x-fluff-track');
+        const iterableDeps = await this.extractDeps(iterableRaw);
+        const iterable = this.transformWithLocals(iterableRaw);
+        this.pushScope([iterator, '$index']);
+        const childNodes = element.childNodes ?? [];
+        const children = [];
+        let emptyContent = undefined;
+        for (const child of childNodes) {
+            if (Typeguards.isElement(child) && child.tagName === 'x-fluff-empty') {
+                emptyContent = await this.processNodes(child.childNodes ?? []);
+            }
+            else {
+                const processed = await this.processNode(child);
+                if (processed) {
+                    children.push(processed);
+                }
+            }
+        }
+        const localVariables = this.getCurrentLocalVariables();
+        this.popScope();
         return {
-            nodeName: '#text',
-            value,
-            parentNode: null
+            type: 'for',
+            iterator,
+            iterable,
+            iterableDeps: iterableDeps.length > 0 ? iterableDeps : undefined,
+            trackBy: trackBy ?? undefined,
+            emptyContent,
+            children,
+            localVariables
         };
     }
-    createSpanElement(id) {
+    async processSwitchElement(element) {
+        const expressionRaw = this.getAttr(element, 'x-fluff-expr') ?? '';
+        const expressionDeps = await this.extractDeps(expressionRaw);
+        const expression = this.transformWithLocals(expressionRaw);
+        const cases = [];
+        const childNodes = element.childNodes ?? [];
+        for (const child of childNodes) {
+            if (!Typeguards.isElement(child))
+                continue;
+            if (child.tagName === 'x-fluff-case') {
+                const valueRaw = this.getAttr(child, 'x-fluff-value') ?? '';
+                const valueExpression = this.transformWithLocals(valueRaw);
+                const caseChildren = await this.processNodes(child.childNodes ?? []);
+                const hasFallthrough = this.hasChildElement(child, 'x-fluff-fallthrough');
+                const filteredChildren = caseChildren.filter(c => !(c.type === 'break'));
+                cases.push({
+                    valueExpression,
+                    isDefault: false,
+                    fallthrough: hasFallthrough,
+                    children: filteredChildren
+                });
+            }
+            else if (child.tagName === 'x-fluff-default') {
+                const caseChildren = await this.processNodes(child.childNodes ?? []);
+                const hasFallthrough = this.hasChildElement(child, 'x-fluff-fallthrough');
+                const filteredChildren = caseChildren.filter(c => !(c.type === 'break'));
+                cases.push({
+                    isDefault: true,
+                    fallthrough: hasFallthrough,
+                    children: filteredChildren
+                });
+            }
+        }
         return {
-            nodeName: 'span',
-            tagName: 'span',
-            attrs: [{ name: 'data-lid', value: id }],
-            childNodes: [],
-            namespaceURI: parse5Html.NS.HTML,
-            parentNode: null
+            type: 'switch',
+            expression,
+            expressionDeps: expressionDeps.length > 0 ? expressionDeps : undefined,
+            cases,
+            localVariables: this.getCurrentLocalVariables()
         };
     }
-    isElement(node) {
-        return 'tagName' in node;
+    hasChildElement(element, tagName) {
+        for (const child of element.childNodes ?? []) {
+            if (Typeguards.isElement(child) && child.tagName === tagName) {
+                return true;
+            }
+        }
+        return false;
     }
-    getOriginalAttrName(element, attr, source) {
-        const attrLocations = 'sourceCodeLocation' in element && element.sourceCodeLocation &&
-            typeof element.sourceCodeLocation === 'object' && 'attrs' in element.sourceCodeLocation
-            ? element.sourceCodeLocation.attrs
-            : undefined;
-        if (attrLocations?.[attr.name]) {
-            const loc = attrLocations[attr.name];
-            if (loc) {
-                const [originalName] = source.slice(loc.startOffset, loc.endOffset)
-                    .split('=');
-                return originalName;
+    async processTextElement(element) {
+        const expression = this.getAttr(element, 'x-fluff-expr') ?? '';
+        const pipesAttr = this.getAttr(element, 'x-fluff-pipes');
+        const id = `l${this.bindingId++}`;
+        const deps = await this.extractDeps(expression);
+        const transformedExpression = this.transformWithLocals(expression, { eventReplacementName: '__ev' });
+        const result = {
+            type: 'interpolation',
+            expression: transformedExpression,
+            deps: deps.length > 0 ? deps : undefined,
+            id
+        };
+        if (pipesAttr) {
+            try {
+                const parsed = JSON.parse(pipesAttr);
+                if (Array.isArray(parsed)) {
+                    result.pipes = parsed.map(pipe => {
+                        if (!Typeguards.isRecord(pipe)) {
+                            return null;
+                        }
+                        if (typeof pipe.name !== 'string' || !Array.isArray(pipe.args)) {
+                            return null;
+                        }
+                        const args = pipe.args.filter((arg) => typeof arg === 'string')
+                            .map(arg => this.transformWithLocals(arg));
+                        return {
+                            name: pipe.name,
+                            args
+                        };
+                    })
+                        .filter((pipe) => pipe !== null);
+                }
+            }
+            catch {
             }
         }
-        return attr.name;
+        return result;
     }
-    processElement(element, source) {
+    async processRegularElement(element) {
         const bindings = [];
-        const attrsToRemove = [];
+        const attributes = {};
+        let hasBindings = false;
         for (const attr of element.attrs) {
-            if (attr.name.startsWith('[(') && attr.name.endsWith(')]')) {
-                const prop = attr.name.slice(2, -2);
-                const expr = attr.value;
-                bindings.push({ type: 'property', target: prop, expression: expr });
-                bindings.push({ type: 'event', eventName: 'input', expression: `${expr} = $event.target.${prop}` });
-                attrsToRemove.push(attr.name);
-            }
-            else if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
-                const prop = attr.name.slice(1, -1);
-                const expr = attr.value;
-                if (prop.startsWith('class.')) {
-                    bindings.push({ type: 'class', className: prop.slice(6), expression: expr });
-                }
-                else if (prop.startsWith('style.')) {
-                    bindings.push({ type: 'style', styleProp: prop.slice(6), expression: expr });
-                }
-                else {
-                    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.');
+            if (attr.name.startsWith('x-fluff-attrib-')) {
+                const bindingInfo = await this.parseBindingAttribute(attr.value);
+                if (bindingInfo) {
+                    bindings.push(bindingInfo);
+                    hasBindings = true;
+                    if (bindingInfo.binding === 'ref') {
+                        this.templateRefs.add(bindingInfo.name);
                     }
-                    bindings.push({ type: 'property', target: baseProp, expression: expr });
                 }
-                attrsToRemove.push(attr.name);
-            }
-            else if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
-                const eventName = attr.name.slice(1, -1);
-                bindings.push({ type: 'event', eventName, expression: attr.value });
-                attrsToRemove.push(attr.name);
             }
-            else if (attr.name.startsWith('#')) {
-                const originalName = this.getOriginalAttrName(element, attr, source);
-                const refName = originalName.slice(1);
-                attrsToRemove.push(attr.name);
-                element.attrs.push({ name: 'data-ref', value: refName });
-                this.templateRefs.add(refName);
+            else {
+                attributes[attr.name] = attr.value;
             }
         }
-        if (bindings.length > 0) {
-            const id = `l${this.bindingId++}`;
-            element.attrs = element.attrs.filter(a => !attrsToRemove.includes(a.name));
-            element.attrs.push({ name: 'data-lid', value: id });
-            for (const binding of bindings) {
-                this.bindings.push({ ...binding, id });
+        const children = await this.processNodes(element.childNodes ?? []);
+        const node = {
+            type: 'element',
+            tagName: element.tagName,
+            attributes,
+            bindings,
+            children
+        };
+        if (hasBindings) {
+            node.id = `l${this.bindingId++}`;
+        }
+        return node;
+    }
+    async parseBindingAttribute(jsonValue) {
+        try {
+            const decoded = he.decode(jsonValue);
+            const parsed = JSON.parse(decoded);
+            if (!Typeguards.isRecord(parsed)) {
+                return null;
+            }
+            if (typeof parsed.name !== 'string' || typeof parsed.binding !== 'string' || typeof parsed.expression !== 'string') {
+                return null;
+            }
+            const validBindings = ['property', 'event', 'class', 'style', 'two-way', 'ref'];
+            const binding = validBindings.find(b => b === parsed.binding);
+            if (!binding) {
+                return null;
             }
+            const deps = await this.extractDeps(parsed.expression);
+            const transformedExpression = this.transformWithLocals(parsed.expression, {
+                eventReplacementName: '__ev',
+                templateRefs: Array.from(this.templateRefs)
+            });
+            const result = {
+                name: parsed.name,
+                binding,
+                expression: transformedExpression,
+                deps: deps.length > 0 ? deps : undefined
+            };
+            if (typeof parsed.subscribe === 'string') {
+                result.subscribe = parsed.subscribe;
+            }
+            return result;
+        }
+        catch {
+            return null;
         }
     }
-    processControlFlowContent(html, iteratorVar) {
-        const fragment = parse5.parseFragment(html, { sourceCodeLocationInfo: true });
-        this.walkControlFlowNodes(fragment.childNodes, html, iteratorVar);
-        return parse5.serialize(fragment);
+    getAttr(element, name) {
+        const attr = element.attrs.find(a => a.name === name);
+        return attr ? attr.value : null;
     }
-    walkControlFlowNodes(nodes, source, iteratorVar) {
-        for (let i = 0; i < nodes.length; i++) {
-            const node = nodes[i];
-            if (this.isElement(node)) {
-                this.processControlFlowElement(node, source, iteratorVar);
-                if (node.childNodes) {
-                    this.walkControlFlowNodes(node.childNodes, source, iteratorVar);
-                }
-            }
-            else if (this.isTextNode(node)) {
-                const newNodes = this.processTextNode(node, iteratorVar, true);
-                if (newNodes.length > 0) {
-                    nodes.splice(i, 1, ...newNodes);
-                    i += newNodes.length - 1;
+    transformWithLocals(expression, options) {
+        const localVars = this.getCurrentLocalVariables();
+        return ExpressionTransformer.transformExpression(expression, {
+            addThisPrefix: true,
+            localVars,
+            localsObjectName: 'l',
+            eventReplacementName: options?.eventReplacementName,
+            templateRefs: options?.templateRefs
+        });
+    }
+    pushScope(variables) {
+        const parent = this.scopeStack[this.scopeStack.length - 1];
+        this.scopeStack.push({
+            variables: new Set(variables),
+            parent
+        });
+    }
+    popScope() {
+        if (this.scopeStack.length > 1) {
+            this.scopeStack.pop();
+        }
+    }
+    getCurrentLocalVariables() {
+        const allVars = [];
+        for (const scope of this.scopeStack) {
+            for (const v of scope.variables) {
+                if (!allVars.includes(v)) {
+                    allVars.push(v);
                 }
             }
         }
+        return allVars;
     }
-    processControlFlowElement(element, source, iteratorVar) {
-        for (const attr of element.attrs) {
-            const originalName = this.getOriginalAttrName(element, attr, source);
-            if (attr.name.startsWith('[') && attr.name.endsWith(']')) {
-                const lowercaseProp = attr.name.slice(1, -1);
-                const originalProp = originalName.slice(1, -1); // Remove [ ]
-                if (originalProp !== lowercaseProp) {
-                    attr.value = JSON.stringify([originalProp, attr.value]);
+    async extractDeps(expression) {
+        const deps = [];
+        try {
+            const ast = parseExpression(expression);
+            const extractChain = (node) => {
+                if (t.isIdentifier(node)) {
+                    return [node.name];
                 }
-            }
-            else if (attr.name.startsWith('(') && attr.name.endsWith(')')) {
-                const lowercaseEvent = attr.name.slice(1, -1);
-                const originalEvent = originalName.slice(1, -1); // Remove ( )
-                if (originalEvent !== lowercaseEvent) {
-                    attr.value = JSON.stringify([originalEvent, attr.value]);
+                else if (t.isMemberExpression(node)) {
+                    const objectChain = extractChain(node.object);
+                    if (!objectChain)
+                        return null;
+                    if (node.computed) {
+                        if (t.isNumericLiteral(node.property)) {
+                            return [...objectChain, `[${node.property.value}]`];
+                        }
+                        else if (t.isStringLiteral(node.property)) {
+                            return [...objectChain, `[${JSON.stringify(node.property.value)}]`];
+                        }
+                        else if (t.isIdentifier(node.property)) {
+                            return [...objectChain, `[${node.property.name}]`];
+                        }
+                        return null;
+                    }
+                    else if (t.isIdentifier(node.property)) {
+                        return [...objectChain, node.property.name];
+                    }
                 }
-            }
-            else if (attr.name.startsWith('#')) {
-                const refName = originalName.slice(1);
-                attr.name = 'data-ref';
-                attr.value = refName;
-                this.templateRefs.add(refName);
-            }
-            const interpolations = parseInterpolations(attr.value);
-            if (interpolations.length > 0) {
-                let newValue = '';
-                let lastEnd = 0;
-                for (const { start, end, expr } of interpolations) {
-                    newValue += attr.value.slice(lastEnd, start);
-                    const transformed = transformInterpolation(expr, iteratorVar);
-                    newValue += `\${${transformed}}`;
-                    lastEnd = end;
+                return null;
+            };
+            const visited = new Set();
+            const visitNode = (node, skipMemberParts = false) => {
+                if (visited.has(node))
+                    return;
+                visited.add(node);
+                if (t.isMemberExpression(node)) {
+                    const chain = extractChain(node);
+                    if (chain && chain.length > 0) {
+                        const simplified = chain.length === 1 ? chain[0] : chain;
+                        const exists = deps.some(d => JSON.stringify(d) === JSON.stringify(simplified));
+                        if (!exists) {
+                            deps.push(simplified);
+                        }
+                    }
+                    return;
                 }
-                newValue += attr.value.slice(lastEnd);
-                attr.value = newValue;
+                if (t.isIdentifier(node) && !skipMemberParts) {
+                    const simplified = node.name;
+                    const exists = deps.some(d => JSON.stringify(d) === JSON.stringify(simplified));
+                    if (!exists) {
+                        deps.push(simplified);
+                    }
+                    return;
+                }
+                if (!Typeguards.isRecord(node))
+                    return;
+                for (const key of Object.keys(node)) {
+                    if (key === 'type' || key === 'loc' || key === 'start' || key === 'end')
+                        continue;
+                    const child = node[key];
+                    if (Array.isArray(child)) {
+                        for (const item of child) {
+                            if (Typeguards.isBabelNode(item)) {
+                                visitNode(item);
+                            }
+                        }
+                    }
+                    else if (Typeguards.isBabelNode(child)) {
+                        visitNode(child);
+                    }
+                }
+            };
+            visitNode(ast);
+        }
+        catch {
+            // If parsing fails, return empty deps
+        }
+        if (this.getterDependencyMap.size > 0) {
+            const expanded = [];
+            for (const dep of deps) {
+                const firstProp = typeof dep === 'string' ? dep : (Array.isArray(dep) ? dep[0] : null);
+                if (typeof firstProp === 'string') {
+                    if (this.testYieldBeforeGetterDepsLookup) {
+                        await this.testYieldBeforeGetterDepsLookup();
+                    }
+                    const getterDeps = this.getterDependencyMap.get(firstProp);
+                    if (getterDeps && getterDeps.length > 0) {
+                        for (const gd of getterDeps) {
+                            if (!expanded.includes(gd)) {
+                                expanded.push(gd);
+                            }
+                        }
+                        continue;
+                    }
+                }
+                expanded.push(dep);
             }
+            return expanded;
         }
-    }
-    createSpanWithTextBind(expr, id) {
-        return {
-            nodeName: 'span',
-            tagName: 'span',
-            attrs: [
-                { name: 'data-text-bind', value: expr },
-                { name: 'data-lid', value: id }
-            ],
-            childNodes: [],
-            namespaceURI: parse5Html.NS.HTML,
-            parentNode: null
-        };
+        return deps;
     }
 }