From 5996fe6cae992cf149b2c86ef86c58a33c209c37 Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:24:09 +0100
Subject: [PATCH 1/6] fixed eslint quoting issue

---
 .eslintrc.json | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 7d45d78..74d71e0 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -38,7 +38,10 @@
     ],
     "quotes": [
       "error",
-      "single"
+      "single",
+      {
+        "avoidEscape": true
+      }
     ],
     "semi": [
       "error",
@@ -60,9 +63,14 @@
   },
   "overrides": [
     {
-      "files": ["*.js"],
+      "files": [
+        "*.js"
+      ],
       "rules": {
-        "semi": ["error", "never"]
+        "semi": [
+          "error",
+          "never"
+        ]
       }
     }
   ]

From 8304251375a04ff7f3e04d2ed0a5abdcfca8b288 Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:25:18 +0100
Subject: [PATCH 2/6] some cleanup and formatting

---
 src/completionItems/elementProps.js           | 21 ++++---------------
 src/completionProviders/templateAttributes.js |  1 -
 2 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/completionItems/elementProps.js b/src/completionItems/elementProps.js
index 3003a13..c12747e 100644
--- a/src/completionItems/elementProps.js
+++ b/src/completionItems/elementProps.js
@@ -27,10 +27,7 @@ let elementPropsParsed = false
 const parseProps = async () => {
   // get element/renderer props from Blits codebase
   const projectRootPath = vscode.workspace.workspaceFolders[0].uri.fsPath
-  const blitsElementJsPath = path.join(
-    projectRootPath,
-    'node_modules/@lightningjs/blits/src/engines/L3/element.js'
-  )
+  const blitsElementJsPath = path.join(projectRootPath, 'node_modules/@lightningjs/blits/src/engines/L3/element.js')
   let code = ''
   try {
     const fileExists = await fs.pathExists(blitsElementJsPath)
@@ -56,17 +53,10 @@ const parseProps = async () => {
   traverse(ast, {
     VariableDeclarator({ node }) {
       // Check if the variable declarator is for 'propsTransformer'
-      if (
-        node.id.name === 'propsTransformer' &&
-        node.init.type === 'ObjectExpression'
-      ) {
+      if (node.id.name === 'propsTransformer' && node.init.type === 'ObjectExpression') {
         // Traverse properties of the 'propsTransformer' object
         node.init.properties.forEach((property) => {
-          if (
-            property.type === 'ObjectMethod' &&
-            property.kind === 'set' &&
-            property.key.type === 'Identifier'
-          ) {
+          if (property.type === 'ObjectMethod' && property.kind === 'set' && property.key.type === 'Identifier') {
             // Extract the name of the setter method
             elementProps.push(property.key.name)
           }
@@ -95,10 +85,7 @@ const suggest = async (attributes) => {
   let completionItems = []
   elementProps.forEach((prop) => {
     if (!attributes.includes(prop)) {
-      const completionItem = new vscode.CompletionItem(
-        prop,
-        vscode.CompletionItemKind.Property
-      )
+      const completionItem = new vscode.CompletionItem(prop, vscode.CompletionItemKind.Property)
       completionItem.insertText = new vscode.SnippetString(`${prop}="$0"`)
       completionItems.push(completionItem)
     }
diff --git a/src/completionProviders/templateAttributes.js b/src/completionProviders/templateAttributes.js
index 677c079..62ac172 100644
--- a/src/completionProviders/templateAttributes.js
+++ b/src/completionProviders/templateAttributes.js
@@ -30,7 +30,6 @@ const getCompletionItems = async (document, currentDoc, position, isBlits) => {
   }
 
   if (isCursorInsideTemplate) {
-    console.log('Cursor inside template')
     const currentLine = document.lineAt(position).text
     const { tagName, attributes } = templateHelper.getExistingTagAndAttributes(currentLine)
 

From 53a100bc537a28fd4623a8c39f77922e28de9491 Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:26:18 +0100
Subject: [PATCH 3/6] fixes auto formatting bugs

---
 src/formatters/templateFormatterOnSave.js | 63 +++++++++++++++++++----
 src/helpers/template.js                   | 53 ++++++++++++-------
 2 files changed, 89 insertions(+), 27 deletions(-)

diff --git a/src/formatters/templateFormatterOnSave.js b/src/formatters/templateFormatterOnSave.js
index f24ba9b..62771a8 100644
--- a/src/formatters/templateFormatterOnSave.js
+++ b/src/formatters/templateFormatterOnSave.js
@@ -45,20 +45,35 @@ function getAutoFormatConfig() {
 
 function formatTemplate(template, parser, extraIndentation = '') {
   const config = getAutoFormatConfig()
-  template.replace(/^\s+(?=\S)/gm, '')
+
+  if (extraIndentation.length > 0) {
+    const regex = new RegExp('^' + extraIndentation, 'gm')
+    template = template.replace(regex, '')
+  }
+
+  // preserve user-defined trailing whitespace
+  const trailingWhiteSpace = getTrailingWhiteSpace(template)
 
   // process multiline comments
   template = modifyComments(template)
   let formattedTemplate = prettier.format(template, { parser, ...config })
 
   if (extraIndentation) {
-    formattedTemplate = extraIndentation + formattedTemplate.replace(/\n/g, `\n${extraIndentation}`)
+    formattedTemplate = formattedTemplate.replace(/^/gm, extraIndentation)
   }
 
+  // clean any auto generated trailing white space (respect user's choice here)
   formattedTemplate = formattedTemplate.trimEnd()
+  formattedTemplate += trailingWhiteSpace
+
   return formattedTemplate
 }
 
+function formatScript(script, parser) {
+  const config = getAutoFormatConfig()
+  return '\n\n' + prettier.format(script, { parser, ...config })
+}
+
 function modifyComments(str) {
   const regex = /(\s*)<!--[\s\S]*?-->/g
 
@@ -102,20 +117,50 @@ function formatJS(document, currentDoc, fileExtension) {
   })
 }
 
-function formatBlits(document, currentDoc) {
+const formatBlits = (document, currentDoc) => {
   const blitsFileObject = templateHelper.getBlitsFileWithoutLicense(currentDoc)
 
-  if (blitsFileObject) {
-    const { start, end, content } = blitsFileObject
+  const edits = []
+
+  if (blitsFileObject.template) {
+    const { start, end, content } = blitsFileObject.template
+    try {
+      const formattedTemplate = formatTemplate(content, 'angular')
+      edits.push(createEdit(document, start, end, formattedTemplate))
+    } catch (err) {
+      console.log('Blits: error formatting template', err)
+    }
+  }
+
+  if (blitsFileObject.script) {
+    const { start, end, content, lang } = blitsFileObject.script
     try {
-      const formattedTemplate = formatTemplate(content, 'vue')
-      return [createEdit(document, start, end, formattedTemplate)]
+      const formattedScript = formatScript(content, lang === 'ts' ? 'typescript' : 'babel') //js uses babel parser
+      edits.push(createEdit(document, start, end, formattedScript))
     } catch (err) {
-      console.log('Blits: error formatting', err)
+      console.log('Blits: error formatting script', err)
     }
   }
 
-  return []
+  return edits
+}
+
+// keeps the user's trailing whitespace choice
+function getTrailingWhiteSpace(text) {
+  const trailingWhitespaceMatch = text.match(/(\s*)$/)
+
+  if (!trailingWhitespaceMatch) {
+    return ''
+  }
+
+  const trailingWhitespace = trailingWhitespaceMatch[0]
+  const hasNewLine = trailingWhitespace.includes('\n')
+
+  if (!hasNewLine) {
+    return ''
+  } else {
+    return '\n  '
+  }
 }
 
 module.exports = vscode.workspace.onWillSaveTextDocument((event) => {
diff --git a/src/helpers/template.js b/src/helpers/template.js
index 40bc665..a879451 100644
--- a/src/helpers/template.js
+++ b/src/helpers/template.js
@@ -212,26 +212,44 @@ const getTemplateTextForBlits = (document, text, includeTemplateTags = false) =>
 const getBlitsFileWithoutLicense = (text) => {
   // Regular expression to match a block comment at the start of the file
   const licenseRegex = /^\s*\/\*[\s\S]*?\*\/\s*/
-
   const match = text.match(licenseRegex)
 
-  if (match) {
-    const licenseEnd = match[0].length
-    const contentWithoutLicense = text.slice(licenseEnd).trim()
+  const licenseEnd = match ? match[0].length : 0
+  const contentWithoutLicense = text.slice(licenseEnd).trim()
 
-    return {
-      content: contentWithoutLicense,
-      start: licenseEnd,
-      end: text.length,
+  const result = {}
+
+  // Extract template part
+  const templateRegex = /<template>([\s\S]*?)<\/template>/
+  const templateMatch = contentWithoutLicense.match(templateRegex)
+  if (templateMatch) {
+    result.template = {
+      content: templateMatch[0], // Including <template> and </template> tags
+      start: licenseEnd + templateMatch.index,
+      end: licenseEnd + templateMatch.index + templateMatch[0].length,
     }
-  } else {
-    // If no license found, return the original text with positions
-    return {
-      content: text,
-      start: 0,
-      end: text.length,
+  }
+
+  // Extract script part
+  const scriptRegex = /<script([^>]*)>([\s\S]*?)<\/script>/
+  const scriptMatch = contentWithoutLicense.match(scriptRegex)
+  if (scriptMatch) {
+    const scriptAttributes = scriptMatch[1].trim()
+    const langMatch = scriptAttributes.match(/lang=['"]?(ts|js)['"]?/)
+    const lang = langMatch ? langMatch[1] : 'js' // Default to 'js' if no lang attribute or invalid value
+
+    const scriptContentStart = licenseEnd + scriptMatch.index + scriptMatch[0].indexOf('>') + 1
+    const scriptContentEnd = scriptContentStart + scriptMatch[2].length
+
+    result.script = {
+      content: scriptMatch[2],
+      start: scriptContentStart,
+      end: scriptContentEnd,
+      lang: lang,
     }
   }
+
+  return result
 }
 
 const getScriptContentForBlits = (text) => {
@@ -320,7 +338,6 @@ const isCursorInsideTag = (document, position) => {
   const range = new vscode.Range(start, position)
   const textUpToCursor = document.getText(range)
   const result = /<[^>]*([\s\S]*?)$/.test(textUpToCursor)
-  console.log('isCursorInsideTag', result)
   // Multiline regex to check for an unclosed opening tag before the cursor
   return result
 }
@@ -352,9 +369,9 @@ const getExistingTagAndAttributes = (line) => {
 
 const getTagContext = (document, position) => {
   const textBeforeCursor = document.getText(new vscode.Range(new vscode.Position(0, 0), position))
-  const textAfterCursor = document.getText(
-    new vscode.Range(position, new vscode.Position(document.lineCount - 1, Number.MAX_VALUE))
-  )
+  // const textAfterCursor = document.getText(
+  //   new vscode.Range(position, new vscode.Position(document.lineCount - 1, Number.MAX_VALUE))
+  // )
 
   let tagContext = {
     insideTag: false,

From 1af189f38bcbdb4ef4989b0a09714d6eaaa0e90f Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:26:43 +0100
Subject: [PATCH 4/6] feat: intellisense support for tags

---
 src/completionItems/componentNames.js   | 203 +++++++++++++
 src/completionItems/index.js            |   1 +
 src/completionProviders/index.js        |   1 +
 src/completionProviders/templateTags.js | 371 ++++++++++++++++++++++++
 src/extension.js                        |   2 +
 src/parsers/ast.js                      |   2 +-
 6 files changed, 579 insertions(+), 1 deletion(-)
 create mode 100644 src/completionItems/componentNames.js
 create mode 100644 src/completionProviders/templateTags.js

diff --git a/src/completionItems/componentNames.js b/src/completionItems/componentNames.js
new file mode 100644
index 0000000..309dabd
--- /dev/null
+++ b/src/completionItems/componentNames.js
@@ -0,0 +1,203 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const vscode = require('vscode')
+
+function createSeparator(label) {
+  const separator = new vscode.CompletionItem(label, vscode.CompletionItemKind.Text)
+  separator.sortText = label.startsWith('Built-in') ? '0' : label.startsWith('Custom') ? '1' : '2'
+  separator.preselect = false
+  // Make it non-insertable
+  separator.insertText = ''
+  // Add visual distinction
+  separator.label = `── ${label} ──`
+  // Prevent filtering
+  separator.filterText = ''
+  // Make it look disabled
+  separator.detail = ' '
+
+  return separator
+}
+
+const suggest = async (componentData) => {
+  let completionItems = []
+
+  completionItems.push(createSeparator('Built-in Components'))
+
+  const element = new vscode.CompletionItem('Element', vscode.CompletionItemKind.Class)
+
+  // element.detail = 'Core building block for rendering and styling'
+
+  // // Full documentation shown in the hover panel
+  // const elementDocs = new vscode.MarkdownString()
+  // elementDocs.appendMarkdown('The core building block of a Blits template that represents a Lightning 3 Renderer node.\n\n')
+  // elementDocs.appendMarkdown('**Usage:**\n')
+  // elementDocs.appendCodeblock('<Element x="10" y="20" color="#ff0000" />', 'xml')
+  // elementDocs.appendMarkdown('\n**Features:**\n')
+  // elementDocs.appendMarkdown('- Direct mapping to Lightning 3 Renderer nodes\n')
+  // elementDocs.appendMarkdown('- Supports positioning and visual properties\n')
+
+  // element.documentation = elementDocs
+  // element.sortText = '0-Element'
+
+  // Use documentation directly for immediate display
+  const elementDocs = new vscode.MarkdownString()
+  elementDocs.appendMarkdown('Core building block of a Blits template that represents a Lightning 3 Renderer node.\n\n')
+  elementDocs.appendCodeblock('<Element x="10" y="20" color="#ff0000" />', 'xml')
+  elementDocs.appendCodeblock(
+    `<Element w="400" h="100" x="800" y="900" color="#0284c7">
+  <Element w="42%" h="30%" y="5%" x="1%" color="#075985" />
+</Element>\n`,
+    'xml'
+  )
+
+  element.documentation = elementDocs
+  element.sortText = '0-Element'
+  element.detail = 'Built-in Component: <Element>'
+
+  completionItems.push(element)
+
+  const layout = new vscode.CompletionItem('Layout', vscode.CompletionItemKind.Class)
+
+  const layoutDocs = new vscode.MarkdownString()
+  layoutDocs.appendMarkdown(
+    'Automatically positions child elements in a horizontal or vertical layout with customizable spacing and alignment.\n\n'
+  )
+  layoutDocs.appendMarkdown('**Key Features:**\n')
+  layoutDocs.appendMarkdown('- Automatic positioning of children\n')
+  layoutDocs.appendMarkdown('- Supports horizontal (default) and vertical layouts\n')
+  layoutDocs.appendMarkdown('- Configurable spacing between elements\n')
+  layoutDocs.appendMarkdown('- Flexible alignment options\n\n')
+
+  layoutDocs.appendMarkdown('**Example Usage:**\n')
+  layoutDocs.appendCodeblock(
+    `<Layout direction="horizontal" gap="20" align-items="center">
+    <Element w="40" h="40" color="red" />
+    <Element w="80" h="40" color="blue" />
+    <Text>Hello world</Text>
+  </Layout>`,
+    'xml'
+  )
+
+  layoutDocs.appendMarkdown('\n**Attributes:**\n')
+  layoutDocs.appendMarkdown('- `direction`: "horizontal" | "vertical"\n')
+  layoutDocs.appendMarkdown('- `gap`: spacing between children (in pixels)\n')
+  layoutDocs.appendMarkdown('- `align-items`: "start" | "center" | "end"\n')
+  layoutDocs.appendMarkdown('\n**Events:**\n')
+  layoutDocs.appendMarkdown('- `@updated`: Emitted when layout dimensions change\n')
+
+  layout.documentation = layoutDocs
+  layout.sortText = '0-Layout'
+  layout.detail = 'Built-in Component: <Layout>'
+
+  completionItems.push(layout)
+
+  // Text Component
+  const text = new vscode.CompletionItem('Text', vscode.CompletionItemKind.Class)
+  const textDocs = new vscode.MarkdownString()
+  textDocs.appendMarkdown('Core built-in component for and styling texts in a simple and intuitive way.\n\n')
+  textDocs.appendCodeblock(
+    `<Text
+  content="Hello world"
+  font="ComicSans"
+  size="$fontSize"
+  :color="$changingColor"
+/>\n`,
+    'xml'
+  )
+
+  text.documentation = textDocs
+  text.sortText = '0-Text'
+  text.detail = 'Built-in Component: <Text>'
+
+  completionItems.push(text)
+
+  // RouterView Component
+  const routerView = new vscode.CompletionItem('RouterView', vscode.CompletionItemKind.Class)
+
+  const routerViewDocs = new vscode.MarkdownString()
+  routerViewDocs.appendMarkdown(
+    'Acts as a placeholder component that displays the currently active route component. Pages are rendered inside RouterView based on the current route.\n\n'
+  )
+  routerViewDocs.appendMarkdown('**Features:**\n')
+  routerViewDocs.appendMarkdown('- Renders routed page components\n')
+  routerViewDocs.appendMarkdown('- Can be positioned and sized like regular components\n')
+  routerViewDocs.appendMarkdown('- Supports route transitions\n')
+
+  routerViewDocs.appendMarkdown('\n**Example Usage:**\n')
+  routerViewDocs.appendCodeblock(
+    `export default Blits.Application({
+  template: \`
+    <Element>
+      <RouterView x="300" y="200" w="1520" h="680" />
+    </Element>
+  \`,
+  routes: [
+    { path: '/', component: Home },
+    { path: '/details', component: () => import('./pages/Details.js') }
+  ]
+})`,
+    'javascript'
+  )
+
+  routerViewDocs.appendMarkdown('\n**Notes:**\n')
+  routerViewDocs.appendMarkdown("- Place in your app's main template\n")
+  routerViewDocs.appendMarkdown('- Supports regular positioning attributes (x, y, w, h)\n')
+  routerViewDocs.appendMarkdown('- Works with both static and dynamic route components\n')
+
+  routerView.documentation = routerViewDocs
+  routerView.sortText = '0-RouterView'
+  routerView.detail = 'Built-in Component: RouterView'
+
+  completionItems.push(routerView)
+
+  // check custom components
+  const registeredComponents = componentData.importedComponents.filter(
+    (component) => component.isUsedInComponents === true
+  )
+
+  if (registeredComponents.length > 0) {
+    completionItems.push(createSeparator('Custom Components'))
+
+    registeredComponents.forEach((comp) => {
+      const item = new vscode.CompletionItem(comp.name, vscode.CompletionItemKind.Class)
+      if (comp.props.length > 0) {
+        item.documentation = new vscode.MarkdownString()
+        item.documentation.appendMarkdown(`\`${comp.name}\` has the following properties:\n\n`)
+        comp.props.forEach((prop) => {
+          item.documentation.appendCodeblock(
+            `${prop.key}: {
+  type: ${prop.cast},
+  default: ${prop.default ? prop.default : '-'},
+  required: ${prop.required ? 'yes' : 'no'}
+}\n`,
+            'javascript'
+          )
+        })
+      }
+      item.sortText = `1-${comp.name}`
+      item.detail = `Custom component: <${comp.name}>`
+      completionItems.push(item)
+    })
+  }
+
+  return completionItems
+}
+
+module.exports = {
+  suggest,
+}
diff --git a/src/completionItems/index.js b/src/completionItems/index.js
index 4ac1fb9..84dad93 100644
--- a/src/completionItems/index.js
+++ b/src/completionItems/index.js
@@ -18,4 +18,5 @@
 module.exports = {
   componentProps: require('./componentProps'),
   elementProps: require('./elementProps'),
+  componentNames: require('./componentNames'),
 }
diff --git a/src/completionProviders/index.js b/src/completionProviders/index.js
index 0624078..546cd62 100644
--- a/src/completionProviders/index.js
+++ b/src/completionProviders/index.js
@@ -17,4 +17,5 @@
 
 module.exports = {
   templateAttributes: require('./templateAttributes'),
+  templateTags: require('./templateTags'),
 }
diff --git a/src/completionProviders/templateTags.js b/src/completionProviders/templateTags.js
new file mode 100644
index 0000000..89cf3cb
--- /dev/null
+++ b/src/completionProviders/templateTags.js
@@ -0,0 +1,371 @@
+/*
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+const vscode = require('vscode')
+const templateHelper = require('../helpers/template')
+const completionItems = require('../completionItems')
+const parse = require('../parsers')
+
+const path = require('path')
+const fs = require('fs')
+
+// Get all local imports from a file
+function getLocalImports(ast) {
+  if (!ast || !ast.program || !ast.program.body) {
+    console.warn('Invalid AST structure for imports analysis')
+    return []
+  }
+
+  const imports = []
+
+  try {
+    ast.program.body.forEach((node) => {
+      if (!node) return
+
+      if (node.type === 'ImportDeclaration') {
+        const importPath = safeGet(node, 'source', 'value')
+
+        if (!importPath) return
+
+        // Skip node_modules imports
+        if (importPath.startsWith('.') || importPath.startsWith('/')) {
+          const specifiers = []
+
+          if (Array.isArray(node.specifiers)) {
+            node.specifiers.forEach((specifier) => {
+              if (!specifier || !specifier.type) return
+
+              if (specifier.type === 'ImportDefaultSpecifier') {
+                specifiers.push({
+                  type: 'default',
+                  local: safeGet(specifier, 'local', 'name'),
+                })
+              } else if (specifier.type === 'ImportSpecifier') {
+                specifiers.push({
+                  type: 'named',
+                  imported: safeGet(specifier, 'imported', 'name'),
+                  local: safeGet(specifier, 'local', 'name'),
+                })
+              }
+            })
+          }
+
+          imports.push({
+            specifiers,
+            path: importPath,
+          })
+        }
+      }
+    })
+  } catch (e) {
+    console.error('Error processing imports:', e)
+  }
+
+  return imports
+}
+
+// Parse props with better error handling
+function parseProps(propsNode) {
+  const standardizedProps = []
+
+  try {
+    if (!propsNode) {
+      console.debug('Props node is null or undefined')
+      return standardizedProps
+    }
+
+    if (!propsNode.type) {
+      console.warn('Props node has no type:', propsNode)
+      return standardizedProps
+    }
+
+    if (propsNode.type === 'ArrayExpression' && Array.isArray(propsNode.elements)) {
+      propsNode.elements.forEach((element, index) => {
+        if (!element) return
+
+        try {
+          if (element.type === 'StringLiteral') {
+            standardizedProps.push({
+              key: element.value,
+              default: null,
+              required: false,
+              cast: 'String',
+            })
+          } else if (element.type === 'ObjectExpression') {
+            const prop = {
+              key: '',
+              default: null,
+              required: false,
+              cast: 'String',
+            }
+
+            element.properties.forEach((property) => {
+              const keyName = safeGet(property, 'key', 'name')
+              const value = property.value
+
+              if (!keyName || !value) return
+
+              if (keyName === 'key') {
+                prop.key = value.type === 'StringLiteral' ? value.value : value.name
+              }
+              if (keyName === 'default') {
+                prop.default = value.value
+              }
+              if (keyName === 'required') {
+                prop.required = value.value
+              }
+              if (keyName === 'cast') {
+                prop.cast = value.name
+              }
+            })
+
+            if (prop.key) {
+              standardizedProps.push(prop)
+            }
+          }
+        } catch (e) {
+          console.error(`Error processing prop at index ${index}:`, e)
+        }
+      })
+    }
+  } catch (e) {
+    console.error('Error in parseProps:', e)
+  }
+
+  return standardizedProps
+}
+
+// Parse component config to get components and props
+function parseComponentConfig(ast) {
+  if (!ast || !ast.program || !ast.program.body) {
+    console.warn('Invalid AST structure for component config analysis')
+    return { components: {}, props: [] }
+  }
+
+  let components = {}
+  let props = []
+
+  try {
+    ast.program.body.forEach((node) => {
+      if (!node) return
+
+      if (node.type === 'ExportDefaultDeclaration') {
+        const declaration = node.declaration
+
+        if (!declaration) return
+
+        if (
+          declaration.type === 'CallExpression' &&
+          safeGet(declaration, 'callee', 'type') === 'MemberExpression' &&
+          safeGet(declaration, 'callee', 'object', 'name') === 'Blits' &&
+          ['Component', 'Application'].includes(safeGet(declaration, 'callee', 'property', 'name'))
+        ) {
+          // Get the config object (last argument)
+          const args = declaration.arguments
+          if (!Array.isArray(args) || args.length === 0) return
+
+          const configArg = args[args.length - 1]
+
+          if (configArg && configArg.type === 'ObjectExpression') {
+            configArg.properties.forEach((prop) => {
+              if (!prop || !prop.key || !prop.key.name) return
+
+              if (prop.key.name === 'components' && prop.value && prop.value.type === 'ObjectExpression') {
+                // Parse components object
+                prop.value.properties.forEach((componentProp) => {
+                  const componentName = safeGet(componentProp, 'key', 'name')
+                  const componentValue = safeGet(componentProp, 'value', 'name')
+
+                  if (componentName && componentValue) {
+                    components[componentName] = componentValue
+                  }
+                })
+              }
+
+              if (prop.key.name === 'props') {
+                props = parseProps(prop.value)
+              }
+            })
+          }
+        }
+      }
+    })
+  } catch (e) {
+    console.error('Error processing component config:', e)
+  }
+
+  return { components, props }
+}
+
+// Main analysis function
+// Main analysis function with imported components support
+// Helper function to get the correct source code based on file type
+function getSourceForAnalysis(sourceCode, fileExtension) {
+  if (fileExtension === 'blits') {
+    const { content, language } = templateHelper.getScriptContentForBlits(sourceCode)
+    return {
+      content,
+      language,
+    }
+  }
+
+  return {
+    content: sourceCode,
+    language: fileExtension,
+  }
+}
+
+// Main analysis function with .blits file support
+async function analyzeBlitsComponent(
+  sourceCode,
+  fileExtension = 'js',
+  currentFilePath = '',
+  analyzedPaths = new Set()
+) {
+  try {
+    // Get the appropriate source code and language based on file type
+    const { content, language } = getSourceForAnalysis(sourceCode, fileExtension)
+    const ast = parse.AST(content, language)
+
+    if (!ast) {
+      return {
+        imports: [],
+        components: {},
+        props: [],
+        importedComponents: [],
+      }
+    }
+
+    // Get imports and component config for current file
+    const imports = getLocalImports(ast)
+    const { components, props } = parseComponentConfig(ast)
+
+    // Track analyzed paths to prevent circular dependencies
+    analyzedPaths.add(currentFilePath)
+
+    // Analyze imported components
+    const importedComponents = []
+    for (const imp of imports) {
+      if (imp.path.startsWith('.')) {
+        // Resolve absolute path for the import
+        const importDir = path.dirname(currentFilePath)
+        const absolutePath = path.resolve(importDir, imp.path)
+        const resolvedPath = resolveFilePath(absolutePath)
+
+        if (resolvedPath && !analyzedPaths.has(resolvedPath)) {
+          try {
+            const importedCode = fs.readFileSync(resolvedPath, 'utf-8')
+            const importFileExt = path.extname(resolvedPath).slice(1)
+
+            const importAnalysis = await analyzeBlitsComponent(importedCode, importFileExt, resolvedPath, analyzedPaths)
+
+            // Add imported component info
+            imp.specifiers.forEach((spec) => {
+              const isUsedInComponents =
+                Object.prototype.hasOwnProperty.call(components, spec.local) ||
+                Object.values(components).includes(spec.local)
+
+              importedComponents.push({
+                name: spec.local,
+                importPath: imp.path,
+                absolutePath: resolvedPath,
+                isUsedInComponents,
+                props: importAnalysis.props,
+                fileType: importFileExt,
+              })
+            })
+          } catch (e) {
+            console.error(`Error analyzing imported component ${resolvedPath}:`, e)
+          }
+        }
+      }
+    }
+
+    return {
+      imports,
+      components,
+      props,
+      importedComponents,
+    }
+  } catch (e) {
+    console.error('Error in analyzeBlitsComponent:', e)
+    return {
+      imports: [],
+      components: {},
+      props: [],
+      importedComponents: [],
+    }
+  }
+}
+
+// Helper to resolve file path with extensions
+function resolveFilePath(basePath) {
+  const extensions = ['.js', '.ts', '.blits']
+
+  // Try exact path first
+  if (fs.existsSync(basePath)) return basePath
+
+  // Try with extensions
+  for (const ext of extensions) {
+    const pathWithExt = basePath + ext
+    if (fs.existsSync(pathWithExt)) return pathWithExt
+  }
+
+  return null
+}
+
+function safeGet(obj, ...paths) {
+  let current = obj
+  for (const path of paths) {
+    if (current == null) return undefined
+    current = current[path]
+  }
+  return current
+}
+
+const getCompletionItems = async (document, currentDoc, position, isBlits, filePath, fileExt) => {
+  let isCursorInsideTemplate = false
+  if (isBlits) {
+    isCursorInsideTemplate = templateHelper.isCursorInsideTemplateForBlits(document, currentDoc, position)
+  } else {
+    const ast = parse.AST(currentDoc, fileExt)
+    isCursorInsideTemplate = templateHelper.isCursorInsideTemplate(document, ast, position)
+  }
+
+  if (isCursorInsideTemplate) {
+    const componentData = await analyzeBlitsComponent(currentDoc, fileExt, filePath)
+    console.log(JSON.stringify(componentData, null, 2))
+    return await completionItems.componentNames.suggest(componentData)
+  }
+
+  return []
+}
+
+module.exports = vscode.languages.registerCompletionItemProvider(
+  [{ language: 'javascript' }, { language: 'typescript' }, { language: 'blits' }],
+  {
+    async provideCompletionItems(document, position) {
+      const filePath = document.uri.fsPath
+      const fileExtension = filePath.split('.').pop()
+      const currentDoc = document.getText()
+
+      const isBlits = document.languageId === 'blits'
+      return await getCompletionItems(document, currentDoc, position, isBlits, filePath, fileExtension)
+    },
+  },
+  '<'
+)
diff --git a/src/extension.js b/src/extension.js
index 7210cbc..0bf5968 100644
--- a/src/extension.js
+++ b/src/extension.js
@@ -66,6 +66,8 @@ async function activate(context) {
       context.subscriptions.push(completionProviders.templateAttributes)
     }
 
+    context.subscriptions.push(completionProviders.templateTags)
+
     // comment command wrapper for template section
     context.subscriptions.push(commands.commentCommand)
 
diff --git a/src/parsers/ast.js b/src/parsers/ast.js
index 4252976..eb44a55 100644
--- a/src/parsers/ast.js
+++ b/src/parsers/ast.js
@@ -18,7 +18,7 @@
 const parser = require('@babel/parser')
 
 const parseAST = (code, fileExtension) => {
-  const pluginList = ['objectRestSpread', 'optionalChaining', 'nullishCoalescingOperator']
+  const pluginList = ['objectRestSpread', 'optionalChaining', 'nullishCoalescingOperator', 'flow']
 
   if (fileExtension === 'ts' || fileExtension === 'tsx') {
     pluginList.push('typescript')

From c0531a4f69da7d01073811bb29b847ac94e41797 Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:42:08 +0100
Subject: [PATCH 5/6] bumped version to v1.2.0

---
 package-lock.json | 4 ++--
 package.json      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 69daac4..66c65e8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "lightning-blits",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "lightning-blits",
-      "version": "1.1.0",
+      "version": "1.2.0",
       "license": "Apache-2",
       "dependencies": {
         "@babel/traverse": "^7.23.2",
diff --git a/package.json b/package.json
index 137727a..ddb72c4 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "publisher": "lightningjs",
   "displayName": "Lightning Blits",
   "description": "Template syntax highlighting and code completion for the Lightning Blits framework",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/lightning-js/blits-vscode-extension.git"

From 232bdd3ebd6a090bcc455a5319a1c95b010d026b Mon Sep 17 00:00:00 2001
From: Ugur Aslan <ugur@uguraslan.net>
Date: Fri, 6 Dec 2024 13:49:28 +0100
Subject: [PATCH 6/6] cleanup unnecessary comments

---
 src/completionItems/componentNames.js   | 18 ------------------
 src/completionProviders/templateTags.js |  4 ----
 2 files changed, 22 deletions(-)

diff --git a/src/completionItems/componentNames.js b/src/completionItems/componentNames.js
index 309dabd..6e06941 100644
--- a/src/completionItems/componentNames.js
+++ b/src/completionItems/componentNames.js
@@ -39,22 +39,6 @@ const suggest = async (componentData) => {
   completionItems.push(createSeparator('Built-in Components'))
 
   const element = new vscode.CompletionItem('Element', vscode.CompletionItemKind.Class)
-
-  // element.detail = 'Core building block for rendering and styling'
-
-  // // Full documentation shown in the hover panel
-  // const elementDocs = new vscode.MarkdownString()
-  // elementDocs.appendMarkdown('The core building block of a Blits template that represents a Lightning 3 Renderer node.\n\n')
-  // elementDocs.appendMarkdown('**Usage:**\n')
-  // elementDocs.appendCodeblock('<Element x="10" y="20" color="#ff0000" />', 'xml')
-  // elementDocs.appendMarkdown('\n**Features:**\n')
-  // elementDocs.appendMarkdown('- Direct mapping to Lightning 3 Renderer nodes\n')
-  // elementDocs.appendMarkdown('- Supports positioning and visual properties\n')
-
-  // element.documentation = elementDocs
-  // element.sortText = '0-Element'
-
-  // Use documentation directly for immediate display
   const elementDocs = new vscode.MarkdownString()
   elementDocs.appendMarkdown('Core building block of a Blits template that represents a Lightning 3 Renderer node.\n\n')
   elementDocs.appendCodeblock('<Element x="10" y="20" color="#ff0000" />', 'xml')
@@ -72,7 +56,6 @@ const suggest = async (componentData) => {
   completionItems.push(element)
 
   const layout = new vscode.CompletionItem('Layout', vscode.CompletionItemKind.Class)
-
   const layoutDocs = new vscode.MarkdownString()
   layoutDocs.appendMarkdown(
     'Automatically positions child elements in a horizontal or vertical layout with customizable spacing and alignment.\n\n'
@@ -128,7 +111,6 @@ const suggest = async (componentData) => {
 
   // RouterView Component
   const routerView = new vscode.CompletionItem('RouterView', vscode.CompletionItemKind.Class)
-
   const routerViewDocs = new vscode.MarkdownString()
   routerViewDocs.appendMarkdown(
     'Acts as a placeholder component that displays the currently active route component. Pages are rendered inside RouterView based on the current route.\n\n'
diff --git a/src/completionProviders/templateTags.js b/src/completionProviders/templateTags.js
index 89cf3cb..35c348e 100644
--- a/src/completionProviders/templateTags.js
+++ b/src/completionProviders/templateTags.js
@@ -211,8 +211,6 @@ function parseComponentConfig(ast) {
   return { components, props }
 }
 
-// Main analysis function
-// Main analysis function with imported components support
 // Helper function to get the correct source code based on file type
 function getSourceForAnalysis(sourceCode, fileExtension) {
   if (fileExtension === 'blits') {
@@ -229,7 +227,6 @@ function getSourceForAnalysis(sourceCode, fileExtension) {
   }
 }
 
-// Main analysis function with .blits file support
 async function analyzeBlitsComponent(
   sourceCode,
   fileExtension = 'js',
@@ -237,7 +234,6 @@ async function analyzeBlitsComponent(
   analyzedPaths = new Set()
 ) {
   try {
-    // Get the appropriate source code and language based on file type
     const { content, language } = getSourceForAnalysis(sourceCode, fileExtension)
     const ast = parse.AST(content, language)