@katabatic/compiler 1.0.0 → 1.1.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "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/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/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,7 @@ 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'
 
 const templateVisitors = {
     Template,
@@ -43,7 +44,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
@@ -23,7 +24,22 @@ export function Program(node, ctx) {
     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 +60,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()) }
     }