@katabatic/compiler 1.0.0

package/src/router/index.js

@@ -0,0 +1,130 @@
+import { print } from 'esrap'
+import * as b from '../builders.js'
+
+export * from './html.js'
+
+export function createRouter(registry) {
+    const routes = b.object()
+    const imports = { page: [], layout: [] }
+
+    for (const entry of Object.values(registry)) {
+        if (entry.isPage) {
+            const node = makeNode(routes, entry.route)
+            const pageId = b.id(`page_${imports.page.length + 1}`)
+            imports.page.push(b.importNamespace(pageId, entry.routerImport))
+            node.properties.push(b.property('_page', pageId))
+            continue
+        }
+
+        if (entry.isLayout) {
+            const node = makeNode(routes, entry.route)
+            const layoutId = b.id(`layout_${imports.layout.length + 1}`)
+            imports.layout.push(b.importNamespace(layoutId, entry.routerImport))
+            node.properties.push(b.property('_layout', layoutId))
+            continue
+        }
+
+        if (entry.isIndex) {
+            imports.index = b.importSpecifier('renderIndex', entry.routerImport)
+            continue
+        }
+    }
+
+    return printRouter({
+        imports: print(b.program([...imports.layout, ...imports.page, imports.index])),
+        routes: print(b.program([routes]))
+    })
+}
+
+function makeNode(node, path) {
+    const tokens = path.split('/').filter((t) => t !== '')
+
+    for (let token of tokens) {
+        const param = token.startsWith('[') && token.endsWith(']') ? token.slice(1, -1) : undefined
+        token = param ? '*' : token
+
+        const prop = node.properties.find((p) => p.key.value === token)
+        if (prop) {
+            node = prop.value
+        } else {
+            const child = b.object()
+            if (param) {
+                child.properties.push(b.property('_param', b.literal(param)))
+            }
+            node.properties.push(b.property(b.literal(token), child))
+            node = child
+        }
+    }
+    return node
+}
+
+function printRouter({ imports, routes }) {
+    return {
+        code: `${imports.code}
+
+const ROUTES = ${routes.code}
+
+export async function route(path) {
+    const route = resolve(path)
+
+    if (route) {
+        const { modules, ...context } = route
+        const data = await load(modules, context)
+        const result = render(modules, data)
+        
+        return renderIndex({ body: result })
+    }
+}
+
+function load(modules, context) {
+    const data = []
+    for (let i = 0; i < modules.length; i++) {
+        data.push(modules[i].load(context, data[i - 1]))
+    }
+    return Promise.all(data)
+}
+
+function render(modules, data) {
+    let result
+    for (let i = modules.length - 1; i >= 0; i--) {
+        result = modules[i].render(data[i], { default: result })
+    }
+    return result
+}
+
+function resolve(path) {
+    const modules = []
+    const params = {}
+    const route = []
+    const tokens = path.split('/').filter((t) => t !== '')
+
+    let node = ROUTES
+
+    if (node._layout) {
+        modules.push(node._layout)
+    }
+
+    for (const token of tokens) {
+        node = node[token] ?? node['*']
+        if (!node) break
+
+        if (node._layout) {
+            modules.push(node._layout)
+        }
+
+        if (node._param) {
+            params[node._param] = token
+            route.push(\`[\${node._param}]\`)
+        } else{
+            route.push(token)
+        }
+    }
+
+    if (node?._page) {
+        modules.push(node._page)
+        return { modules, route: \`/\${route.join('/')}\`, params }
+    }
+}
+`
+    }
+}

package/src/transform/context.js

@@ -0,0 +1,74 @@
+import * as b from '../builders.js'
+
+export function nextElementId(ctx) {
+    return b.id(`elem_${ctx.state.init.elem.length + 1}`)
+}
+
+export function nextTextId(ctx) {
+    return b.id(`text_${ctx.state.init.text.length + 1}`)
+}
+
+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 = []
+
+    for (const node of ctx.path.toReversed()) {
+        if (node.type === 'IfBlock' || node.type === 'EachBlock' || node.type === 'Template') break
+        subPath.unshift(node)
+    }
+
+    if (nodes) {
+        subPath.push(...(Array.isArray(nodes) ? nodes : [nodes]))
+    }
+
+console.log(subPath)
+
+    let stmt = b.member('template', 'content')
+    let fragment
+    for (const node of subPath) {
+        switch (node.type) {
+            case 'Fragment':
+                fragment = node
+                break
+            case 'Text':
+            case 'ExpressionTag':
+            case 'Element':
+            case 'CustomElement':
+            case 'IfBlock':
+            case 'EachBlock':
+                stmt = b.sibling(b.child(stmt), position(fragment, node))
+                break
+        }
+    }
+    return stmt
+}
+
+function position(fragment, node) {
+    let position = -1
+
+    const nodes = fragment.nodes
+    for (let i = 0; i < nodes.length; i++) {
+        if (
+            (nodes[i].type === 'ExpressionTag' || nodes[i].type === 'Text') &&
+            (nodes[i - 1]?.type === 'ExpressionTag' || nodes[i - 1]?.type === 'Text')
+        ) {
+            // Text and ExpressionTag siblings are collapsed in one node in the html template
+            continue
+        }
+
+        position++
+        if (nodes[i] === node) break
+    }
+    return position
+}
+
+export function getProgram(ctx) {
+    return ctx.path[0]
+}

package/src/transform/index.js

@@ -0,0 +1,52 @@
+import { walk } from 'zimmerframe'
+import { Program } from './visitors/Program.js'
+import { Identifier } from './visitors/Identifier.js'
+import { ExpressionTag } from './visitors/ExpressionTag.js'
+import { Template } from './visitors/Template.js'
+import { MethodDefinition } from './visitors/MethodDefinition.js'
+import { Element } from './visitors/Element.js'
+import { Text } from './visitors/Text.js'
+import { Fragment } from './visitors/Fragment.js'
+import { Style } from './visitors/Style.js'
+import { Attribute } from './visitors/Attribute.js'
+import { ClassBody } from './visitors/ClassBody.js'
+import { ImportDeclaration } from './visitors/ImportDeclaration.js'
+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 { CustomElement } from './visitors/CustomElement.js'
+import { AssignmentExpression } from './visitors/AssignmentExpression.js'
+import { PropertyDefinition } from './visitors/PropertyDefinition.js'
+
+const templateVisitors = {
+    Template,
+    Identifier,
+    ExpressionTag,
+    Element,
+    CustomElement,
+    Text,
+    Fragment,
+    Style,
+    Attribute,
+    CallExpression,
+    IfBlock,
+    EachBlock,
+    Selector,
+    ...CssTree
+}
+
+const scriptVisitors = {
+    Program,
+    MethodDefinition,
+    ClassBody,
+    ImportDeclaration,
+    CallExpression,
+    AssignmentExpression,
+    PropertyDefinition
+}
+
+export function transform(ast, analysis, context) {
+    const template = walk(ast.template, { analysis, context }, templateVisitors)
+    return walk(ast.script.content, { analysis, template, context }, scriptVisitors)
+}

package/src/transform/static/index.js

@@ -0,0 +1,40 @@
+import { walk } from 'zimmerframe'
+import { Element } from './visitors/Element.js'
+import { Text } from './visitors/Text.js'
+import { Program } from './visitors/Program.js'
+import { Template } from './visitors/Template.js'
+import { ExpressionTag } from './visitors/ExpressionTag.js'
+import { SlotElement } from './visitors/SlotElement.js'
+import { Attribute } from './visitors/Attribute.js'
+import { Style } from './visitors/Style.js'
+import { Script } from './visitors/Script.js'
+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'
+
+const templateVisitors = {
+    Attribute,
+    Element,
+    SlotElement,
+    Text,
+    ExpressionTag,
+    Template,
+    Style,
+    Script,
+    CallExpression,
+    IfBlock,
+    EachBlock,
+    // common visitors
+    Selector,
+    ...CssTree
+}
+
+const scriptVisitors = {
+    Program
+}
+
+export function transform(ast, analysis, context) {
+    const template = walk(ast.template, { analysis, context }, templateVisitors)
+    return walk(ast.script.content, { analysis, template, context }, scriptVisitors)
+}

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

@@ -0,0 +1,27 @@
+import * as b from '../../../builders.js'
+import { append } from '../../../utils/misc.js'
+import { clx } from '../../../css.js'
+
+export function Attribute(node, ctx) {
+    let value = node.value
+    if (node.name === 'id' && node.metadata?.isScoped) {
+        if (value[0].type === 'Text') {
+            value = [b.text(`${value[0].data}-${ctx.state.context.hash}`)]
+        } else {
+            value = [...value, b.text(`-${ctx.state.context.hash}`)]
+        }
+    }
+    if (node.name === 'class' && node.metadata?.isScoped) {
+        if (value[0].type === 'Text') {
+            value = [b.text(clx(value[0].data, `ktb-${ctx.state.context.hash}`))]
+        } else {
+            value = [...value, b.text(` ktb-${ctx.state.context.hash}`)]
+        }
+    }
+
+    append(ctx.state.text, ` ${node.name}="`)
+    for (const val of value) {
+        ctx.visit(val)
+    }
+    append(ctx.state.text, `"`)
+}

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

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

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

@@ -0,0 +1,17 @@
+import * as b from '../../../builders.js'
+import { append } from '../../../utils/misc.js'
+
+export function Element(node, ctx) {
+    let attributes = node.attributes
+    if (node.metadata?.isScoped && !node.metadata?.hasClass) {
+        attributes = [...attributes, b.attribute('class', '', { isScoped: true })]
+    }
+
+    append(ctx.state.text, `<${node.name}`)
+    for (const attribute of attributes) {
+        ctx.visit(attribute)
+    }
+    append(ctx.state.text, '>')
+    ctx.visit(node.fragment)
+    append(ctx.state.text, `</${node.name}>`)
+}

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

@@ -0,0 +1,6 @@
+export function ExpressionTag(node, ctx) {
+    node = ctx.next() ?? node
+
+    ctx.state.text.push('')
+    ctx.state.expressions.push(node.expression)
+}

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

@@ -0,0 +1,28 @@
+import * as b from '../../../builders.js'
+import { nextBlockId } from '../../context.js'
+
+export function IfBlock(node, ctx) {
+    const text = ['']
+    const 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(''))
+    }
+
+    const blockId = nextBlockId(ctx)
+    const block = b.func(blockId, [b.ifStmt(node.test, [stmt1]), stmt2])
+
+    ctx.state.blocks.push(block)
+    ctx.state.text.push('')
+    ctx.state.expressions.push(b.call(blockId))
+}

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

@@ -0,0 +1,10 @@
+import * as b from '../../../builders.js'
+
+export function Program(node, ctx) {
+    node = ctx.next() ?? node
+
+    const stmt = b.exportDec(
+        b.render([...ctx.state.template.blocks, b.returnStmt(ctx.state.template.template)])
+    )
+    return { ...node, body: [...node.body, stmt] }
+}

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

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

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

@@ -0,0 +1,8 @@
+import * as b from '../../../builders.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')))
+}

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

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

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

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

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

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

package/src/transform/visitors/AssignmentExpression.js

@@ -0,0 +1,7 @@
+import * as b from '../../builders.js'
+
+export function AssignmentExpression(node) {
+    if (node.metadata?.isProperty && !node.metadata?.isPrivate) {
+        return { ...node, right: b.$$init(node.left.property.name, node.right) }
+    }
+}

package/src/transform/visitors/Attribute.js

@@ -0,0 +1,79 @@
+import * as b from '../../builders.js'
+import { clx } from '../../css.js'
+import { appendText, hasExpression } from '../../utils/template.js'
+
+export function Attribute(node, ctx) {
+    let value = node.value
+    if (node.name === 'id' && node.metadata?.isScoped) {
+        if (value[0].type === 'Text') {
+            value = [b.text(`${value[0].data}-${ctx.state.context.hash}`)]
+        } else {
+            value = [...value, b.text(`-${ctx.state.context.hash}`)]
+        }
+    }
+    if (node.name === 'class' && node.metadata?.isScoped) {
+        if (value[0].type === 'Text') {
+            value = [b.text(clx(value[0].data, `ktb-${ctx.state.context.hash}`))]
+        } else {
+            value = [...value, b.text(` ktb-${ctx.state.context.hash}`)]
+        }
+    }
+
+    const template = { text: [''], expressions: [] }
+    for (const val of value) {
+        ctx.visit(val, { ...ctx.state, template })
+    }
+
+    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, template.expressions[0])
+            ])
+            ctx.state.effects.push(stmt)
+        } else if (bindingId) {
+            const stmt = b.$effect([
+                b.logical(
+                    '||',
+                    b.$setBindingProp(bindingId, node.name, template.expressions[0]),
+                    b.setAttribute(elementId, b.literal(node.name), template.expressions[0])
+                )
+            ])
+            ctx.state.effects.push(stmt)
+
+            const stmt2 = b.$getBindingProp(
+                bindingId,
+                node.name,
+                b.assignment(template.expressions[0], b.id('v'))
+            )
+            ctx.state.changed.push(stmt2)
+        } else {
+            const stmt = b.$effect([
+                b.setAttribute(elementId, b.literal(node.name), template.expressions[0])
+            ])
+            ctx.state.effects.push(stmt)
+        }
+    } else {
+        appendText(ctx.state.template, ` ${node.name}="${template.text[0] ?? 'true'}"`)
+    }
+}

package/src/transform/visitors/CallExpression.js

@@ -0,0 +1,17 @@
+import * as b from '../../builders.js'
+import { transformQuerySelector } from '../../css-transform.js'
+
+export function CallExpression(node, ctx) {
+    ctx.next()
+
+    if (node.metadata?.isGetElementById && node.metadata?.isScoped) {
+        const id = node.arguments[0].value
+        return { ...node, arguments: [b.literal(id + '-' + ctx.state.context.hash)] }
+    }
+
+    if (node.metadata?.isQuerySelector && node.metadata?.isScoped) {
+        const selectorList = node.metadata.selectorList
+        const query = transformQuerySelector(selectorList, ctx.state.context)
+        return { ...node, arguments: [b.literal(query)] }
+    }
+}

package/src/transform/visitors/ClassBody.js

@@ -0,0 +1,36 @@
+import * as b from '../../builders.js'
+
+export function ClassBody(node, ctx) {
+    node = ctx.next() ?? node
+
+    const stmts1 = []
+    const stmts2 = []
+    if (!node.metadata?.hasConstructor) {
+        const stmt = ctx.visit(b.constructor())
+        stmts1.push(stmt)
+    }
+
+    if (!node.metadata?.hasConnectedCallbackMethod) {
+        const stmt = ctx.visit(b.connectedCallback())
+        stmts2.push(stmt)
+    }
+
+    if (!node.metadata?.hasDisconnectedCallbackMethod) {
+        const stmt = ctx.visit(b.disconnectedCallback())
+        stmts2.push(stmt)
+    }
+
+    if (!node.metadata?.hasAttributeChangedCallback && node.metadata?.hasObservedAttributes) {
+        const stmt = ctx.visit(b.attributeChangedCallback())
+        stmts2.push(stmt)
+    }
+
+    if (!node.metadata?.hasGetAttribute && node.metadata?.hasObservedAttributes) {
+        const stmt = ctx.visit(b.getAttribute())
+        stmts2.push(stmt)
+    }
+
+    if (stmts2.length >= 0) {
+        return { ...node, body: [...stmts1, ...node.body, ...stmts2] }
+    }
+}

package/src/transform/visitors/CustomElement.js

@@ -0,0 +1,43 @@
+import * as b from '../../builders.js'
+import { appendExpression, appendText } from '../../utils/template.js'
+import { nextElementId, pathStmt } from '../context.js'
+
+export function CustomElement(node, ctx) {
+    let attributes = node.attributes
+    if (node.metadata?.isScoped && !node.metadata?.hasClass) {
+        attributes = [...attributes, b.attribute('class', '', { isScoped: true })]
+    }
+
+    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?.isModule) {
+        const moduleId = b.id(`$Module_${node.metadata.index + 1}`)
+
+        appendText(ctx.state.template, '<')
+        appendExpression(ctx.state.template, b.$name(moduleId))
+        for (const attribute of attributes) {
+            ctx.visit(attribute, { ...ctx.state, getElementId, getModuleId: () => moduleId })
+        }
+        appendText(ctx.state.template, '>')
+        ctx.visit(node.fragment)
+        appendText(ctx.state.template, '</')
+        appendExpression(ctx.state.template, b.$name(moduleId))
+        appendText(ctx.state.template, '>')
+    } else {
+        appendText(ctx.state.template, `<${node.name}`)
+        for (const attribute of attributes) {
+            ctx.visit(attribute, { ...ctx.state, getElementId })
+        }
+        appendText(ctx.state.template, '>')
+        ctx.visit(node.fragment)
+        appendText(ctx.state.template, `</${node.name}>`)
+    }
+}