@katabatic/compiler 1.0.0

package/src/transform/visitors/EachBlock.js

@@ -0,0 +1,39 @@
+import * as b from '../../builders.js'
+import { appendText } from '../../utils/template.js'
+import { nextElementId, pathStmt } from '../context.js'
+
+export function EachBlock(node, ctx) {
+    const template = { text: [''], expressions: [] }
+    const init = { elem: [], text: [], binding: [] }
+    const effects = []
+    const animates = []
+    const handlers = []
+    const blocks = []
+
+    ctx.visit(node.body, { ...ctx.state, template, init, effects, animates, handlers, blocks })
+
+    const stmts1 = [
+        b.declaration('template', b.createElement('template')),
+        b.assignment(b.innerHTML('template'), b.template(template))
+    ]
+    const stmts2 = [
+        ...init.elem,
+        ...init.text,
+        ...init.binding,
+        ...effects,
+        ...animates,
+        ...handlers,
+        ...blocks
+    ]
+    const stmt3 = b.insertBefore('anchor', b.member('template', 'content'))
+
+    const anchorId = nextElementId(ctx)
+    const bodyStmt = [...stmts1, ...stmts2, stmt3]
+    const expressionStmt = ctx.visit(node.expression)
+    const anchorStmt = b.declaration(anchorId, pathStmt(ctx, node))
+    const blockStmt = b.eachBlock(anchorId, expressionStmt, node.context, node.key, bodyStmt)
+
+    ctx.state.init.elem.push(anchorStmt)
+    ctx.state.blocks.push(blockStmt)
+    appendText(ctx.state.template, '<!-- -->')
+}

package/src/transform/visitors/Element.js

@@ -0,0 +1,49 @@
+import * as b from '../../builders.js'
+import { appendText } from '../../utils/template.js'
+import { nextBindingId, nextElementId, pathStmt } from '../context.js'
+
+export function Element(node, ctx) {
+    let attributes = node.attributes
+    if (node.metadata?.isScoped && !node.metadata?.hasClass) {
+        attributes = [...attributes, b.attribute('class', '', { isScoped: true })]
+    }
+
+    const changed = []
+
+    let elementId
+    function getElementId() {
+        if (!elementId) {
+            elementId = nextElementId(ctx)
+            console.log('ELEM')
+            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
+    }
+
+    appendText(ctx.state.template, `<${node.name}`)
+    for (const attribute of attributes) {
+        ctx.visit(attribute, { ...ctx.state, getElementId, getBindingId, changed })
+    }
+    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)
+    }
+}

package/src/transform/visitors/ExpressionTag.js

@@ -0,0 +1,6 @@
+import { appendExpression } from "../../utils/template.js"
+
+export function ExpressionTag(node, ctx) {
+    node = ctx.next() ?? node
+    appendExpression(ctx.state.template, node.expression)
+}

package/src/transform/visitors/Fragment.js

@@ -0,0 +1,42 @@
+import * as b from '../../builders.js'
+import { appendText, hasExpression, isEmpty } from '../../utils/template.js'
+import { nextTextId, pathStmt } from '../context.js'
+
+export function Fragment(node, ctx) {
+    let template = { text: [''], expressions: [] }
+    let textNode
+
+    for (const child of node.nodes) {
+        switch (child.type) {
+            case 'Text':
+            case 'ExpressionTag':
+                textNode = child
+                ctx.visit(child, { template, analysis: ctx.state.analysis })
+                break
+            default:
+                finalize()
+                ctx.visit(child)
+                break
+        }
+    }
+    finalize()
+
+    function finalize() {
+        if (hasExpression(template)) {
+            const textId = nextTextId(ctx)
+            const textStmt = b.declaration(textId, pathStmt(ctx, [node, textNode]))
+            ctx.state.init.text.push(textStmt)
+
+            const effectStmt = b.$effect([
+                b.assignment(b.textContent(textId), b.template(template))
+            ])
+            ctx.state.effects.push(effectStmt)
+
+            appendText(ctx.state.template, ' ')
+            template = { text: [''], expressions: [] }
+        } else if (!isEmpty(template)) {
+            appendText(ctx.state.template, template.text.join(''))
+            template = { text: [''], expressions: [] }
+        }
+    }
+}

package/src/transform/visitors/Identifier.js

@@ -0,0 +1,10 @@
+import * as b from '../../builders.js'
+
+export function Identifier(node) {
+    if (node.metadata?.isBlockVar) {
+        return b.call(node)
+    }
+    if (node.metadata?.isProperty || node.metadata?.isMethod) {
+        return b.thisMember(b.id(node, node.metadata?.isPrivate))
+    }
+}

package/src/transform/visitors/IfBlock.js

@@ -0,0 +1,55 @@
+import * as b from '../../builders.js'
+import { appendText } from '../../utils/template.js'
+import { nextElementId, pathStmt } from '../context.js'
+
+export function IfBlock(node, ctx) {
+    function branchStmt(node, hasElseif = false) {
+        if (node) {
+            const template = { text: [''], expressions: [] }
+            const init = { elem: [], text: [], binding: [] }
+            const effects = []
+            const animates = []
+            const handlers = []
+            const blocks = []
+
+            ctx.visit(node, { ...ctx.state, template, init, effects, animates, handlers, blocks })
+
+            if (!hasElseif) {
+                const stmts1 = [
+                    b.declaration('template', b.createElement('template')),
+                    b.assignment(b.innerHTML('template'), b.template(template))
+                ]
+                const stmts2 = [
+                    ...init.elem,
+                    ...init.text,
+                    ...init.binding,
+                    ...effects,
+                    ...animates,
+                    ...handlers,
+                    ...blocks
+                ]
+                const stmt3 = b.insertBefore('anchor', b.member('template', 'content'))
+
+                return [...stmts1, ...stmts2, stmt3]
+            }
+            return blocks
+        }
+    }
+
+    const testStmt = ctx.visit(node.test)
+    const consequentStmt = branchStmt(node.consequent)
+    const alternateStmt = branchStmt(node.alternate, node.metadata?.hasElseif)
+
+    if (!node.elseif) {
+        const anchorId = nextElementId(ctx)
+        const anchorStmt = b.declaration(anchorId, pathStmt(ctx, node))
+        const blockStmt = b.ifBlock(anchorId, testStmt, consequentStmt, alternateStmt)
+
+        ctx.state.init.elem.push(anchorStmt)
+        ctx.state.blocks.push(blockStmt)
+        appendText(ctx.state.template, '<!-- -->')
+    } else {
+        const blockStmt = b.ifBlock(b.id('anchor'), testStmt, consequentStmt, alternateStmt)
+        ctx.state.blocks.push(blockStmt)
+    }
+}

package/src/transform/visitors/ImportDeclaration.js

@@ -0,0 +1,21 @@
+import * as b from '../../builders.js'
+
+export function ImportDeclaration(node, ctx) {
+    if (node.metadata?.isModule) {
+        const moduleId = `$Module_${node.metadata.index + 1}`
+        const raw = undefined
+
+        let value
+        if (ctx.state.context.rewriteRelativeImportExtensions) {
+            value = `${node.metadata.dirname}/${node.metadata.filename}.js`
+        } else {
+            value = `${node.metadata.dirname}/${node.metadata.filename}.${node.metadata.extension}`
+        }
+
+        return {
+            ...node,
+            specifiers: [...node.specifiers, b.importNamespaceSpecifier(moduleId)],
+            source: { ...node.source, value, raw }
+        }
+    }
+}

package/src/transform/visitors/MethodDefinition.js

@@ -0,0 +1,115 @@
+import * as b from '../../builders.js'
+import { getProgram } from '../context.js'
+
+export function MethodDefinition(node, ctx) {
+    node = ctx.next() ?? node
+
+    if (node.key.name === 'constructor') {
+        const program = getProgram(ctx)
+        const { properties, setters } = program.metadata?.customElement
+
+        const stmt1 = b.assignment(b.$(), b.$$())
+        const stmts2 = []
+        for (const setter of setters) {
+            stmts2.push(b.$$init(setter))
+        }
+        for (const property of properties) {
+            stmts2.push(b.$instrument(property))
+        }
+
+        return {
+            ...node,
+            value: {
+                ...node.value,
+                body: {
+                    ...node.value.body,
+                    body: [...node.value.body.body, stmt1, ...stmts2]
+                }
+            }
+        }
+    }
+
+    if (node.key.name === 'connectedCallback') {
+        const shadowRootMode = ctx.state.template.metadata?.shadowRootMode
+
+        const stmts1 = []
+        const stmts2 = []
+        if (shadowRootMode) {
+            stmts1.push(b.assignment(b.shadow(), b.attachShadow(shadowRootMode)))
+        }
+        if (node.value.body.body.length > 0) {
+            stmts2.push(b.$boundary(node.value.body.body))
+        }
+        
+        const stmt = b.ifStmt(b.$lifecycle('connected'), [
+            ...stmts1,
+            ctx.state.template.block,
+            ...stmts2
+        ])
+
+        return {
+            ...node,
+            value: {
+                ...node.value,
+                body: {
+                    ...node.value.body,
+                    body: [stmt]
+                }
+            }
+        }
+    }
+
+    if (node.key.name === 'disconnectedCallback') {
+        const stmt1 = b.$lifecycle('disconnected')
+        const stmt2 = b.queueMicrotask([
+            b.ifStmt(
+                b.$lifecycle('microtask'),
+                [b.$dispose(), ...node.value.body.body],
+                [b.connectedMoveCallback()]
+            )
+        ])
+
+        return {
+            ...node,
+            value: {
+                ...node.value,
+                body: {
+                    ...node.value.body,
+                    body: [stmt1, stmt2]
+                }
+            }
+        }
+    }
+
+    if (node.key.name === 'getAttribute') {
+        const stmt1 = b.$trackAttribute(node.value.params)
+
+        return {
+            ...node,
+            value: {
+                ...node.value,
+                params: stmt1.arguments,
+                body: {
+                    ...node.value.body,
+                    body: [stmt1, ...node.value.body.body]
+                }
+            }
+        }
+    }
+
+    if (node.key.name === 'attributeChangedCallback') {
+        const stmt1 = b.$attributeChanged(node.value.params)
+
+        return {
+            ...node,
+            value: {
+                ...node.value,
+                params: stmt1.arguments,
+                body: {
+                    ...node.value.body,
+                    body: [stmt1, ...node.value.body.body]
+                }
+            }
+        }
+    }
+}

package/src/transform/visitors/Program.js

@@ -0,0 +1,65 @@
+import * as b from '../../builders.js'
+
+export function Program(node, ctx) {
+    node = ctx.next() ?? node
+
+    let stmt
+    const stmts1 = []
+    const stmts2 = []
+
+    // 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)
+
+    // style
+    const css = ctx.state.template.css
+    const style = css.length >= 0 ? `<style>${ctx.state.template.css.join('')}</style>` : ''
+    stmt = b.declaration('STYLE', b.literal(style))
+    stmts1.push(stmt)
+
+    // $name
+    stmt = b.$nameDecl(node.metadata?.customElement.name ?? ctx.state.context.customElementName)
+    stmts1.push(stmt)
+
+    // $set
+    const properties = [
+        ...node.metadata?.customElement.properties,
+        ...node.metadata?.customElement.setters
+    ]
+    if (properties.length > 0) {
+        stmt = b.$setDecl([
+            b.ifStmt(
+                b.includes(b.array(properties), 'attribute'),
+                [b.setProperty('node', 'attribute', 'value')],
+                [b.setAttribute('node', 'attribute', 'value')]
+            )
+        ])
+    } else {
+        stmt = b.$setDecl([b.setAttribute('node', 'attribute', 'value')])
+    }
+    stmts1.push(stmt)
+
+    // defineCustomElement
+    if (!node.metadata?.hasDefineCustomElement) {
+        stmt = b.defineCustomElement(
+            ctx.state.context.customElementName,
+            node.metadata?.customElement.className
+        )
+        stmts2.push(stmt)
+    }
+
+    return {
+        ...node,
+        body: [
+            ...node.body.filter((n) => n.type === 'ImportDeclaration'),
+            ...stmts1,
+            ...node.body.filter((n) => n.type !== 'ImportDeclaration'),
+            ...stmts2
+        ]
+    }
+}

package/src/transform/visitors/PropertyDefinition.js

@@ -0,0 +1,7 @@
+import * as b from '../../builders.js'
+
+export function PropertyDefinition(node) {
+    if (!node.static && !node.metadata?.isPrivate) {
+        return { ...node, value: b.$$init(node.key.name, node.value ?? b.undefined()) }
+    }
+}

package/src/transform/visitors/Selector.js

@@ -0,0 +1,41 @@
+import * as b from '../../builders.js'
+
+export function Selector(node, ctx) {
+    node = CssTreeNodeFix(node, ctx)
+
+    const children = []
+    let unscoped = []
+    for (const child of node.children) {
+        switch (child.type) {
+            case 'Combinator':
+                scope()
+                children.push(child)
+                break
+            default:
+                unscoped.push(child)
+                break
+        }
+    }
+    scope()
+
+    function scope() {
+        if (unscoped.length > 0) {
+            unscoped.push(b.classSelector(`ktb-${ctx.state.context.hash}`))
+            children.push(...unscoped)
+            unscoped = []
+        }
+    }
+
+    return { type: 'Selector', children }
+}
+
+export const CssTree = {
+    StyleSheet: CssTreeNodeFix,
+    SelectorList: CssTreeNodeFix,
+    PseudoClassSelector: CssTreeNodeFix
+}
+
+function CssTreeNodeFix(node, ctx) {
+    const children = node.children?.map((c) => ctx.visit(c)) ?? null
+    return { ...node, children }
+}

package/src/transform/visitors/Style.js

@@ -0,0 +1,11 @@
+import { generate } from 'css-tree'
+import { appendText } from '../../utils/template.js'
+
+export function Style(node, ctx) {
+    node = ctx.next() ?? node
+
+    const css = generate(node.content)
+
+    ctx.state.css.push(css)
+    appendText(ctx.state.template, '<!-- -->')
+}

package/src/transform/visitors/Template.js

@@ -0,0 +1,44 @@
+import * as b from '../../builders.js'
+
+export function Template(node, ctx) {
+    const css = []
+    const template = { text: [''], expressions: [] }
+    const init = { elem: [], text: [], binding: [] }
+    const effects = []
+    const animates = []
+    const handlers = []
+    const blocks = []
+
+    ctx.visit(node.fragment, {
+        ...ctx.state,
+        css,
+        template,
+        init,
+        effects,
+        animates,
+        handlers,
+        blocks
+    })
+
+    const rootId = node.metadata?.shadowRootMode ? b.shadow() : b.thisExp()
+
+    const stmts1 = [
+        b.declaration('template', b.createElement('template')),
+        b.assignment(b.innerHTML('template'), b.binary('+', b.id('TEMPLATE'), b.id('STYLE')))
+    ]
+    const stmts2 = [
+        ...init.elem,
+        ...init.text,
+        ...init.binding,
+        ...effects,
+        ...animates,
+        ...handlers,
+        ...blocks
+    ]
+    const stmt3 = b.replaceChildren(rootId, b.member('template', 'content'))
+
+    const bodyStmt = [...stmts1, ...stmts2, stmt3]
+    const block = b.$block(bodyStmt)
+
+    return { type: 'TemplateMod', metadata: node.metadata, css, template, block }
+}

package/src/transform/visitors/Text.js

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

package/src/utils/misc.js

@@ -0,0 +1,9 @@
+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
+}

package/src/utils/template.js

@@ -0,0 +1,15 @@
+export function appendText(template, value) {
+    template.text[template.text.length - 1] += value
+}
+export function appendExpression(template, value) {
+    template.expressions.push(value)
+    template.text.push('')
+}
+
+export function hasExpression(template) {
+    return template.expressions.length > 0
+}
+
+export function isEmpty(template) {
+    return template.expressions.length == 0 && template.text.length == 1 && template.text[0] === ''
+}