@katabatic/compiler 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# Katabatic compiler
+
+[Katabatic](https://github.com/katabatic-js/katabatic)'s compiler

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@katabatic/compiler",
+  "license": "MIT",
+  "version": "1.0.0",
+  "type": "module",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/katabatic-js/katabatic.git",
+    "directory": "packages/compiler"
+  },
+  "exports": {
+		".": {
+			"import": "./src/index.js"
+		},
+		"./router": {
+			"import": "./src/router/index.js"
+		}
+	},
+  "devDependencies": {
+    "@types/css-tree": "^2.3.10",
+    "@types/node": "^22.15.21",
+    "typescript": "~5.7.2",
+    "vitest": "^3.2.4"
+  },
+  "dependencies": {
+    "@web/dev-server": "^0.4.6",
+    "acorn": "^8.14.1",
+    "css-tree": "^3.1.0",
+    "esrap": "^1.4.6",
+    "zimmerframe": "^1.1.2"
+  }
+}

package/src/analyse/context.js

@@ -0,0 +1,31 @@
+export function getStyleSheet(ctx) {
+    const root = ctx.path[0]
+    return root.template.fragment.nodes.find((n) => n.type === 'Style')?.content
+}
+
+export function getTemplate(ctx) {
+    const root = ctx.path[0]
+    return root.template
+}
+
+export function getProgram(ctx) {
+    const root = ctx.path[0]
+    return root.script.content
+}
+
+export function getScript(ctx) {
+    return ctx.path.toReversed().find((n) => n.type === 'Script')
+}
+
+export function getBlocks(ctx) {
+    return ctx.path.toReversed().filter((n) => n.type === 'EachBlock')
+}
+
+export function isInConstructor(ctx) {
+    for (const node of ctx.path.toReversed()) {
+        if (node.type === 'ArrowFunctionExpression') return false
+        if (node.type === 'FunctionDeclaration') return false
+        if (node.type === 'MethodDefinition') return node.kind === 'constructor'
+    }
+    return false
+}

package/src/analyse/index.js

@@ -0,0 +1,47 @@
+import { walk } from 'zimmerframe'
+import { CallExpression } from './visitors/CallExpression.js'
+import { ClassDeclaration } from './visitors/ClassDeclaration.js'
+import { Template } from './visitors/Template.js'
+import { Element } from './visitors/Element.js'
+import { CssTree, Selector } from './visitors/Selector.js'
+import { Attribute } from './visitors/Attribute.js'
+import { IfBlock } from './visitors/IfBlock.js'
+import { ClassBody } from './visitors/ClassBody.js'
+import { Program } from './visitors/Program.js'
+import { ExpressionTag } from './visitors/ExpressionTag.js'
+import { EachBlock } from './visitors/EachBlock.js'
+import { AssignmentExpression } from './visitors/AssignmentExpression.js'
+import { MethodDefinition } from './visitors/MethodDefinition.js'
+import { PropertyDefinition } from './visitors/PropertyDefinition.js'
+import { ImportDeclaration } from './visitors/ImportDeclaration.js'
+import { CustomElement } from './visitors/CustomElement.js'
+
+const visitors = {
+    Program,
+    ImportDeclaration,
+    CallExpression,
+    ClassDeclaration,
+    ClassBody,
+    AssignmentExpression,
+    MethodDefinition,
+    PropertyDefinition,
+    Template,
+    Element,
+    CustomElement,
+    Attribute,
+    ExpressionTag,
+    IfBlock,
+    EachBlock,
+    Selector,
+    ...CssTree
+}
+
+export function analyse(ast) {
+    const state = {
+        isStatic: false
+    }
+
+    walk(ast, state, visitors)
+
+    return state
+}

package/src/analyse/visitors/AssignmentExpression.js

@@ -0,0 +1,14 @@
+import * as is from '../../checkers.js'
+import { isInConstructor } from '../context.js'
+
+export function AssignmentExpression(node, ctx) {
+    if (is.thisMember(node.left) && isInConstructor(ctx)) {
+        const isPrivate = is.privateId(node.left.property)
+        const customElement = isPrivate ? ctx.state.customElement.private : ctx.state.customElement
+
+        node.metadata ??= {}
+        node.metadata.isPrivate = isPrivate
+        node.metadata.isProperty = true
+        customElement.properties.push(node.left.property.name)
+    }
+}

package/src/analyse/visitors/Attribute.js

@@ -0,0 +1,11 @@
+import * as is from '../../checkers.js'
+
+export function Attribute(node, ctx) {
+    ctx.next()
+
+    if (is.classAttribute(node, true) || is.idAttribute(node, true)) {
+        node.metadata ??= {}
+        node.metadata.isScoped = true
+        return
+    }
+}

package/src/analyse/visitors/CallExpression.js

@@ -0,0 +1,36 @@
+import * as is from '../../checkers.js'
+import { matchQuerySelector } from '../../css-matcher.js'
+import { matchElementById } from '../../id-matcher.js'
+import { getTemplate } from '../context.js'
+
+export function CallExpression(node, ctx) {
+    ctx.next()
+
+    if (is.getElementById(node)) {
+        const id = node.arguments[0].value
+        const template = getTemplate(ctx)
+        const isScoped = matchElementById(id, template)
+
+        node.metadata ??= {}
+        node.metadata.isGetElementById = true
+        node.metadata.isScoped = isScoped
+        return
+    }
+
+    if (is.querySelector(node)) {
+        const selector = node.arguments[0].value
+        const template = getTemplate(ctx)
+        const [isScoped, selectorList] = matchQuerySelector(selector, template)
+
+        node.metadata ??= {}
+        node.metadata.isQuerySelector= true
+        node.metadata.isScoped = isScoped
+        node.metadata.selectorList = selectorList
+        return
+    }
+
+    if (is.defineCustomElement(node)) {
+        const name = node.arguments[0].value
+        ctx.state.customElement.name = name
+    }
+}

package/src/analyse/visitors/ClassBody.js

@@ -0,0 +1,20 @@
+import * as is from '../../checkers.js'
+
+export function ClassBody(node, ctx) {
+    ctx.next()
+
+    const hasConstructor = node.body.some(is.constructor)
+    const hasConnectedCallbackMethod = node.body.some(is.connectedCallback)
+    const hasDisconnectedCallbackMethod = node.body.some(is.disconnectedCallback)
+    const hasGetAttribute = node.body.some(is.getAttribute)
+    const hasAttributeChangedCallback = node.body.some(is.attributeChangedCallback)
+    const hasObservedAttributes = node.body.some(is.observedAttributes)
+
+    node.metadata ??= {}
+    node.metadata.hasConstructor = hasConstructor
+    node.metadata.hasConnectedCallbackMethod = hasConnectedCallbackMethod
+    node.metadata.hasDisconnectedCallbackMethod = hasDisconnectedCallbackMethod
+    node.metadata.hasGetAttribute = hasGetAttribute
+    node.metadata.hasAttributeChangedCallback = hasAttributeChangedCallback
+    node.metadata.hasObservedAttributes = hasObservedAttributes
+}

package/src/analyse/visitors/ClassDeclaration.js

@@ -0,0 +1,5 @@
+export function ClassDeclaration(node, ctx) {
+    ctx.next()
+
+    ctx.state.customElement.className = node.id.name
+}

package/src/analyse/visitors/CustomElement.js

@@ -0,0 +1,10 @@
+import * as is from '../../checkers.js'
+
+export function CustomElement(node, ctx) {
+    ctx.next()
+
+    const hasClass = node.attributes.some(is.classAttribute)
+
+    node.metadata ??= {}
+    node.metadata.hasClass = hasClass
+}

package/src/analyse/visitors/EachBlock.js

@@ -0,0 +1,10 @@
+import { matchExpression } from '../../exp-matcher.js'
+import { getBlocks, getProgram } from '../context.js'
+
+export function EachBlock(node, ctx) {
+    ctx.next()
+
+    const program = getProgram(ctx)
+    const blocks = getBlocks(ctx)
+    matchExpression(node.expression, program, blocks)
+}

package/src/analyse/visitors/Element.js

@@ -0,0 +1,16 @@
+import * as is from '../../checkers.js'
+
+export function Element(node, ctx) {
+    ctx.next()
+
+    const hasClass = node.attributes.some(is.classAttribute)
+
+    const bindAttribute = node.attributes.find(is.bindAttribute)
+    const hasBinding = !!bindAttribute
+    const bindExpression = bindAttribute?.value[0].expression
+
+    node.metadata ??= {}
+    node.metadata.hasClass = hasClass
+    node.metadata.hasBinding = hasBinding
+    node.metadata.bindExpression = bindExpression
+}

package/src/analyse/visitors/ExpressionTag.js

@@ -0,0 +1,9 @@
+import { matchExpression } from "../../exp-matcher.js";
+import { getBlocks, getProgram } from "../context.js";
+
+export function ExpressionTag(node, ctx) {
+    const program = getProgram(ctx)
+    const blocks = getBlocks(ctx)
+
+    matchExpression(node.expression, program, blocks)
+}

package/src/analyse/visitors/IfBlock.js

@@ -0,0 +1,16 @@
+import * as is from '../../checkers.js'
+import { matchExpression } from '../../exp-matcher.js'
+import { getBlocks, getProgram } from '../context.js'
+
+export function IfBlock(node, ctx) {
+    ctx.next()
+
+    const program = getProgram(ctx)
+    const blocks = getBlocks(ctx)
+    matchExpression(node.test, program, blocks)
+    
+    const hasElseif = node.alternate?.nodes.some(is.ifBlock) ?? false
+
+    node.metadata ??= {}
+    node.metadata.hasElseif = hasElseif
+}

package/src/analyse/visitors/ImportDeclaration.js

@@ -0,0 +1,35 @@
+import { matchModule } from '../../module-matcher.js'
+import { getTemplate } from '../context.js'
+
+export function ImportDeclaration(node, ctx) {
+    const template = getTemplate(ctx)
+
+    const { dirname, filename, extension } = parse(node.source.value)
+    if (filename.includes('-')) {
+        const index = ctx.state.modules.length
+        const isModule = matchModule(filename, index, template)
+
+        if (isModule) {
+            node.metadata ??= {}
+            node.metadata.isModule = isModule
+            node.metadata.dirname = dirname
+            node.metadata.filename = filename
+            node.metadata.extension = extension
+            node.metadata.index = index
+
+            ctx.state.modules.push(filename)
+        }
+    }
+}
+
+function parse(path) {
+    const dirnameTokens = path.split('/')
+    const filenameTokens = dirnameTokens.pop().split('.')
+    const extension = filenameTokens.pop()
+
+    return {
+        dirname: dirnameTokens.join('/'),
+        filename: filenameTokens.join('.'),
+        extension
+    }
+}

package/src/analyse/visitors/MethodDefinition.js

@@ -0,0 +1,17 @@
+import * as is from '../../checkers.js'
+
+export function MethodDefinition(node, ctx) {
+    ctx.next()
+
+    const isPrivate = is.privateId(node.key)
+    const customElement = isPrivate ? ctx.state.customElement.private : ctx.state.customElement
+
+    node.metadata ??= {}
+    node.metadata.isPrivate = isPrivate
+
+    if (node.kind === 'method') {
+        customElement.methods.push(node.key.name)
+    } else if (node.kind === 'set') {
+        customElement.setters.push(node.key.name)
+    }
+}

package/src/analyse/visitors/Program.js

@@ -0,0 +1,24 @@
+import * as is from '../../checkers.js'
+
+export function Program(node, ctx) {
+    const modules = []
+    const customElement = {
+        properties: [],
+        methods: ['getAttribute'],
+        setters: [],
+        private: {
+            properties: [],
+            methods: [],
+            setters: []
+        }
+    }
+
+    ctx.next({ ...ctx.state, modules, customElement })
+
+    const hasDefineCustomElement = node.body.some(is.defineCustomElement)
+
+    node.metadata ??= {}
+    node.metadata.hasDefineCustomElement = hasDefineCustomElement
+    node.metadata.modules = modules
+    node.metadata.customElement = customElement
+}

package/src/analyse/visitors/PropertyDefinition.js

@@ -0,0 +1,12 @@
+import * as is from '../../checkers.js'
+
+export function PropertyDefinition(node, ctx) {
+    if (!node.static) {
+        const isPrivate = is.privateId(node.key)
+        const customElement = isPrivate ? ctx.state.customElement.private : ctx.state.customElement
+
+        node.metadata ??= {}
+        node.metadata.isPrivate = isPrivate
+        customElement.properties.push(node.key.name)
+    }
+}

package/src/analyse/visitors/Selector.js

@@ -0,0 +1,23 @@
+import { matchSelector } from '../../css-matcher.js'
+import { getTemplate } from '../context.js'
+
+export function Selector(node, ctx) {
+    node = CssTreeNodeFix(node, ctx)
+
+    const template = getTemplate(ctx)
+    const isUsed = matchSelector(node, template)
+
+    node.metadata ??= {}
+    node.metadata.isUsed = isUsed
+}
+
+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/analyse/visitors/Template.js

@@ -0,0 +1,14 @@
+import * as is from '../../checkers.js'
+
+export function Template(node, ctx) {
+    ctx.next()
+
+    const isStatic = node.attributes.some(is.staticAttribute)
+    const shadowRootMode = node.attributes.find(is.shadowRootModeAttribute)?.value[0]?.data
+
+    node.metadata ??= {}
+    node.metadata.shadowRootMode = shadowRootMode
+
+    ctx.state.isStatic = isStatic
+}
+