@katabatic/compiler 1.1.1 → 1.1.3

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@katabatic/compiler",
   "license": "MIT",
-  "version": "1.1.1",
+  "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

@@ -648,79 +648,28 @@ export function $instrument(value) {
     }
 }
 
-export function $getBindingProp(object, value, body) {
-    return {
-        type: 'CallExpression',
-        callee: {
-            type: 'MemberExpression',
-            object: { type: 'ThisExpression' },
-            property: {
-                type: 'MemberExpression',
-                object: {
-                    type: 'Identifier',
-                    name: '$'
-                },
-                property: {
-                    type: 'Identifier',
-                    name: 'getBindingProp'
-                },
-                computed: false,
-                optional: false
-            },
-            computed: false,
-            optional: false
-        },
-        arguments: [
-            object,
-            { type: 'Literal', value },
-            {
-                type: 'ArrowFunctionExpression',
-                id: null,
-                expression: false,
-                generator: false,
-                async: false,
-                params: [{ type: 'Identifier', name: 'v' }],
-                body
-            }
-        ],
-        optional: false
-    }
-}
-
-export function $setBindingProp(object, value, arg) {
+export function createElement(value) {
     return {
         type: 'CallExpression',
         callee: {
             type: 'MemberExpression',
-            object: { type: 'ThisExpression' },
-            property: {
-                type: 'MemberExpression',
-                object: {
-                    type: 'Identifier',
-                    name: '$'
-                },
-                property: {
-                    type: 'Identifier',
-                    name: 'setBindingProp'
-                },
-                computed: false,
-                optional: false
-            },
+            object: { type: 'Identifier', name: 'document' },
+            property: { type: 'Identifier', name: 'createElement' },
             computed: false,
             optional: false
         },
-        arguments: [object, { type: 'Literal', value }, arg],
+        arguments: [{ type: 'Literal', value }],
         optional: false
     }
 }
 
-export function createElement(value) {
+export function createComment(value = '') {
     return {
         type: 'CallExpression',
         callee: {
             type: 'MemberExpression',
             object: { type: 'Identifier', name: 'document' },
-            property: { type: 'Identifier', name: 'createElement' },
+            property: { type: 'Identifier', name: 'createComment' },
             computed: false,
             optional: false
         },
@@ -862,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/Attribute.js

@@ -52,21 +52,14 @@ export function Attribute(node, ctx) {
             ])
             ctx.state.effects.push(stmt)
         } else if (bindingId) {
-            const stmt = b.$effect([
-                b.logical(
-                    '||',
-                    b.$setBindingProp(bindingId, node.name, template.expressions[0]),
-                    b.setAttribute(elementId, b.literal(node.name), template.expressions[0])
-                )
+            const stmt1 = b.$effect([
+                b.assignment(b.member(bindingId, node.name), template.expressions[0])
+            ])
+            const stmt2 = b.$effect([
+                b.assignment(template.expressions[0], b.member(bindingId, node.name))
             ])
-            ctx.state.effects.push(stmt)
 
-            const stmt2 = b.$getBindingProp(
-                bindingId,
-                node.name,
-                b.assignment(template.expressions[0], b.id('v'))
-            )
-            ctx.state.changed.push(stmt2)
+            ctx.state.effects.push(stmt1, stmt2)
         } else {
             const stmt = b.$effect([
                 b.setAttribute(elementId, b.literal(node.name), template.expressions[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 }
 }