@katabatic/compiler 1.1.0 → 1.1.2

package/package.json

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

package/src/builders.js

@@ -648,72 +648,6 @@ 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) {
-    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
-            },
-            computed: false,
-            optional: false
-        },
-        arguments: [object, { type: 'Literal', value }, arg],
-        optional: false
-    }
-}
-
 export function createElement(value) {
     return {
         type: 'CallExpression',

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/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/index.js

@@ -19,6 +19,7 @@ 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,
@@ -34,6 +35,7 @@ const templateVisitors = {
     IfBlock,
     EachBlock,
     Selector,
+    TypeSelector,
     ...CssTree
 }
 

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/Program.js

@@ -18,9 +18,8 @@ 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

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 }
+    }
+}