@katabatic/compiler 1.1.5 → 1.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.1.5",
+  "version": "1.1.7",
   "type": "module",
   "repository": {
     "type": "git",
@@ -16,6 +16,10 @@
 			"import": "./src/router/index.js"
 		}
 	},
+  "scripts": {
+      "test": "vitest"
+
+  },
   "devDependencies": {
     "@types/css-tree": "^2.3.10",
     "@types/node": "^22.15.21",

package/src/analyse/visitors/CustomElement.js

@@ -4,7 +4,9 @@ export function CustomElement(node, ctx) {
     ctx.next()
 
     const hasClass = node.attributes.some(is.classAttribute)
+    const hasExpressionAttribute = node.attributes.some(is.expressionAttribute)
 
     node.metadata ??= {}
     node.metadata.hasClass = hasClass
+    node.metadata.hasExpressionAttribute = hasExpressionAttribute
 }

package/src/analyse/visitors/Element.js

@@ -3,14 +3,12 @@ import * as is from '../../checkers.js'
 export function Element(node, ctx) {
     ctx.next()
 
+    const isVoid = is.voidElement(node)
     const hasClass = node.attributes.some(is.classAttribute)
-
-    const bindAttribute = node.attributes.find(is.bindAttribute)
-    const hasBinding = !!bindAttribute
-    const bindExpression = bindAttribute?.value[0].expression
+    const hasExpressionAttribute = node.attributes.some(is.expressionAttribute)
 
     node.metadata ??= {}
+    node.metadata.isVoid = isVoid
     node.metadata.hasClass = hasClass
-    node.metadata.hasBinding = hasBinding
-    node.metadata.bindExpression = bindExpression
+    node.metadata.hasExpressionAttribute = hasExpressionAttribute
 }

package/src/builders.js

@@ -227,6 +227,10 @@ export function array(elements) {
 }
 
 export function call(callee, args = [], { optional = false } = {}) {
+    if (typeof callee === 'string') {
+        callee = { type: 'Identifier', name: callee }
+    }
+
     return { type: 'CallExpression', callee, arguments: args, optional }
 }
 
@@ -577,14 +581,7 @@ export function $set(object, nodeId, attribute, value) {
             computed: false,
             optional: false
         },
-        arguments: [
-            nodeId,
-            {
-                type: 'Literal',
-                value: attribute
-            },
-            value
-        ],
+        arguments: [nodeId, attribute, value],
         optional: false
     }
 }
@@ -1064,6 +1061,82 @@ export function $effect(body) {
     }
 }
 
+export function $bind(elementId, body) {
+    return {
+        type: 'ExpressionStatement',
+        expression: {
+            type: 'CallExpression',
+            callee: {
+                type: 'MemberExpression',
+                object: {
+                    type: 'MemberExpression',
+                    object: {
+                        type: 'ThisExpression'
+                    },
+                    property: {
+                        type: 'Identifier',
+                        name: '$'
+                    },
+                    computed: false,
+                    optional: false
+                },
+                property: {
+                    type: 'Identifier',
+                    name: 'bind'
+                },
+                computed: false,
+                optional: false
+            },
+            arguments: [
+                elementId,
+                {
+                    type: 'ArrowFunctionExpression',
+                    id: null,
+                    expression: false,
+                    generator: false,
+                    async: false,
+                    params: [{ type: 'Identifier', name: 'opts' }],
+                    body
+                },
+                {
+                    type: 'Identifier',
+                    name: '$'
+                }
+            ],
+            optional: false
+        }
+    }
+}
+
+export function $getBinding(elementId) {
+    return {
+        type: 'CallExpression',
+        callee: {
+            type: 'MemberExpression',
+            object: {
+                type: 'MemberExpression',
+                object: {
+                    type: 'ThisExpression'
+                },
+                property: {
+                    type: 'Identifier',
+                    name: '$'
+                },
+                computed: false,
+                optional: false
+            },
+            property: {
+                type: 'Identifier',
+                name: 'getBinding'
+            },
+            computed: false,
+            optional: false
+        },
+        arguments: [elementId],
+        optional: false
+    }
+}
+
 export function $animate(value, body) {
     return {
         type: 'ExpressionStatement',
@@ -1099,7 +1172,7 @@ export function $animate(value, body) {
     }
 }
 
-export function addEventListener(object, value, body) {
+export function addEventListener(object, value, body, { optional = false } = {}) {
     return {
         type: 'ExpressionStatement',
         expression: {
@@ -1134,7 +1207,7 @@ export function addEventListener(object, value, body) {
                     }
                 }
             ],
-            optional: false
+            optional
         }
     }
 }

package/src/checkers.js

@@ -121,6 +121,10 @@ export function classAttribute(node, withExpressionTag) {
     return result
 }
 
+export function expressionAttribute(node) {
+    return node.type === 'Attribute' && node.value[0]?.type === 'ExpressionTag'
+}
+
 export function idAttribute(node, withExpressionTag) {
     let result = node.type === 'Attribute' && node.name === 'id'
     if (withExpressionTag === true) {
@@ -129,12 +133,6 @@ export function idAttribute(node, withExpressionTag) {
     return result
 }
 
-export function bindAttribute(node) {
-    return (
-        node.type === 'Attribute' && node.name === 'bind' && node.value[0]?.type === 'ExpressionTag'
-    )
-}
-
 export function staticAttribute(node) {
     return node.type === 'Attribute' && node.name === 'static'
 }
@@ -146,3 +144,25 @@ export function shadowRootModeAttribute(node) {
 export function elseIfBlock(node) {
     return node.type === 'IfBlock' && node.elseif
 }
+
+export function voidElement(node) {
+    return (
+        node.type === 'Element' &&
+        [
+            'area',
+            'base',
+            'br',
+            'col',
+            'embed',
+            'hr',
+            'img',
+            'input',
+            'link',
+            'meta',
+            'param',
+            'source',
+            'track',
+            'wbr'
+        ].includes(node.name)
+    )
+}

package/src/css-matcher.js

@@ -54,30 +54,30 @@ function matchSelectors(selectors, template) {
                         classAttribute ??= node.attributes.find((a) => a.name === 'class')
                         scopedElement = node
                         scopedClassAttribute = classAttribute
-                        break
                     }
-                    return
+                    break
                 case 'PseudoClassSelector':
-                    classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                    scopedElement = node
-                    scopedClassAttribute = classAttribute
+                    if (selector.name !== 'host') {
+                        classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                        scopedElement = node
+                        scopedClassAttribute = classAttribute
+                    }
                     break
                 case 'IdSelector':
                     const idAttribute = node.attributes.find((a) => a.name === 'id')
                     if (idAttribute?.value[0].data === selector.name) {
                         scopedIdAttribute = idAttribute
-                        break
                     }
-                    return
+                    break
                 case 'ClassSelector':
                     classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                    const classes = classAttribute?.value[0].data.split(/\s+/)
+                    const expression = classAttribute?.value[0].expression
+                    const classes = classAttribute?.value[0].data?.split(/\s+/)
 
-                    if (classes?.includes(selector.name)) {
+                    if (expression || classes?.includes(selector.name)) {
                         scopedClassAttribute = classAttribute
-                        break
                     }
-                    return
+                    break
             }
         }
 

package/src/css.js

@@ -1,57 +1,3 @@
-export function match(element, stylesheet) {
-    for (const rule of stylesheet.children) {
-        if (matchSelectorList(element, rule.prelude)) return true
-    }
-    return false
-}
-
-function matchSelectorList(element, selectorList) {
-    if (selectorList) {
-        for (const selector of selectorList.children) {
-            if (matchSelector(element, selector)) return true
-        }
-    }
-    return false
-}
-
-function matchSelector(element, selector) {
-    let selectors = []
-    for (const child of selector.children) {
-        switch (child.type) {
-            case 'TypeSelector':
-            case 'ClassSelector':
-                selectors.push(child)
-                break
-            case 'PseudoClassSelector':
-                if (matchSelectorList(element, child.children?.first)) return true
-                selectors.push(child)
-                break
-            case 'Combinator':
-                if (matchSelectors(element, selectors)) return true
-                selectors = []
-                break
-        }
-    }
-    return matchSelectors(element, selectors)
-}
-
-function matchSelectors(element, selectors) {
-    if (selectors.length === 0) return false
-
-    for (const selector of selectors) {
-        switch (selector.type) {
-            case 'TypeSelector':
-                if (selector.name !== element.name) return false
-                break
-            case 'ClassSelector':
-                const classAtt = element.attributes.find((a) => a.name === 'class')?.value.data
-                const classes = classAtt?.split(/\s+/)
-                if (!classes?.includes(selector.name)) return false
-                break
-        }
-    }
-    return true
-}
 
 /**
  * Dead simple clx assuming class2 is always set

package/src/exp-matcher.js

@@ -12,21 +12,28 @@ export function matchExpression(expression, program, blocks) {
                     if (parentNode.callee === node) {
                         setMethodMetadata(node)
                     } else {
-                        setMetadata(node)
+                        setMetadata(node, blocks)
                     }
                     break
                 case 'MemberExpression':
                     if (parentNode.object === node) {
+                        setMetadata(node, blocks)
+                    }
+                    break
+                case 'AssignmentExpression':
+                    if (parentNode.left === node) {
                         setMetadata(node)
+                    } else {
+                        setMetadata(node, blocks)
                     }
                     break
                 case 'Property':
                     if (parentNode.value === node) {
-                        setMetadata(node)
+                        setMetadata(node, blocks)
                     }
                     break
                 default:
-                    setMetadata(node)
+                    setMetadata(node, blocks)
             }
         }
     })
@@ -49,10 +56,10 @@ export function matchExpression(expression, program, blocks) {
         node.metadata.isData = true
     }
 
-    function setMetadata(node) {
+    function setMetadata(node, blocks) {
         node.metadata ??= {}
 
-        if (blocks.some((b) => b.context?.name === node.name)) {
+        if (blocks?.some((b) => b.context?.name === node.name)) {
             node.metadata.isBlockVar = true
             return
         }

package/src/parser/each-block.js

@@ -13,10 +13,10 @@ export function parseEachBlock(p) {
     p.expectToken([TokenTypes.braceLHash, TokenTypes.braceLColumn])
     p.expectToken([TokenTypes.name])
     const name = p.value
-    
+
     p.skipWhitespaces()
     const expression = parseExpression(p)
-    
+
     p.skipWhitespaces()
     p.expectToken([TokenTypes.name])
     const as = p.value
@@ -43,7 +43,11 @@ export function parseEachBlock(p) {
     p.skipWhitespaces()
     p.expectToken([TokenTypes.braceR])
 
-    if (name !== blockNameClose) throw new Error('wrong closing tag')
+    if (blockNameClose !== name) {
+        throw new Error(
+            `wrong closing block ${blockNameClose} at position ${p.pos}, expected ${name}`
+        )
+    }
 
     return { type: 'EachBlock', expression, context, key, body, start, end: p.pos }
 }

package/src/parser/element.js

@@ -30,13 +30,32 @@ export function parseElement(p) {
         p.skipWhitespaces()
         p.expectToken([TokenTypes.gte])
 
-        if (name !== tagNameClose) throw new Error('wrong closing tag')
+        if (tagNameClose !== name) {
+            throw new Error(
+                `wrong closing tag ${tagNameClose} at position ${p.pos}, expected ${name}`
+            )
+        }
 
         return { type, name, attributes, fragment, start, end: p.pos }
     }
     return { type, name, attributes, fragment: { type: 'Fragment', nodes: [] }, start, end: p.pos }
 }
 
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseComment(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.lteExclHyph2])
+    p.expectToken([TokenTypes.commentText])
+    const data = p.value
+    p.expectToken([TokenTypes.hyph2Gte])
+
+    return { type: 'Comment', data, start, end: p.pos }
+}
+
 /**
  *
  * @param {Parser} p
@@ -47,7 +66,12 @@ export function parseFragment(p, allowScript = false, allowStyle = false) {
 
     p.skipWhitespaces()
     while (!p.peakToken([TokenTypes.lteSlash, TokenTypes.braceLSlash, TokenTypes.braceLColumn])) {
-        const punctToken = p.peakToken([TokenTypes.lte, TokenTypes.braceLHash, TokenTypes.braceL])
+        const punctToken = p.peakToken([
+            TokenTypes.lteExclHyph2,
+            TokenTypes.lte,
+            TokenTypes.braceLHash,
+            TokenTypes.braceL
+        ])
         const nameToken = p.peakToken([TokenTypes.name], punctToken)
 
         switch (punctToken?.type) {
@@ -67,6 +91,9 @@ export function parseFragment(p, allowScript = false, allowStyle = false) {
 
                 nodes.push(parseElement(p))
                 break
+            case TokenTypes.lteExclHyph2:
+                nodes.push(parseComment(p))
+                break
             case TokenTypes.braceLHash:
                 if (nameToken?.value === 'if') {
                     nodes.push(parseIfBlock(p))

package/src/parser/if-block.js

@@ -49,7 +49,11 @@ export function parseIfBlock(p, elseif = false) {
         p.skipWhitespaces()
         p.expectToken([TokenTypes.braceR])
 
-        if (name !== blockNameClose) throw new Error('wrong closing tag')
+        if (blockNameClose !== name) {
+            throw new Error(
+                `wrong closing block ${blockNameClose} at position ${p.pos}, expected ${name}`
+            )
+        }
     }
 
     return { type: 'IfBlock', elseif, test, consequent, alternate, start, end: p.pos }

package/src/parser/parser.js

@@ -61,7 +61,11 @@ export class Parser {
                 if (this.readStringToken(type)) return
             }
         }
-        throw new Error(`unexpected token ${this.input[this.pos]} at position ${this.pos}`)
+        throw new Error(
+            `wrong token ${this.input[this.pos]} at position ${this.pos}. expected ${types
+                .map((t) => t.label)
+                .join(', ')}`
+        )
     }
 
     /**
@@ -88,8 +92,10 @@ export class Parser {
     readStringToken(type) {
         const start = this.pos
         while (this.pos < this.input.length) {
-            if (!type.test(this.input.charCodeAt(this.pos))) break
+            const code = this.input.charCodeAt(this.pos)
+            if (!type.test(code, this.input, this.pos)) break
             this.pos++
+            this.line = code
         }
 
         if (this.pos !== start) {
@@ -114,7 +120,8 @@ export class Parser {
         const start = after?.end ?? this.pos
         let pos = start
         while (pos < this.input.length) {
-            if (!type.test(this.input.charCodeAt(pos))) break
+            const code = this.input.charCodeAt(pos)
+            if (!type.test(code, this.input, pos)) break
             pos++
         }
 
@@ -178,7 +185,8 @@ export class Parser {
         return (
             this.input.charCodeAt(pos) === type.charCodes[0] &&
             (type.charCodes[1] ? this.input.charCodeAt(pos + 1) === type.charCodes[1] : true) &&
-            (type.charCodes[2] ? this.input.charCodeAt(pos + 2) === type.charCodes[2] : true)
+            (type.charCodes[2] ? this.input.charCodeAt(pos + 2) === type.charCodes[2] : true) &&
+            (type.charCodes[3] ? this.input.charCodeAt(pos + 3) === type.charCodes[3] : true)
         )
     }
 
@@ -236,20 +244,6 @@ export class Parser {
     }
 }
 
-/**
- *
- * @param {number} code
- * @returns {boolean}
- */
-function isIdentifierChar(code) {
-    if (code < 48) return false
-    if (code < 58) return true
-    if (code < 65) return false
-    if (code < 91) return true
-    if (code < 123) return true
-    return false
-}
-
 /**
  *
  * @param {boolean} test

package/src/parser/root.js

@@ -24,7 +24,7 @@ export function parseRoot(p) {
                 template = parseTemplate(p)
                 break
             default:
-                throw new Error('unexpected html tag at position ' + p.pos)
+                throw new Error(`unexpected html tag ${nameToken.value} at position ${p.pos}`)
         }
         p.skipWhitespaces()
     }

package/src/parser/tokentype.js

@@ -2,7 +2,7 @@
  * @typedef {Object} TokenType
  * @property {string} label
  * @property {Array<number>} [charCodes]
- * @property {(char: number) => boolean} [test]
+ * @property {(code: number, input: string, pos: number) => boolean} [test]
  */
 
 /**
@@ -18,7 +18,7 @@ function charTT(label, charCodes) {
 /**
  *
  * @param {string} label
- * @param {(char: number) => boolean} test
+ * @param {(code: number, input: string, pos: number) => boolean} test
  * @returns {TokenType}
  */
 function stringTT(label, test) {
@@ -29,13 +29,16 @@ export const TokenTypes = {
     name: stringTT('name', name),
     quotedText: stringTT('text', quotedText),
     doubleQuotedText: stringTT('text', doubleQuotedText),
+    commentText: stringTT('text', commentText),
     text: stringTT('text', text),
 
     // html punctuation
     lte: charTT('<', [60]),
     gte: charTT('>', [62]),
-    slashGte: charTT('/>', [47, 62]),
     lteSlash: charTT('</', [60, 47]),
+    slashGte: charTT('/>', [47, 62]),
+    lteExclHyph2: charTT('<!--', [60, 33, 45, 45]),
+    hyph2Gte: charTT('-->', [45, 45, 62]),
     eq: charTT('=', [61]),
     quote: charTT("'", [39]),
     doubleQuote: charTT('"', [34]),
@@ -85,10 +88,23 @@ function doubleQuotedText(code) {
     return code > 0 && code !== 34 // Blocks NULL (0) and Double Quote (34)
 }
 
+function commentText(code, input, pos) {
+    if (
+        input.charCodeAt(pos) === 45 &&
+        input.charCodeAt(pos + 1) === 45 &&
+        input.charCodeAt(pos + 2) === 62
+    ) {
+        // Blocks the sequence "-->"
+        return false
+    }
+
+    return code >= 32 || code === 9 || code === 10 || code === 13 // Allows printable characters and standard whitespace (Tab, LF, CR)
+}
+
 function text(code) {
     // Quickly allow all extended ASCII and UTF-16 surrogate bytes
     if (code > 127) return true
 
-    // Blocks NULL (0), Less-Than (<), Left-Brace ({) and Ampersand (&)
-    return code !== 0 && code !== 60 && code !== 123 && code !== 38
+    // Blocks NULL (0), Less-Than (<), Left-Brace ({)
+    return code !== 0 && code !== 60 && code !== 123
 }

package/src/transform/context.js

@@ -12,10 +12,6 @@ export function nextBlockId(ctx) {
     return b.id(`block_${ctx.state.blocks.length + 1}`)
 }
 
-export function nextBindingId(ctx) {
-    return b.id(`binding_${ctx.state.init.binding.length + 1}`)
-}
-
 export function pathStmt(ctx, nodes) {
     const subPath = []
 
@@ -58,7 +54,9 @@ function position(fragment, node) {
             (nodes[i - 1]?.type === 'ExpressionTag' || nodes[i - 1]?.type === 'Text')
         ) {
             // Text and ExpressionTag siblings are collapsed in one node in the html template
-        } else {
+        } else if (nodes[i].type === 'Comment') {
+            //  Comments are skiped in the html template
+        } else  {
             position++
         }
 

package/src/transform/visitors/Attribute.js

@@ -24,49 +24,73 @@ export function Attribute(node, ctx) {
         ctx.visit(val, { ...ctx.state, template, pretty: false })
     }
 
+    if (node.name === ':in' || node.name === ':out' || node.name === ':animate') {
+        const elementId = ctx.state.getElementId()
+        const expression = template.expressions[0]
+        const direction = node.name === ':animate' ? 'both' : node.name.slice(1)
+        const stmt = b.$animate(direction, {
+            ...expression,
+            arguments: [elementId, expression.arguments[0] ?? b.object(), b.id('o')]
+        })
+        ctx.state.animates.push(stmt)
+        return
+    }
+
+    if (node.name === ':use') {
+        const elementId = ctx.state.getElementId()
+        const expression = template.expressions[0]
+        const bindExpression = {
+            ...expression,
+            arguments: [elementId, b.call('opts', expression.arguments[0])]
+        }
+        const stmt = b.$bind(elementId, bindExpression)
+        ctx.state.binds.push(stmt)
+        return
+    }
+
+    if (node.name.startsWith(':on')) {
+        const elementId = ctx.state.getElementId()
+        const expression = template.expressions[0]
+        const event = node.name.slice(3)
+        const stmt = b.addEventListener(b.$getBinding(elementId), event, [expression], {
+            optional: true
+        })
+        ctx.state.eventListeners.push(stmt)
+        return
+    }
+
+    if (node.name.startsWith(':')) {
+        const elementId = ctx.state.getElementId()
+        const property = node.name.slice(1)
+        const stmt = b.$effect([
+            b.assignment(b.member(b.$getBinding(elementId), property), b.template(template))
+        ])
+        ctx.state.effects.push(stmt)
+        return
+    }
+
+    if (node.name.startsWith('on')) {
+        const elementId = ctx.state.getElementId()
+        const expression = template.expressions[0]
+        const event = node.name.slice(2)
+        const stmt = b.addEventListener(elementId, event, [expression])
+        ctx.state.eventListeners.push(stmt)
+        return
+    }
+
     if (hasExpression(template)) {
-        // expression attribute
         const elementId = ctx.state.getElementId()
         const moduleId = ctx.state.getModuleId?.()
-        const bindingId = ctx.state.getBindingId?.()
 
-        if (node.name === 'bind') {
-            // binding handled in element visitor
-        } else if (node.name === 'in' || node.name === 'out' || node.name === 'animate') {
-            const direction = node.name === 'animate' ? 'both' : node.name
-            const animateExpression = template.expressions[0]
-            const stmt = b.$animate(direction, {
-                ...animateExpression,
-                arguments: [elementId, animateExpression.arguments[0] ?? b.object(), b.id('o')]
-            })
-            ctx.state.animates.push(stmt)
-        } else if (node.name.startsWith('on')) {
-            const stmt = b.assignment(
-                b.member(elementId, node.name),
-                b.eventListener(template.expressions[0])
-            )
-            ctx.state.handlers.push(stmt)
-        } else if (moduleId) {
-            const stmt = b.$effect([
-                b.$set(moduleId, elementId, node.name, template.expressions[0])
-            ])
-            ctx.state.effects.push(stmt)
-        } else if (bindingId) {
-            const stmt1 = b.$effect([
-                b.assignment(b.member(bindingId, node.name), template.expressions[0])
-            ])
-            const stmt2 = b.$effect([
-                b.assignment(template.expressions[0], b.member(bindingId, node.name))
-            ])
+        const setStmt = moduleId
+            ? b.$set(moduleId, elementId, b.literal(node.name), b.template(template))
+            : b.setAttribute(elementId, b.literal(node.name), b.template(template))
+        const stmt = b.$effect([setStmt])
+        ctx.state.effects.push(stmt)
+        return
+    }
 
-            ctx.state.effects.push(stmt1, stmt2)
-        } else {
-            const stmt = b.$effect([
-                b.setAttribute(elementId, b.literal(node.name), template.expressions[0])
-            ])
-            ctx.state.effects.push(stmt)
-        }
-    } else if (isEmpty(template)) {
+    if (isEmpty(template)) {
         appendText(ctx.state.template, ` ${node.name}`)
     } else {
         appendText(ctx.state.template, ` ${node.name}="${template.text[0]}"`)

package/src/transform/visitors/CustomElement.js

@@ -9,13 +9,10 @@ export function CustomElement(node, ctx) {
     }
 
     let elementId
-    function getElementId() {
-        if (!elementId) {
-            elementId = nextElementId(ctx)
-            const stmt = b.declaration(elementId, pathStmt(ctx))
-            ctx.state.init.elem.push(stmt)
-        }
-        return elementId
+    if (node.metadata?.hasExpressionAttribute) {
+        elementId = nextElementId(ctx)
+        const stmt = b.declaration(elementId, pathStmt(ctx, node))
+        ctx.state.init.elem.push(stmt)
     }
 
     if (node.metadata?.isModule) {
@@ -24,7 +21,11 @@ export function CustomElement(node, ctx) {
         appendText(ctx.state.template, '<')
         appendExpression(ctx.state.template, b.$name(moduleId))
         for (const attribute of attributes) {
-            ctx.visit(attribute, { ...ctx.state, getElementId, getModuleId: () => moduleId })
+            ctx.visit(attribute, {
+                ...ctx.state,
+                getElementId: () => elementId,
+                getModuleId: () => moduleId
+            })
         }
         appendText(ctx.state.template, '>')
         ctx.visit(node.fragment)
@@ -34,7 +35,7 @@ export function CustomElement(node, ctx) {
     } else {
         appendText(ctx.state.template, `<${node.name}`)
         for (const attribute of attributes) {
-            ctx.visit(attribute, { ...ctx.state, getElementId })
+            ctx.visit(attribute, { ...ctx.state, getElementId: () => elementId })
         }
         appendText(ctx.state.template, '>')
         ctx.visit(node.fragment)

package/src/transform/visitors/EachBlock.js

@@ -4,13 +4,23 @@ import { nextElementId, pathStmt } from '../context.js'
 
 export function EachBlock(node, ctx) {
     const template = { text: [''], expressions: [] }
-    const init = { elem: [], text: [], binding: [] }
+    const init = { elem: [], text: [] }
+    const binds = []
     const effects = []
     const animates = []
-    const handlers = []
+    const eventListeners = []
     const blocks = []
 
-    ctx.visit(node.body, { ...ctx.state, template, init, effects, animates, handlers, blocks })
+    ctx.visit(node.body, {
+        ...ctx.state,
+        template,
+        init,
+        binds,
+        effects,
+        animates,
+        eventListeners,
+        blocks
+    })
 
     const stmts1 = [
         b.declaration('template', b.createElement('template')),
@@ -19,10 +29,10 @@ export function EachBlock(node, ctx) {
     const stmts2 = [
         ...init.elem,
         ...init.text,
-        ...init.binding,
+        ...binds,
         ...effects,
         ...animates,
-        ...handlers,
+        ...eventListeners,
         ...blocks
     ]
     const stmt3 = b.insertBefore('anchor', b.member('template', 'content'))

package/src/transform/visitors/Element.js

@@ -1,6 +1,6 @@
 import * as b from '../../builders.js'
 import { appendText } from '../../utils/template.js'
-import { nextBindingId, nextElementId, pathStmt } from '../context.js'
+import { nextElementId, pathStmt } from '../context.js'
 
 export function Element(node, ctx) {
     let attributes = node.attributes
@@ -8,41 +8,22 @@ export function Element(node, ctx) {
         attributes = [...attributes, b.attribute('class', '', { isScoped: true })]
     }
 
-    const changed = []
-
     let elementId
-    function getElementId() {
-        if (!elementId) {
-            elementId = nextElementId(ctx)
-            const stmt = b.declaration(elementId, pathStmt(ctx))
-            ctx.state.init.elem.push(stmt)
-        }
-        return elementId
-    }
-
-    let bindingId
-    function getBindingId() {
-        if (!bindingId && node.metadata?.hasBinding) {
-            bindingId = nextBindingId(ctx)
-            const stmt = b.declaration(bindingId, {
-                ...node.metadata?.bindExpression,
-                arguments: [getElementId(), ...node.metadata?.bindExpression.arguments]
-            })
-            ctx.state.init.binding.push(stmt)
-        }
-        return bindingId
+    if (node.metadata?.hasExpressionAttribute) {
+        elementId = nextElementId(ctx)
+        const stmt = b.declaration(elementId, pathStmt(ctx, node))
+        ctx.state.init.elem.push(stmt)
     }
 
     appendText(ctx.state.template, `<${node.name}`)
     for (const attribute of attributes) {
-        ctx.visit(attribute, { ...ctx.state, getElementId, getBindingId, changed })
+        ctx.visit(attribute, { ...ctx.state, getElementId: () => elementId })
     }
-    appendText(ctx.state.template, '>')
-    ctx.visit(node.fragment, { ...ctx.state, getElementId })
-    appendText(ctx.state.template, `</${node.name}>`)
-
-    if (changed.length > 0) {
-        const stmt = b.addEventListener(bindingId, 'changed', changed)
-        ctx.state.handlers.push(stmt)
+    if (node.metadata?.isVoid) {
+        appendText(ctx.state.template, '/>')
+    } else {
+        appendText(ctx.state.template, '>')
+        ctx.visit(node.fragment, { ...ctx.state, getElementId: () => elementId })
+        appendText(ctx.state.template, `</${node.name}>`)
     }
 }

package/src/transform/visitors/IfBlock.js

@@ -6,13 +6,23 @@ export function IfBlock(node, ctx) {
     function branchStmt(node, hasElseif = false) {
         if (node) {
             const template = { text: [''], expressions: [] }
-            const init = { elem: [], text: [], binding: [] }
+            const init = { elem: [], text: [] }
+            const binds = []
             const effects = []
             const animates = []
-            const handlers = []
+            const eventListeners = []
             const blocks = []
 
-            ctx.visit(node, { ...ctx.state, template, init, effects, animates, handlers, blocks })
+            ctx.visit(node, {
+                ...ctx.state,
+                template,
+                init,
+                binds,
+                effects,
+                animates,
+                eventListeners,
+                blocks
+            })
 
             if (!hasElseif) {
                 const stmts1 = [
@@ -22,10 +32,10 @@ export function IfBlock(node, ctx) {
                 const stmts2 = [
                     ...init.elem,
                     ...init.text,
-                    ...init.binding,
+                    ...binds,
                     ...effects,
                     ...animates,
-                    ...handlers,
+                    ...eventListeners,
                     ...blocks
                 ]
                 const stmt3 = b.insertBefore('anchor', b.member('template', 'content'))

package/src/transform/visitors/Template.js

@@ -3,10 +3,11 @@ import * as b from '../../builders.js'
 export function Template(node, ctx) {
     const style = { text: [''], expressions: [] }
     const template = { text: [''], expressions: [] }
-    const init = { elem: [], text: [], binding: [] }
+    const init = { elem: [], text: [] }
+    const binds = []
     const effects = []
     const animates = []
-    const handlers = []
+    const eventListeners = []
     const blocks = []
 
     ctx.visit(node.fragment, {
@@ -14,9 +15,10 @@ export function Template(node, ctx) {
         style,
         template,
         init,
+        binds,
         effects,
         animates,
-        handlers,
+        eventListeners,
         blocks
     })
 
@@ -29,10 +31,10 @@ export function Template(node, ctx) {
     const stmts2 = [
         ...init.elem,
         ...init.text,
-        ...init.binding,
+        ...binds,
         ...effects,
         ...animates,
-        ...handlers,
+        ...eventListeners,
         ...blocks
     ]
     const stmt3 = b.replaceChildren(rootId, b.member('template', 'content'))

package/test/parser/index.test.js

@@ -0,0 +1,17 @@
+import { describe, expect, it } from 'vitest'
+import { parse } from '../../src/parser'
+
+describe('parse()', () => {
+    describe('with template containing comments', () => {
+        it('should return an AST succesfully', () => {
+            const ast = parse(`<template><div><!-- comment --></div></template>`)
+            expect(ast).not.toBeNull()
+        })
+    })
+    describe('with template containing &', () => {
+        it('should return an AST succesfully', () => {
+            const ast = parse(`<template><div>&</div></template>`)
+            expect(ast).not.toBeNull()
+        })
+    })
+})