@katabatic/compiler 1.0.0

package/src/checkers.js

@@ -0,0 +1,120 @@
+//
+// advanced checkers
+//
+
+export function thisMember(node) {
+    return node.type === 'MemberExpression' && node.object.type === 'ThisExpression'
+}
+
+export function privateId(node) {
+    return node.type === 'PrivateIdentifier'
+}
+
+export function customElements(node) {
+    return node.type === 'Identifier' && node.name === 'customElements'
+}
+
+export function define(node) {
+    return node.type === 'Identifier' && node.name === 'define'
+}
+
+export function getElementById(node) {
+    return (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'document' &&
+        node.callee.property.type === 'Identifier' &&
+        node.callee.property.name === 'getElementById'
+    )
+}
+
+export function querySelector(node) {
+    return (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'MemberExpression' &&
+        node.callee.property.type === 'Identifier' &&
+        node.callee.property.name === 'querySelector'
+    )
+}
+
+export function defineCustomElement(node) {
+    if (node.type === 'ExpressionStatement') {
+        node = node.expression
+    }
+
+    return (
+        node.type === 'CallExpression' &&
+        node.callee.type === 'MemberExpression' &&
+        node.callee.object.type === 'Identifier' &&
+        node.callee.object.name === 'customElements' &&
+        node.callee.property.type === 'Identifier' &&
+        node.callee.property.name === 'define'
+    )
+}
+
+export function constructor(node) {
+    return node.type === 'MethodDefinition' && node.kind === 'constructor'
+}
+
+export function connectedCallback(node) {
+    return node.type === 'MethodDefinition' && node.key.name === 'connectedCallback'
+}
+
+export function disconnectedCallback(node) {
+    return node.type === 'MethodDefinition' && node.key.name === 'disconnectedCallback'
+}
+
+export function getAttribute(node) {
+    return node.type === 'MethodDefinition' && node.key.name === 'getAttribute'
+}
+
+export function attributeChangedCallback(node) {
+    return node.type === 'MethodDefinition' && node.key.name === 'attributeChangedCallback'
+}
+
+export function observedAttributes(node) {
+    return (
+        node.type === 'PropertyDefinition' &&
+        node.key.name === 'observedAttributes' &&
+        node.static === true
+    )
+}
+
+export function classAttribute(node, withExpressionTag) {
+    let result = node.type === 'Attribute' && node.name === 'class'
+    if (withExpressionTag === true) {
+        result &&= node.value[0]?.type === 'ExpressionTag'
+    }
+    return result
+}
+
+export function idAttribute(node, withExpressionTag) {
+    let result = node.type === 'Attribute' && node.name === 'id'
+    if (withExpressionTag === true) {
+        result &&= node.value[0]?.type === 'ExpressionTag'
+    }
+    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' &&
+        (node.value === true || (node.value[0]?.type === 'Text' && node.value[0]?.data === 'true'))
+    )
+}
+
+export function shadowRootModeAttribute(node) {
+    return node.type === 'Attribute' && node.name === 'shadowRootMode'
+}
+
+export function ifBlock(node) {
+    return node.type === 'IfBlock'
+}

package/src/css-matcher.js

@@ -0,0 +1,100 @@
+import { walk } from 'zimmerframe'
+import { parse } from 'css-tree'
+
+export function matchQuerySelector(query, template) {
+    const stylesheet = parse(query + '{}')
+
+    const selectorList = stylesheet.children.first.prelude
+
+    let result = false
+    for (const selector of selectorList.children) {
+        result ||= matchSelector(selector, template)
+    }
+    return [result, selectorList]
+}
+
+export function matchSelector(selector, template) {
+    let result = false
+
+    let selectors = []
+    for (const child of selector.children) {
+        switch (child.type) {
+            case 'Combinator':
+                result ||= matchSelectors(selectors, template)
+                selectors = []
+                break
+            default:
+                selectors.push(child)
+                break
+        }
+    }
+    result ||= matchSelectors(selectors, template)
+    return result
+}
+
+function matchSelectors(selectors, template) {
+    if (selectors.length === 0) return false
+
+    let result = false
+    walk(template, undefined, {
+        Element: (node, ctx) => {
+            ctx.next()
+
+            let scopedIdAttribute
+            let scopedClassAttribute
+            let scopedElement
+
+            let classAttribute
+
+            for (const selector of selectors) {
+                switch (selector.type) {
+                    case 'TypeSelector':
+                        if (selector.name === node.name) {
+                            classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                            scopedElement = node
+                            scopedClassAttribute = classAttribute
+                            break
+                        }
+                        return
+                    case 'PseudoClassSelector':
+                        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
+                    case 'ClassSelector':
+                        classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                        const classes = classAttribute?.value[0].data.split(/\s+/)
+
+                        if (classes?.includes(selector.name)) {
+                            scopedClassAttribute = classAttribute
+                            break
+                        }
+                        return
+                }
+            }
+
+            if (scopedIdAttribute) {
+                scopedIdAttribute.metadata ??= {}
+                scopedIdAttribute.metadata.isScoped = true
+            }
+            if (scopedClassAttribute) {
+                scopedClassAttribute.metadata ??= {}
+                scopedClassAttribute.metadata.isScoped = true
+            }
+            if (scopedElement) {
+                scopedElement.metadata ??= {}
+                scopedElement.metadata.isScoped = true
+            }
+
+            result = true
+        }
+    })
+    return result
+}

package/src/css-transform.js

@@ -0,0 +1,21 @@
+import { generate, parse } from 'css-tree'
+import { walk } from 'zimmerframe'
+import { Selector, CssTree } from './transform/visitors/Selector.js'
+
+export function transformQuerySelector(selectorList, context) {
+    if (typeof selectorList === 'string') {
+        const stylesheet = parse(selectorList + '{}')
+        selectorList = stylesheet.children.first.prelude
+    }
+
+    selectorList = walk(
+        selectorList,
+        { context },
+        {
+            Selector,
+            ...CssTree
+        }
+    )
+
+    return generate(selectorList)
+}

package/src/css.js

@@ -0,0 +1,65 @@
+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
+ * @param {string} class1
+ * @param {string} class2
+ * @returns {string}
+ */
+export function clx(class1, class2) {
+    if (class1) return class1 + ' ' + class2
+    return class2
+}

package/src/exp-matcher.js

@@ -0,0 +1,65 @@
+import { walk } from 'zimmerframe'
+
+export function matchExpression(expression, program, blocks) {
+    let customElement = program.metadata?.customElement
+
+    walk(expression, undefined, {
+        Identifier(node, ctx) {
+            const parentNode = ctx.path.at(-1)
+
+            switch (parentNode?.type) {
+                case 'CallExpression':
+                    if (parentNode.callee === node) {
+                        setMethodMetadata(node)
+                    } else {
+                        setMetadata(node)
+                    }
+                    break
+                case 'MemberExpression':
+                    if (parentNode.object === node) {
+                        setMetadata(node)
+                    }
+                    break
+                default:
+                    setMetadata(node)
+            }
+        }
+    })
+
+    function setMethodMetadata(node) {
+        node.metadata ??= {}
+
+        if (customElement.methods.includes(node.name)) {
+            node.metadata.isPrivate = false
+            node.metadata.isMethod = true
+            return
+        }
+
+        if (customElement.private.methods.includes(node.name)) {
+            node.metadata.isPrivate = true
+            node.metadata.isMethod = true
+            return
+        }
+    }
+
+    function setMetadata(node) {
+        node.metadata ??= {}
+
+        if (blocks.some((b) => b.context?.name === node.name)) {
+            node.metadata.isBlockVar = true
+            return
+        }
+
+        if (customElement.properties.includes(node.name)) {
+            node.metadata.isPrivate = false
+            node.metadata.isProperty = true
+            return
+        }
+
+        if (customElement.private.properties.includes(node.name)) {
+            node.metadata.isPrivate = true
+            node.metadata.isProperty = true
+            return
+        }
+    }
+}

package/src/id-matcher.js

@@ -0,0 +1,17 @@
+import { walk } from 'zimmerframe'
+
+export function matchElementById(id, template) {
+    let result = false
+    walk(template, undefined, {
+        Attribute: (node, ctx) => {
+            if (node.name === 'id' && node.value[0].data === id) {
+                node.metadata ??= {}
+                node.metadata.isScoped = true
+
+                result = true
+                ctx.stop()
+            }
+        }
+    })
+    return result
+}

package/src/index.js

@@ -0,0 +1,19 @@
+import { print } from 'esrap'
+import { parse } from './parser/index.js'
+import { analyse } from './analyse/index.js'
+import { transform } from './transform/index.js'
+import { transform as transformStatic } from './transform/static/index.js'
+
+export function compile(source, context) {
+    const ast = parse(source)
+    const analysis = analyse(ast)
+
+    const result = analysis.isStatic
+        ? transformStatic(ast, analysis, context)
+        : transform(ast, analysis, context)
+
+    return {
+        ...context,
+        ...print(result)
+    }
+}

package/src/module-matcher.js

@@ -0,0 +1,17 @@
+import { walk } from 'zimmerframe'
+
+export function matchModule(name, index, template) {
+    let result = false
+    walk(template, undefined, {
+        CustomElement: (node, ctx) => {
+            if (node.name === name) {
+                node.metadata ??= {}
+                node.metadata.isModule = true
+                node.metadata.index = index
+
+                result = true
+            }
+        }
+    })
+    return result
+}

package/src/parser/attributes.js

@@ -0,0 +1,66 @@
+import { parseAttributeExpressionTag } from './expression.js'
+import { Parser } from './parser.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseAttributes(p) {
+    const attributes = []
+
+    p.skipWhitespaces()
+    while (!p.peakToken([TokenTypes.gte, TokenTypes.slashGte])) {
+        attributes.push(parseAttribute(p))
+        p.skipWhitespaces()
+    }
+
+    return attributes
+}
+
+function parseAttribute(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+
+    if (p.readToken([TokenTypes.eq])) {
+        const punctToken = p.peakToken([
+            TokenTypes.quoteBraceL,
+            TokenTypes.doubleQuoteBraceL,
+            TokenTypes.quote,
+            TokenTypes.doubleQuote
+        ])
+
+        let value
+        switch (punctToken?.type) {
+            case TokenTypes.quoteBraceL:
+            case TokenTypes.doubleQuoteBraceL:
+                value = [parseAttributeExpressionTag(p)]
+                break
+            case TokenTypes.quote:
+            case TokenTypes.doubleQuote:
+                value = [parseText(p)]
+                break
+            default:
+                p.raiseUnexpectedToken()
+                break
+        }
+        return { type: 'Attribute', name, value, start, end: p.pos }
+    }
+    return { type: 'Attribute', name, value: true, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseText(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.quote, TokenTypes.doubleQuote])
+    p.expectToken([TokenTypes.text])
+    const data = p.value
+    p.expectToken([TokenTypes.quote, TokenTypes.doubleQuote])
+    return { type: 'Text', start, end: p.end, data }
+}

package/src/parser/each-block.js

@@ -0,0 +1,73 @@
+import { parseExpressionAt } from 'acorn'
+import { parseFragment } from './element.js'
+import { Parser } from './parser.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseEachBlock(p) {
+    const start = p.pos
+    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
+    if (as !== 'as') throw new Error('expected token as')
+
+    p.skipWhitespaces()
+    const context = parseIdentifier(p)
+
+    let key
+    p.skipWhitespaces()
+    if (p.readToken([TokenTypes.parenthesesL])) {
+        key = parseExpression(p)
+        p.expectToken([TokenTypes.parenthesesR])
+    }
+
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.braceR])
+
+    const body = parseFragment(p)
+
+    p.expectToken([TokenTypes.braceLSlash])
+    p.expectToken([TokenTypes.name])
+    const blockNameClose = p.value
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.braceR])
+
+    if (name !== blockNameClose) throw new Error('wrong closing tag')
+
+    return { type: 'EachBlock', expression, context, key, body, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseExpression(p) {
+    const node = parseExpressionAt(p.input, p.pos, { ecmaVersion: 'latest' })
+    p.pos = node.end
+    return node
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseIdentifier(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+
+    return { type: 'Identifier', name, start, end: p.pos }
+}

package/src/parser/element.js

@@ -0,0 +1,115 @@
+import { parseAttributes } from './attributes.js'
+import { parseIfBlock } from './if-block.js'
+import { parseEachBlock } from './each-block.js'
+import { parseExpressionTag } from './expression.js'
+import { Parser } from './parser.js'
+import { parseScript } from './script.js'
+import { parseStyle } from './style.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseElement(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.lte])
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+    const type = name === 'slot' ? 'SlotElement' : name.includes('-') ? 'CustomElement' : 'Element'
+    const attributes = parseAttributes(p)
+    p.expectToken([TokenTypes.gte, TokenTypes.slashGte])
+
+    if (p.type === TokenTypes.gte) {
+        const fragment = parseFragment(p)
+
+        p.expectToken([TokenTypes.lteSlash])
+        p.expectToken([TokenTypes.name])
+        const tagNameClose = p.value
+        p.skipWhitespaces()
+        p.expectToken([TokenTypes.gte])
+
+        if (name !== tagNameClose) throw new Error('wrong closing tag')
+
+        return { type, name, attributes, fragment, start, end: p.pos }
+    }
+    return { type, name, attributes, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseFragment(p, allowScript = false, allowStyle = false) {
+    const nodes = []
+
+    p.skipWhitespaces()
+    while (!p.peakToken([TokenTypes.lteSlash, TokenTypes.braceLSlash, TokenTypes.braceLColumn])) {
+        const punctToken = p.peakToken([TokenTypes.lte, TokenTypes.braceLHash, TokenTypes.braceL])
+        const nameToken = p.peakToken([TokenTypes.name], punctToken)
+
+        switch (punctToken?.type) {
+            case TokenTypes.lte:
+                if (nameToken?.value === 'script') {
+                    if (!allowScript) throw new Error('invalid script position')
+
+                    nodes.push(parseScript(p))
+                    break
+                }
+                if (nameToken?.value === 'style') {
+                    if (!allowStyle) throw new Error('invalid style position')
+
+                    nodes.push(parseStyle(p))
+                    break
+                }
+
+                nodes.push(parseElement(p))
+                break
+            case TokenTypes.braceLHash:
+                if (nameToken?.value === 'if') {
+                    nodes.push(parseIfBlock(p))
+                    break
+                }
+                if (nameToken?.value === 'each') {
+                    nodes.push(parseEachBlock(p))
+                    break
+                }
+
+                throw new Error(`unknown block ${nameToken?.value}`)
+            case TokenTypes.braceL:
+                nodes.push(parseExpressionTag(p))
+                break
+            default:
+                nodes.push(parseText(p))
+                break
+        }
+        p.skipWhitespaces()
+    }
+
+    return { type: 'Fragment', nodes }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseText(p) {
+    const previousToken = p.token()
+    p.expectToken([TokenTypes.text])
+    let data = p.value
+
+    if (previousToken.type === TokenTypes.braceR) {
+        // add back skipped whitespaces if the previous sibling is an expressionTag
+        data = p.input.substring(previousToken.end, p.start) + data
+    }
+
+    if (!p.peakToken([TokenTypes.braceL])) {
+        // remove trailing spaces if next sibling is not an expressionTag
+        data = data.trimEnd()
+    }
+
+    return { type: 'Text', start: p.start, end: p.end, data }
+}