@katabatic/compiler 1.0.0

package/src/parser/expression.js

@@ -0,0 +1,44 @@
+import { parseExpressionAt } from 'acorn'
+import { Parser } from './parser.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseExpressionTag(p) {
+    p.expectToken([TokenTypes.braceL])
+    p.skipWhitespaces()
+    const expression = parseExpression(p)
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.braceR])
+
+    return { type: 'ExpressionTag', expression }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseAttributeExpressionTag(p) {
+    p.expectToken([TokenTypes.quoteBraceL, TokenTypes.doubleQuoteBraceL])
+    p.skipWhitespaces()
+    const expression = parseExpression(p)
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.braceRQuote, TokenTypes.braceRDoubleQuote])
+
+    return { type: 'ExpressionTag', expression }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseExpression(p) {
+    const node = parseExpressionAt(p.input, p.pos, { ecmaVersion: 'latest' })
+    p.pos = node.end
+    return node
+}

package/src/parser/if-block.js

@@ -0,0 +1,71 @@
+import { parseExpressionAt } from 'acorn'
+import { parseFragment } from './element.js'
+import { Parser } from './parser.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseIfBlock(p, elseif = false) {
+    const start = p.pos
+    p.expectToken([TokenTypes.braceLHash, TokenTypes.braceLColumn])
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+
+    if (elseif) {
+        p.skipWhitespaces()
+        p.expectToken([TokenTypes.name])
+    }
+
+    const test = parseExpression(p)
+    p.expectToken([TokenTypes.braceR])
+    const consequent = parseFragment(p)
+
+    const punctToken = p.peakToken([TokenTypes.braceLColumn])
+    const nameToken1 = p.peakToken([TokenTypes.name], punctToken)
+    const whitespaceToken = p.peakWhitespaces(nameToken1)
+    const nameToken2 = p.peakToken([TokenTypes.name], whitespaceToken)
+
+    let alternate
+    if (nameToken1?.value === 'else' && nameToken2?.value === 'if') {
+        alternate = fragment([parseIfBlock(p, true)])
+    } else if (nameToken1?.value === 'else') {
+        p.expectToken([TokenTypes.braceLColumn])
+        p.expectToken([TokenTypes.name])
+        p.skipWhitespaces()
+        p.expectToken([TokenTypes.braceR])
+
+        alternate = parseFragment(p)
+    } else if (punctToken) {
+        throw new Error(`unknown block ${nameToken1?.value}`)
+    }
+
+    if (!elseif) {
+        p.expectToken([TokenTypes.braceLSlash])
+        p.expectToken([TokenTypes.name])
+        const blockNameClose = p.value
+        p.skipWhitespaces()
+        p.expectToken([TokenTypes.braceR])
+
+        if (name !== blockNameClose) throw new Error('wrong closing tag')
+    }
+
+    return { type: 'IfBlock', elseif, test, consequent, alternate, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+function parseExpression(p) {
+    const node = parseExpressionAt(p.input, p.pos, { ecmaVersion: 'latest' })
+    p.pos = node.end
+    return node
+}
+
+function fragment(nodes) {
+    return { type: 'Fragment', nodes }
+}

package/src/parser/index.js

@@ -0,0 +1,10 @@
+import { Parser } from './parser.js'
+
+/**
+ * 
+ * @param {string} input 
+ * @returns 
+ */
+export function parse(input) {
+    return new Parser(input).parse()
+}

package/src/parser/parser.js

@@ -0,0 +1,259 @@
+import { parseRoot } from './root.js'
+
+/** @typedef {import('./tokentype.js').TokenType} TokenType */
+
+/**
+ * @typedef {Object} Token
+ * @property {TokenType} type
+ * @property {number} start
+ * @property {number} end
+ * @property {string} [value]
+ */
+
+/**
+ * * @member {string} input
+ */
+export class Parser {
+    constructor(input) {
+        this.input = input
+
+        this.start = 0
+        this.end = 0
+        this.pos = 0
+        this.type = undefined
+        this.value = undefined
+    }
+
+    parse() {
+        return parseRoot(this)
+    }
+
+    /**
+     *
+     * @param {Array<TokenType>} types
+     * @param {Token} [after]
+     * @returns {Token}
+     */
+    peakToken(types, after) {
+        for (const type of types) {
+            let token
+
+            if (type.charCodes) {
+                token = this.peakCharToken(type, after)
+            } else {
+                token = this.peakStringToken(type, after)
+            }
+
+            if (token) return token
+        }
+        return null
+    }
+
+    /**
+     *
+     * @param {Array<TokenType>} types
+     */
+    expectToken(types) {
+        for (const type of types) {
+            if (type.charCodes) {
+                if (this.readCharToken(type)) return
+            } else {
+                if (this.readStringToken(type)) return
+            }
+        }
+        throw new Error(`unexpected token ${this.input[this.pos]} at position ${this.pos}`)
+    }
+
+    /**
+     *
+     * @param {Array<TokenType>} types
+     * @returns boolean
+     */
+    readToken(types) {
+        for (const type of types) {
+            if (type.charCodes) {
+                if (this.readCharToken(type)) return true
+            } else {
+                if (this.readStringToken(type)) return true
+            }
+        }
+        return false
+    }
+
+    /**
+     *
+     * @param {TokenType} type
+     * @returns {boolean}
+     */
+    readStringToken(type) {
+        const start = this.pos
+        while (this.pos < this.input.length) {
+            if (!type.test(this.input.charCodeAt(this.pos))) break
+            this.pos++
+        }
+
+        if (this.pos !== start) {
+            this.type = type
+            this.start = start
+            this.end = this.pos
+            this.value = this.input.substring(this.start, this.end)
+            return true
+        }
+        return false
+    }
+
+    /**
+     *
+     * @param {TokenType} type
+     * @param {Token} after
+     * @returns {Token}
+     */
+    peakStringToken(type, after) {
+        if (after === null) return null
+
+        const start = after?.end ?? this.pos
+        let pos = start
+        while (pos < this.input.length) {
+            if (!type.test(this.input.charCodeAt(pos))) break
+            pos++
+        }
+
+        if (pos !== start) {
+            return {
+                type,
+                start,
+                end: pos,
+                value: this.input.substring(start, pos)
+            }
+        }
+        return null
+    }
+
+    /**
+     *
+     * @param {TokenType} type
+     * @returns {boolean}
+     */
+    readCharToken(type) {
+        if (this.isCharToken(type)) {
+            this.type = type
+            this.start = this.pos
+            this.pos += type.charCodes.length
+            this.end = this.pos
+            return true
+        }
+        return false
+    }
+
+    /**
+     *
+     * @param {TokenType} type
+     * @param {Token} [after]
+     * @returns {Token}
+     */
+    peakCharToken(type, after) {
+        if (after === null) return null
+
+        const pos = after?.end ?? this.pos
+        if (this.isCharToken(type, pos)) {
+            return {
+                type,
+                start: pos,
+                end: pos + type.charCodes.length
+            }
+        }
+        return null
+    }
+
+    /**
+     *
+     * @param {TokenType} type
+     * @param {number} [pos]
+     * @returns {boolean}
+     */
+    isCharToken(type, pos) {
+        assert(!!type.charCodes)
+
+        pos ??= this.pos
+        return (
+            this.input.charCodeAt(pos) === type.charCodes[0] &&
+            (type.charCodes[1] ? this.input.charCodeAt(pos + 1) === type.charCodes[1] : true) &&
+            (type.charCodes[2] ? this.input.charCodeAt(pos + 2) === type.charCodes[2] : true)
+        )
+    }
+
+    token() {
+        return {
+            type: this.type,
+            start: this.start,
+            end: this.end,
+            value: this.value
+        }
+    }
+
+    peakWhitespaces(after) {
+        if (after === null) return null
+
+        let pos = after?.end ?? this.pos
+        const start = pos
+
+        while (this.pos < this.input.length) {
+            const code = this.input.charCodeAt(pos)
+            if (code === 10 || code === 32) {
+                pos++
+                continue
+            }
+            break
+        }
+
+        if (pos !== start) {
+            return {
+                type: { label: 'whitespace' },
+                start,
+                end: pos
+            }
+        }
+        return null
+    }
+
+    skipWhitespaces() {
+        while (this.pos < this.input.length) {
+            const code = this.input.charCodeAt(this.pos)
+            if (code === 10 || code === 32) {
+                this.pos++
+                continue
+            }
+            break
+        }
+    }
+
+    raiseUnexpectedToken() {
+        throw new Error(`unexpected token ${this.input[this.pos]} at position ${this.pos}`)
+    }
+
+    isEOF() {
+        return this.pos === this.input.length
+    }
+}
+
+/**
+ *
+ * @param {number} code
+ * @returns {boolean}
+ */
+function isIdentifierChar(code) {
+    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
+}
+
+/**
+ *
+ * @param {boolean} test
+ */
+function assert(test) {
+    if (!test) throw new Error('assert error')
+}

package/src/parser/root.js

@@ -0,0 +1,33 @@
+import { Parser } from './parser.js'
+import { parseScript } from './script.js'
+import { parseTemplate } from './template.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ * @param {Parser} p
+ * @returns
+ */
+export function parseRoot(p) {
+    let script
+    let template
+
+    p.skipWhitespaces()
+    while (!p.isEOF()) {
+        const lteToken = p.peakToken([TokenTypes.lte])
+        const nameToken = p.peakToken([TokenTypes.name], lteToken)
+
+        switch (nameToken?.value) {
+            case 'script':
+                script = parseScript(p)
+                break
+            case 'template':
+                template = parseTemplate(p)
+                break
+            default:
+                throw new Error('unexpected html tag at position ' + p.pos)
+        }
+        p.skipWhitespaces()
+    }
+
+    return { type: 'Root', script, template }
+}

package/src/parser/script.js

@@ -0,0 +1,59 @@
+import { parse as parseJS } from 'acorn'
+import { TokenTypes } from './tokentype.js'
+import { Parser } from './parser.js'
+import { parseAttributes } from './attributes.js'
+/** @import {Program} from 'acorn' */
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseScript(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.lte])
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+    parseAttributes(p)
+    p.expectToken([TokenTypes.gte])
+
+    const content = parseProgram(p)
+
+    p.expectToken([TokenTypes.lteSlash])
+    p.expectToken([TokenTypes.name])
+    const tagNameClose = p.value
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.gte])
+
+    if (name !== tagNameClose) throw new Error('wrong closing tag')
+
+    return { type: 'Script', content, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ * @returns {Program}
+ */
+function parseProgram(p) {
+    const start = p.pos
+    skipCode(p)
+    return parseJS(p.input.slice(start, p.pos), { ecmaVersion: 'latest', sourceType: 'module' })
+}
+
+/**
+ *
+ * @param {Parser} p
+ */
+function skipCode(p) {
+    while (p.pos < p.input.length) {
+        if (
+            p.input.charCodeAt(p.pos) === 60 &&
+            p.input.charCodeAt(p.pos + 1) === 47 &&
+            p.input.substring(p.pos + 2, p.pos + 8) === 'script'
+        ) {
+            break
+        }
+        p.pos++
+    }
+}

package/src/parser/style.js

@@ -0,0 +1,57 @@
+import { parse } from 'css-tree'
+import { TokenTypes } from './tokentype.js'
+import { Parser } from './parser.js'
+
+/**
+ *
+ * @param {Parser} p
+ * @returns
+ */
+export function parseStyle(p) {
+    const start = p.pos
+    p.expectToken([TokenTypes.lte])
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.gte])
+
+    const content = parseCSS(p)
+
+    p.expectToken([TokenTypes.lteSlash])
+    p.expectToken([TokenTypes.name])
+    const tagNameClose = p.value
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.gte])
+
+    if (name !== tagNameClose) throw new Error('wrong closing tag')
+
+    return { type: 'Style', content, start, end: p.pos }
+}
+
+/**
+ *
+ * @param {Parser} p
+ */
+function parseCSS(p) {
+    const start = p.pos
+    skipCSS(p)
+    return parse(p.input.slice(start, p.pos))
+}
+
+/**
+ *
+ * @param {Parser} p
+ */
+function skipCSS(p) {
+    while (p.pos < p.input.length) {
+        if (
+            p.input.charCodeAt(p.pos) === 60 &&
+            p.input.charCodeAt(p.pos + 1) === 47 &&
+            p.input.substring(p.pos + 2, p.pos + 7) === 'style'
+        ) {
+            break
+        }
+        p.pos++
+    }
+}

package/src/parser/template.js

@@ -0,0 +1,30 @@
+import { parseAttributes } from './attributes.js'
+import { parseFragment } from './element.js'
+import { Parser } from './parser.js'
+import { TokenTypes } from './tokentype.js'
+
+/**
+ *
+ * @param {Parser} p
+ */
+export function parseTemplate(p) {
+    const start = p.pos
+
+    p.expectToken([TokenTypes.lte])
+    p.expectToken([TokenTypes.name])
+    const name = p.value
+    const attributes = parseAttributes(p)
+    p.expectToken([TokenTypes.gte])
+
+    const fragment = parseFragment(p, true, true)
+
+    p.expectToken([TokenTypes.lteSlash])
+    p.expectToken([TokenTypes.name])
+    const tagNameClose = p.value
+    p.skipWhitespaces()
+    p.expectToken([TokenTypes.gte])
+
+    if (name !== tagNameClose) throw new Error('wrong closing tag')
+
+    return { type: 'Template', attributes, fragment, start, end: p.pos }
+}

package/src/parser/tokentype.js

@@ -0,0 +1,75 @@
+/**
+ * @typedef {Object} TokenType
+ * @property {string} label
+ * @property {Array<number>} [charCodes]
+ * @property {(char: number) => boolean} [test]
+ */
+
+/**
+ *
+ * @param {string} label
+ * @param {Array<number>} charCodes
+ * @returns {TokenType}
+ */
+function charTT(label, charCodes) {
+    return { label, charCodes }
+}
+
+/**
+ *
+ * @param {string} label
+ * @param {(char: number) => boolean} test
+ * @returns {TokenType}
+ */
+function stringTT(label, test) {
+    return { label, test }
+}
+
+export const TokenTypes = {
+    name: stringTT('name', name),
+    text: stringTT('text', text),
+
+    // html punctuation
+    lte: charTT('<', [60]),
+    gte: charTT('>', [62]),
+    slashGte: charTT('/>', [47, 62]),
+    lteSlash: charTT('</', [60, 47]),
+    eq: charTT('=', [61]),
+    quote: charTT('\'', [39]),
+    doubleQuote: charTT('"', [34]),
+
+    // block punctuation
+    quoteBraceL: charTT('\'{', [39, 123]),
+    doubleQuoteBraceL: charTT('"{', [34, 123]),
+    braceRQuote: charTT('}\'', [125, 39]),
+    braceRDoubleQuote: charTT('}"', [125, 34]),
+    braceL: charTT('{', [123]),
+    braceR: charTT('}', [125]),
+    braceLHash: charTT('{#', [123, 35]),
+    braceLColumn: charTT('{:', [123, 58]),
+    braceLSlash: charTT('{/', [123, 47]),
+    parenthesesL: charTT('(', [40]),
+    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
+}
+
+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
+}

package/src/router/html.js

@@ -0,0 +1,18 @@
+export function compileHtmlIndex(source, context) {
+    const template = '`' + source.replace('%katabatic.body%', '${slot.body}') + '`'
+
+    return {
+        ...context,
+        ...printIndex({ template })
+    }
+}
+
+function printIndex({ template }) {
+    return {
+        code: `
+export function renderIndex(slot) {
+    return ${template}
+}
+    `
+    }
+}