@katabatic/compiler 1.1.2 → 1.1.3

package/package.json

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

package/src/analyse/visitors/CallExpression.js

@@ -30,7 +30,13 @@ export function CallExpression(node, ctx) {
     }
 
     if (is.defineCustomElement(node)) {
+        const template = getTemplate(ctx)
         const name = node.arguments[0].value
+
+        template.metadata ??= {}
+        template.metadata.customElementName = name
+
         ctx.state.customElement.name = name
+        return
     }
 }

package/src/analyse/visitors/IfBlock.js

@@ -8,8 +8,8 @@ export function IfBlock(node, ctx) {
     const program = getProgram(ctx)
     const blocks = getBlocks(ctx)
     matchExpression(node.test, program, blocks)
-    
-    const hasElseif = node.alternate?.nodes.some(is.ifBlock) ?? false
+
+    const hasElseif =  node.alternate?.nodes.some(is.elseIfBlock) ?? false
 
     node.metadata ??= {}
     node.metadata.hasElseif = hasElseif

package/src/builders.js

@@ -663,6 +663,21 @@ export function createElement(value) {
     }
 }
 
+export function createComment(value = '') {
+    return {
+        type: 'CallExpression',
+        callee: {
+            type: 'MemberExpression',
+            object: { type: 'Identifier', name: 'document' },
+            property: { type: 'Identifier', name: 'createComment' },
+            computed: false,
+            optional: false
+        },
+        arguments: [{ type: 'Literal', value }],
+        optional: false
+    }
+}
+
 export function $() {
     return {
         type: 'MemberExpression',
@@ -796,31 +811,28 @@ export function insertBefore(node, insertNode) {
     }
 
     return {
-        type: 'ExpressionStatement',
-        expression: {
-            type: 'CallExpression',
-            callee: {
+        type: 'CallExpression',
+        callee: {
+            type: 'MemberExpression',
+            object: {
                 type: 'MemberExpression',
-                object: {
-                    type: 'MemberExpression',
-                    object: node,
-                    property: {
-                        type: 'Identifier',
-                        name: 'parentNode'
-                    },
-                    computed: false,
-                    optional: false
-                },
+                object: node,
                 property: {
                     type: 'Identifier',
-                    name: 'insertBefore'
+                    name: 'parentNode'
                 },
                 computed: false,
                 optional: false
             },
-            arguments: [insertNode, node],
+            property: {
+                type: 'Identifier',
+                name: 'insertBefore'
+            },
+            computed: false,
             optional: false
-        }
+        },
+        arguments: [insertNode, node],
+        optional: false
     }
 }
 

package/src/checkers.js

@@ -139,6 +139,6 @@ export function shadowRootModeAttribute(node) {
     return node.type === 'Attribute' && node.name === 'shadowRootMode'
 }
 
-export function ifBlock(node) {
-    return node.type === 'IfBlock'
+export function elseIfBlock(node) {
+    return node.type === 'IfBlock' && node.elseif
 }

package/src/transform/context.js

@@ -70,3 +70,7 @@ function position(fragment, node) {
 export function getProgram(ctx) {
     return ctx.path[0]
 }
+
+export function getTemplate(ctx) {
+    return ctx.path[0]
+}

package/src/transform/visitors/IfBlock.js

@@ -32,7 +32,7 @@ export function IfBlock(node, ctx) {
 
                 return [...stmts1, ...stmts2, stmt3]
             }
-            return blocks
+            return [...init.elem, ...blocks]
         }
     }
 
@@ -49,7 +49,11 @@ export function IfBlock(node, ctx) {
         ctx.state.blocks.push(blockStmt)
         appendText(ctx.state.template, '<!-- -->')
     } else {
-        const blockStmt = b.ifBlock(b.id('anchor'), testStmt, consequentStmt, alternateStmt)
+        const anchorId = nextElementId(ctx)
+        const anchorStmt = b.declaration(anchorId, b.insertBefore('anchor', b.createComment()))
+        const blockStmt = b.ifBlock(anchorId, testStmt, consequentStmt, alternateStmt)
+
+        ctx.state.init.elem.push(anchorStmt)
         ctx.state.blocks.push(blockStmt)
     }
 }

package/src/transform/visitors/Selector.js

@@ -1,4 +1,5 @@
 import * as b from '../../builders.js'
+import { getTemplate } from '../context.js'
 
 export function Selector(node, ctx) {
     node = CssTreeNodeFix(node, ctx)
@@ -11,6 +12,22 @@ export function Selector(node, ctx) {
                 scope()
                 children.push(child)
                 break
+            case 'PseudoClassSelector':
+                if (child.name === 'host') {
+                    const template = getTemplate(ctx)
+
+                    if (!template.metadata?.shadowRootMode) {
+                        children.push({
+                            type: 'TypeSelector',
+                            name:
+                                template.metadata?.customElementName ??
+                                ctx.state.context.customElementName
+                        })
+                    } else {
+                        children.push(child)
+                    }
+                    break
+                }
             default:
                 unscoped.push(child)
                 break
@@ -35,7 +52,7 @@ export const CssTree = {
     PseudoClassSelector: CssTreeNodeFix
 }
 
-function CssTreeNodeFix(node, ctx) {
+export function CssTreeNodeFix(node, ctx) {
     const children = node.children?.map((c) => ctx.visit(c)) ?? null
     return { ...node, children }
 }