@katabatic/compiler 1.0.0 → 1.1.1

package/package.json

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

package/src/builders.js

@@ -179,7 +179,7 @@ export function thisExp() {
     return { type: 'ThisExpression' }
 }
 
-export function exportDec(declaration) {
+export function exp(declaration) {
     return { type: 'ExportNamedDeclaration', declaration }
 }
 
@@ -192,6 +192,10 @@ export function program(body = []) {
 }
 
 export function func(id, body = []) {
+    if (typeof id === 'string') {
+        id = { type: 'Identifier', name: id }
+    }
+
     return {
         type: 'FunctionDeclaration',
         id,
@@ -532,28 +536,6 @@ export function $name(object) {
     }
 }
 
-export function $nameDecl(value) {
-    return {
-        type: 'ExportNamedDeclaration',
-        declaration: {
-            type: 'VariableDeclaration',
-            declarations: [
-                {
-                    type: 'VariableDeclarator',
-                    id: {
-                        type: 'Identifier',
-                        name: '$name'
-                    },
-                    init: { type: 'Literal', value }
-                }
-            ],
-            kind: 'const'
-        },
-        specifiers: [],
-        source: null
-    }
-}
-
 export function $set(object, nodeId, attribute, value) {
     return {
         type: 'CallExpression',
@@ -933,54 +915,6 @@ export function appendChild(object, node) {
     }
 }
 
-export function queueMicrotask(body) {
-    return {
-        type: 'ExpressionStatement',
-        expression: {
-            type: 'CallExpression',
-            callee: { type: 'Identifier', name: 'queueMicrotask' },
-            arguments: [
-                {
-                    type: 'ArrowFunctionExpression',
-                    id: null,
-                    expression: false,
-                    generator: false,
-                    async: false,
-                    params: [],
-                    body: {
-                        type: 'BlockStatement',
-                        body
-                    }
-                }
-            ],
-            optional: false
-        }
-    }
-}
-
-export function connectedMoveCallback() {
-    return {
-        type: 'ExpressionStatement',
-        expression: {
-            type: 'CallExpression',
-            callee: {
-                type: 'MemberExpression',
-                object: {
-                    type: 'ThisExpression'
-                },
-                property: {
-                    type: 'Identifier',
-                    name: 'connectedMoveCallback'
-                },
-                computed: false,
-                optional: false
-            },
-            arguments: [],
-            optional: true
-        }
-    }
-}
-
 export function $dispose() {
     return {
         type: 'CallExpression',
@@ -1010,7 +944,7 @@ export function $dispose() {
     }
 }
 
-export function $lifecycle(value) {
+export function $lifecycle(value, body) {
     return {
         type: 'CallExpression',
         callee: {
@@ -1034,7 +968,21 @@ export function $lifecycle(value) {
             computed: false,
             optional: false
         },
-        arguments: [{ type: 'Literal', value }],
+        arguments: [
+            { type: 'Literal', value },
+            {
+                type: 'ArrowFunctionExpression',
+                id: null,
+                expression: false,
+                generator: false,
+                async: false,
+                params: [],
+                body: {
+                    type: 'BlockStatement',
+                    body
+                }
+            }
+        ],
         optional: false
     }
 }

package/src/checkers.js

@@ -6,6 +6,30 @@ export function thisMember(node) {
     return node.type === 'MemberExpression' && node.object.type === 'ThisExpression'
 }
 
+export function thisAssignment(node) {
+    if (node.type === 'ExpressionStatement') {
+        node = node.expression
+    }
+
+    return (
+        node.type === 'AssignmentExpression' &&
+        node.left.type === 'MemberExpression' &&
+        node.left.object.type === 'ThisExpression'
+    )
+}
+
+export function expression(node) {
+    return node.type === 'ExpressionStatement'
+}
+
+export function superCall(node) {
+    if (node.type === 'ExpressionStatement') {
+        node = node.expression
+    }
+
+    return node.type === 'CallExpression' && node.callee.type === 'Super'
+}
+
 export function privateId(node) {
     return node.type === 'PrivateIdentifier'
 }
@@ -117,4 +141,4 @@ export function shadowRootModeAttribute(node) {
 
 export function ifBlock(node) {
     return node.type === 'IfBlock'
-}
+}

package/src/css-matcher.js

@@ -36,65 +36,69 @@ function matchSelectors(selectors, template) {
     if (selectors.length === 0) return false
 
     let result = false
-    walk(template, undefined, {
-        Element: (node, ctx) => {
-            ctx.next()
 
-            let scopedIdAttribute
-            let scopedClassAttribute
-            let scopedElement
+    function Visitor(node, ctx) {
+        ctx.next()
+
+        let scopedIdAttribute
+        let scopedClassAttribute
+        let scopedElement
 
-            let classAttribute
+        let classAttribute
 
-            for (const selector of selectors) {
-                switch (selector.type) {
-                    case 'TypeSelector':
-                        if (selector.name === node.name) {
-                            classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                            scopedElement = node
-                            scopedClassAttribute = classAttribute
-                            break
-                        }
-                        return
-                    case 'PseudoClassSelector':
+        for (const selector of selectors) {
+            switch (selector.type) {
+                case 'TypeSelector':
+                    if (selector.name === node.name) {
                         classAttribute ??= node.attributes.find((a) => a.name === 'class')
                         scopedElement = node
                         scopedClassAttribute = classAttribute
                         break
-                    case 'IdSelector':
-                        const idAttribute = node.attributes.find((a) => a.name === 'id')
-                        if (idAttribute?.value[0].data === selector.name) {
-                            scopedIdAttribute = idAttribute
-                            break
-                        }
-                        return
-                    case 'ClassSelector':
-                        classAttribute ??= node.attributes.find((a) => a.name === 'class')
-                        const classes = classAttribute?.value[0].data.split(/\s+/)
-
-                        if (classes?.includes(selector.name)) {
-                            scopedClassAttribute = classAttribute
-                            break
-                        }
-                        return
-                }
-            }
+                    }
+                    return
+                case 'PseudoClassSelector':
+                    classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                    scopedElement = node
+                    scopedClassAttribute = classAttribute
+                    break
+                case 'IdSelector':
+                    const idAttribute = node.attributes.find((a) => a.name === 'id')
+                    if (idAttribute?.value[0].data === selector.name) {
+                        scopedIdAttribute = idAttribute
+                        break
+                    }
+                    return
+                case 'ClassSelector':
+                    classAttribute ??= node.attributes.find((a) => a.name === 'class')
+                    const classes = classAttribute?.value[0].data.split(/\s+/)
 
-            if (scopedIdAttribute) {
-                scopedIdAttribute.metadata ??= {}
-                scopedIdAttribute.metadata.isScoped = true
-            }
-            if (scopedClassAttribute) {
-                scopedClassAttribute.metadata ??= {}
-                scopedClassAttribute.metadata.isScoped = true
-            }
-            if (scopedElement) {
-                scopedElement.metadata ??= {}
-                scopedElement.metadata.isScoped = true
+                    if (classes?.includes(selector.name)) {
+                        scopedClassAttribute = classAttribute
+                        break
+                    }
+                    return
             }
+        }
 
-            result = true
+        if (scopedIdAttribute) {
+            scopedIdAttribute.metadata ??= {}
+            scopedIdAttribute.metadata.isScoped = true
+        }
+        if (scopedClassAttribute) {
+            scopedClassAttribute.metadata ??= {}
+            scopedClassAttribute.metadata.isScoped = true
+        }
+        if (scopedElement) {
+            scopedElement.metadata ??= {}
+            scopedElement.metadata.isScoped = true
         }
+
+        result = true
+    }
+
+    walk(template, undefined, {
+        Element: Visitor,
+        CustomElement: Visitor
     })
     return result
 }

package/src/hot.js

@@ -0,0 +1,37 @@
+import { walk } from 'zimmerframe'
+import * as b from './builders.js'
+import * as is from './checkers.js'
+
+export function $hot(program) {
+    const stmts1 = []
+    const stmts2 = []
+
+    walk(program, undefined, {
+        PropertyDefinition: (node) => {
+            if (!node.static) {
+                const stmt = b.assignment(b.thisMember(node.key), node.value, '??=')
+                stmts1.push(stmt)
+            }
+        },
+        MethodDefinition: (node) => {
+            if (node.key.name === 'constructor') {
+                for (let _node of node.value.body.body) {
+                    if (is.superCall(_node)) {
+                        continue
+                    }
+
+                    if (is.thisAssignment(_node)) {
+                        _node = is.expression(_node) ? _node.expression : _node
+
+                        const stmt = { ..._node, operator: '??=' }
+                        stmts2.push(stmt)
+                        continue
+                    }
+                    stmts2.push(_node)
+                }
+            }
+        }
+    })
+
+    return b.exp(b.func('$hot', [...stmts1, ...stmts2]))
+}

package/src/module-matcher.js

@@ -11,7 +11,29 @@ export function matchModule(name, index, template) {
 
                 result = true
             }
-        }
+        },
+        TypeSelector: (node, ctx) => {
+            if (node.name === name) {
+                node.metadata ??= {}
+                node.metadata.isModule = true
+                node.metadata.index = index
+
+                result = true
+            }
+        },
+        ...CssTree
     })
     return result
 }
+
+export const CssTree = {
+    StyleSheet: CssTreeNodeFix,
+    SelectorList: CssTreeNodeFix,
+    Selector: CssTreeNodeFix,
+    PseudoClassSelector: CssTreeNodeFix
+}
+
+function CssTreeNodeFix(node, ctx) {
+    const children = node.children?.map((c) => ctx.visit(c)) ?? null
+    return { ...node, children }
+}

package/src/transform/context.js

@@ -28,8 +28,6 @@ export function pathStmt(ctx, nodes) {
         subPath.push(...(Array.isArray(nodes) ? nodes : [nodes]))
     }
 
-console.log(subPath)
-
     let stmt = b.member('template', 'content')
     let fragment
     for (const node of subPath) {

package/src/transform/index.js

@@ -18,6 +18,8 @@ import { EachBlock } from './visitors/EachBlock.js'
 import { CustomElement } from './visitors/CustomElement.js'
 import { AssignmentExpression } from './visitors/AssignmentExpression.js'
 import { PropertyDefinition } from './visitors/PropertyDefinition.js'
+import { PrivateIdentifier } from './visitors/PrivateIdentifier.js'
+import { TypeSelector } from './visitors/TypeSelector.js'
 
 const templateVisitors = {
     Template,
@@ -33,6 +35,7 @@ const templateVisitors = {
     IfBlock,
     EachBlock,
     Selector,
+    TypeSelector,
     ...CssTree
 }
 
@@ -43,7 +46,8 @@ const scriptVisitors = {
     ImportDeclaration,
     CallExpression,
     AssignmentExpression,
-    PropertyDefinition
+    PropertyDefinition,
+    PrivateIdentifier
 }
 
 export function transform(ast, analysis, context) {

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

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

package/src/transform/visitors/AssignmentExpression.js

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

package/src/transform/visitors/CallExpression.js

@@ -2,7 +2,7 @@ import * as b from '../../builders.js'
 import { transformQuerySelector } from '../../css-transform.js'
 
 export function CallExpression(node, ctx) {
-    ctx.next()
+    node = ctx.next() ?? node
 
     if (node.metadata?.isGetElementById && node.metadata?.isScoped) {
         const id = node.arguments[0].value

package/src/transform/visitors/ClassBody.js

@@ -30,7 +30,7 @@ export function ClassBody(node, ctx) {
         stmts2.push(stmt)
     }
 
-    if (stmts2.length >= 0) {
+    if (stmts1.length >= 0 || stmts2.length >= 0) {
         return { ...node, body: [...stmts1, ...node.body, ...stmts2] }
     }
 }

package/src/transform/visitors/Element.js

@@ -14,7 +14,6 @@ export function Element(node, ctx) {
     function getElementId() {
         if (!elementId) {
             elementId = nextElementId(ctx)
-            console.log('ELEM')
             const stmt = b.declaration(elementId, pathStmt(ctx))
             ctx.state.init.elem.push(stmt)
         }

package/src/transform/visitors/Fragment.js

@@ -11,7 +11,7 @@ export function Fragment(node, ctx) {
             case 'Text':
             case 'ExpressionTag':
                 textNode = child
-                ctx.visit(child, { template, analysis: ctx.state.analysis })
+                ctx.visit(child, { ...ctx.state, template })
                 break
             default:
                 finalize()

package/src/transform/visitors/Identifier.js

@@ -1,10 +1,13 @@
 import * as b from '../../builders.js'
 
-export function Identifier(node) {
+export function Identifier(node, ctx) {
     if (node.metadata?.isBlockVar) {
         return b.call(node)
     }
     if (node.metadata?.isProperty || node.metadata?.isMethod) {
+        if (ctx.state.context.hot) {
+            return b.thisMember(node.metadata?.isPrivate ? b.id(`___${node.name}`) : node)
+        }
         return b.thisMember(b.id(node, node.metadata?.isPrivate))
     }
 }

package/src/transform/visitors/MethodDefinition.js

@@ -35,17 +35,13 @@ export function MethodDefinition(node, ctx) {
         const stmts1 = []
         const stmts2 = []
         if (shadowRootMode) {
-            stmts1.push(b.assignment(b.shadow(), b.attachShadow(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
-        ])
+
+        const stmt = b.$lifecycle('connected', [...stmts1, ctx.state.template.block, ...stmts2])
 
         return {
             ...node,
@@ -60,14 +56,7 @@ export function MethodDefinition(node, ctx) {
     }
 
     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()]
-            )
-        ])
+        const stmt = b.$lifecycle('disconnected', [b.$dispose(), ...node.value.body.body])
 
         return {
             ...node,
@@ -75,7 +64,7 @@ export function MethodDefinition(node, ctx) {
                 ...node.value,
                 body: {
                     ...node.value.body,
-                    body: [stmt1, stmt2]
+                    body: [stmt]
                 }
             }
         }

package/src/transform/visitors/PrivateIdentifier.js

@@ -0,0 +1,7 @@
+import * as b from '../../builders.js'
+
+export function PrivateIdentifier(node, ctx) {
+    if (ctx.state.context.hot) {
+        return b.id(`___${node.name}`)
+    }
+}

package/src/transform/visitors/Program.js

@@ -1,4 +1,5 @@
 import * as b from '../../builders.js'
+import { $hot } from '../../hot.js'
 
 export function Program(node, ctx) {
     node = ctx.next() ?? node
@@ -17,13 +18,27 @@ export function Program(node, ctx) {
     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))
+    const style = ctx.state.template.style
+    stmt = b.declaration('STYLE', b.template(style))
     stmts1.push(stmt)
 
     // $name
-    stmt = b.$nameDecl(node.metadata?.customElement.name ?? ctx.state.context.customElementName)
+    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)
+
+    // $shadowRootMode
+    stmt = b.exp(
+        b.declaration('$shadowRootMode', b.literal(ctx.state.template.metadata?.shadowRootMode))
+    )
     stmts1.push(stmt)
 
     // $set
@@ -44,6 +59,11 @@ export function Program(node, ctx) {
     }
     stmts1.push(stmt)
 
+    //$hot
+    if (ctx.state.context.hot) {
+        stmts1.push($hot(node))
+    }
+
     // defineCustomElement
     if (!node.metadata?.hasDefineCustomElement) {
         stmt = b.defineCustomElement(

package/src/transform/visitors/PropertyDefinition.js

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

package/src/transform/visitors/Style.js

@@ -1,11 +1,20 @@
 import { generate } from 'css-tree'
-import { appendText } from '../../utils/template.js'
+import * as b from '../../builders.js'
+import { appendExpression, appendText } from '../../utils/template.js'
 
 export function Style(node, ctx) {
     node = ctx.next() ?? node
 
     const css = generate(node.content)
+    const style = css.length > 0 ? `<style>${css}</style>` : ''
+
+    // handle modules
+    const tokens = style.split(/(\$Module_\d+)/)
+    for (const token of tokens) {
+        token.startsWith('$Module_')
+            ? appendExpression(ctx.state.style, b.$name(token))
+            : appendText(ctx.state.style, token)
+    }
 
-    ctx.state.css.push(css)
     appendText(ctx.state.template, '<!-- -->')
 }

package/src/transform/visitors/Template.js

@@ -1,7 +1,7 @@
 import * as b from '../../builders.js'
 
 export function Template(node, ctx) {
-    const css = []
+    const style = { text: [''], expressions: [] }
     const template = { text: [''], expressions: [] }
     const init = { elem: [], text: [], binding: [] }
     const effects = []
@@ -11,7 +11,7 @@ export function Template(node, ctx) {
 
     ctx.visit(node.fragment, {
         ...ctx.state,
-        css,
+        style,
         template,
         init,
         effects,
@@ -40,5 +40,5 @@ export function Template(node, ctx) {
     const bodyStmt = [...stmts1, ...stmts2, stmt3]
     const block = b.$block(bodyStmt)
 
-    return { type: 'TemplateMod', metadata: node.metadata, css, template, block }
+    return { type: 'TemplateMod', metadata: node.metadata, style, template, block }
 }

package/src/transform/visitors/TypeSelector.js

@@ -0,0 +1,6 @@
+export function TypeSelector(node) {
+    if (node.metadata?.isModule) {
+        const name = `$Module_${node.metadata.index + 1}`
+        return { ...node, name }
+    }
+}