@katabatic/compiler 1.1.4 → 1.1.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.1.4",
+  "version": "1.1.6",
   "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/css-matcher.js

@@ -71,9 +71,10 @@ function matchSelectors(selectors, template) {
                     return
                 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
                     }

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/visitors/Attribute.js

@@ -47,13 +47,11 @@ export function Attribute(node, ctx) {
             )
             ctx.state.handlers.push(stmt)
         } else if (moduleId) {
-            const stmt = b.$effect([
-                b.$set(moduleId, elementId, node.name, template.expressions[0])
-            ])
+            const stmt = b.$effect([b.$set(moduleId, elementId, node.name, b.template(template))])
             ctx.state.effects.push(stmt)
         } else if (bindingId) {
             const stmt1 = b.$effect([
-                b.assignment(b.member(bindingId, node.name), template.expressions[0])
+                b.assignment(b.member(bindingId, node.name), b.template(template))
             ])
             const stmt2 = b.$effect([
                 b.assignment(template.expressions[0], b.member(bindingId, node.name))
@@ -62,7 +60,7 @@ export function Attribute(node, ctx) {
             ctx.state.effects.push(stmt1, stmt2)
         } else {
             const stmt = b.$effect([
-                b.setAttribute(elementId, b.literal(node.name), template.expressions[0])
+                b.setAttribute(elementId, b.literal(node.name), b.template(template))
             ])
             ctx.state.effects.push(stmt)
         }

package/src/transform/visitors/Program.js

@@ -82,11 +82,10 @@ export function Program(node, ctx) {
     stmts2.push(stmt)
 
     // $shadowRootMode
-    if (ctx.state.template?.metadata?.shadowRootMode) {
-        const { shadowRootMode } = ctx.state.template.metadata
-        stmt = b.exp(b.declaration('$shadowRootMode', b.literal(shadowRootMode)))
-        stmts2.push(stmt)
-    }
+    stmt = b.exp(
+        b.declaration('$shadowRootMode', b.literal(ctx.state.template?.metadata?.shadowRootMode))
+    )
+    stmts2.push(stmt)
 
     return {
         ...node,

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()
+        })
+    })
+})