eslint-plugin-templ 0.0.1 → 0.0.2

package/dist/templ-ast-to-eslint-ast.js

@@ -2,18 +2,39 @@
  * Conversion utilities for transforming templ AST to ESLint-compatible HTML AST
  */
 import { NodeTypes } from "es-html-parser";
+/**
+ * Converts a templ AST to an ESLint-compatible HTML AST (DocumentNode).
+ *
+ * This function is a pure converter — it consumes only the templ AST and does
+ * not accept or use source text. All information needed for the conversion must
+ * be present in the AST. If something is missing, the fix belongs in the templ
+ * parser (github.com/AdamVig/templ), not here.
+ */
 export function convertToESLintAST(templAST) {
     const children = [];
     for (const node of templAST) {
-        // Only process HTMLTemplate nodes which have Children
-        // Skip FileGoExpression, CSSTemplate, and ScriptTemplate as they don't contain HTML
-        if ("Children" in node && Array.isArray(node.Children)) {
-            for (const child of node.Children) {
+        // Only process HTMLTemplate nodes which have Children.
+        // Skip FileGoExpression, CSSTemplate, and ScriptTemplate as they don't contain HTML.
+        if (node.type !== "HTMLTemplate") {
+            continue;
+        }
+        for (const child of node.Children) {
+            try {
                 const converted = convertChild(child);
                 if (converted) {
                     children.push(converted);
+                    // Only Element nodes have TrailingSpace
+                    if (child.type === "Element" && child.TrailingSpace) {
+                        const trailingSpace = createTrailingSpaceNode(child);
+                        if (trailingSpace) {
+                            children.push(trailingSpace);
+                        }
+                    }
                 }
             }
+            catch (error) {
+                throw new TemplASTConversionError(`Failed to convert Templ AST node to ESLint AST${error instanceof Error ? `: ${error.message}` : ""}`, error instanceof TemplASTConversionError ? error.node : child);
+            }
         }
     }
     // Calculate overall document range
@@ -33,94 +54,341 @@ export function convertToESLintAST(templAST) {
     };
 }
 function convertChild(child) {
-    if (isElementNode(child)) {
-        return convertElement(child);
+    try {
+        switch (child.type) {
+            case "ScriptElement":
+                return convertScriptElement(child);
+            case "RawElement":
+                return convertRawElement(child);
+            case "Element":
+                return convertElement(child);
+            case "Whitespace":
+            case "Text":
+                return {
+                    type: NodeTypes.Text,
+                    value: child.Value,
+                    range: convertRange(child.Range),
+                    loc: convertLoc(child.Range),
+                    parts: [],
+                };
+            case "DocType":
+                return convertDocType(child);
+            case "StringExpression":
+                return {
+                    type: NodeTypes.Text,
+                    value: child.Expression.Value,
+                    range: convertRange(child.Expression.Range),
+                    loc: convertLoc(child.Expression.Range),
+                    parts: [],
+                };
+            default:
+                // Ignore Go expressions, call expressions, control flow, etc.
+                return null;
+        }
     }
-    if (isWhitespace(child)) {
-        // For whitespace, we need to create synthetic position info
-        // Since we don't have position info, we'll create minimal text nodes
-        return {
-            type: NodeTypes.Text,
-            value: child.Value,
-            range: [0, child.Value.length],
-            loc: {
-                start: { line: 1, column: 0 },
-                end: { line: 1, column: child.Value.length },
+    catch (error) {
+        throw new TemplASTConversionError(`Failed to convert ${child.type} node${error instanceof Error ? `: ${error.message}` : ""}`, error instanceof TemplASTConversionError ? error.node : child);
+    }
+}
+/**
+ * Creates a text node for an element's trailing space.
+ * Elements have a TrailingSpace field that contains whitespace after the closing tag.
+ * This whitespace should be represented as a text node sibling.
+ */
+function createTrailingSpaceNode(node) {
+    if (!node.TrailingSpace) {
+        return null;
+    }
+    const elementEnd = getElementEndPosition(node);
+    // The trailing space starts right after the serialized element ends.
+    const startIndex = elementEnd.Index;
+    const endIndex = startIndex + node.TrailingSpace.length;
+    // Calculate the end position accounting for newlines in the trailing space
+    const lines = node.TrailingSpace.split("\n");
+    const endLine = elementEnd.Line + lines.length;
+    const endCol = lines.length > 1
+        ? lines[lines.length - 1].length
+        : elementEnd.Col + node.TrailingSpace.length;
+    return {
+        type: NodeTypes.Text,
+        value: node.TrailingSpace,
+        range: [startIndex, endIndex],
+        loc: {
+            start: convertPosition(elementEnd),
+            end: {
+                line: endLine,
+                column: endCol,
             },
-            parts: [],
-        };
+        },
+        parts: [],
+    };
+}
+function getElementEndPosition(node) {
+    return node.CloseTagRange ? node.CloseTagRange.To : node.OpenTagEndRange.To;
+}
+function getElementRange(node) {
+    return {
+        From: node.OpenTagRange.From,
+        To: getElementEndPosition(node),
+    };
+}
+function convertDocType(node) {
+    // templ fmt always writes uppercase <!DOCTYPE, so we hardcode it here.
+    // The html/lowercase rule is disabled in the recommended config to match.
+    return {
+        type: NodeTypes.Doctype,
+        range: convertRange(node.Range),
+        loc: convertLoc(node.Range),
+        open: {
+            type: NodeTypes.DoctypeOpen,
+            value: "<!DOCTYPE",
+            range: convertRange(node.OpenRange),
+            loc: convertLoc(node.OpenRange),
+        },
+        attributes: [
+            {
+                type: NodeTypes.DoctypeAttribute,
+                range: convertRange(node.ValueRange),
+                loc: convertLoc(node.ValueRange),
+                value: {
+                    type: NodeTypes.DoctypeAttributeValue,
+                    value: node.Value,
+                    range: convertRange(node.ValueRange),
+                    loc: convertLoc(node.ValueRange),
+                },
+            },
+        ],
+        close: {
+            type: NodeTypes.DoctypeClose,
+            value: ">",
+            range: convertRange(node.CloseRange),
+            loc: convertLoc(node.CloseRange),
+        },
+    };
+}
+function convertElement(node) {
+    const elementRange = getElementRange(node);
+    const range = convertRange(elementRange);
+    const loc = convertLoc(elementRange);
+    const openStart = {
+        type: NodeTypes.OpenTagStart,
+        value: `<${node.Name}`,
+        range: convertRange({
+            From: node.OpenTagRange.From,
+            To: node.NameRange.To,
+        }),
+        loc: convertLoc({
+            From: node.OpenTagRange.From,
+            To: node.NameRange.To,
+        }),
+    };
+    const openEnd = {
+        type: NodeTypes.OpenTagEnd,
+        value: node.SelfClosing ? "/>" : ">",
+        range: convertRange(node.OpenTagEndRange),
+        loc: convertLoc(node.OpenTagEndRange),
+    };
+    let closeRange;
+    let closeLoc;
+    if (node.CloseTagRange) {
+        closeRange = convertRange(node.CloseTagRange);
+        closeLoc = convertLoc(node.CloseTagRange);
     }
-    if (isStringExpression(child)) {
-        return {
-            type: NodeTypes.Text,
-            value: child.Value,
-            range: convertRange(child.Range),
-            loc: convertLoc(child.Range),
-            parts: [],
+    else {
+        const elementEnd = getElementEndPosition(node);
+        closeRange = [elementEnd.Index, elementEnd.Index];
+        const closePosition = convertPosition(elementEnd);
+        closeLoc = {
+            start: closePosition,
+            end: closePosition,
         };
     }
-    // For now, ignore Go expressions and call expressions
-    return null;
+    const close = {
+        type: NodeTypes.CloseTag,
+        value: `</${node.Name}>`,
+        range: closeRange,
+        loc: closeLoc,
+    };
+    let attributes;
+    try {
+        attributes = convertAttributes(node.Attributes);
+    }
+    catch (error) {
+        throw new TemplASTConversionError(`Failed to convert attributes${error instanceof Error ? `: ${error.message}` : ""}`, error instanceof TemplASTConversionError ? error.node : node);
+    }
+    const children = [];
+    try {
+        if (node.Children) {
+            for (const child of node.Children) {
+                const converted = convertChild(child);
+                if (converted && converted.type !== NodeTypes.Doctype) {
+                    children.push(converted);
+                    if (child.type === "Element" && child.TrailingSpace) {
+                        const trailingSpace = createTrailingSpaceNode(child);
+                        if (trailingSpace) {
+                            children.push(trailingSpace);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    catch (error) {
+        throw new TemplASTConversionError(`Failed to convert element children${error instanceof Error ? `: ${error.message}` : ""}`, error instanceof TemplASTConversionError ? error.node : node);
+    }
+    // Determine the appropriate node type based on element name
+    const lowerName = node.Name.toLowerCase();
+    const nodeType = lowerName === "script"
+        ? NodeTypes.ScriptTag
+        : lowerName === "style"
+            ? NodeTypes.StyleTag
+            : NodeTypes.Tag;
+    // ScriptTagNode and StyleTagNode are separate types in es-html-parser
+    // but html-eslint rules accept them interchangeably with TagNode.
+    return {
+        type: nodeType,
+        name: node.Name,
+        selfClosing: node.SelfClosing,
+        openStart,
+        openEnd,
+        close,
+        attributes,
+        children,
+        range,
+        loc,
+    };
 }
-function convertElement(node) {
+function getContentRange(openTagEndRange, closeTagRange) {
+    return {
+        From: openTagEndRange.To,
+        To: closeTagRange.From,
+    };
+}
+function convertScriptElement(node) {
     const range = convertRange(node.Range);
     const loc = convertLoc(node.Range);
-    const openStartRange = convertRange({
-        From: node.Range.From,
-        To: node.NameRange.To,
-    });
+    const scriptOpenStartRange = getLiteralRange(node.OpenTagRange.From, "<script");
+    const contentRange = getContentRange(node.OpenTagEndRange, node.CloseTagRange);
+    // Extract text content from script element
+    const scriptContents = node.Contents ?? [];
+    const textContent = scriptContents
+        .map((content) => content.Value ?? "")
+        .join("");
+    const openStart = {
+        type: NodeTypes.OpenScriptTagStart,
+        value: `<script`,
+        range: convertRange(scriptOpenStartRange),
+        loc: convertLoc(scriptOpenStartRange),
+    };
+    const openEnd = {
+        type: NodeTypes.OpenScriptTagEnd,
+        value: ">",
+        range: convertRange(node.OpenTagEndRange),
+        loc: convertLoc(node.OpenTagEndRange),
+    };
+    const close = {
+        type: NodeTypes.CloseScriptTag,
+        value: `</script>`,
+        range: convertRange(node.CloseTagRange),
+        loc: convertLoc(node.CloseTagRange),
+    };
+    const attributes = convertAttributes(node.Attributes);
+    const value = textContent
+        ? {
+            type: NodeTypes.ScriptTagContent,
+            value: textContent,
+            range: convertRange(contentRange),
+            loc: convertLoc(contentRange),
+            parts: [],
+        }
+        : undefined;
+    return {
+        type: NodeTypes.ScriptTag,
+        openStart,
+        openEnd,
+        close,
+        attributes,
+        ...(value && { value }),
+        range,
+        loc,
+    };
+}
+function convertRawElement(node) {
+    const range = convertRange(node.Range);
+    const loc = convertLoc(node.Range);
+    const lowerName = node.Name.toLowerCase();
+    const contentRange = getContentRange(node.OpenTagEndRange, node.CloseTagRange);
+    if (lowerName === "style") {
+        const openStart = {
+            type: NodeTypes.OpenStyleTagStart,
+            value: `<${node.Name}`,
+            range: convertRange({
+                From: node.OpenTagRange.From,
+                To: node.NameRange.To,
+            }),
+            loc: convertLoc({
+                From: node.OpenTagRange.From,
+                To: node.NameRange.To,
+            }),
+        };
+        const openEnd = {
+            type: NodeTypes.OpenStyleTagEnd,
+            value: ">",
+            range: convertRange(node.OpenTagEndRange),
+            loc: convertLoc(node.OpenTagEndRange),
+        };
+        const close = {
+            type: NodeTypes.CloseStyleTag,
+            value: `</${node.Name}>`,
+            range: convertRange(node.CloseTagRange),
+            loc: convertLoc(node.CloseTagRange),
+        };
+        const attributes = convertAttributes(node.Attributes);
+        const value = node.Contents
+            ? {
+                type: NodeTypes.StyleTagContent,
+                value: node.Contents,
+                range: convertRange(contentRange),
+                loc: convertLoc(contentRange),
+                parts: [],
+            }
+            : undefined;
+        return {
+            type: NodeTypes.StyleTag,
+            openStart,
+            openEnd,
+            close,
+            attributes,
+            ...(value && { value }),
+            range,
+            loc,
+        };
+    }
     const openStart = {
         type: NodeTypes.OpenTagStart,
         value: `<${node.Name}`,
-        range: openStartRange,
+        range: convertRange({
+            From: node.OpenTagRange.From,
+            To: node.NameRange.To,
+        }),
         loc: convertLoc({
-            From: node.Range.From,
+            From: node.OpenTagRange.From,
             To: node.NameRange.To,
         }),
     };
-    // Estimate the position of the closing > of the opening tag
-    const lastAttr = node.Attributes && node.Attributes.length > 0
-        ? node.Attributes[node.Attributes.length - 1]
-        : null;
-    const openEndStart = lastAttr
-        ? lastAttr.Key.NameRange.To.Index +
-            2 +
-            (lastAttr.Value?.length ?? lastAttr.Expression?.Value.length ?? 0) +
-            1
-        : node.NameRange.To.Index;
     const openEnd = {
         type: NodeTypes.OpenTagEnd,
         value: ">",
-        range: [openEndStart, openEndStart + 1],
-        loc: {
-            start: {
-                line: node.NameRange.To.Line + 1,
-                column: node.NameRange.To.Col,
-            },
-            end: {
-                line: node.NameRange.To.Line + 1,
-                column: node.NameRange.To.Col + 1,
-            },
-        },
+        range: convertRange(node.OpenTagEndRange),
+        loc: convertLoc(node.OpenTagEndRange),
     };
-    // Estimate close tag position (at the end of the element range)
-    const closeTagStart = node.Range.To.Index - (node.Name.length + 3); // -3 for </>
     const close = {
         type: NodeTypes.CloseTag,
         value: `</${node.Name}>`,
-        range: [closeTagStart, node.Range.To.Index],
-        loc: {
-            start: {
-                line: node.Range.To.Line + 1,
-                column: Math.max(0, node.Range.To.Col - (node.Name.length + 3)),
-            },
-            end: convertPosition(node.Range.To),
-        },
+        range: convertRange(node.CloseTagRange),
+        loc: convertLoc(node.CloseTagRange),
     };
-    const attributes = node.Attributes
-        ? node.Attributes.map(convertAttribute)
-        : [];
-    const children = node.Children.map(convertChild).filter((child) => child !== null);
+    const attributes = convertAttributes(node.Attributes);
     return {
         type: NodeTypes.Tag,
         name: node.Name,
@@ -129,12 +397,50 @@ function convertElement(node) {
         openEnd,
         close,
         attributes,
-        children,
+        children: [],
         range,
         loc,
     };
 }
+function convertAttributes(attrs) {
+    if (!attrs) {
+        return [];
+    }
+    const converted = [];
+    for (const attr of attrs) {
+        switch (attr.type) {
+            case "ConditionalAttribute":
+                converted.push(...convertAttributes(attr.Then));
+                if (attr.Else) {
+                    converted.push(...convertAttributes(attr.Else));
+                }
+                break;
+            case "SpreadAttributes":
+                // Spread attributes cannot be represented in the ESLint HTML AST.
+                break;
+            case "BoolConstantAttribute":
+            case "ConstantAttribute":
+            case "ExpressionAttribute":
+                if (attr.Key.type !== "ConstantAttributeKey") {
+                    throw new Error("Expression-based attribute keys are not supported in ESLint conversion");
+                }
+                try {
+                    converted.push(convertAttribute(attr));
+                }
+                catch (error) {
+                    throw new TemplASTConversionError(`Failed to convert attribute${error instanceof Error ? `: ${error.message}` : ""}`, error instanceof TemplASTConversionError ? error.node : attr);
+                }
+                break;
+            default:
+                throw new Error("Unsupported attribute structure");
+        }
+    }
+    return converted;
+}
 function convertAttribute(attr) {
+    if (attr.Key.type !== "ConstantAttributeKey") {
+        throw new Error("Expression-based attribute keys are not supported in ESLint conversion");
+    }
     const keyRange = convertRange(attr.Key.NameRange);
     const keyLoc = convertLoc(attr.Key.NameRange);
     const key = {
@@ -144,44 +450,74 @@ function convertAttribute(attr) {
         loc: keyLoc,
         parts: [],
     };
-    // Handle both constant attributes (Value) and expression attributes (Expression)
-    const attrValue = attr.Value ?? "";
-    const valueLength = attr.Expression
-        ? attr.Expression.Range.To.Index - attr.Expression.Range.From.Index + 4 // +4 for { and }
-        : attrValue.length;
-    // Calculate the value range - it comes after the key, =, and quote (or just = for expressions)
-    const valueStartIndex = attr.Key.NameRange.To.Index + 2; // +2 for '="' or '={'
-    const valueEndIndex = valueStartIndex + valueLength;
-    const valueRange = [valueStartIndex, valueEndIndex];
-    const value = {
-        type: NodeTypes.AttributeValue,
-        value: attrValue,
-        range: valueRange,
-        loc: {
-            start: {
-                line: attr.Key.NameRange.To.Line + 1,
-                column: attr.Key.NameRange.To.Col + 2,
-            },
-            end: {
-                line: attr.Key.NameRange.To.Line + 1,
-                column: attr.Key.NameRange.To.Col + 2 + valueLength,
-            },
-        },
-        parts: [],
-    };
-    // Attribute node spans from key start to after value and closing quote/brace
-    const attrRange = [keyRange[0], valueEndIndex + 1]; // +1 for closing quote or }
+    let value;
+    let startWrapper;
+    let endWrapper;
+    switch (attr.type) {
+        case "ConstantAttribute":
+            value = {
+                type: NodeTypes.AttributeValue,
+                value: attr.Value,
+                range: convertRange(attr.ValueRange),
+                loc: convertLoc(attr.ValueRange),
+                parts: [],
+            };
+            ({ startWrapper, endWrapper } = createAttributeValueWrappers(attr));
+            break;
+        case "ExpressionAttribute":
+            value = {
+                type: NodeTypes.AttributeValue,
+                value: "",
+                range: convertRange(attr.InitializerRange),
+                loc: convertLoc(attr.InitializerRange),
+                parts: [],
+            };
+            break;
+        case "BoolConstantAttribute":
+            // Boolean attributes have no value
+            break;
+    }
+    const hasValue = value !== undefined;
+    const attrRange = hasValue
+        ? convertRange(attr.Range)
+        : keyRange;
     return {
         type: NodeTypes.Attribute,
         key,
-        value,
+        ...(value && { value }), // Only include value if it exists
+        ...(startWrapper && { startWrapper }),
+        ...(endWrapper && { endWrapper }),
         range: attrRange,
-        loc: {
-            start: keyLoc.start,
-            end: {
-                line: value.loc.end.line,
-                column: value.loc.end.column + 1,
-            },
+        loc: hasValue ? convertLoc(attr.Range) : keyLoc,
+    };
+}
+function createAttributeValueWrappers(attr) {
+    const attrRange = convertRange(attr.Range);
+    const valueRange = convertRange(attr.ValueRange);
+    if (valueRange[0] - 1 < attrRange[0] || valueRange[1] + 1 > attrRange[1]) {
+        return {};
+    }
+    const wrapperValue = attr.SingleQuote ? "'" : '"';
+    const startRange = {
+        From: offsetPosition(attr.ValueRange.From, -1),
+        To: attr.ValueRange.From,
+    };
+    const endRange = {
+        From: attr.ValueRange.To,
+        To: offsetPosition(attr.ValueRange.To, 1),
+    };
+    return {
+        startWrapper: {
+            type: NodeTypes.AttributeValueWrapperStart,
+            value: wrapperValue,
+            range: convertRange(startRange),
+            loc: convertLoc(startRange),
+        },
+        endWrapper: {
+            type: NodeTypes.AttributeValueWrapperEnd,
+            value: wrapperValue,
+            range: convertRange(endRange),
+            loc: convertLoc(endRange),
         },
     };
 }
@@ -191,6 +527,13 @@ function convertLoc(range) {
         end: convertPosition(range.To),
     };
 }
+function offsetPosition(position, offset) {
+    return {
+        ...position,
+        Index: position.Index + offset,
+        Col: position.Col + offset,
+    };
+}
 function convertRange(range) {
     return [range.From.Index, range.To.Index];
 }
@@ -200,19 +543,34 @@ function convertPosition(pos) {
         column: pos.Col,
     };
 }
-function isElementNode(node) {
-    return "Name" in node && "Range" in node && "Children" in node;
-}
-function isWhitespace(node) {
-    return ("Value" in node &&
-        !("Range" in node) &&
-        !("Expression" in node) &&
-        !("TrailingSpace" in node));
+function getLiteralRange(from, value) {
+    return {
+        From: from,
+        To: {
+            Index: from.Index + value.length,
+            Line: from.Line,
+            Col: from.Col + value.length,
+        },
+    };
 }
-function isStringExpression(node) {
-    return ("Value" in node &&
-        "Range" in node &&
-        "TrailingSpace" in node &&
-        !("Expression" in node));
+export class TemplASTConversionError extends SyntaxError {
+    name = "TemplASTConversionError";
+    line;
+    column;
+    node;
+    constructor(message, node, options) {
+        super(message, options);
+        this.node = node;
+        // Extract position from node if it has a Range property, otherwise default to line 1, column 0
+        if ("Range" in node && node.Range) {
+            const position = convertPosition(node.Range.From);
+            this.line = position.line;
+            this.column = position.column;
+        }
+        else {
+            this.line = 1;
+            this.column = 0;
+        }
+    }
 }
 //# sourceMappingURL=templ-ast-to-eslint-ast.js.map