@katabatic/compiler 1.1.6 → 1.1.7

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.1.6",
+  "version": "1.1.7",
   "type": "module",
   "repository": {
     "type": "git",

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,21 +54,21 @@ 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 expression = classAttribute?.value[0].expression
@@ -76,9 +76,8 @@ function matchSelectors(selectors, template) {
 
                     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/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,47 +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, b.template(template))])
-            ctx.state.effects.push(stmt)
-        } else if (bindingId) {
-            const stmt1 = b.$effect([
-                b.assignment(b.member(bindingId, node.name), b.template(template))
-            ])
-            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), b.template(template))
-            ])
-            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'))