@katabatic/compiler 1.1.3 → 1.1.5

package/package.json

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

package/src/analyse/context.js

@@ -10,7 +10,7 @@ export function getTemplate(ctx) {
 
 export function getProgram(ctx) {
     const root = ctx.path[0]
-    return root.script.content
+    return root.script?.content
 }
 
 export function getScript(ctx) {

package/src/analyse/visitors/Program.js

@@ -15,9 +15,11 @@ export function Program(node, ctx) {
 
     ctx.next({ ...ctx.state, modules, customElement })
 
+    const hasCustomElementClass = node.body.some(is.customElement)
     const hasDefineCustomElement = node.body.some(is.defineCustomElement)
 
     node.metadata ??= {}
+    node.metadata.hasCustomElementClass = hasCustomElementClass
     node.metadata.hasDefineCustomElement = hasDefineCustomElement
     node.metadata.modules = modules
     node.metadata.customElement = customElement

package/src/builders.js

@@ -1,3 +1,5 @@
+import { hasExpression, hasOnlyExpression } from './utils/template.js'
+
 export function declaration(id, init, kind = 'const') {
     if (typeof id === 'string') {
         id = { type: 'Identifier', name: id }
@@ -29,10 +31,18 @@ export function binary(operator, left, right) {
     }
 }
 
-export function template({ text, expressions }) {
+export function template(template) {
+    if (hasOnlyExpression(template)) {
+        return template.expressions[0]
+    }
+
+    if (!hasExpression(template)) {
+        return { type: 'Literal', value: template.text[0] }
+    }
+
+    const { text, expressions } = template
     if (text.length === expressions.length) {
-        // template literals must start and end with a text
-        text.push('')
+        text.push('') // template literals must start and end with a text
     }
 
     const quasis = text.map((raw) => ({
@@ -56,7 +66,7 @@ export function assignment(left, right, operator = '=') {
     }
 }
 
-export function member(object, property) {
+export function member(object, property, { optional = false } = {}) {
     if (typeof object === 'string') {
         object = { type: 'Identifier', name: object }
     }
@@ -70,7 +80,7 @@ export function member(object, property) {
         object,
         property,
         computed: false,
-        optional: false
+        optional
     }
 }
 
@@ -160,8 +170,8 @@ export function property(key, value) {
     return { type: 'Property', key, value }
 }
 
-export function object() {
-    return { type: 'ObjectExpression', properties: [] }
+export function object(properties = []) {
+    return { type: 'ObjectExpression', properties }
 }
 
 export function id(name, isPrivate = false) {
@@ -216,8 +226,8 @@ export function array(elements) {
     return { type: 'ArrayExpression', elements }
 }
 
-export function call(callee) {
-    return { type: 'CallExpression', callee, arguments: [], optional: false }
+export function call(callee, args = [], { optional = false } = {}) {
+    return { type: 'CallExpression', callee, arguments: args, optional }
 }
 
 export function ifStmt(test, consequent, alternate) {
@@ -460,6 +470,24 @@ export function includes(object, value) {
     }
 }
 
+export function customElement(name) {
+    return {
+        type: 'ClassDeclaration',
+        id: {
+            type: 'Identifier',
+            name
+        },
+        superClass: {
+            type: 'Identifier',
+            name: 'HTMLElement'
+        },
+        body: {
+            type: 'ClassBody',
+            body: []
+        }
+    }
+}
+
 export function defineCustomElement(elementName, className) {
     return {
         type: 'ExpressionStatement',
@@ -1276,12 +1304,14 @@ export function render(body = []) {
         async: false,
         params: [
             {
-                type: 'Identifier',
-                name: 'data'
+                type: 'AssignmentPattern',
+                left: { type: 'Identifier', name: 'data' },
+                right: { type: 'ObjectExpression', properties: [] }
             },
             {
-                type: 'Identifier',
-                name: 'slot'
+                type: 'AssignmentPattern',
+                left: { type: 'Identifier', name: 'slot' },
+                right: { type: 'ObjectExpression', properties: [] }
             }
         ],
         body: {

package/src/checkers.js

@@ -62,6 +62,14 @@ export function querySelector(node) {
     )
 }
 
+export function customElement(node) {
+    if (node.type === 'ExportNamedDeclaration') {
+        node = node.declaration
+    }
+
+    return node.type === 'ClassDeclaration'
+}
+
 export function defineCustomElement(node) {
     if (node.type === 'ExpressionStatement') {
         node = node.expression
@@ -128,11 +136,7 @@ export function bindAttribute(node) {
 }
 
 export function staticAttribute(node) {
-    return (
-        node.type === 'Attribute' &&
-        node.name === 'static' &&
-        (node.value === true || (node.value[0]?.type === 'Text' && node.value[0]?.data === 'true'))
-    )
+    return node.type === 'Attribute' && node.name === 'static'
 }
 
 export function shadowRootModeAttribute(node) {
@@ -141,4 +145,4 @@ export function shadowRootModeAttribute(node) {
 
 export function elseIfBlock(node) {
     return node.type === 'IfBlock' && node.elseif
-}
+}

package/src/css-matcher.js

@@ -34,6 +34,7 @@ export function matchSelector(selector, template) {
 
 function matchSelectors(selectors, template) {
     if (selectors.length === 0) return false
+    if (!template) return false
 
     let result = false
 

package/src/exp-matcher.js

@@ -1,7 +1,7 @@
 import { walk } from 'zimmerframe'
 
 export function matchExpression(expression, program, blocks) {
-    let customElement = program.metadata?.customElement
+    let customElement = program?.metadata?.customElement
 
     walk(expression, undefined, {
         Identifier(node, ctx) {
@@ -20,6 +20,11 @@ export function matchExpression(expression, program, blocks) {
                         setMetadata(node)
                     }
                     break
+                case 'Property':
+                    if (parentNode.value === node) {
+                        setMetadata(node)
+                    }
+                    break
                 default:
                     setMetadata(node)
             }
@@ -29,17 +34,19 @@ export function matchExpression(expression, program, blocks) {
     function setMethodMetadata(node) {
         node.metadata ??= {}
 
-        if (customElement.methods.includes(node.name)) {
+        if (customElement?.methods.includes(node.name)) {
             node.metadata.isPrivate = false
             node.metadata.isMethod = true
             return
         }
 
-        if (customElement.private.methods.includes(node.name)) {
+        if (customElement?.private.methods.includes(node.name)) {
             node.metadata.isPrivate = true
             node.metadata.isMethod = true
             return
         }
+
+        node.metadata.isData = true
     }
 
     function setMetadata(node) {
@@ -50,16 +57,18 @@ export function matchExpression(expression, program, blocks) {
             return
         }
 
-        if (customElement.properties.includes(node.name)) {
+        if (customElement?.properties.includes(node.name)) {
             node.metadata.isPrivate = false
             node.metadata.isProperty = true
             return
         }
 
-        if (customElement.private.properties.includes(node.name)) {
+        if (customElement?.private.properties.includes(node.name)) {
             node.metadata.isPrivate = true
             node.metadata.isProperty = true
             return
         }
+
+        node.metadata.isData = true
     }
 }

package/src/parser/attributes.js

@@ -1,4 +1,4 @@
-import { parseAttributeExpressionTag } from './expression.js'
+import { parseDoubleQuotedExpressionTag, parseQuotedExpressionTag } from './expression.js'
 import { Parser } from './parser.js'
 import { TokenTypes } from './tokentype.js'
 
@@ -35,12 +35,16 @@ function parseAttribute(p) {
         let value
         switch (punctToken?.type) {
             case TokenTypes.quoteBraceL:
+                value = [parseQuotedExpressionTag(p)]
+                break
             case TokenTypes.doubleQuoteBraceL:
-                value = [parseAttributeExpressionTag(p)]
+                value = [parseDoubleQuotedExpressionTag(p)]
                 break
             case TokenTypes.quote:
+                value = [parseQuotedText(p)]
+                break
             case TokenTypes.doubleQuote:
-                value = [parseText(p)]
+                value = [parseDoubleQuotedText(p)]
                 break
             default:
                 p.raiseUnexpectedToken()
@@ -48,7 +52,7 @@ function parseAttribute(p) {
         }
         return { type: 'Attribute', name, value, start, end: p.pos }
     }
-    return { type: 'Attribute', name, value: true, start, end: p.pos }
+    return { type: 'Attribute', name, value: [], start, end: p.pos }
 }
 
 /**
@@ -56,11 +60,27 @@ function parseAttribute(p) {
  * @param {Parser} p
  * @returns
  */
-function parseText(p) {
+function parseQuotedText(p) {
     const start = p.pos
-    p.expectToken([TokenTypes.quote, TokenTypes.doubleQuote])
-    p.expectToken([TokenTypes.text])
+    p.expectToken([TokenTypes.quote])
+    p.expectToken([TokenTypes.quotedText])
     const data = p.value
-    p.expectToken([TokenTypes.quote, TokenTypes.doubleQuote])
+    p.expectToken([TokenTypes.quote])
+
     return { type: 'Text', start, end: p.end, data }
 }
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseDoubleQuotedText(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.doubleQuote])
+    p.expectToken([TokenTypes.doubleQuotedText])
+    const data = p.value
+    p.expectToken([TokenTypes.doubleQuote])
+
+    return { type: 'Text', start, end: p.end, data }
+}

package/src/parser/element.js

@@ -34,7 +34,7 @@ export function parseElement(p) {
 
         return { type, name, attributes, fragment, start, end: p.pos }
     }
-    return { type, name, attributes, start, end: p.pos }
+    return { type, name, attributes, fragment: { type: 'Fragment', nodes: [] }, start, end: p.pos }
 }
 
 /**

package/src/parser/expression.js

@@ -22,12 +22,27 @@ export function parseExpressionTag(p) {
  * @param {Parser} p
  * @returns
  */
-export function parseAttributeExpressionTag(p) {
-    p.expectToken([TokenTypes.quoteBraceL, TokenTypes.doubleQuoteBraceL])
+export function parseQuotedExpressionTag(p) {
+    p.expectToken([TokenTypes.quoteBraceL])
     p.skipWhitespaces()
     const expression = parseExpression(p)
     p.skipWhitespaces()
-    p.expectToken([TokenTypes.braceRQuote, TokenTypes.braceRDoubleQuote])
+    p.expectToken([TokenTypes.braceRQuote])
+
+    return { type: 'ExpressionTag', expression }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseDoubleQuotedExpressionTag(p) {
+    p.expectToken([TokenTypes.doubleQuoteBraceL])
+    p.skipWhitespaces()
+    const expression = parseExpression(p)
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.braceRDoubleQuote])
 
     return { type: 'ExpressionTag', expression }
 }

package/src/parser/tokentype.js

@@ -27,6 +27,8 @@ function stringTT(label, test) {
 
 export const TokenTypes = {
     name: stringTT('name', name),
+    quotedText: stringTT('text', quotedText),
+    doubleQuotedText: stringTT('text', doubleQuotedText),
     text: stringTT('text', text),
 
     // html punctuation
@@ -35,13 +37,13 @@ export const TokenTypes = {
     slashGte: charTT('/>', [47, 62]),
     lteSlash: charTT('</', [60, 47]),
     eq: charTT('=', [61]),
-    quote: charTT('\'', [39]),
+    quote: charTT("'", [39]),
     doubleQuote: charTT('"', [34]),
 
     // block punctuation
-    quoteBraceL: charTT('\'{', [39, 123]),
+    quoteBraceL: charTT("'{", [39, 123]),
     doubleQuoteBraceL: charTT('"{', [34, 123]),
-    braceRQuote: charTT('}\'', [125, 39]),
+    braceRQuote: charTT("}'", [125, 39]),
     braceRDoubleQuote: charTT('}"', [125, 34]),
     braceL: charTT('{', [123]),
     braceR: charTT('}', [125]),
@@ -49,27 +51,44 @@ export const TokenTypes = {
     braceLColumn: charTT('{:', [123, 58]),
     braceLSlash: charTT('{/', [123, 47]),
     parenthesesL: charTT('(', [40]),
-    parenthesesR: charTT(')', [41]),
+    parenthesesR: charTT(')', [41])
 }
 
 function name(code) {
-    if (code === 45) return true
-    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
+    // Automatically allow all extended ASCII and UTF-16 surrogate bytes
+    if (code > 127) return true
+
+    // Fast check for control characters, whitespace, and quotes
+    if (code <= 47) {
+        return (
+            code !== 0 && // NULL
+            code !== 9 && // Tab (\t)
+            code !== 10 && // Line Feed (\n)
+            code !== 12 && // Form Feed (\f)
+            code !== 13 && // Carriage Return (\r)
+            code !== 32 && // Space ( )
+            code !== 34 && // Double Quote (")
+            code !== 39 && // Single Quote (')
+            code !== 47 // Forward Slash (/)
+        )
+    }
+
+    // Blocks Equals (=), Greater-Than (>), and Right-Brace (})
+    return code !== 61 && code !== 62 && code !== 125
+}
+
+function quotedText(code) {
+    return code > 0 && code !== 39 // Blocks NULL (0) and Single Quote (39)
+}
+
+function doubleQuotedText(code) {
+    return code > 0 && code !== 34 // Blocks NULL (0) and Double Quote (34)
 }
 
 function text(code) {
-    if (code === 10) return true
-    if (code === 32) return true
-    if (code === 47) return true
-    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
+    // 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
 }

package/src/router/index.js

@@ -79,7 +79,8 @@ export async function route(path) {
 function load(modules, context) {
     const data = []
     for (let i = 0; i < modules.length; i++) {
-        data.push(modules[i].load(context, data[i - 1]))
+        const parentData = { ...data[i - 1] }
+        data.push(modules[i].load?.(parentData, context) ?? parentData)
     }
     return Promise.all(data)
 }

package/src/transform/context.js

@@ -58,10 +58,10 @@ 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
-            continue
+        } else {
+            position++
         }
 
-        position++
         if (nodes[i] === node) break
     }
     return position
@@ -73,4 +73,4 @@ export function getProgram(ctx) {
 
 export function getTemplate(ctx) {
     return ctx.path[0]
-}
+}

package/src/transform/index.js

@@ -1,4 +1,5 @@
 import { walk } from 'zimmerframe'
+import * as b from '../builders.js'
 import { Program } from './visitors/Program.js'
 import { Identifier } from './visitors/Identifier.js'
 import { ExpressionTag } from './visitors/ExpressionTag.js'
@@ -51,6 +52,10 @@ const scriptVisitors = {
 }
 
 export function transform(ast, analysis, context) {
-    const template = walk(ast.template, { analysis, context }, templateVisitors)
-    return walk(ast.script.content, { analysis, template, context }, scriptVisitors)
+    let template
+    
+    if (ast.template) {
+        template = walk(ast.template, { analysis, context }, templateVisitors)
+    }
+    return walk(ast.script?.content ?? b.program(), { analysis, template, context }, scriptVisitors)
 }

package/src/transform/static/index.js

@@ -1,4 +1,5 @@
 import { walk } from 'zimmerframe'
+import * as b from '../../builders.js'
 import { Element } from './visitors/Element.js'
 import { Text } from './visitors/Text.js'
 import { Program } from './visitors/Program.js'
@@ -12,14 +13,19 @@ import { CssTree, Selector } from '../visitors/Selector.js'
 import { CallExpression } from '../visitors/CallExpression.js'
 import { IfBlock } from './visitors/IfBlock.js'
 import { EachBlock } from './visitors/EachBlock.js'
+import { Identifier } from './visitors/Identifier.js'
+import { CustomElement } from './visitors/CustomElement.js'
+import { ImportDeclaration } from '../visitors/ImportDeclaration.js'
 
 const templateVisitors = {
     Attribute,
     Element,
+    CustomElement,
     SlotElement,
     Text,
     ExpressionTag,
     Template,
+    Identifier,
     Style,
     Script,
     CallExpression,
@@ -31,10 +37,11 @@ const templateVisitors = {
 }
 
 const scriptVisitors = {
-    Program
+    Program,
+    ImportDeclaration
 }
 
 export function transform(ast, analysis, context) {
     const template = walk(ast.template, { analysis, context }, templateVisitors)
-    return walk(ast.script.content, { analysis, template, context }, scriptVisitors)
+    return walk(ast.script?.content ?? b.program(), { analysis, template, context }, scriptVisitors)
 }

package/src/transform/static/visitors/Attribute.js

@@ -1,5 +1,5 @@
 import * as b from '../../../builders.js'
-import { append } from '../../../utils/misc.js'
+import { appendText } from '../../../utils/template.js'
 import { clx } from '../../../css.js'
 
 export function Attribute(node, ctx) {
@@ -19,9 +19,12 @@ export function Attribute(node, ctx) {
         }
     }
 
-    append(ctx.state.text, ` ${node.name}="`)
-    for (const val of value) {
-        ctx.visit(val)
+    appendText(ctx.state.template, ` ${node.name}`)
+    if (value.length > 0) {
+        appendText(ctx.state.template, `="`)
+        for (const val of value) {
+            ctx.visit(val)
+        }
+        appendText(ctx.state.template, `"`)
     }
-    append(ctx.state.text, `"`)
 }

package/src/transform/static/visitors/CustomElement.js

@@ -0,0 +1,33 @@
+import * as b from '../../../builders.js'
+import { appendText, appendExpression } from '../../../utils/template.js'
+
+export function CustomElement(node, ctx) {
+    if (node.metadata?.isModule) {
+        const dataStmt = b.object()
+        for (const attribute of node.attributes) {
+            const { name, value } = attribute
+
+            const template = { text: [''], expressions: [] }
+            for (const val of value) {
+                ctx.visit(val, { ...ctx.state, template, pretty: false })
+            }
+
+            const stmt = b.property(name, b.template(template))
+            dataStmt.properties.push(stmt)
+        }
+
+        const moduleId = b.id(`$Module_${node.metadata.index + 1}`)
+        const loadStmt = b.call(b.member(moduleId, 'load'), [dataStmt], { optional: true })
+        const renderStmt = b.call(b.member(moduleId, 'render'), [loadStmt])
+
+        appendExpression(ctx.state.template, renderStmt)
+    } else {
+        appendText(ctx.state.template, `<${node.name}`)
+        for (const attribute of node.attributes) {
+            ctx.visit(attribute)
+        }
+        appendText(ctx.state.template, '>')
+        ctx.visit(node.fragment)
+        appendText(ctx.state.template, `</${node.name}>`)
+    }
+}

package/src/transform/static/visitors/EachBlock.js

@@ -1,23 +1,23 @@
 import * as b from '../../../builders.js'
+import { appendExpression } from '../../../utils/template.js'
 import { nextBlockId } from '../../context.js'
 
 export function EachBlock(node, ctx) {
-    const text = ['']
-    const expressions = []
+    const template = { text: [''], expressions: [] }
 
-    ctx.visit(node.body, { ...ctx.state, text, expressions })
+    ctx.visit(node.body, { ...ctx.state, template })
 
     const blockId = nextBlockId(ctx)
-    const resultId = b.id('result_')
-    const block = b.func(blockId, [
+    const resultId = b.id('_result')
+    const expressionStmt = ctx.visit(node.expression)
+    const bodyStmt = [b.assignment(resultId, b.template(template), '+=')]
+
+    const blockStmt = b.func(blockId, [
         b.declaration(resultId, b.literal(''), 'let'),
-        b.forStmt(node.context, node.expression, [
-            b.assignment(resultId, b.template({ text, expressions }), '+=')
-        ]),
+        b.forStmt(node.context, expressionStmt, bodyStmt),
         b.returnStmt(resultId)
     ])
 
-    ctx.state.blocks.push(block)
-    ctx.state.text.push('')
-    ctx.state.expressions.push(b.call(blockId))
+    ctx.state.blocks.push(blockStmt)
+    appendExpression(ctx.state.template, b.call(blockId))
 }

package/src/transform/static/visitors/Element.js

@@ -1,5 +1,5 @@
 import * as b from '../../../builders.js'
-import { append } from '../../../utils/misc.js'
+import { appendText } from '../../../utils/template.js'
 
 export function Element(node, ctx) {
     let attributes = node.attributes
@@ -7,11 +7,11 @@ export function Element(node, ctx) {
         attributes = [...attributes, b.attribute('class', '', { isScoped: true })]
     }
 
-    append(ctx.state.text, `<${node.name}`)
+    appendText(ctx.state.template, `<${node.name}`)
     for (const attribute of attributes) {
         ctx.visit(attribute)
     }
-    append(ctx.state.text, '>')
+    appendText(ctx.state.template, '>')
     ctx.visit(node.fragment)
-    append(ctx.state.text, `</${node.name}>`)
+    appendText(ctx.state.template, `</${node.name}>`)
 }

package/src/transform/static/visitors/ExpressionTag.js

@@ -1,6 +1,12 @@
+import * as b from '../../../builders.js'
+import { appendExpression } from '../../../utils/template.js'
+
 export function ExpressionTag(node, ctx) {
     node = ctx.next() ?? node
 
-    ctx.state.text.push('')
-    ctx.state.expressions.push(node.expression)
+    let expression = node.expression
+    if (ctx.state.pretty ?? true) {
+        expression = b.logical('??', expression, b.literal(''))
+    }
+    appendExpression(ctx.state.template, expression)
 }

package/src/transform/static/visitors/Identifier.js

@@ -0,0 +1,7 @@
+import * as b from '../../../builders.js'
+
+export function Identifier(node, ctx) {
+    if (node.metadata?.isData) {
+        return b.member(b.id('data'), node)
+    }
+}

package/src/transform/static/visitors/IfBlock.js

@@ -1,28 +1,25 @@
 import * as b from '../../../builders.js'
+import { appendExpression } from '../../../utils/template.js'
 import { nextBlockId } from '../../context.js'
 
 export function IfBlock(node, ctx) {
-    const text = ['']
-    const expressions = []
+    function branchStmt(node) {
+        if (node) {
+            const template = { text: [''], expressions: [] }
 
-    ctx.visit(node.consequent, { ...ctx.state, text, expressions })
-    const stmt1 = b.returnStmt(b.template({ text, expressions }))
-
-    let stmt2
-    if (node.alternate) {
-        const text = ['']
-        const expressions = []
-
-        ctx.visit(node.alternate, { ...ctx.state, text, expressions })
-        stmt2 = b.returnStmt(b.template({ text, expressions }))
-    } else {
-        stmt2 = b.returnStmt(b.literal(''))
+            ctx.visit(node, { ...ctx.state, template })
+            return b.returnStmt(b.template(template))
+        }
+        return b.returnStmt(b.literal(''))
     }
 
+    const testStmt = ctx.visit(node.test)
+    const consequentStmt = branchStmt(node.consequent)
+    const alternateStmt = branchStmt(node.alternate)
+
     const blockId = nextBlockId(ctx)
-    const block = b.func(blockId, [b.ifStmt(node.test, [stmt1]), stmt2])
+    const blockStmt = b.func(blockId, [b.ifStmt(testStmt, [consequentStmt]), alternateStmt])
 
-    ctx.state.blocks.push(block)
-    ctx.state.text.push('')
-    ctx.state.expressions.push(b.call(blockId))
+    ctx.state.blocks.push(blockStmt)
+    appendExpression(ctx.state.template, b.call(blockId))
 }

package/src/transform/static/visitors/Program.js

@@ -4,7 +4,10 @@ export function Program(node, ctx) {
     node = ctx.next() ?? node
 
     const stmt = b.exp(
-        b.render([...ctx.state.template.blocks, b.returnStmt(ctx.state.template.template)])
+        b.render([
+            ...ctx.state.template.blocks,
+            b.returnStmt(b.template(ctx.state.template.template))
+        ])
     )
     return { ...node, body: [...node.body, stmt] }
 }

package/src/transform/static/visitors/Script.js

@@ -1,9 +1,9 @@
 import { print } from 'esrap'
-import { append } from '../../../utils/misc.js'
+import { appendText } from '../../../utils/template.js'
 
 export function Script(node, ctx) {
     node = ctx.next() ?? node
-    
+
     const { code } = print(node.content)
-    append(ctx.state.text, `<script type="module">${code}</script>`)
+    appendText(ctx.state.template, `<script type="module">${code}</script>`)
 }

package/src/transform/static/visitors/SlotElement.js

@@ -1,8 +1,8 @@
 import * as b from '../../../builders.js'
+import { appendExpression } from '../../../utils/template.js'
 
 export function SlotElement(node, ctx) {
     node = ctx.next() ?? node
 
-    ctx.state.text.push('')
-    ctx.state.expressions.push(b.member(b.id('slot'), b.id('default')))
+    appendExpression(ctx.state.template, b.member(b.id('slot'), b.id('default')))
 }

package/src/transform/static/visitors/Style.js

@@ -1,9 +1,9 @@
 import { generate } from 'css-tree'
-import { append } from '../../../utils/misc.js'
+import { appendText } from '../../../utils/template.js'
 
 export function Style(node, ctx) {
     node = ctx.next() ?? node
     
     const css = generate(node.content)
-    append(ctx.state.text, `<style>${css}</style>`)
+    appendText(ctx.state.template, `<style>${css}</style>`)
 }

package/src/transform/static/visitors/Template.js

@@ -1,12 +1,8 @@
-import * as b from '../../../builders.js'
-
 export function Template(node, ctx) {
-    const text = ['']
-    const expressions = []
+    const template = { text: [''], expressions: [] }
     const blocks = []
 
-    ctx.visit(node.fragment, { ...ctx.state, text, expressions, blocks })
+    ctx.visit(node.fragment, { ...ctx.state, template, blocks })
 
-    const template = b.template({ text, expressions })
     return { type: 'TemplateMod', template, blocks }
 }

package/src/transform/static/visitors/Text.js

@@ -1,5 +1,5 @@
-import { append } from '../../../utils/misc.js'
+import { appendText } from '../../../utils/template.js'
 
 export function Text(node, ctx) {
-    append(ctx.state.text, node.data)
+    appendText(ctx.state.template, node.data)
 }

package/src/transform/visitors/Attribute.js

@@ -1,6 +1,6 @@
 import * as b from '../../builders.js'
 import { clx } from '../../css.js'
-import { appendText, hasExpression } from '../../utils/template.js'
+import { appendText, hasExpression, isEmpty } from '../../utils/template.js'
 
 export function Attribute(node, ctx) {
     let value = node.value
@@ -21,7 +21,7 @@ export function Attribute(node, ctx) {
 
     const template = { text: [''], expressions: [] }
     for (const val of value) {
-        ctx.visit(val, { ...ctx.state, template })
+        ctx.visit(val, { ...ctx.state, template, pretty: false })
     }
 
     if (hasExpression(template)) {
@@ -66,7 +66,9 @@ export function Attribute(node, ctx) {
             ])
             ctx.state.effects.push(stmt)
         }
+    } else if (isEmpty(template)) {
+        appendText(ctx.state.template, ` ${node.name}`)
     } else {
-        appendText(ctx.state.template, ` ${node.name}="${template.text[0] ?? 'true'}"`)
+        appendText(ctx.state.template, ` ${node.name}="${template.text[0]}"`)
     }
 }

package/src/transform/visitors/ExpressionTag.js

@@ -1,6 +1,12 @@
-import { appendExpression } from "../../utils/template.js"
+import * as b from '../../builders.js'
+import { appendExpression } from '../../utils/template.js'
 
 export function ExpressionTag(node, ctx) {
     node = ctx.next() ?? node
-    appendExpression(ctx.state.template, node.expression)
+
+    let expression = node.expression
+    if (ctx.state.pretty ?? true) {
+        expression = b.logical('??', expression, b.literal(''))
+    }
+    appendExpression(ctx.state.template, expression)
 }

package/src/transform/visitors/MethodDefinition.js

@@ -6,7 +6,8 @@ export function MethodDefinition(node, ctx) {
 
     if (node.key.name === 'constructor') {
         const program = getProgram(ctx)
-        const { properties, setters } = program.metadata?.customElement
+        const properties = program.metadata?.customElement.properties ?? []
+        const setters = program.metadata?.customElement.setters ?? []
 
         const stmt1 = b.assignment(b.$(), b.$$())
         const stmts2 = []
@@ -30,18 +31,22 @@ export function MethodDefinition(node, ctx) {
     }
 
     if (node.key.name === 'connectedCallback') {
-        const shadowRootMode = ctx.state.template.metadata?.shadowRootMode
+        const stmts = []
 
-        const stmts1 = []
-        const stmts2 = []
-        if (shadowRootMode) {
-            stmts1.push(b.assignment(b.shadow(), b.attachShadow(shadowRootMode), '??='))
+        if (ctx.state.template?.metadata?.shadowRootMode) {
+            const { shadowRootMode } = ctx.state.template.metadata
+            stmts.push(b.assignment(b.shadow(), b.attachShadow(shadowRootMode), '??='))
+        }
+
+        if (ctx.state.template?.block) {
+            stmts.push(ctx.state.template.block)
         }
+
         if (node.value.body.body.length > 0) {
-            stmts2.push(b.$boundary(node.value.body.body))
+            stmts.push(b.$boundary(node.value.body.body))
         }
 
-        const stmt = b.$lifecycle('connected', [...stmts1, ctx.state.template.block, ...stmts2])
+        const stmt = b.$lifecycle('connected', stmts)
 
         return {
             ...node,

package/src/transform/visitors/Program.js

@@ -8,43 +8,47 @@ export function Program(node, ctx) {
     const stmts1 = []
     const stmts2 = []
 
+    if (!node.metadata?.hasCustomElementClass) {
+        const stmt = ctx.visit(b.customElement(ctx.state.context.customElementClassName))
+        stmts2.push(stmt)
+    }
+
+    if (!node.metadata?.hasDefineCustomElement) {
+        stmt = b.defineCustomElement(
+            ctx.state.context.customElementName,
+            node.metadata?.customElement.className ?? ctx.state.context.customElementClassName
+        )
+        stmts2.push(stmt)
+    }
+
     // import
     stmt = b.importSpecifier('$$', '@katabatic/runtime')
     stmts1.push(stmt)
 
     // html template
-    const template = ctx.state.template.template
-    stmt = b.declaration('TEMPLATE', b.template(template))
-    stmts1.push(stmt)
+    if (ctx.state.template?.template) {
+        const { template } = ctx.state.template
+        stmt = b.declaration('TEMPLATE', b.template(template))
+        stmts1.push(stmt)
+    }
 
     // style
-    const style = ctx.state.template.style
-    stmt = b.declaration('STYLE', b.template(style))
-    stmts1.push(stmt)
-
-    // $name
-    stmt = b.exp(
-        b.declaration(
-            '$name',
-            b.literal(node.metadata?.customElement.name ?? ctx.state.context.customElementName)
-        )
-    )
-    stmts1.push(stmt)
-
-    // $class
-    stmt = b.exp(b.declaration('$class', b.id(node.metadata?.customElement.className)))
-    stmts2.push(stmt)
+    if (ctx.state.template?.style) {
+        const { style } = ctx.state.template
+        stmt = b.declaration('STYLE', b.template(style))
+        stmts1.push(stmt)
+    }
 
-    // $shadowRootMode
-    stmt = b.exp(
-        b.declaration('$shadowRootMode', b.literal(ctx.state.template.metadata?.shadowRootMode))
-    )
-    stmts1.push(stmt)
+    //$hot
+    if (ctx.state.context.hot) {
+        const stmt = $hot({ ...node, body: [...node.body, ...stmts2] })
+        stmts2.push(stmt)
+    }
 
     // $set
     const properties = [
-        ...node.metadata?.customElement.properties,
-        ...node.metadata?.customElement.setters
+        ...(node.metadata?.customElement.properties ?? []),
+        ...(node.metadata?.customElement.setters ?? [])
     ]
     if (properties.length > 0) {
         stmt = b.$setDecl([
@@ -57,21 +61,31 @@ export function Program(node, ctx) {
     } else {
         stmt = b.$setDecl([b.setAttribute('node', 'attribute', 'value')])
     }
-    stmts1.push(stmt)
+    stmts2.push(stmt)
 
-    //$hot
-    if (ctx.state.context.hot) {
-        stmts1.push($hot(node))
-    }
+    // $name
+    stmt = b.exp(
+        b.declaration(
+            '$name',
+            b.literal(node.metadata?.customElement.name ?? ctx.state.context.customElementName)
+        )
+    )
+    stmts2.push(stmt)
 
-    // defineCustomElement
-    if (!node.metadata?.hasDefineCustomElement) {
-        stmt = b.defineCustomElement(
-            ctx.state.context.customElementName,
-            node.metadata?.customElement.className
+    // $class
+    stmt = b.exp(
+        b.declaration(
+            '$class',
+            b.id(node.metadata?.customElement.className ?? ctx.state.context.customElementClassName)
         )
-        stmts2.push(stmt)
-    }
+    )
+    stmts2.push(stmt)
+
+    // $shadowRootMode
+    stmt = b.exp(
+        b.declaration('$shadowRootMode', b.literal(ctx.state.template?.metadata?.shadowRootMode))
+    )
+    stmts2.push(stmt)
 
     return {
         ...node,

package/src/utils/template.js

@@ -10,6 +10,14 @@ export function hasExpression(template) {
     return template.expressions.length > 0
 }
 
+export function hasOnlyExpression(template) {
+    return (
+        template.expressions.length == 1 &&
+        template.text[0] === '' &&
+        (template.text[1] === undefined || template.text[1] === '')
+    )
+}
+
 export function isEmpty(template) {
-    return template.expressions.length == 0 && template.text.length == 1 && template.text[0] === ''
+    return template.expressions.length == 0 && template.text[0] === ''
 }

package/src/utils/misc.js

@@ -1,9 +0,0 @@
-export function append(array, value, options) {
-    if (options?.spaceWord) {
-        if (value && array.at(-1).at(-1) !== '"') {
-            array[array.length - 1] += ' '
-        }
-    }
-
-    array[array.length - 1] += value
-}