@lwc/template-compiler 2.6.2 → 2.7.0

package/dist/commonjs/parser/index.js

@@ -22,14 +22,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const shared_1 = require("@lwc/shared");
 const errors_1 = require("@lwc/errors");
 const html_1 = require("./html");
 const attribute_1 = require("./attribute");
 const expression_1 = require("./expression");
 const t = __importStar(require("../shared/estree"));
 const parse5Utils = __importStar(require("../shared/parse5"));
-const ir_1 = require("../shared/ir");
+const ast = __importStar(require("../shared/ast"));
 const types_1 = require("../shared/types");
 const parser_1 = __importDefault(require("./parser"));
 const constants_1 = require("./constants");
@@ -65,40 +64,62 @@ function parse(source, state) {
     }
     const root = ctx.withErrorRecovery(() => {
         const templateRoot = getTemplateRoot(ctx, fragment);
-        return parseElement(ctx, templateRoot);
+        return parseRoot(ctx, templateRoot);
     });
     return { root, warnings: ctx.warnings };
 }
 exports.default = parse;
-function parseElement(ctx, parse5Elm, parentIRElement) {
-    const location = parseElementLocation(ctx, parse5Elm, parentIRElement);
-    const element = (0, ir_1.createElement)(parse5Elm, location);
-    const parsedAttr = parseAttributes(ctx, element, parse5Elm);
-    applyForEach(ctx, element, parsedAttr);
-    applyIterator(ctx, element, parsedAttr);
-    applyIf(ctx, element, parsedAttr);
-    applyHandlers(ctx, element, parsedAttr);
-    applyComponent(element);
-    applySlot(ctx, element, parsedAttr);
-    applyKey(ctx, element, parsedAttr);
-    applyLwcDirectives(ctx, element, parsedAttr);
-    applyAttributes(ctx, element, parsedAttr);
-    validateElement(ctx, element, parse5Elm);
-    validateAttributes(ctx, element, parsedAttr);
-    validateProperties(ctx, element);
-    parseChildren(ctx, parse5Elm, element);
-    validateChildren(ctx, element);
-    return element;
+function parseRoot(ctx, parse5Elm) {
+    const { sourceCodeLocation: rootLocation } = parse5Elm;
+    if (!rootLocation) {
+        // Parse5 will recover from invalid HTML. When this happens the node's sourceCodeLocation will be undefined.
+        // https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/options/parser-options.md#sourcecodelocationinfo
+        // This is a defensive check as this should never happen for the root template.
+        throw new Error('An internal parsing error occurred during node creation; the root template node does not have a sourceCodeLocation.');
+    }
+    if (parse5Elm.tagName !== 'template') {
+        ctx.throw(errors_1.ParserDiagnostics.ROOT_TAG_SHOULD_BE_TEMPLATE, [parse5Elm.tagName], ast.sourceLocation(rootLocation));
+    }
+    const parsedAttr = parseAttributes(ctx, parse5Elm, rootLocation);
+    const root = ast.root(rootLocation);
+    applyRootLwcDirectives(ctx, parsedAttr, root);
+    ctx.setRootDirective(root);
+    validateRoot(ctx, parsedAttr, root);
+    parseChildren(ctx, parse5Elm, root, rootLocation);
+    return root;
 }
-function parseElementLocation(ctx, parse5Elm, parentIRElement) {
+function parseElement(ctx, parse5Elm, parentNode, parse5ParentLocation) {
+    const parse5ElmLocation = parseElementLocation(ctx, parse5Elm, parse5ParentLocation);
+    const parsedAttr = parseAttributes(ctx, parse5Elm, parse5ElmLocation);
+    const directive = parseElementDirectives(ctx, parsedAttr, parentNode, parse5ElmLocation);
+    const element = parseBaseElement(ctx, parsedAttr, parse5Elm, directive || parentNode, parse5ElmLocation);
+    if (element) {
+        applyHandlers(ctx, parsedAttr, element);
+        applyKey(ctx, parsedAttr, element, parentNode);
+        applyLwcDirectives(ctx, parsedAttr, element);
+        applyAttributes(ctx, parsedAttr, element);
+        validateElement(ctx, element, parse5Elm);
+        validateAttributes(ctx, parsedAttr, element);
+        validateProperties(ctx, element);
+    }
+    validateTemplate(ctx, parsedAttr, parse5Elm, parse5ElmLocation);
+    const currentNode = element || directive;
+    if (currentNode) {
+        parseChildren(ctx, parse5Elm, currentNode, parse5ElmLocation);
+        validateChildren(ctx, element);
+    }
+}
+function parseElementLocation(ctx, parse5Elm, parse5ParentLocation) {
     var _a;
     let location = parse5Elm.sourceCodeLocation;
+    // AST hierarchy is ForBlock > If > BaseElement, if immediate parent is not a BaseElement it is a template.
+    const parentNode = ctx.findAncestor(ast.isBaseElement, () => false);
     if (!location) {
         // Parse5 will recover from invalid HTML. When this happens the element's sourceCodeLocation will be undefined.
         // https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/options/parser-options.md#sourcecodelocationinfo
         ctx.warn(errors_1.ParserDiagnostics.INVALID_HTML_RECOVERY, [
             parse5Elm.tagName,
-            parentIRElement === null || parentIRElement === void 0 ? void 0 : parentIRElement.tag,
+            (_a = parentNode === null || parentNode === void 0 ? void 0 : parentNode.name) !== null && _a !== void 0 ? _a : 'template',
         ]);
     }
     // With parse5 automatically recovering from invalid HTML, some AST nodes might not have
@@ -110,33 +131,65 @@ function parseElementLocation(ctx, parse5Elm, parentIRElement) {
         current = current.parentNode;
         location = current.sourceCodeLocation;
     }
-    // Parent's location is used as the fallback in case the current node's location cannot be found.
-    // If there is no parent, use an empty parse5.ElementLocation instead.
-    return (_a = location !== null && location !== void 0 ? location : parentIRElement === null || parentIRElement === void 0 ? void 0 : parentIRElement.location) !== null && _a !== void 0 ? _a : parse5Utils.createEmptyElementLocation();
+    return location !== null && location !== void 0 ? location : parse5ParentLocation;
 }
-function parseChildren(ctx, parse5Parent, parentIRElement) {
+function parseElementDirectives(ctx, parsedAttr, parent, parse5ElmLocation) {
+    let current;
+    const parsers = [parseForEach, parseForOf, parseIf];
+    for (const parser of parsers) {
+        const prev = current || parent;
+        const node = parser(ctx, parsedAttr, parse5ElmLocation);
+        if (node) {
+            ctx.addNodeCurrentScope(node);
+            prev.children.push(node);
+            current = node;
+        }
+    }
+    return current;
+}
+function parseBaseElement(ctx, parsedAttr, parse5Elm, parent, parse5ElmLocation) {
+    const { tagName: tag } = parse5Elm;
+    let element;
+    if (tag === 'slot') {
+        element = parseSlot(ctx, parsedAttr, parse5ElmLocation);
+        // Skip creating template nodes
+    }
+    else if (tag !== 'template') {
+        // Check if the element tag is a valid custom element name and is not part of known standard
+        // element name containing a dash.
+        if (!tag.includes('-') || constants_1.DASHED_TAGNAME_ELEMENT_SET.has(tag)) {
+            element = ast.element(parse5Elm, parse5ElmLocation);
+        }
+        else {
+            element = ast.component(parse5Elm, parse5ElmLocation);
+        }
+    }
+    if (element) {
+        ctx.addNodeCurrentScope(element);
+        parent.children.push(element);
+    }
+    return element;
+}
+function parseChildren(ctx, parse5Parent, parent, parse5ParentLocation) {
     var _a;
-    const parsedChildren = [];
     const children = ((_a = parse5Utils.getTemplateContent(parse5Parent)) !== null && _a !== void 0 ? _a : parse5Parent).childNodes;
-    ctx.parentStack.push(parentIRElement);
     for (const child of children) {
         ctx.withErrorRecovery(() => {
             if (parse5Utils.isElementNode(child)) {
-                const elmNode = parseElement(ctx, child, parentIRElement);
-                parsedChildren.push(elmNode);
+                ctx.beginScope();
+                parseElement(ctx, child, parent, parse5ParentLocation);
+                ctx.endScope();
             }
             else if (parse5Utils.isTextNode(child)) {
                 const textNodes = parseText(ctx, child);
-                parsedChildren.push(...textNodes);
+                parent.children.push(...textNodes);
             }
             else if (parse5Utils.isCommentNode(child)) {
                 const commentNode = parseComment(child);
-                parsedChildren.push(commentNode);
+                parent.children.push(commentNode);
             }
         });
     }
-    ctx.parentStack.pop();
-    parentIRElement.children = parsedChildren;
 }
 function parseText(ctx, parse5Text) {
     const parsedTextNodes = [];
@@ -145,7 +198,7 @@ function parseText(ctx, parse5Text) {
         // Parse5 will recover from invalid HTML. When this happens the node's sourceCodeLocation will be undefined.
         // https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/options/parser-options.md#sourcecodelocationinfo
         // This is a defensive check as this should never happen for TextNode.
-        throw new Error(`An internal parsing error occurred during node creation; a text node was found without a sourceCodeLocation.`);
+        throw new Error('An internal parsing error occurred during node creation; a text node was found without a sourceCodeLocation.');
     }
     // Extract the raw source to avoid HTML entity decoding done by parse5
     const rawText = (0, html_1.cleanTextNode)(ctx.getSource(location.startOffset, location.endOffset));
@@ -161,12 +214,12 @@ function parseText(ctx, parse5Text) {
         }
         let value;
         if ((0, expression_1.isExpression)(token)) {
-            value = (0, expression_1.parseExpression)(ctx, token, location);
+            value = (0, expression_1.parseExpression)(ctx, token, ast.sourceLocation(location));
         }
         else {
-            value = (0, html_1.decodeTextContent)(token);
+            value = ast.literal((0, html_1.decodeTextContent)(token));
         }
-        parsedTextNodes.push((0, ir_1.createText)(value, location));
+        parsedTextNodes.push(ast.text(value, location));
     }
     return parsedTextNodes;
 }
@@ -176,9 +229,9 @@ function parseComment(parse5Comment) {
         // Parse5 will recover from invalid HTML. When this happens the node's sourceCodeLocation will be undefined.
         // https://github.com/inikulin/parse5/blob/master/packages/parse5/docs/options/parser-options.md#sourcecodelocationinfo
         // This is a defensive check as this should never happen for CommentNode.
-        throw new Error(`An internal parsing error occurred during node creation; a comment node was found without a sourceCodeLocation.`);
+        throw new Error('An internal parsing error occurred during node creation; a comment node was found without a sourceCodeLocation.');
     }
-    return (0, ir_1.createComment)((0, html_1.decodeTextContent)(parse5Comment.data), location);
+    return ast.comment((0, html_1.decodeTextContent)(parse5Comment.data), location);
 }
 function getTemplateRoot(ctx, documentFragment) {
     // Filter all the empty text nodes
@@ -186,7 +239,7 @@ function getTemplateRoot(ctx, documentFragment) {
         (parse5Utils.isTextNode(child) && child.value.trim().length));
     if (validRoots.length > 1) {
         const duplicateRoot = validRoots[1].sourceCodeLocation;
-        ctx.throwAtLocation(errors_1.ParserDiagnostics.MULTIPLE_ROOTS_FOUND, duplicateRoot);
+        ctx.throw(errors_1.ParserDiagnostics.MULTIPLE_ROOTS_FOUND, [], duplicateRoot ? ast.sourceLocation(duplicateRoot) : duplicateRoot);
     }
     const [root] = validRoots;
     if (!root || !parse5Utils.isElementNode(root)) {
@@ -194,266 +247,254 @@ function getTemplateRoot(ctx, documentFragment) {
     }
     return root;
 }
-function applyHandlers(ctx, element, parsedAttr) {
+function applyHandlers(ctx, parsedAttr, element) {
     let eventHandlerAttribute;
     while ((eventHandlerAttribute = parsedAttr.pick(constants_1.EVENT_HANDLER_RE))) {
         const { name } = eventHandlerAttribute;
-        if (!(0, ir_1.isIRExpressionAttribute)(eventHandlerAttribute)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.EVENT_HANDLER_SHOULD_BE_EXPRESSION, eventHandlerAttribute);
+        if (!ast.isExpression(eventHandlerAttribute.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.EVENT_HANDLER_SHOULD_BE_EXPRESSION, eventHandlerAttribute);
         }
         if (!name.match(constants_1.EVENT_HANDLER_NAME_RE)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_EVENT_NAME, eventHandlerAttribute, [name]);
-        }
-        // Light DOM slots cannot have events because there's no actual `<slot>` element
-        if (element.tag === 'slot' && ctx.getRenderMode(element) === types_1.LWCDirectiveRenderMode.light) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_LIGHT_SLOT_INVALID_EVENT_LISTENER, element, [
-                name,
-            ]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_EVENT_NAME, eventHandlerAttribute, [name]);
         }
         // Strip the `on` prefix from the event handler name
         const eventName = name.slice(2);
-        const on = element.on || (element.on = {});
-        on[eventName] = eventHandlerAttribute.value;
+        const listener = ast.eventListener(eventName, eventHandlerAttribute.value, eventHandlerAttribute.location);
+        element.listeners.push(listener);
     }
 }
-function applyIf(ctx, element, parsedAttr) {
+function parseIf(ctx, parsedAttr, parse5ElmLocation) {
     const ifAttribute = parsedAttr.pick(constants_1.IF_RE);
     if (!ifAttribute) {
         return;
     }
-    if (!(0, ir_1.isIRExpressionAttribute)(ifAttribute)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.IF_DIRECTIVE_SHOULD_BE_EXPRESSION, ifAttribute);
+    if (!ast.isExpression(ifAttribute.value)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.IF_DIRECTIVE_SHOULD_BE_EXPRESSION, ifAttribute);
     }
     const [, modifier] = ifAttribute.name.split(':');
     if (!constants_1.VALID_IF_MODIFIER.has(modifier)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.UNEXPECTED_IF_MODIFIER, ifAttribute, [modifier]);
+        ctx.throwOnNode(errors_1.ParserDiagnostics.UNEXPECTED_IF_MODIFIER, ifAttribute, [modifier]);
     }
-    element.if = ifAttribute.value;
-    element.ifModifier = modifier;
+    return ast.ifNode(modifier, ifAttribute.value, ast.sourceLocation(parse5ElmLocation), ifAttribute.location);
 }
-function applyLwcDirectives(ctx, element, parsedAttr) {
+function applyRootLwcDirectives(ctx, parsedAttr, root) {
     const lwcAttribute = parsedAttr.get(constants_1.LWC_RE);
     if (!lwcAttribute) {
         return;
     }
-    if (!constants_1.LWC_DIRECTIVE_SET.has(lwcAttribute.name) &&
-        !constants_1.ROOT_TEMPLATE_DIRECTIVES_SET.has(lwcAttribute.name)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
-            lwcAttribute.name,
-            `<${element.tag}>`,
-        ]);
-    }
-    const lwcOpts = {};
-    applyLwcDynamicDirective(ctx, element, parsedAttr, lwcOpts);
-    applyLwcDomDirective(ctx, element, parsedAttr, lwcOpts);
-    applyLwcRenderModeDirective(ctx, element, parsedAttr, lwcOpts);
-    applyLwcPreserveCommentsDirective(ctx, element, parsedAttr, lwcOpts);
-    applyLwcInnerHtmlDirective(ctx, element, parsedAttr, lwcOpts);
-    element.lwc = lwcOpts;
+    applyLwcRenderModeDirective(ctx, parsedAttr, root);
+    applyLwcPreserveCommentsDirective(ctx, parsedAttr, root);
 }
-function applyLwcRenderModeDirective(ctx, element, parsedAttr, lwcOpts) {
-    const lwcRenderModeAttribute = parsedAttr.get(constants_1.ROOT_TEMPLATE_DIRECTIVES.RENDER_MODE);
+function applyLwcRenderModeDirective(ctx, parsedAttr, root) {
+    const lwcRenderModeAttribute = parsedAttr.pick(constants_1.ROOT_TEMPLATE_DIRECTIVES.RENDER_MODE);
     if (!lwcRenderModeAttribute) {
         return;
     }
-    if (!(0, ir_1.isIRStringAttribute)(lwcRenderModeAttribute) ||
-        (lwcRenderModeAttribute.value !== 'shadow' && lwcRenderModeAttribute.value !== 'light')) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_RENDER_MODE_INVALID_VALUE, element);
+    const { value: renderDomAttr } = lwcRenderModeAttribute;
+    if (!ast.isStringLiteral(renderDomAttr) ||
+        (renderDomAttr.value !== types_1.LWCDirectiveRenderMode.shadow &&
+            renderDomAttr.value !== types_1.LWCDirectiveRenderMode.light)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_RENDER_MODE_INVALID_VALUE, root);
     }
-    if (ctx.parentStack.length > 0) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
-            constants_1.ROOT_TEMPLATE_DIRECTIVES.RENDER_MODE,
-            `<${element.tag}>`,
-        ]);
-    }
-    lwcOpts.renderMode = lwcRenderModeAttribute.value;
+    root.directives.push(ast.renderModeDirective(renderDomAttr.value, lwcRenderModeAttribute.location));
 }
-function applyLwcPreserveCommentsDirective(ctx, element, parsedAttr, lwcOpts) {
-    const lwcPreserveCommentAttribute = parsedAttr.get(constants_1.ROOT_TEMPLATE_DIRECTIVES.PRESERVE_COMMENTS);
+function applyLwcPreserveCommentsDirective(ctx, parsedAttr, root) {
+    const lwcPreserveCommentAttribute = parsedAttr.pick(constants_1.ROOT_TEMPLATE_DIRECTIVES.PRESERVE_COMMENTS);
     if (!lwcPreserveCommentAttribute) {
         return;
     }
-    if (ctx.parentStack.length) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
-            constants_1.ROOT_TEMPLATE_DIRECTIVES.PRESERVE_COMMENTS,
-            `<${element.tag}>`,
-        ]);
-    }
-    else if (!(0, ir_1.isIRBooleanAttribute)(lwcPreserveCommentAttribute)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.PRESERVE_COMMENTS_MUST_BE_BOOLEAN, element);
+    const { value: lwcPreserveCommentsAttr } = lwcPreserveCommentAttribute;
+    if (!ast.isBooleanLiteral(lwcPreserveCommentsAttr)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.PRESERVE_COMMENTS_MUST_BE_BOOLEAN, root);
     }
-    lwcOpts.preserveComments = lwcPreserveCommentAttribute;
+    root.directives.push(ast.preserveCommentsDirective(lwcPreserveCommentsAttr.value, lwcPreserveCommentAttribute.location));
 }
-function applyLwcInnerHtmlDirective(ctx, element, parsedAttr, lwcOpts) {
-    const lwcInnerHtmlDirective = parsedAttr.pick(constants_1.LWC_DIRECTIVES.INNER_HTML);
-    if (!lwcInnerHtmlDirective) {
+function applyLwcDirectives(ctx, parsedAttr, element) {
+    const lwcAttribute = parsedAttr.get(constants_1.LWC_RE);
+    if (!lwcAttribute) {
         return;
     }
-    if ((0, ir_1.isCustomElement)(element)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_CUSTOM_ELEMENT, element, [
-            `<${element.tag}>`,
+    if (!constants_1.LWC_DIRECTIVE_SET.has(lwcAttribute.name)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
+            lwcAttribute.name,
+            `<${element.name}>`,
         ]);
     }
-    if (element.tag === 'slot' || element.tag === 'template') {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_ELEMENT, element, [
-            `<${element.tag}>`,
+    // Should not allow render mode or preserve comments on non root nodes
+    if (parsedAttr.get(constants_1.ROOT_TEMPLATE_DIRECTIVES.RENDER_MODE)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
+            constants_1.ROOT_TEMPLATE_DIRECTIVES.RENDER_MODE,
+            `<${element.name}>`,
         ]);
     }
-    if (lwcInnerHtmlDirective.type === types_1.IRAttributeType.Boolean) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_VALUE, element, [
-            `<${element.tag}>`,
+    if (parsedAttr.get(constants_1.ROOT_TEMPLATE_DIRECTIVES.PRESERVE_COMMENTS)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.UNKNOWN_LWC_DIRECTIVE, element, [
+            constants_1.ROOT_TEMPLATE_DIRECTIVES.PRESERVE_COMMENTS,
+            `<${element.name}>`,
         ]);
     }
-    lwcOpts.innerHTML = lwcInnerHtmlDirective.value;
+    applyLwcDynamicDirective(ctx, parsedAttr, element);
+    applyLwcDomDirective(ctx, parsedAttr, element);
+    applyLwcInnerHtmlDirective(ctx, parsedAttr, element);
 }
-function applyLwcDynamicDirective(ctx, element, parsedAttr, lwcOpts) {
-    const { tag } = element;
-    const lwcDynamicAttribute = parsedAttr.pick(constants_1.LWC_DIRECTIVES.DYNAMIC);
+function applyLwcDynamicDirective(ctx, parsedAttr, element) {
+    const { name: tag } = element;
+    const lwcDynamicAttribute = parsedAttr.pick('lwc:dynamic');
     if (!lwcDynamicAttribute) {
         return;
     }
     if (!ctx.config.experimentalDynamicDirective) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_OPTS_LWC_DYNAMIC, element);
+        ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_OPTS_LWC_DYNAMIC, element);
     }
-    if (!(0, ir_1.isCustomElement)(element)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_LWC_DYNAMIC_ON_NATIVE_ELEMENT, element, [
+    if (!ast.isComponent(element)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_LWC_DYNAMIC_ON_NATIVE_ELEMENT, element, [
             `<${tag}>`,
         ]);
     }
-    if (!(0, ir_1.isIRExpressionAttribute)(lwcDynamicAttribute)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_LWC_DYNAMIC_LITERAL_PROP, element, [
-            `<${tag}>`,
-        ]);
+    const { value: lwcDynamicAttr } = lwcDynamicAttribute;
+    if (!ast.isExpression(lwcDynamicAttr)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_LWC_DYNAMIC_LITERAL_PROP, element, [`<${tag}>`]);
     }
-    lwcOpts.dynamic = lwcDynamicAttribute.value;
+    element.directives.push(ast.dynamicDirective(lwcDynamicAttr, lwcDynamicAttr.location));
 }
-function applyLwcDomDirective(ctx, element, parsedAttr, lwcOpts) {
-    const { tag } = element;
-    const lwcDomAttribute = parsedAttr.pick(constants_1.LWC_DIRECTIVES.DOM);
+function applyLwcDomDirective(ctx, parsedAttr, element) {
+    const { name: tag } = element;
+    const lwcDomAttribute = parsedAttr.pick('lwc:dom');
     if (!lwcDomAttribute) {
         return;
     }
-    if (ctx.getRenderMode(element) === types_1.LWCDirectiveRenderMode.light) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_IN_LIGHT_DOM, element, [`<${tag}>`]);
+    if (ctx.renderMode === types_1.LWCDirectiveRenderMode.light) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_IN_LIGHT_DOM, element, [`<${tag}>`]);
     }
-    if ((0, ir_1.isCustomElement)(element)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_CUSTOM_ELEMENT, element, [`<${tag}>`]);
+    if (ast.isComponent(element)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_CUSTOM_ELEMENT, element, [`<${tag}>`]);
     }
-    if (tag === 'slot') {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_SLOT_ELEMENT, element);
+    if (ast.isSlot(element)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_SLOT_ELEMENT, element);
     }
-    if (!(0, ir_1.isIRStringAttribute)(lwcDomAttribute) ||
-        shared_1.hasOwnProperty.call(types_1.LWCDirectiveDomMode, lwcDomAttribute.value) === false) {
+    const { value: lwcDomAttr } = lwcDomAttribute;
+    if (!ast.isStringLiteral(lwcDomAttr) || lwcDomAttr.value !== types_1.LWCDirectiveDomMode.manual) {
         const possibleValues = Object.keys(types_1.LWCDirectiveDomMode)
             .map((value) => `"${value}"`)
             .join(', or ');
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_VALUE, element, [possibleValues]);
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_VALUE, element, [possibleValues]);
     }
-    lwcOpts.dom = lwcDomAttribute.value;
+    element.directives.push(ast.domDirective(lwcDomAttr.value, lwcDomAttribute.location));
 }
-function applyForEach(ctx, element, parsedAttr) {
-    const forEachAttribute = parsedAttr.pick(constants_1.FOR_DIRECTIVES.FOR_EACH);
-    const forItemAttribute = parsedAttr.pick(constants_1.FOR_DIRECTIVES.FOR_ITEM);
-    const forIndex = parsedAttr.pick(constants_1.FOR_DIRECTIVES.FOR_INDEX);
+function applyLwcInnerHtmlDirective(ctx, parsedAttr, element) {
+    const lwcInnerHtmlDirective = parsedAttr.pick(constants_1.LWC_DIRECTIVES.INNER_HTML);
+    if (!lwcInnerHtmlDirective) {
+        return;
+    }
+    if (ast.isComponent(element)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_CUSTOM_ELEMENT, element, [
+            `<${element.name}>`,
+        ]);
+    }
+    if (ast.isSlot(element)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_ELEMENT, element, [
+            `<${element.name}>`,
+        ]);
+    }
+    const { value: innerHTMLVal } = lwcInnerHtmlDirective;
+    if (!ast.isStringLiteral(innerHTMLVal) && !ast.isExpression(innerHTMLVal)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_VALUE, element, [
+            `<${element.name}>`,
+        ]);
+    }
+    element.directives.push(ast.innerHTMLDirective(innerHTMLVal, lwcInnerHtmlDirective.location));
+}
+function parseForEach(ctx, parsedAttr, parse5ElmLocation) {
+    const forEachAttribute = parsedAttr.pick('for:each');
+    const forItemAttribute = parsedAttr.pick('for:item');
+    const forIndex = parsedAttr.pick('for:index');
     if (forEachAttribute && forItemAttribute) {
-        if (!(0, ir_1.isIRExpressionAttribute)(forEachAttribute)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FOR_EACH_DIRECTIVE_SHOULD_BE_EXPRESSION, forEachAttribute);
+        if (!ast.isExpression(forEachAttribute.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FOR_EACH_DIRECTIVE_SHOULD_BE_EXPRESSION, forEachAttribute);
         }
-        if (!(0, ir_1.isIRStringAttribute)(forItemAttribute)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FOR_ITEM_DIRECTIVE_SHOULD_BE_STRING, forItemAttribute);
+        const forItemValue = forItemAttribute.value;
+        if (!ast.isStringLiteral(forItemValue)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FOR_ITEM_DIRECTIVE_SHOULD_BE_STRING, forItemAttribute);
         }
-        const item = (0, expression_1.parseIdentifier)(ctx, forItemAttribute.value, forItemAttribute.location);
+        const item = (0, expression_1.parseIdentifier)(ctx, forItemValue.value, forItemAttribute.location);
         let index;
         if (forIndex) {
-            if (!(0, ir_1.isIRStringAttribute)(forIndex)) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.FOR_INDEX_DIRECTIVE_SHOULD_BE_STRING, forIndex);
+            const forIndexValue = forIndex.value;
+            if (!ast.isStringLiteral(forIndexValue)) {
+                ctx.throwOnNode(errors_1.ParserDiagnostics.FOR_INDEX_DIRECTIVE_SHOULD_BE_STRING, forIndex);
             }
-            index = (0, expression_1.parseIdentifier)(ctx, forIndex.value, forIndex.location);
+            index = (0, expression_1.parseIdentifier)(ctx, forIndexValue.value, forIndex.location);
         }
-        element.forEach = {
-            expression: forEachAttribute.value,
-            item,
-            index,
-        };
+        return ast.forEach(forEachAttribute.value, ast.sourceLocation(parse5ElmLocation), forEachAttribute.location, item, index);
     }
     else if (forEachAttribute || forItemAttribute) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.FOR_EACH_AND_FOR_ITEM_DIRECTIVES_SHOULD_BE_TOGETHER, element);
+        ctx.throwAtLocation(errors_1.ParserDiagnostics.FOR_EACH_AND_FOR_ITEM_DIRECTIVES_SHOULD_BE_TOGETHER, ast.sourceLocation(parse5ElmLocation));
     }
 }
-function applyIterator(ctx, element, parsedAttr) {
+function parseForOf(ctx, parsedAttr, parse5ElmLocation) {
     const iteratorExpression = parsedAttr.pick(constants_1.ITERATOR_RE);
     if (!iteratorExpression) {
         return;
     }
-    if (element.forEach) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_FOR_EACH_WITH_ITERATOR, element, [
-            iteratorExpression.name,
-        ]);
+    const hasForEach = ctx.findSibling(ast.isForEach);
+    if (hasForEach) {
+        ctx.throwAtLocation(errors_1.ParserDiagnostics.INVALID_FOR_EACH_WITH_ITERATOR, ast.sourceLocation(parse5ElmLocation), [iteratorExpression.name]);
     }
     const iteratorAttributeName = iteratorExpression.name;
     const [, iteratorName] = iteratorAttributeName.split(':');
-    if (!(0, ir_1.isIRExpressionAttribute)(iteratorExpression)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.DIRECTIVE_SHOULD_BE_EXPRESSION, iteratorExpression, [
+    if (!ast.isExpression(iteratorExpression.value)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.DIRECTIVE_SHOULD_BE_EXPRESSION, iteratorExpression, [
             iteratorExpression.name,
         ]);
     }
     const iterator = (0, expression_1.parseIdentifier)(ctx, iteratorName, iteratorExpression.location);
-    element.forOf = {
-        expression: iteratorExpression.value,
-        iterator,
-    };
+    return ast.forOf(iteratorExpression.value, iterator, ast.sourceLocation(parse5ElmLocation), iteratorExpression.location);
 }
-function applyKey(ctx, element, parsedAttr) {
-    const { tag } = element;
+function applyKey(ctx, parsedAttr, element, parent) {
+    const { name: tag } = element;
     const keyAttribute = parsedAttr.pick('key');
     if (keyAttribute) {
-        if (!(0, ir_1.isIRExpressionAttribute)(keyAttribute)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.KEY_ATTRIBUTE_SHOULD_BE_EXPRESSION, keyAttribute);
+        if (!ast.isExpression(keyAttribute.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.KEY_ATTRIBUTE_SHOULD_BE_EXPRESSION, keyAttribute);
         }
-        const forOfParent = getForOfParent(ctx);
-        const forEachParent = getForEachParent(ctx, element);
+        const forOfParent = getForOfParent(ctx, parent);
+        const forEachParent = getForEachParent(ctx);
         if (forOfParent) {
-            if (attributeExpressionReferencesForOfIndex(keyAttribute, forOfParent.forOf)) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.KEY_SHOULDNT_REFERENCE_ITERATOR_INDEX, keyAttribute, [tag]);
+            if (attributeExpressionReferencesForOfIndex(keyAttribute, forOfParent)) {
+                ctx.throwOnNode(errors_1.ParserDiagnostics.KEY_SHOULDNT_REFERENCE_ITERATOR_INDEX, keyAttribute, [tag]);
             }
         }
         else if (forEachParent) {
-            if (attributeExpressionReferencesForEachIndex(keyAttribute, forEachParent.forEach)) {
+            if (attributeExpressionReferencesForEachIndex(keyAttribute, forEachParent)) {
                 const name = 'name' in keyAttribute.value && keyAttribute.value.name;
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.KEY_SHOULDNT_REFERENCE_FOR_EACH_INDEX, keyAttribute, [tag, name]);
+                ctx.throwOnNode(errors_1.ParserDiagnostics.KEY_SHOULDNT_REFERENCE_FOR_EACH_INDEX, keyAttribute, [tag, name]);
             }
         }
-        element.forKey = keyAttribute.value;
+        element.directives.push(ast.keyDirective(keyAttribute.value, keyAttribute.location));
     }
-    else if (isInIteratorElement(ctx, element) && !(0, ir_1.isTemplate)(element)) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.MISSING_KEY_IN_ITERATOR, element, [tag]);
+    else if (isInIteratorElement(ctx, parent)) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.MISSING_KEY_IN_ITERATOR, element, [tag]);
     }
 }
-function applyComponent(element) {
-    const { tag } = element;
-    // Check if the element tag is a valid custom element name and is not part of known standard
-    // element name containing a dash.
-    if (!tag.includes('-') || constants_1.DASHED_TAGNAME_ELEMENT_SET.has(tag)) {
-        return;
-    }
-    element.component = tag;
-}
-function applySlot(ctx, element, parsedAttr) {
-    // Early exit if the element is not a slot
-    if (element.tag !== 'slot') {
-        return;
-    }
-    if (element.forEach || element.forOf || element.if) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.SLOT_TAG_CANNOT_HAVE_DIRECTIVES, element);
+function parseSlot(ctx, parsedAttr, parse5ElmLocation) {
+    const location = ast.sourceLocation(parse5ElmLocation);
+    const hasDirectives = ctx.findSibling(ast.isForBlock) || ctx.findSibling(ast.isIf);
+    if (hasDirectives) {
+        ctx.throwAtLocation(errors_1.ParserDiagnostics.SLOT_TAG_CANNOT_HAVE_DIRECTIVES, location);
     }
     // Can't handle slots in applySlot because it would be too late for class and style attrs
-    if (ctx.getRenderMode(element) === types_1.LWCDirectiveRenderMode.light) {
+    if (ctx.renderMode === types_1.LWCDirectiveRenderMode.light) {
         const invalidAttrs = parsedAttr
             .getAttributes()
             .filter(({ name }) => name !== 'name')
             .map(({ name }) => name);
-        if (invalidAttrs.length > 0) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_LIGHT_SLOT_INVALID_ATTRIBUTES, element, [
+        if (invalidAttrs.length) {
+            // Light DOM slots cannot have events because there's no actual `<slot>` element
+            const eventHandler = invalidAttrs.find((name) => name.match(constants_1.EVENT_HANDLER_NAME_RE));
+            if (eventHandler) {
+                ctx.throwAtLocation(errors_1.ParserDiagnostics.LWC_LIGHT_SLOT_INVALID_EVENT_LISTENER, location, [eventHandler]);
+            }
+            ctx.throwAtLocation(errors_1.ParserDiagnostics.LWC_LIGHT_SLOT_INVALID_ATTRIBUTES, location, [
                 invalidAttrs.join(','),
             ]);
         }
@@ -462,57 +503,57 @@ function applySlot(ctx, element, parsedAttr) {
     let name = '';
     const nameAttribute = parsedAttr.get('name');
     if (nameAttribute) {
-        if ((0, ir_1.isIRExpressionAttribute)(nameAttribute)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.NAME_ON_SLOT_CANNOT_BE_EXPRESSION, nameAttribute);
+        if (ast.isExpression(nameAttribute.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.NAME_ON_SLOT_CANNOT_BE_EXPRESSION, nameAttribute);
         }
-        else if ((0, ir_1.isIRStringAttribute)(nameAttribute)) {
-            name = nameAttribute.value;
+        else if (ast.isStringLiteral(nameAttribute.value)) {
+            name = nameAttribute.value.value;
         }
     }
-    element.slotName = name;
     const alreadySeen = ctx.seenSlots.has(name);
     ctx.seenSlots.add(name);
     if (alreadySeen) {
-        return ctx.warnOnIRNode(errors_1.ParserDiagnostics.NO_DUPLICATE_SLOTS, element, [
+        ctx.warnAtLocation(errors_1.ParserDiagnostics.NO_DUPLICATE_SLOTS, location, [
             name === '' ? 'default' : `name="${name}"`,
         ]);
     }
-    else if (isInIteration(ctx, element)) {
-        return ctx.warnOnIRNode(errors_1.ParserDiagnostics.NO_SLOTS_IN_ITERATOR, element, [
+    else if (isInIteration(ctx)) {
+        ctx.warnAtLocation(errors_1.ParserDiagnostics.NO_SLOTS_IN_ITERATOR, location, [
             name === '' ? 'default' : `name="${name}"`,
         ]);
     }
+    return ast.slot(name, parse5ElmLocation);
 }
-function applyAttributes(ctx, element, parsedAttr) {
-    const { tag } = element;
+function applyAttributes(ctx, parsedAttr, element) {
+    const { name: tag } = element;
     const attributes = parsedAttr.getAttributes();
     for (const attr of attributes) {
         const { name } = attr;
         if (!(0, attribute_1.isValidHTMLAttribute)(tag, name)) {
-            ctx.warnOnIRNode(errors_1.ParserDiagnostics.INVALID_HTML_ATTRIBUTE, attr, [name, tag]);
+            ctx.warnOnNode(errors_1.ParserDiagnostics.INVALID_HTML_ATTRIBUTE, attr, [name, tag]);
         }
         if (name.match(/[^a-z0-9]$/)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_MUST_END_WITH_ALPHA_NUMERIC_CHARACTER, attr, [name, tag]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_MUST_END_WITH_ALPHA_NUMERIC_CHARACTER, attr, [name, tag]);
         }
         if (!/^-*[a-z]/.test(name)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_MUST_START_WITH_ALPHABETIC_OR_HYPHEN_CHARACTER, attr, [name, tag]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_MUST_START_WITH_ALPHABETIC_OR_HYPHEN_CHARACTER, attr, [name, tag]);
         }
         // disallow attr name which combines underscore character with special character.
         // We normalize camel-cased names with underscores caMel -> ca-mel; thus sanitization.
         if (name.match(/_[^a-z0-9]|[^a-z0-9]_/)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_CANNOT_COMBINE_UNDERSCORE_WITH_SPECIAL_CHARS, attr, [name, tag]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.ATTRIBUTE_NAME_CANNOT_COMBINE_UNDERSCORE_WITH_SPECIAL_CHARS, attr, [name, tag]);
         }
-        if ((0, ir_1.isIRStringAttribute)(attr)) {
+        if (ast.isStringLiteral(attr.value)) {
             if (name === 'id') {
-                const { value } = attr;
+                const { value } = attr.value;
                 if (/\s+/.test(value)) {
-                    ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_ID_ATTRIBUTE, attr, [value]);
+                    ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_ID_ATTRIBUTE, attr, [value]);
                 }
-                if (isInIteration(ctx, element)) {
-                    ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_STATIC_ID_IN_ITERATION, attr);
+                if (isInIteration(ctx)) {
+                    ctx.warnOnNode(errors_1.ParserDiagnostics.INVALID_STATIC_ID_IN_ITERATION, attr);
                 }
                 if (ctx.seenIds.has(value)) {
-                    ctx.throwOnIRNode(errors_1.ParserDiagnostics.DUPLICATE_ID_FOUND, attr, [value]);
+                    ctx.throwOnNode(errors_1.ParserDiagnostics.DUPLICATE_ID_FOUND, attr, [value]);
                 }
                 else {
                     ctx.seenIds.add(value);
@@ -520,162 +561,163 @@ function applyAttributes(ctx, element, parsedAttr) {
             }
         }
         // Prevent usage of the slot attribute with expression.
-        if (name === 'slot' && (0, ir_1.isIRExpressionAttribute)(attr)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.SLOT_ATTRIBUTE_CANNOT_BE_EXPRESSION, attr);
+        if (name === 'slot' && ast.isExpression(attr.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.SLOT_ATTRIBUTE_CANNOT_BE_EXPRESSION, attr);
         }
         // the if branch handles
         // 1. All attributes for standard elements except 1 case are handled as attributes
         // 2. For custom elements, only key, slot and data are handled as attributes, rest as properties
         if ((0, attribute_1.isAttribute)(element, name)) {
-            const attrs = element.attrs || (element.attrs = {});
-            attrs[name] = attr;
+            element.attributes.push(attr);
         }
         else {
-            const props = element.props || (element.props = {});
-            props[(0, attribute_1.attributeToPropertyName)(name)] = attr;
+            const propName = (0, attribute_1.attributeToPropertyName)(name);
+            element.properties.push(ast.property(propName, attr.value, attr.location));
             parsedAttr.pick(name);
         }
     }
 }
-function validateElement(ctx, element, node) {
-    const { tag, namespace, location } = element;
-    const isRoot = ctx.parentStack.length === 0;
-    if (isRoot) {
-        if (!(0, ir_1.isTemplate)(element)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.ROOT_TAG_SHOULD_BE_TEMPLATE, element, [tag]);
-        }
-        const rootHasUnknownAttributes = node.attrs.some(({ name }) => !constants_1.ROOT_TEMPLATE_DIRECTIVES_SET.has(name));
-        if (rootHasUnknownAttributes) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.ROOT_TEMPLATE_HAS_UNKNOWN_ATTRIBUTES, element);
-        }
+function validateRoot(ctx, parsedAttr, root) {
+    if (parsedAttr.getAttributes().length) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.ROOT_TEMPLATE_HAS_UNKNOWN_ATTRIBUTES, root);
     }
+    if (!root.location.endTag) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.NO_MATCHING_CLOSING_TAGS, root, ['template']);
+    }
+}
+function validateElement(ctx, element, parse5Elm) {
+    const { tagName: tag, namespaceURI: namespace } = parse5Elm;
     // Check if a non-void element has a matching closing tag.
     //
     // Note: Parse5 currently fails to collect end tag location for element with a tag name
     // containing an upper case character (inikulin/parse5#352).
-    const hasClosingTag = Boolean(location.endTag);
+    const hasClosingTag = Boolean(element.location.endTag);
     const isVoidElement = constants_1.VOID_ELEMENT_SET.has(tag);
     if (!isVoidElement && !hasClosingTag && tag === tag.toLocaleLowerCase()) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.NO_MATCHING_CLOSING_TAGS, element, [tag]);
+        ctx.throwOnNode(errors_1.ParserDiagnostics.NO_MATCHING_CLOSING_TAGS, element, [tag]);
     }
     if (tag === 'style' && namespace === constants_1.HTML_NAMESPACE_URI) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.STYLE_TAG_NOT_ALLOWED_IN_TEMPLATE, element);
-    }
-    else if ((0, ir_1.isTemplate)(element)) {
-        // We check if the template element has some modifier applied to it. Directly checking if one of the
-        // IRElement property is impossible. For example when an error occurs during the parsing of the if
-        // expression, the `element.if` property remains undefined. It would results in 2 warnings instead of 1:
-        //      - Invalid if expression
-        //      - Unexpected template element
-        //
-        // Checking if the original HTMLElement has some attributes applied is a good enough for now.
-        if (!isRoot) {
-            if (!node.attrs.length) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.NO_DIRECTIVE_FOUND_ON_TEMPLATE, element);
-            }
-            // Non root templates only support for:each, iterator and if directives
-            if (element.on || element.attrs || element.props || element.forKey || element.lwc) {
-                ctx.warnOnIRNode(errors_1.ParserDiagnostics.UNKNOWN_TEMPLATE_ATTRIBUTE, element);
-            }
-        }
+        ctx.throwOnNode(errors_1.ParserDiagnostics.STYLE_TAG_NOT_ALLOWED_IN_TEMPLATE, element);
     }
     else {
         const isNotAllowedHtmlTag = constants_1.DISALLOWED_HTML_TAGS.has(tag);
         if (namespace === constants_1.HTML_NAMESPACE_URI && isNotAllowedHtmlTag) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FORBIDDEN_TAG_ON_TEMPLATE, element, [tag]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FORBIDDEN_TAG_ON_TEMPLATE, element, [tag]);
         }
         const isNotAllowedSvgTag = !constants_1.SUPPORTED_SVG_TAGS.has(tag);
         if (namespace === constants_1.SVG_NAMESPACE_URI && isNotAllowedSvgTag) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FORBIDDEN_SVG_NAMESPACE_IN_TEMPLATE, element, [
-                tag,
-            ]);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FORBIDDEN_SVG_NAMESPACE_IN_TEMPLATE, element, [tag]);
         }
         const isNotAllowedMathMlTag = constants_1.DISALLOWED_MATHML_TAGS.has(tag);
         if (namespace === constants_1.MATHML_NAMESPACE_URI && isNotAllowedMathMlTag) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FORBIDDEN_MATHML_NAMESPACE_IN_TEMPLATE, element, [
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FORBIDDEN_MATHML_NAMESPACE_IN_TEMPLATE, element, [
                 tag,
             ]);
         }
-        const isKnownTag = (0, ir_1.isCustomElement)(element) ||
+        const isKnownTag = ast.isComponent(element) ||
             constants_1.KNOWN_HTML_ELEMENTS.has(tag) ||
             constants_1.SUPPORTED_SVG_TAGS.has(tag) ||
             constants_1.DASHED_TAGNAME_ELEMENT_SET.has(tag);
         if (!isKnownTag) {
-            ctx.warnOnIRNode(errors_1.ParserDiagnostics.UNKNOWN_HTML_TAG_IN_TEMPLATE, element, [tag]);
+            ctx.warnOnNode(errors_1.ParserDiagnostics.UNKNOWN_HTML_TAG_IN_TEMPLATE, element, [tag]);
+        }
+    }
+}
+function validateTemplate(ctx, parsedAttr, parse5Elm, parse5ElmLocation) {
+    if (parse5Elm.tagName === 'template') {
+        const location = ast.sourceLocation(parse5ElmLocation);
+        // Empty templates not allowed outside of root
+        if (!parse5Elm.attrs.length) {
+            ctx.throwAtLocation(errors_1.ParserDiagnostics.NO_DIRECTIVE_FOUND_ON_TEMPLATE, location);
+        }
+        if (parsedAttr.get(constants_1.LWC_DIRECTIVES.INNER_HTML)) {
+            ctx.throwAtLocation(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_ELEMENT, location, [
+                '<template>',
+            ]);
+        }
+        // Non root templates only support for:each, iterator and if directives
+        if (parsedAttr.getAttributes().length) {
+            ctx.warnAtLocation(errors_1.ParserDiagnostics.UNKNOWN_TEMPLATE_ATTRIBUTE, location);
         }
     }
 }
 function validateChildren(ctx, element) {
-    var _a, _b;
-    const effectiveChildren = ctx.getPreserveComments(element)
+    if (!element) {
+        return;
+    }
+    const effectiveChildren = ctx.preserveComments
         ? element.children
-        : element.children.filter((child) => child.type !== 'comment');
-    if (((_a = element.lwc) === null || _a === void 0 ? void 0 : _a.dom) && effectiveChildren.length > 0) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_CONTENTS, element);
+        : element.children.filter((child) => !ast.isComment(child));
+    const hasDomDirective = element.directives.find(ast.isDomDirective);
+    if (hasDomDirective && effectiveChildren.length) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_DOM_INVALID_CONTENTS, element);
     }
     // prevents lwc:inner-html to be used in an element with content
-    if (((_b = element.lwc) === null || _b === void 0 ? void 0 : _b.innerHTML) && effectiveChildren.length > 0) {
-        ctx.throwOnIRNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_CONTENTS, element, [
-            `<${element.tag}>`,
+    if (element.directives.find(ast.isInnerHTMLDirective) && effectiveChildren.length) {
+        ctx.throwOnNode(errors_1.ParserDiagnostics.LWC_INNER_HTML_INVALID_CONTENTS, element, [
+            `<${element.name}>`,
         ]);
     }
 }
-function validateAttributes(ctx, element, parsedAttr) {
-    const { tag } = element;
+function validateAttributes(ctx, parsedAttr, element) {
+    const { name: tag } = element;
     const attributes = parsedAttr.getAttributes();
     for (const attr of attributes) {
-        const { name: attrName } = attr;
+        const { name: attrName, value: attrVal } = attr;
         if ((0, attribute_1.isProhibitedIsAttribute)(attrName)) {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.IS_ATTRIBUTE_NOT_SUPPORTED, element);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.IS_ATTRIBUTE_NOT_SUPPORTED, element);
         }
         if ((0, attribute_1.isTabIndexAttribute)(attrName)) {
-            if (!(0, ir_1.isIRExpressionAttribute)(attr) && !(0, attribute_1.isValidTabIndexAttributeValue)(attr.value)) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_TABINDEX_ATTRIBUTE, element);
+            if (!ast.isExpression(attrVal) && !(0, attribute_1.isValidTabIndexAttributeValue)(attrVal.value)) {
+                ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_TABINDEX_ATTRIBUTE, element);
             }
         }
         // TODO [#1136]: once the template compiler emits the element namespace information to the engine we should
         // restrict the validation of the "srcdoc" attribute on the "iframe" element only if this element is
         // part of the HTML namespace.
         if (tag === 'iframe' && attrName === 'srcdoc') {
-            ctx.throwOnIRNode(errors_1.ParserDiagnostics.FORBIDDEN_IFRAME_SRCDOC_ATTRIBUTE, element);
+            ctx.throwOnNode(errors_1.ParserDiagnostics.FORBIDDEN_IFRAME_SRCDOC_ATTRIBUTE, element);
         }
     }
 }
 function validateProperties(ctx, element) {
-    const { props } = element;
-    if (props !== undefined) {
-        for (const propName in props) {
-            const propAttr = props[propName];
-            const { name: attrName, value } = propAttr;
-            if ((0, attribute_1.isProhibitedIsAttribute)(attrName)) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.IS_ATTRIBUTE_NOT_SUPPORTED, element);
-            }
-            if ((0, attribute_1.isTabIndexAttribute)(attrName) &&
-                !(0, ir_1.isIRExpressionAttribute)(propAttr) &&
-                !(0, attribute_1.isValidTabIndexAttributeValue)(value)) {
-                ctx.throwOnIRNode(errors_1.ParserDiagnostics.INVALID_TABINDEX_ATTRIBUTE, element);
-            }
+    for (const prop of element.properties) {
+        const { name, value } = prop;
+        const attrName = (0, attribute_1.propertyToAttributeName)(name);
+        if ((0, attribute_1.isProhibitedIsAttribute)(attrName)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.IS_ATTRIBUTE_NOT_SUPPORTED, element);
+        }
+        if (
+        // tabindex is transformed to tabIndex for properties
+        (0, attribute_1.isTabIndexAttribute)(attrName) &&
+            !ast.isExpression(value) &&
+            !(0, attribute_1.isValidTabIndexAttributeValue)(value.value)) {
+            ctx.throwOnNode(errors_1.ParserDiagnostics.INVALID_TABINDEX_ATTRIBUTE, element);
         }
     }
 }
-function parseAttributes(ctx, element, node) {
+function parseAttributes(ctx, parse5Elm, parse5ElmLocation) {
     const parsedAttrs = new attribute_1.ParsedAttribute();
-    const { attrs: attributes } = node;
+    const { attrs: attributes, tagName } = parse5Elm;
+    const { attrs: attrLocations } = parse5ElmLocation;
     for (const attr of attributes) {
-        parsedAttrs.append(getTemplateAttribute(ctx, element, attr));
+        const attrLocation = attrLocations === null || attrLocations === void 0 ? void 0 : attrLocations[(0, attribute_1.attributeName)(attr).toLowerCase()];
+        if (!attrLocation) {
+            throw new Error('An internal parsing error occurred while parsing attributes; attributes were found without a location.');
+        }
+        parsedAttrs.append(getTemplateAttribute(ctx, tagName, attr, attrLocation));
     }
     return parsedAttrs;
 }
-function getTemplateAttribute(ctx, element, attribute) {
-    const name = (0, attribute_1.attributeName)(attribute);
+function getTemplateAttribute(ctx, tag, attribute, attributeLocation) {
     // Convert attribute name to lowercase because the location map keys follow the algorithm defined in the spec
     // https://wicg.github.io/controls-list/html-output/multipage/syntax.html#attribute-name-state
-    const location = element.location.attrs[name.toLowerCase()];
-    const rawAttribute = ctx.getSource(location.startOffset, location.endOffset);
-    const { tag } = element;
+    const rawAttribute = ctx.getSource(attributeLocation.startOffset, attributeLocation.endOffset);
+    const location = ast.sourceLocation(attributeLocation);
     // parse5 automatically converts the casing from camelcase to all lowercase. If the attribute name
     // is not the same before and after the parsing, then the attribute name contains capital letters
-    if (!rawAttribute.startsWith(name)) {
+    const attrName = (0, attribute_1.attributeName)(attribute);
+    if (!rawAttribute.startsWith(attrName)) {
         ctx.throwAtLocation(errors_1.ParserDiagnostics.INVALID_ATTRIBUTE_CASE, location, [
             rawAttribute,
             tag,
@@ -683,51 +725,28 @@ function getTemplateAttribute(ctx, element, attribute) {
     }
     const isBooleanAttribute = !rawAttribute.includes('=');
     const { value, escapedExpression } = (0, attribute_1.normalizeAttributeValue)(ctx, rawAttribute, tag, attribute, location);
+    let attrValue;
     if ((0, expression_1.isExpression)(value) && !escapedExpression) {
-        return {
-            name,
-            location,
-            type: types_1.IRAttributeType.Expression,
-            value: (0, expression_1.parseExpression)(ctx, value, location),
-        };
+        attrValue = (0, expression_1.parseExpression)(ctx, value, location);
     }
     else if (isBooleanAttribute) {
-        return {
-            name,
-            location,
-            type: types_1.IRAttributeType.Boolean,
-            value: true,
-        };
+        attrValue = ast.literal(true);
     }
     else {
-        return {
-            name,
-            location,
-            type: types_1.IRAttributeType.String,
-            value,
-        };
-    }
-}
-function isInIteration(ctx, element) {
-    return ctx.findAncestor({
-        predicate: (element) => (0, ir_1.isTemplate)(element) && (element.forOf || element.forEach),
-        element,
-    });
+        attrValue = ast.literal(value);
+    }
+    return ast.attribute(attrName, attrValue, location);
 }
-function getForOfParent(ctx) {
-    return ctx.findAncestor({
-        predicate: (element) => element.forOf,
-        traversalCond: ({ current }) => (0, ir_1.isTemplate)(current),
-    });
+function isInIteration(ctx) {
+    return !!ctx.findAncestor(ast.isForBlock);
 }
-function getForEachParent(ctx, element) {
-    return ctx.findAncestor({
-        element,
-        predicate: (element) => element.forEach,
-        traversalCond: ({ parent }) => parent && (0, ir_1.isTemplate)(parent),
-    });
+function getForOfParent(ctx, srcNode) {
+    return ctx.findAncestor(ast.isForOf, ({ current }) => !ast.isBaseElement(current), srcNode);
+}
+function getForEachParent(ctx) {
+    return ctx.findAncestor(ast.isForEach, ({ parent }) => parent && !ast.isBaseElement(parent));
 }
-function isInIteratorElement(ctx, element) {
-    return !!(getForOfParent(ctx) || getForEachParent(ctx, element));
+function isInIteratorElement(ctx, parent) {
+    return !!(getForOfParent(ctx, parent) || getForEachParent(ctx));
 }
 //# sourceMappingURL=index.js.map