detect imported identifiers, improve sourcemaps, and filter completions by context (#299)

* detect imported identifiers

* improve sourcemaps and completions

* update snapshots

Author: znck

extensions/vscode-vue-language-features/src/index.ts

@@ -11,6 +11,7 @@ import { VueVirtualDocumentProvider } from './scheme/vue'
 import { PluginCommunicationService } from './services/PluginCommunicationService'
 import { StyleLanguageProxy } from './services/StyleLanguageProxy'
 import { TemplateLanguageProxy } from './services/TemplateLanguageProxy'
+import { TriggerCompletionService } from './services/TriggerCompletionService'
 import { TwoSlashService } from './services/TwoSlashService'
 import { VirtualFileSwitcher } from './services/VirtualFileSwitcher'
 
@@ -36,6 +37,7 @@ export async function activate(
     container.get(SelectVirtualFileCommand).install(),
     container.get(VirtualFileSwitcher).install(),
     container.get(TwoSlashService).install(),
+    container.get(TriggerCompletionService).install(),
     new vscode.Disposable(() => container.unbindAll()),
   )
   const ts = vscode.extensions.getExtension(

extensions/vscode-vue-language-features/src/services/TriggerCompletionService.ts

@@ -0,0 +1,34 @@
+import { injectable } from 'inversify'
+import vscode, { Disposable } from 'vscode'
+import { Installable } from '../utils/installable'
+
+@injectable()
+export class TriggerCompletionService
+  extends Installable
+  implements vscode.CompletionItemProvider
+{
+  public install(): Disposable {
+    super.install()
+
+    return vscode.languages.registerCompletionItemProvider(
+      { language: 'vue' },
+      this,
+      ...[':', '^'],
+    )
+  }
+
+  async provideCompletionItems(
+    document: vscode.TextDocument,
+    position: vscode.Position,
+    _token: vscode.CancellationToken,
+    context: vscode.CompletionContext,
+  ): Promise<vscode.CompletionItem[]> {
+    if (context.triggerCharacter == null) return []
+    // TODO: check if at directive node
+    return await vscode.commands.executeCommand(
+      'vscode.executeCompletionItemProvider',
+      document.uri,
+      position,
+    )
+  }
+}

packages/compiler-tsx/src/template/generate.ts

@@ -25,6 +25,7 @@ import {
 import {
   camelize,
   capitalize,
+  getClassNameForTagName,
   invariant,
   last,
   pascalCase,
@@ -117,22 +118,6 @@ export function generate(
 ): TransformedCode {
   ctx = createGenerateContext(options)
 
-  if (ctx.used.components.size > 0) {
-    wrap(
-      `${annotations.templateGlobals.start}\n`,
-      `${annotations.templateGlobals.end}\n`,
-      () => {
-        ctx.used.components.forEach((component) => {
-          if (isSimpleIdentifier(component)) {
-            writeLine(
-              `const ${ctx.internalIdentifierPrefix}_get_identifier_${component} = () => ${component};`,
-            )
-          }
-        })
-      },
-    )
-  }
-
   genRootNode(root)
   genSlotTypes(root)
   genAttrTypes(root)
@@ -206,14 +191,25 @@ function genRootNode(node: RootNode): void {
 }
 
 function genKnownIdentifierGetters(ids: string[]): void {
-  const known = ids.filter((id) => ctx.identifiers.has(id))
-  if (known.length === 0) return
+  ids = Array.from(
+    new Set([...ids, ...ctx.used.components, ...ctx.used.directives]),
+  )
+  if (!ids.some((id) => ctx.identifiers.has(id))) return
   wrap(
     annotations.templateGlobals.start,
     annotations.templateGlobals.end,
     () => {
       ctx.newLine()
-      known.forEach((id) => {
+      ids.forEach((id) => {
+        const knownId = ctx.identifiers.get(id)
+        if (knownId == null) return
+        if (
+          !['ref', 'maybeRef', 'externalMaybeRef', 'externalRef'].includes(
+            knownId.kind,
+          )
+        )
+          return
+
         writeLine(
           `const ${
             ctx.internalIdentifierPrefix
@@ -287,10 +283,17 @@ function genGlobalDeclarations(node: Node): void {
   if (node.scope.globals.length === 0) return
   writeLine(annotations.templateGlobals.start)
   node.scope.globals.forEach((id) => {
-    if (ctx.identifiers.has(id)) {
-      writeLine(
-        `let ${id} = ${ctx.internalIdentifierPrefix}_get_identifier_${id}();`,
-      )
+    const knownId = ctx.identifiers.get(id)
+    if (knownId != null) {
+      if (
+        ['ref', 'maybeRef', 'externalMaybeRef', 'externalRef'].includes(
+          knownId.kind,
+        )
+      ) {
+        writeLine(
+          `let ${id} = ${ctx.internalIdentifierPrefix}_get_identifier_${id}();`,
+        )
+      }
     } else {
       writeLine(`let ${id} = ${ctx.contextIdentifier}.${id}`)
     }
@@ -317,9 +320,12 @@ function genElementNode(node: ElementNode): void {
       ctx.write(`${annotations.tsxCompletions}`)
     })
     ctx.newLine()
+  } else {
+    return // tag is empty, when only "<" is present
   }
+
   if (node.isSelfClosing) {
-    ctx.write('/>')
+    ctx.write('/>', node.endTagLoc)
     return // done
   }
   ctx.write('>').newLine()
@@ -390,15 +396,15 @@ function genComponentNode(node: ComponentNode): void {
 
   genDirectiveChecks(node)
   ctx.write('<', node.loc)
-  ctx.write(node.resolvedName ?? node.tag, node.tagLoc).newLine()
+  ctx.write(node.resolvedName ?? node.tag, node.tagLoc, true).newLine()
   indent(() => {
     genProps(node)
     ctx.write(`${annotations.tsxCompletions}`)
   })
 
   ctx.newLine()
   if (node.isSelfClosing) {
-    writeLine('/>')
+    ctx.write('/>', node.endTagLoc).newLine()
     return // done
   }
   writeLine('>')
@@ -563,16 +569,13 @@ function genProps(el: ElementNode | ComponentNode): void {
       ctx.newLine()
     } else if (prop.name === 'on') {
       if (prop.arg == null) {
-        ctx.write('{...(')
-        if (prop.exp != null) {
-          genExpressionNode(prop.exp)
+        if (prop.exp == null) {
+          ctx.write('on', prop.loc, true)
         } else {
-          ctx.write(
-            annotations.missingExpression,
-            createLoc(prop.loc, prop.loc.source.length),
-          )
+          ctx.write('{...(')
+          genExpressionNode(prop.exp)
+          ctx.write(')}')
         }
-        ctx.write(')}')
       } else {
         invariant(isSimpleExpressionNode(prop.arg))
         const id = prop.arg.content
@@ -584,6 +587,15 @@ function genProps(el: ElementNode | ComponentNode): void {
         )
 
         const genHandler = (): void => {
+          if (isPlainElementNode(el)) {
+            ctx.typeGuards.push(
+              createCompoundExpression([
+                `$event.currentTarget instanceof `,
+                getClassNameForTagName(el.tag),
+              ]),
+            )
+          }
+
           ctx.write(`${getRuntimeFn(ctx.typeIdentifier, 'first')}([`).newLine()
           indent(() => {
             all.forEach((directive) => {
@@ -599,6 +611,9 @@ function genProps(el: ElementNode | ComponentNode): void {
             })
           })
           ctx.write('])')
+          if (isPlainElementNode(el)) {
+            ctx.typeGuards.pop()
+          }
         }
 
         if (isStaticExpression(prop.arg)) {
@@ -644,12 +659,12 @@ function genProps(el: ElementNode | ComponentNode): void {
               type.value?.content === 'radio')
           ) {
             isCheckbox = true
-            ctx.write('checked', prop.nameLoc)
+            ctx.write('checked', prop.nameLoc, true)
           } else {
-            ctx.write('value', prop.nameLoc)
+            ctx.write('value', prop.nameLoc, true)
           }
         } else {
-          ctx.write('modelValue', prop.nameLoc)
+          ctx.write('modelValue', prop.nameLoc, true)
         }
 
         ctx.write('={')
@@ -674,7 +689,7 @@ function genProps(el: ElementNode | ComponentNode): void {
         }
         ctx.write('}')
       } else if (isStaticExpression(prop.arg)) {
-        genExpressionNode(prop.arg)
+        ctx.write(prop.arg.content, prop.arg.loc)
         ctx.write('={')
         genExp()
         ctx.write('}')
@@ -737,15 +752,14 @@ function genVBindDirective(
       ctx.write(': true')
     }
     ctx.write('})}')
+  } else if (prop.exp == null) {
+    ctx.write(' ', prop.loc)
   } else {
     ctx.write('{...(')
     if (prop.exp != null) {
       genExpressionNode(prop.exp)
     } else {
-      ctx.write(
-        annotations.missingExpression,
-        createLoc(prop.loc, prop.loc.source.length),
-      )
+      ctx.write(' ', createLoc(prop.loc, prop.loc.source.length))
     }
     ctx.write(')}')
   }
@@ -756,12 +770,9 @@ function genTextNode(node: TextNode): void {
 }
 
 function genInterpolationNode(node: InterpolationNode): void {
-  ctx.write('{', node.loc)
+  ctx.write(' {', node.loc)
   genExpressionNode(node.content)
-  ctx.write(
-    '}',
-    createLoc(node.loc, node.content.loc.end.offset - node.loc.start.offset),
-  )
+  ctx.write('} ', sliceLoc(node.loc, -2))
 }
 
 function genExpressionNode(node: ExpressionNode): void {
@@ -795,6 +806,7 @@ function genExpressionNodeAsFunction(node: ExpressionNode): void {
     node.content.includes('$event')
       ? ctx.write('($event) => {').newLine()
       : ctx.write('() => {').newLine()
+    genTypeGuards()
     genSimpleExpressionNode(node)
     ctx.newLine().write('}')
   }

packages/compiler-tsx/src/template/parse.ts

@@ -9,7 +9,7 @@ import {
   RootNode,
   transform,
 } from '@vue/compiler-core'
-import { last } from '@vuedx/shared'
+import { first, last } from '@vuedx/shared'
 import {
   createSimpleExpression,
   isDirectiveNode,
@@ -24,7 +24,7 @@ import './types/Node'
 const preprocess: NodeTransform = (node, context) => {
   if (isTextNode(node) && node.content.trim().startsWith('<')) {
     // Incomplete element tag
-    context.replaceNode(createPlainElementNode(node.content, node.loc))
+    context.replaceNode(createPlainElementNode(node.loc))
 
     return
   }
@@ -42,14 +42,18 @@ const preprocess: NodeTransform = (node, context) => {
   node.props.forEach((prop, index) => {
     // remove empty modifiers
     if (isDirectiveNode(prop)) {
-      const isShorthand = /^[:@.^]/.test(prop.loc.source)
-      const nameEndOffset = isShorthand ? 1 : 2 + prop.name.length
+      const nameEndOffset = prop.loc.source.startsWith('v-')
+        ? 2 + prop.name.length
+        : 1
       let offset =
         prop.arg != null
           ? prop.arg.loc.end.offset - prop.loc.start.offset
           : nameEndOffset
 
       prop.nameLoc = sliceLoc(prop.loc, 0, nameEndOffset)
+      if (prop.modifiers.length === 1 && first(prop.modifiers) === '') {
+        prop.modifiers = []
+      }
       prop.modifierLocs = prop.modifiers.map((modifier) => {
         try {
           offset += 1
@@ -78,11 +82,13 @@ const preprocess: NodeTransform = (node, context) => {
                 false,
                 createLoc(prop.loc, 1, prop.name.length - 1),
               )
-            : createSimpleExpression(
+            : prop.name.length > 1
+            ? createSimpleExpression(
                 prop.name.slice(1),
                 true,
                 createLoc(prop.loc, 1, prop.name.length - 1),
-              ),
+              )
+            : undefined,
           loc: prop.loc,
           modifiers: [],
           modifierLocs: [],
@@ -105,6 +111,7 @@ const preprocess: NodeTransform = (node, context) => {
   node.tagLoc = createLoc(node.loc, 1, node.tag.length)
   if (node.isSelfClosing) {
     node.startTagLoc = node.loc
+    node.endTagLoc = sliceLoc(node.loc, -2)
   } else {
     const startTagIndex = node.loc.source.indexOf(
       '>',
@@ -145,23 +152,22 @@ export function parse(template: string, options: ParserOptions): RootNode {
   return ast
 }
 
-function createPlainElementNode(
-  content: string,
-  contentLoc: SourceLocation,
-): PlainElementNode {
-  const source = content.trim()
+function createPlainElementNode(contentLoc: SourceLocation): PlainElementNode {
+  const offset = contentLoc.source.indexOf('<')
+  const loc = sliceLoc(contentLoc, offset)
+  const tag = loc.source.slice(1).trim()
   return {
     type: 1 /* ELEMENT */,
-    tag: source.slice(1),
+    tag,
     tagType: 0 /* ELEMENT */,
     codegenNode: undefined,
     children: [],
-    isSelfClosing: false,
-    loc: contentLoc,
+    isSelfClosing: tag.length > 0,
+    loc,
     ns: 0,
     props: [],
-    tagLoc: createLoc(contentLoc, 1, content.length - 1),
-    startTagLoc: contentLoc,
+    tagLoc: sliceLoc(loc, 1),
+    startTagLoc: loc,
     endTagLoc: undefined,
     scope: new Scope(),
   }

packages/compiler-tsx/src/template/transforms/transformResolveComponent.ts

@@ -13,6 +13,7 @@ import {
   isElementNode,
   isSimpleIdentifier,
 } from '@vuedx/template-ast-types'
+import { KnownIdentifier } from '@vuedx/transforms'
 import { directives } from '../builtins'
 import { getRuntimeFn } from '../runtime'
 import type { NodeTransformContext } from '../types/NodeTransformContext'
@@ -42,19 +43,30 @@ export function createResolveComponentTransform(
 
           const id = `v${pascalCase(node.name)}`
           node.resolvedName = id
+
           if (!ctx.scope.hasIdentifier(id)) {
-            ctx.scope.addIdentifier(id)
-            ctx.scope.hoist(
-              createCompoundExpression([
-                'const ',
-                id,
-                ` = ${h('resolveDirective')}(${ctx.contextIdentifier}, `,
-                s(node.name),
-                ', ',
-                s(camelCase(node.name)),
-                ');',
-              ]),
-            )
+            const knownId = ctx.identifiers.get(id)
+            if (knownId == null) {
+              ctx.scope.addIdentifier(id)
+              ctx.scope.hoist(
+                createCompoundExpression([
+                  'const ',
+                  id,
+                  ` = ${h('resolveDirective')}(${ctx.contextIdentifier}, `,
+                  s(node.name),
+                  ', ',
+                  s(camelCase(node.name)),
+                  ');',
+                ]),
+              )
+            } else if (mayBeRef(knownId)) {
+              ctx.scope.addIdentifier(id)
+              ctx.scope.hoist(
+                createCompoundExpression([
+                  `const ${id} = ${ctx.internalIdentifierPrefix}_get_identifier_${id}();`,
+                ]),
+              )
+            }
           }
         }
       })
@@ -74,23 +86,34 @@ export function createResolveComponentTransform(
           ? id + node.tag.slice(name.length)
           : id
         if (!ctx.scope.hasIdentifier(id)) {
-          ctx.used.components.add(id)
-          ctx.scope.addIdentifier(id)
-          ctx.scope.hoist(
-            createCompoundExpression([
-              'const ',
-              id,
-              ` = ${h('resolveComponent')}(${resolveComponentArgs}`,
-              isSimpleIdentifier(id)
-                ? `${ctx.internalIdentifierPrefix}_get_identifier_${id}()`
-                : 'null',
-              ', ',
-              s(name),
-              ', ',
-              s(pascalCase(name)),
-              ');',
-            ]),
-          )
+          const knownId = ctx.identifiers.get(id)
+          if (knownId == null || !isSimpleIdentifier(id)) {
+            ctx.used.components.add(id)
+            ctx.scope.addIdentifier(id)
+            ctx.scope.hoist(
+              createCompoundExpression([
+                'const ',
+                id,
+                ` = ${h('resolveComponent')}(${resolveComponentArgs}`,
+                isSimpleIdentifier(id)
+                  ? `${ctx.internalIdentifierPrefix}_get_identifier_${id}()`
+                  : 'null',
+                ', ',
+                s(name),
+                ', ',
+                s(pascalCase(name)),
+                ');',
+              ]),
+            )
+          } else if (mayBeRef(knownId)) {
+            ctx.used.components.add(id)
+            ctx.scope.addIdentifier(id)
+            ctx.scope.hoist(
+              createCompoundExpression([
+                `const ${id} = ${ctx.internalIdentifierPrefix}_get_identifier_${id}();`,
+              ]),
+            )
+          }
         }
       }
       return undefined
@@ -103,3 +126,12 @@ export function createResolveComponentTransform(
     return undefined
   }
 }
+
+function mayBeRef(id: KnownIdentifier): boolean {
+  return (
+    id.kind === 'ref' ||
+    id.kind === 'maybeRef' ||
+    id.kind === 'externalRef' ||
+    id.kind === 'externalMaybeRef'
+  )
+}

packages/compiler-tsx/src/types/TransformOptions.ts

@@ -1,5 +1,6 @@
 import type { SFCDescriptor } from '@vuedx/compiler-sfc'
 import type { Cache } from '@vuedx/shared'
+import type { KnownIdentifier } from '@vuedx/transforms'
 
 export interface TransformOptions {
   /**
@@ -63,5 +64,5 @@ export interface TransformOptionsResolved extends TransformOptions {
   /**
    * Known identifiers.
    */
-  identifiers: Set<string>
+  identifiers: Map<string, KnownIdentifier>
 }

packages/compiler-tsx/src/vue/blocks/transformScript.ts

@@ -1,14 +1,17 @@
 import type { SFCScriptBlock } from '@vuedx/compiler-sfc'
 import { invariant } from '@vuedx/shared'
-import { transformScript as transform } from '@vuedx/transforms'
+import {
+  transformScript as transform,
+  type KnownIdentifier,
+} from '@vuedx/transforms'
 import type { TransformedCode } from '../../types/TransformedCode'
 import type { TransformOptionsResolved } from '../../types/TransformOptions'
 
 export interface ScriptBlockTransformResult extends TransformedCode {
   exportIdentifier: string
   name: string
   inheritAttrs: boolean
-  identifiers: string[]
+  identifiers: KnownIdentifier[]
 }
 export function transformScript(
   script: SFCScriptBlock | null,

packages/compiler-tsx/src/vue/blocks/transformScriptSetup.ts

@@ -1,6 +1,9 @@
 import type { SFCScriptBlock } from '@vuedx/compiler-sfc'
 import { invariant } from '@vuedx/shared'
-import { transformScriptSetup as transform } from '@vuedx/transforms'
+import {
+  transformScriptSetup as transform,
+  type KnownIdentifier,
+} from '@vuedx/transforms'
 import type { TransformedCode } from '../../types/TransformedCode'
 import type { TransformOptionsResolved } from '../../types/TransformOptions'
 
@@ -10,7 +13,7 @@ export interface ScriptSetupBlockTransformResult extends TransformedCode {
   propsIdentifier: string
   emitsIdentifier: string
   exposeIdentifier: string
-  identifiers: string[]
+  identifiers: KnownIdentifier[]
   exports: Record<string, string>
 }
 

packages/compiler-tsx/src/vue/compile.ts

@@ -74,7 +74,7 @@ export function compileWithDecodedSourceMap(
     isTypeScript: options.isTypeScript ?? (lang === 'ts' || lang === 'tsx'),
     cache,
     descriptor,
-    identifiers: new Set(),
+    identifiers: new Map(),
   }
   const builder = new SourceTransformer(options.fileName, source)
 
@@ -95,10 +95,15 @@ export function compileWithDecodedSourceMap(
     () => transformScriptSetup(descriptor.scriptSetup, resolvedOptions),
   )
 
-  resolvedOptions.identifiers = new Set([
-    ...script.identifiers,
-    ...scriptSetup.identifiers,
-  ])
+  resolvedOptions.identifiers = new Map()
+
+  script.identifiers.forEach((identifier) => {
+    resolvedOptions.identifiers.set(identifier.name, identifier)
+  })
+
+  scriptSetup.identifiers.forEach((identifier) => {
+    resolvedOptions.identifiers.set(identifier.name, identifier)
+  })
 
   const template = runIfNeeded(
     key('template'),

packages/compiler-tsx/test/__snapshots__/baseline.js

@@ -263,18 +263,21 @@ function __VueDX__render() {
         {...(foo)}
         onClick={__VueDX__TypeCheck.internal.first([
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
         ])}
         /*<vuedx:tsx-completions-target/>*/
       >
-        {foo}
+         {foo} 
       </div>
     </>
   )

packages/compiler-tsx/test/__snapshots__/baseline.md

@@ -39,18 +39,21 @@ function __VueDX__render() {
         {...(foo)}
         onClick={__VueDX__TypeCheck.internal.first([
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
           () => {
+          if(!($event.currentTarget instanceof HTMLDivElement)) throw new Error;
           console.log
           }, 
         ])}
         /*<vuedx:tsx-completions-target/>*/
       >
-        {foo}
+         {foo} 
       </div>
     </>
   )

packages/compiler-tsx/test/fixtures/ts-script-template.tsx

@@ -12,7 +12,7 @@ import {
 } from './FilesystemHost'
 import { resolveComponents } from './resolveComponents'
 import { resolveDirectives } from './resolveDirectives'
-import * as JSON5 from 'json5'
+import JSON5 from 'json5'
 import * as Path from 'path'
 
 export class VueProject {
@@ -72,6 +72,8 @@ export class VueProject {
         fs.watchFile(projectFile, (_fileName, event) => {
           if (event === FileWatcherEventKind.Changed) {
             this.onProjectFileChange()
+          } else if (event === FileWatcherEventKind.Deleted) {
+            this._config = DEFAULT_PROJECT_CONFIG
           }
         }),
       )

packages/compiler-tsx/test/fixtures/ts-script-template.tsx.map

@@ -24,7 +24,7 @@ const SVG_TAGS = new Set(
     'svg,animate,animateMotion,animateTransform,circle,clipPath,color-profile,' +
     'defs,desc,discard,ellipse,feBlend,feColorMatrix,feComponentTransfer,' +
     'feComposite,feConvolveMatrix,feDiffuseLighting,feDisplacementMap,' +
-    'feDistanceLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +
+    'feDistantLight,feDropShadow,feFlood,feFuncA,feFuncB,feFuncG,feFuncR,' +
     'feGaussianBlur,feImage,feMerge,feMergeNode,feMorphology,feOffset,' +
     'fePointLight,feSpecularLighting,feSpotLight,feTile,feTurbulence,filter,' +
     'foreignObject,g,hatch,hatchpath,image,line,linearGradient,marker,mask,' +
@@ -42,3 +42,168 @@ const VOID_TAGS = new Set(
   ),
 )
 export const isVoidTag = (tagName: string): boolean => VOID_TAGS.has(tagName)
+
+export const HTML_TAG_NAME_TO_CLASS_NAME = {
+  a: 'HTMLAnchorElement',
+  area: 'HTMLAreaElement',
+  audio: 'HTMLAudioElement',
+  base: 'HTMLBaseElement',
+  blockquote: 'HTMLQuoteElement',
+  body: 'HTMLBodyElement',
+  br: 'HTMLBRElement',
+  button: 'HTMLButtonElement',
+  canvas: 'HTMLCanvasElement',
+  caption: 'HTMLTableCaptionElement',
+  data: 'HTMLDataElement',
+  datalist: 'HTMLDataListElement',
+  details: 'HTMLDetailsElement',
+  dialog: 'HTMLDialogElement',
+  div: 'HTMLDivElement',
+  dl: 'HTMLDListElement',
+  embed: 'HTMLEmbedElement',
+  fieldset: 'HTMLFieldSetElement',
+  form: 'HTMLFormElement',
+  h1: 'HTMLHeadingElement',
+  head: 'HTMLHeadElement',
+  hr: 'HTMLHRElement',
+  html: 'HTMLHtmlElement',
+  iframe: 'HTMLIFrameElement',
+  img: 'HTMLImageElement',
+  input: 'HTMLInputElement',
+  label: 'HTMLLabelElement',
+  legend: 'HTMLLegendElement',
+  li: 'HTMLLIElement',
+  link: 'HTMLLinkElement',
+  main: 'HTMLMainElement',
+  map: 'HTMLMapElement',
+  menu: 'HTMLMenuElement',
+  meta: 'HTMLMetaElement',
+  meter: 'HTMLMeterElement',
+  nav: 'HTMLNavElement',
+  object: 'HTMLObjectElement',
+  ol: 'HTMLOListElement',
+  optgroup: 'HTMLOptGroupElement',
+  option: 'HTMLOptionElement',
+  output: 'HTMLOutputElement',
+  p: 'HTMLParagraphElement',
+  param: 'HTMLParamElement',
+  picture: 'HTMLPictureElement',
+  pre: 'HTMLPreElement',
+  progress: 'HTMLProgressElement',
+  q: 'HTMLQuoteElement',
+  script: 'HTMLScriptElement',
+  select: 'HTMLSelectElement',
+  slot: 'HTMLSlotElement',
+  source: 'HTMLSourceElement',
+  span: 'HTMLSpanElement',
+  style: 'HTMLStyleElement',
+  table: 'HTMLTableElement',
+  tbody: 'HTMLTableSectionElement',
+  td: 'HTMLTableCellElement',
+  template: 'HTMLTemplateElement',
+  textarea: 'HTMLTextAreaElement',
+  tfoot: 'HTMLTableSectionElement',
+  th: 'HTMLTableCellElement',
+  thead: 'HTMLTableSectionElement',
+  title: 'HTMLTitleElement',
+  tr: 'HTMLTableRowElement',
+  track: 'HTMLTrackElement',
+  ul: 'HTMLUListElement',
+  video: 'HTMLVideoElement',
+}
+
+export const SVG_TAG_NAME_TO_CLASS_NAME = {
+  a: 'SVGAElement',
+  altGlyph: 'SVGAltGlyphElement',
+  altGlyphDef: 'SVGAltGlyphDefElement',
+  altGlyphItem: 'SVGAltGlyphItemElement',
+  animate: 'SVGAnimateElement',
+  animateMotion: 'SVGAnimateMotionElement',
+  animateTransform: 'SVGAnimateTransformElement',
+  circle: 'SVGCircleElement',
+  clipPath: 'SVGClipPathElement',
+  defs: 'SVGDefsElement',
+  desc: 'SVGDescElement',
+  ellipse: 'SVGEllipseElement',
+  feBlend: 'SVGFEBlendElement',
+  feColorMatrix: 'SVGFEColorMatrixElement',
+  feComponentTransfer: 'SVGFEComponentTransferElement',
+  feComposite: 'SVGFECompositeElement',
+  feConvolveMatrix: 'SVGFEConvolveMatrixElement',
+  feDiffuseLighting: 'SVGFEDiffuseLightingElement',
+  feDisplacementMap: 'SVGFEDisplacementMapElement',
+  feDistantLight: 'SVGFEDistantLightElement',
+  feDropShadow: 'SVGFEDropShadowElement',
+  feFlood: 'SVGFEFloodElement',
+  feFuncA: 'SVGFEFuncAElement',
+  feFuncB: 'SVGFEFuncBElement',
+  feFuncG: 'SVGFEFuncGElement',
+  feFuncR: 'SVGFEFuncRElement',
+  feGaussianBlur: 'SVGFEGaussianBlurElement',
+  feImage: 'SVGFEImageElement',
+  feMerge: 'SVGFEMergeElement',
+  feMergeNode: 'SVGFEMergeNodeElement',
+  feMorphology: 'SVGFEMorphologyElement',
+  feOffset: 'SVGFEOffsetElement',
+  fePointLight: 'SVGFEPointLightElement',
+  feSpecularLighting: 'SVGFESpecularLightingElement',
+  feSpotLight: 'SVGFESpotLightElement',
+  feTile: 'SVGFETileElement',
+  feTurbulence: 'SVGFETurbulenceElement',
+  filter: 'SVGFilterElement',
+  foreignObject: 'SVGForeignObjectElement',
+  g: 'SVGGElement',
+  hatch: 'SVGHatchElement',
+  hatchpath: 'SVGHatchpathElement',
+  image: 'SVGImageElement',
+  line: 'SVGLineElement',
+  linearGradient: 'SVGLinearGradientElement',
+  marker: 'SVGMarkerElement',
+  mask: 'SVGMaskElement',
+  mesh: 'SVGMeshElement',
+  meshgradient: 'SVGMeshGradientElement',
+  meshpatch: 'SVGMeshPatchElement',
+  meshrow: 'SVGMeshRowElement',
+  metadata: 'SVGMetadataElement',
+  mpath: 'SVGMPathElement',
+  path: 'SVGPathElement',
+  pattern: 'SVGPatternElement',
+  polygon: 'SVGPolygonElement',
+  polyline: 'SVGPolylineElement',
+  radialGradient: 'SVGRadialGradientElement',
+  rect: 'SVGRectElement',
+  script: 'SVGScriptElement',
+  set: 'SVGSetElement',
+  stop: 'SVGStopElement',
+  style: 'SVGStyleElement',
+  svg: 'SVGSVGElement',
+  switch: 'SVGSwitchElement',
+  symbol: 'SVGSymbolElement',
+  text: 'SVGTextElement',
+  textPath: 'SVGTextPathElement',
+  title: 'SVGTitleElement',
+  tspan: 'SVGTSpanElement',
+  unknown: 'SVGUnknownElement',
+  use: 'SVGUseElement',
+  view: 'SVGViewElement',
+}
+
+export function getClassNameForTagName(tagName: string): string {
+  if (isSVGTag(tagName)) {
+    return (
+      SVG_TAG_NAME_TO_CLASS_NAME[
+        tagName as keyof typeof SVG_TAG_NAME_TO_CLASS_NAME
+      ] ?? 'SVGElement'
+    )
+  }
+
+  if (isHTMLTag(tagName)) {
+    return (
+      HTML_TAG_NAME_TO_CLASS_NAME[
+        tagName as keyof typeof HTML_TAG_NAME_TO_CLASS_NAME
+      ] ?? 'HTMLElement'
+    )
+  }
+
+  return 'Element'
+}

packages/projectconfig/src/project/VueProject.ts

@@ -0,0 +1,58 @@
+import { parse } from '../../compiler-tsx/src/template/parse'
+import { findTemplateNodeAt } from './helpers'
+import { NodeTypes } from './node'
+
+describe(findTemplateNodeAt, () => {
+  const options = { onError: () => {} }
+
+  for (const code of [
+    '<div @',
+    '<div v-on',
+    '<div v-on:',
+    '<div :',
+    '<div ^',
+    '<div .',
+    '<div v-bind',
+    '<div v-bind:',
+  ]) {
+    it(code, () => {
+      const ast = parse(code, options)
+      const { node } = findTemplateNodeAt(ast, code.length)
+      expect(node?.type).toBe(NodeTypes.DIRECTIVE)
+    })
+  }
+
+  for (const code of [
+    '<div @click ',
+    '<div v-on:click ',
+    '<div :click ',
+    '<div ^click ',
+    '<div .click ',
+    '<div v-bind:click ',
+  ]) {
+    it(code, () => {
+      const ast = parse(code, options)
+      const { node, ancestors } = findTemplateNodeAt(ast, code.length - 1)
+      expect(node?.type).toBe(NodeTypes.SIMPLE_EXPRESSION)
+      const ancestor = ancestors[ancestors.length - 1]
+      expect(ancestor.node.type).toBe(NodeTypes.DIRECTIVE)
+    })
+  }
+
+  for (const code of [
+    '<div @[click] ',
+    '<div v-on:[click] ',
+    '<div :[click] ',
+    '<div ^[click] ',
+    '<div .[click] ',
+    '<div v-bind:[click] ',
+  ]) {
+    it(code, () => {
+      const ast = parse(code, options)
+      const { node, ancestors } = findTemplateNodeAt(ast, code.length - 2)
+      expect(node?.type).toBe(NodeTypes.SIMPLE_EXPRESSION)
+      const ancestor = ancestors[ancestors.length - 1]
+      expect(ancestor.node.type).toBe(NodeTypes.DIRECTIVE)
+    })
+  }
+})

packages/shared/src/html.ts

@@ -0,0 +1,108 @@
+import { first } from '@vuedx/shared'
+import TypeScript from 'typescript/lib/tsserverlibrary'
+
+export interface KnownIdentifier {
+  name: string
+  kind:
+    | 'variable'
+    | 'function'
+    | 'class'
+    | 'enum'
+    | 'ref'
+    | 'maybeRef'
+    | 'external'
+    | 'externalRef'
+    | 'externalMaybeRef'
+}
+
+export function findIdentifiers(
+  ts: typeof TypeScript,
+  program: TypeScript.Program,
+  sourceFile: TypeScript.SourceFile,
+): KnownIdentifier[] {
+  const checker = program.getTypeChecker()
+  const identifiers: KnownIdentifier[] = []
+
+  checker
+    .getSymbolsInScope(
+      sourceFile,
+      (ts.SymbolFlags.FunctionScopedVariable |
+        ts.SymbolFlags.BlockScopedVariable |
+        ts.SymbolFlags.Function |
+        ts.SymbolFlags.Class |
+        ts.SymbolFlags.ConstEnum |
+        ts.SymbolFlags.RegularEnum |
+        ts.SymbolFlags.Alias) &
+        ~(
+          ts.SymbolFlags.Interface |
+          ts.SymbolFlags.TypeLiteral |
+          ts.SymbolFlags.TypeParameter |
+          ts.SymbolFlags.TypeAlias
+        ),
+    )
+    .forEach((sym) => {
+      const name = sym.getName()
+      const flags = sym.getFlags()
+      const kind: KnownIdentifier['kind'] =
+        (flags & ts.SymbolFlags.Function) !== 0
+          ? 'function'
+          : (flags & ts.SymbolFlags.Class) !== 0
+          ? 'class'
+          : (flags & ts.SymbolFlags.ConstEnum) !== 0 ||
+            (flags & ts.SymbolFlags.RegularEnum) !== 0
+          ? 'enum'
+          : (flags & ts.SymbolFlags.Alias) !== 0
+          ? 'externalMaybeRef'
+          : 'maybeRef'
+
+      if (
+        kind === 'maybeRef' &&
+        sym.valueDeclaration != null &&
+        ts.isVariableDeclaration(sym.valueDeclaration) &&
+        sym.valueDeclaration.initializer != null
+      ) {
+        const { initializer, type } = sym.valueDeclaration
+
+        if (type == null) {
+          if (
+            !(
+              ts.isCallExpression(initializer) || ts.isIdentifier(initializer)
+            ) ||
+            (ts.isCallExpression(initializer) &&
+              ts.isIdentifier(initializer.expression) &&
+              ['defineProps', 'defineEmits'].includes(
+                initializer.expression.getText(),
+              ))
+          ) {
+            return identifiers.push({ name, kind: 'variable' })
+          }
+        }
+      }
+
+      if (
+        kind === 'externalMaybeRef' &&
+        sym.declarations != null &&
+        sym.declarations.length > 0
+      ) {
+        const declaration = first(sym.declarations)
+        if (ts.isImportClause(declaration)) {
+          if (declaration.isTypeOnly) return
+          if (
+            ts.isStringLiteral(declaration.parent.moduleSpecifier) &&
+            declaration.parent.moduleSpecifier.text.endsWith('.vue')
+          ) {
+            return identifiers.push({ name, kind: 'external' })
+          }
+        } else if (ts.isNamespaceImport(declaration)) {
+          if (declaration.parent.isTypeOnly) return
+        } else if (ts.isImportSpecifier(declaration)) {
+          if (declaration.isTypeOnly) return
+          if (declaration.parent.parent.isTypeOnly) return
+        }
+      }
+
+      return identifiers.push({ name, kind })
+    })
+
+  return identifiers
+}

packages/template-ast-types/src/helpers.spec.ts

@@ -1,3 +1,4 @@
 export * from './TransformScriptOptions'
 export * from './tsTransformScript'
 export * from './tsTransformScriptSetup'
+export * from './findIdentifiers'

packages/transforms/src/findIdentifiers.ts

@@ -5,11 +5,12 @@ import {
   SourceTransformer,
 } from '@vuedx/shared'
 import type TypeScript from 'typescript/lib/tsserverlibrary'
+import { findIdentifiers, KnownIdentifier } from './findIdentifiers'
 import { TransformScriptOptions } from './TransformScriptOptions'
 export interface TransformScriptResult {
   code: string
   map: DecodedSourceMap
-  identifiers: string[]
+  identifiers: KnownIdentifier[]
   componentIdentifier: string
   name: string
   inheritAttrs: boolean
@@ -71,10 +72,7 @@ export function transformScript(
 
   findNodes(sourceFile)
 
-  const identifiers = program
-    .getTypeChecker()
-    .getSymbolsInScope(sourceFile, ts.SymbolFlags.Value)
-    .map((sym) => sym.getName())
+  const identifiers = findIdentifiers(ts, program, sourceFile)
 
   if (defaultExport != null) {
     const needsDefineComponent = ts.isObjectLiteralExpression(

packages/transforms/src/index.ts

@@ -5,11 +5,12 @@ import {
   SourceTransformer,
 } from '@vuedx/shared'
 import type TypeScript from 'typescript/lib/tsserverlibrary'
+import { findIdentifiers, KnownIdentifier } from './findIdentifiers'
 import { TransformScriptOptions } from './TransformScriptOptions'
 export interface TransformScriptSetupResult {
   code: string
   map: DecodedSourceMap
-  identifiers: string[]
+  identifiers: KnownIdentifier[]
   propsIdentifier: string
   emitsIdentifier: string
   exposeIdentifier: string
@@ -90,10 +91,7 @@ export function transformScriptSetup(
 
   findNodes(sourceFile)
 
-  const identifiers = program
-    .getTypeChecker()
-    .getSymbolsInScope(sourceFile, ts.SymbolFlags.Value)
-    .map((sym) => sym.getName())
+  const identifiers = findIdentifiers(ts, program, sourceFile)
 
   const offset =
     firstStatement == null ? source.length : firstStatement.getFullStart()

packages/transforms/src/tsTransformScript.ts

@@ -271,6 +271,77 @@ describe(transformScriptSetup, () => {
       const __ScriptSetup_Component = _defineComponent((_: typeof __ScriptSetup_internalProps)=> {});
     `)
   })
+
+  it('should detect all symbols', () => {
+    const { identifiers } = compile(`
+      import { aNamedImport, type TypeNamedImport } from 'vue'
+      import * as aNamespaceImport from 'vue'
+      import aDefaultImport from './A.vue'
+      import type TypeDefaultImport from './B.vue'
+      import type * as TypeNamespaceImport from './C.vue'
+      
+      var aVar = 0
+      let aLet: Ref<number> | number = 0
+      const aConst = ref(0)
+      enum aEnum {}
+      const {aDestructuredProperty} = {}
+      const [aDestructuredArray] = []
+      function aFunction() {}
+      class aClass {}
+      interface TypeInterface {}
+      type TypeType = {}
+      namespace aNamespace {
+        export const aConst = 0
+      }
+    `)
+
+    expect(identifiers).toEqual([
+      {
+        kind: 'function',
+        name: 'aFunction',
+      },
+      {
+        kind: 'externalMaybeRef',
+        name: 'aNamedImport',
+      },
+      {
+        kind: 'externalMaybeRef',
+        name: 'aNamespaceImport',
+      },
+      {
+        kind: 'external',
+        name: 'aDefaultImport',
+      },
+      {
+        kind: 'variable',
+        name: 'aVar',
+      },
+      {
+        kind: 'maybeRef',
+        name: 'aLet',
+      },
+      {
+        kind: 'maybeRef',
+        name: 'aConst',
+      },
+      {
+        kind: 'enum',
+        name: 'aEnum',
+      },
+      {
+        kind: 'maybeRef',
+        name: 'aDestructuredProperty',
+      },
+      {
+        kind: 'maybeRef',
+        name: 'aDestructuredArray',
+      },
+      {
+        kind: 'class',
+        name: 'aClass',
+      },
+    ])
+  })
 })
 
 function trimIndent(str: string) {

packages/transforms/src/tsTransformScriptSetup.ts

@@ -1,12 +1,14 @@
 import { annotations } from '@vuedx/compiler-tsx'
 import { VueProject } from '@vuedx/projectconfig'
-import { lcfirst, ucfirst } from '@vuedx/shared'
+import { isHTMLTag, isSVGTag, last, lcfirst, ucfirst } from '@vuedx/shared'
 import {
   isAttributeNode,
   isComponentNode,
   isDirectiveNode,
   isPlainElementNode,
+  isSimpleExpressionNode,
   Node,
+  TraversalAncestors,
 } from '@vuedx/template-ast-types'
 import { VueSFCDocument } from '@vuedx/vue-virtual-textdocument'
 import { inject, injectable } from 'inversify'
@@ -17,6 +19,13 @@ import { LoggerService } from '../services/LoggerService'
 import { TemplateDeclarationsService } from '../services/TemplateDeclarationsService'
 import { TypescriptContextService } from '../services/TypescriptContextService'
 
+type CompletionContextKind =
+  | 'tag'
+  | 'attribute'
+  | 'propName'
+  | 'eventName'
+  | 'directiveArg'
+
 @injectable()
 export class CompletionsService
   implements
@@ -62,24 +71,28 @@ export class CompletionsService
         )
       },
       template: (file) => {
-        const { node, templateRange } = this.declarations.findTemplateNode(
-          file,
-          position,
-        )
+        const { node, ancestors, templateRange } =
+          this.declarations.findTemplateNode(file, position)
+
         if (node == null) return
         let generatedPosition = file.generatedOffsetAt(position)
         if (generatedPosition == null) return
 
         const kind = this.detectCompletionContext(
+          ancestors,
           node,
           position - templateRange.start,
         )
 
+        console.log(`@@@ completion`, kind, node)
+
         if (kind === 'attribute') {
-          generatedPosition = file.generated
+          const index = file.generated
             .getText()
             .indexOf(annotations.tsxCompletions, generatedPosition)
-          if (generatedPosition === -1) return
+          if (index !== -1) {
+            generatedPosition = index
+          }
         }
 
         return this.processCompletionInfo(
@@ -124,11 +137,20 @@ export class CompletionsService
         )
       },
       template: (file) => {
-        const actualEntryName = /^(:|v-bind:)/.test(entryName)
-          ? entryName.replace(/^(:|v-bind:)/, '')
-          : /^(@|v-on:)/.test(entryName)
-          ? `on${ucfirst(entryName.replace(/^(@|v-on:)/, ''))}`
-          : entryName
+        const { ancestors, node, templateRange } =
+          this.declarations.findTemplateNode(file, position)
+        if (node == null) return
+        const mode = this.detectCompletionContext(
+          ancestors,
+          node,
+          position - templateRange.start,
+        )
+        const actualEntryName =
+          mode === 'eventName'
+            ? `on${ucfirst(entryName)}`
+            : mode === 'attribute'
+            ? entryName.replace(/^(v-(?:bind|on):|[@:^.])/, '')
+            : entryName
         const generatedPosition = file.generatedOffsetAt(position)
         if (generatedPosition == null) return
         return this.processCompletionEntryDetails(
@@ -141,6 +163,7 @@ export class CompletionsService
             preferences,
             data,
           ),
+          entryName,
         )
       },
     })
@@ -216,7 +239,7 @@ export class CompletionsService
 
   public processCompletionInfo<T extends TypeScript.CompletionInfo | undefined>(
     info: T,
-    kind?: 'attribute' | 'tag',
+    kind?: CompletionContextKind,
     project?: VueProject,
   ): T {
     if (info == null) return info
@@ -230,18 +253,75 @@ export class CompletionsService
       ...info,
       entries: info.entries.flatMap((entry) => {
         if (entry.name.startsWith('__VueDX_')) return [] // exclude internals
-        if (kind === 'attribute') {
+        if (kind === 'tag') {
+          if (
+            entry.kind === this.ts.lib.ScriptElementKind.alias ||
+            entry.kind === this.ts.lib.ScriptElementKind.classElement
+          ) {
+            if (
+              /^[A-Z]/.test(entry.name) &&
+              entry.kindModifiers?.includes('export') === true
+            ) {
+              return [entry]
+            }
+          }
+
+          if (
+            entry.kind === this.ts.lib.ScriptElementKind.memberVariableElement
+          ) {
+            // TODO: filter depending on svg/html context
+            if (isHTMLTag(entry.name) || isSVGTag(entry.name)) return [entry]
+          }
+
+          return []
+        }
+
+        if (
+          kind === 'attribute' ||
+          kind === 'eventName' ||
+          kind === 'propName'
+        ) {
           if (
             entry.kind === this.ts.lib.ScriptElementKind.memberVariableElement // TODO: check others
           ) {
             if (entry.name.startsWith('on')) {
-              return [
-                { ...entry, name: `${vOn}${lcfirst(entry.name.slice(2))}` },
-              ]
-            } else {
-              return [entry, { ...entry, name: `${vBind}${entry.name}` }]
+              if (kind === 'propName') return []
+              const arg = lcfirst(entry.name.slice(2))
+              const name = kind === 'attribute' ? `${vOn}${arg}` : `${arg}`
+              const insertText =
+                entry.insertText != null
+                  ? entry.isSnippet
+                    ? `${name}="$1"`
+                    : name
+                  : undefined
+
+              return [{ ...entry, name, insertText }]
+            } else if (kind !== 'eventName') {
+              const attribute = {
+                ...entry,
+                insertText:
+                  entry.insertText != null
+                    ? entry.isSnippet
+                      ? `${entry.name}="$1"`
+                      : entry.name
+                    : undefined,
+              }
+              const prop = {
+                ...entry,
+                name: `${vBind}${entry.name}`,
+                insertText:
+                  entry.insertText != null
+                    ? entry.isSnippet
+                      ? `${vBind}${entry.name}="$1"`
+                      : entry.name
+                    : undefined,
+              }
+
+              return kind === 'attribute' ? [attribute, prop] : [attribute]
             }
           }
+
+          return []
         }
 
         return [entry]
@@ -251,17 +331,14 @@ export class CompletionsService
 
   public processCompletionEntryDetails(
     entryDetails: TypeScript.CompletionEntryDetails | undefined,
+    entryName?: string,
   ): TypeScript.CompletionEntryDetails | undefined {
     if (entryDetails == null) return entryDetails
 
     return {
       ...entryDetails,
+      name: entryName ?? entryDetails.name,
       codeActions: entryDetails.codeActions?.flatMap((action) => {
-        this.logger.debug(
-          '@@@ codeActions',
-          action,
-          JSON.stringify(action.changes, null, 2),
-        )
         const changes = this.fs.resolveAllFileTextChanges(action.changes)
         if (changes.length === 0) return []
         return { ...action, changes }
@@ -270,10 +347,13 @@ export class CompletionsService
   }
 
   private detectCompletionContext(
+    ancestors: TraversalAncestors,
     node: Node,
     offset: number,
-  ): 'attribute' | 'tag' | undefined {
+  ): CompletionContextKind | undefined {
     if (isComponentNode(node) || isPlainElementNode(node)) {
+      if (node.tag.trim() === '') return 'tag'
+
       const isOpenTag = isOffsetInSourceLocation(node.startTagLoc, offset)
       const isTagName = isOffsetInSourceLocation(node.tagLoc, offset)
 
@@ -289,13 +369,32 @@ export class CompletionsService
         return 'attribute'
       }
     } else if (isDirectiveNode(node)) {
-      const isDirectiveArgument = isOffsetInSourceLocation(
-        node.arg?.loc,
-        offset,
-      )
+      const isDirectiveArgument =
+        (node.arg == null && node.exp == null && node.modifiers.length === 0) ||
+        isOffsetInSourceLocation(node.arg?.loc, offset)
 
       if (isDirectiveArgument) {
-        return 'attribute'
+        return node.name === 'on'
+          ? 'eventName'
+          : node.name === 'bind'
+          ? 'propName'
+          : 'directiveArg'
+      }
+    } else if (isSimpleExpressionNode(node) && ancestors.length > 0) {
+      const directive = last(ancestors).node
+      if (isDirectiveNode(directive)) {
+        const isDirectiveArgument = isOffsetInSourceLocation(
+          directive.arg?.loc,
+          offset,
+        )
+
+        if (isDirectiveArgument) {
+          return directive.name === 'on'
+            ? 'eventName'
+            : directive.name === 'bind'
+            ? 'propName'
+            : 'directiveArg'
+        }
       }
     }
 

packages/transforms/test/tsTransformScriptSetup.spec.ts

@@ -90,6 +90,15 @@ export class QuickInfoService {
     const textSpan = file.findOriginalTextSpan(quickInfo.textSpan)
     if (textSpan == null) return
 
-    return { ...quickInfo, textSpan }
+    return {
+      ...quickInfo,
+      textSpan,
+      displayParts: quickInfo.displayParts?.map((part) => {
+        return {
+          ...part,
+          text: part.text.replace('__VueDX_', ''),
+        }
+      }),
+    }
   }
 }

packages/typescript-plugin-vue/src/features/CompletionsService.ts

@@ -2,6 +2,7 @@ import {
   isNotNull,
   isProjectRuntimeFile,
   isVueRuntimeFile,
+  last,
 } from '@vuedx/shared'
 import {
   Range,
@@ -308,8 +309,23 @@ export class FilesystemService implements Disposable {
         textChanges: fileTextChanges.textChanges
           .map((textChange) => {
             const span = file.findOriginalTextSpan(textChange.span)
-
             if (span == null) return null
+            const block = file.getBlockAt(span.start)
+            if (block == null) {
+              const previous = file.blocks.filter(
+                (block) => block.loc.end.offset <= span.start,
+              )
+              const target =
+                previous.length === 0
+                  ? file.descriptor.scriptSetup ?? file.descriptor.script
+                  : last(previous)
+
+              if (target != null) {
+                span.start = target.loc.end.offset
+                span.length = 0
+              }
+            }
+
             return { span, newText: textChange.newText }
           })
           .filter(isNotNull),

packages/typescript-plugin-vue/src/features/QuickInfoService.ts

@@ -8,10 +8,8 @@ import {
   toPosixPath,
 } from '@vuedx/shared'
 import * as Path from 'path'
-import { TS_LANGUAGE_SERVICE } from '../constants'
 import type { Disposable } from '../contracts/Disposable'
 import type {
-  ExtendedTSLanguageService,
   TSLanguageService,
   TSLanguageServiceHost,
   TSProject,
@@ -254,51 +252,18 @@ export class TypescriptContextService implements Disposable {
       rootDir.startsWith(key),
     )
 
-    // If key is not null, then the project must exist.
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    if (key != null) return this.#projects.get(key)!
+    if (key != null) {
+      const project = this.#projects.get(key)
+      invariant(project != null)
+      return project
+    }
 
     const project = VueProject.create(this.serverHost, rootDir)
-
     this.#projects.set(rootDir, project)
 
     return project
   }
 
-  /**
-   * Find typescript laguage service for the file.
-   */
-  public getServiceFor(fileName: string): TypeScript.LanguageService | null {
-    return this.getProjectFor(fileName)?.getLanguageService() ?? null
-  }
-
-  /**
-   * Find typescript laguage service for the file.
-   */
-  public getUndecoratedServiceFor(
-    fileName: string,
-  ): TypeScript.LanguageService | null {
-    const service = this.getServiceFor(fileName) as ExtendedTSLanguageService
-    if (service == null) return null
-    if (TS_LANGUAGE_SERVICE in service) return service[TS_LANGUAGE_SERVICE]()
-    return service
-  }
-
-  public ensureProjectFor(fileName: string): void {
-    const scriptInfo =
-      this.projectService.getScriptInfoEnsuringProjectsUptoDate(fileName)
-
-    if (scriptInfo == null) {
-      this.logger.debug(`No ScriptInfo for ${fileName}`)
-      return
-    }
-
-    this.logger.debug(
-      `Project of ${fileName}`,
-      scriptInfo.containingProjects.map((project) => project.getProjectName()),
-    )
-  }
-
   /**
    * Find source file in typescript program
    */
@@ -310,10 +275,6 @@ export class TypescriptContextService implements Disposable {
     }
   }
 
-  public getTypeChecker(): TypeScript.TypeChecker | null {
-    return this.service.getProgram()?.getTypeChecker() ?? null
-  }
-
   public dispose(): void {
     this.#projects.forEach((project) => project.dispose())
     this.#projects.clear()

packages/typescript-plugin-vue/src/services/FilesystemService.ts

@@ -2,10 +2,15 @@ import { createVersionedCache } from '@vuedx/shared'
 import {
   ClientCapabilities,
   DocumentContext,
+  getDefaultHTMLDataProvider,
   getLanguageService,
   HTMLDocument,
+  IAttributeData,
+  IHTMLDataProvider,
   LanguageService,
   newHTMLDataProvider,
+  Scanner,
+  TokenType,
 } from 'vscode-html-languageservice'
 import { Position, TextDocument } from 'vscode-languageserver-textdocument'
 import { CompletionList, Hover } from 'vscode-languageserver-types'
@@ -90,33 +95,112 @@ class BaseLanguageMode implements LanguageMode {
 }
 
 export class LanguageModeVueHTML extends BaseLanguageMode {
+  private readonly template: IHTMLDataProvider
+
   constructor(fs: FileSystemProvider, supportMarkdown: boolean = true) {
+    const template = newHTMLDataProvider('vue-html', VUE_HTML_EXTENSIONS)
+    const html = getDefaultHTMLDataProvider()
+
     super(
       'vue-html',
       getLanguageService({
-        useDefaultDataProvider: true,
+        useDefaultDataProvider: false,
         clientCapabilities: supportMarkdown ? markdown : plaintext,
         customDataProviders: [
-          newHTMLDataProvider('vue-html', VUE_HTML_EXTENSIONS),
+          {
+            getId: () => 'vue-html',
+            isApplicable: (languageId) =>
+              languageId === 'vue-html' || languageId === 'html',
+            provideTags: () => html.provideTags(),
+            provideAttributes: (tag) => {
+              if (/^[A-Z]/.test(tag)) {
+                return template.provideAttributes(tag)
+              }
+
+              return [
+                ...template.provideAttributes(tag),
+                ...html.provideAttributes(tag),
+              ]
+            },
+            provideValues: (tag, attribute) => {
+              if (/^[A-Z]/.test(tag)) {
+                return template.provideValues(tag, attribute)
+              }
+
+              return [
+                ...template.provideValues(tag, attribute),
+                ...html.provideValues(tag, attribute),
+              ]
+            },
+          },
         ],
         fileSystemProvider: fs as any,
       }),
     )
+
+    this.template = template
   }
 
-  public async complete(
+  private readonly shorthands: Record<string, string> = {
+    ':': 'v-bind',
+    '@': 'v-on',
+    '#': 'v-slot',
+    '.': 'v-bind',
+    '^': 'v-bind',
+  }
+
+  public async hover(
     document: TextDocument,
     position: Position,
-  ): Promise<CompletionList> {
-    const html = this.getHtmlDocument(document)
-    const node = html.findNodeAt(document.offsetAt(position))
-    const isComponent = node.tag != null && /[A-Z]/.test(node.tag)
-    const result = await super.complete(document, position)
-    if (isComponent) {
-      result.items = result.items.filter((item) => item.label.startsWith('v-'))
+  ): Promise<Hover | null> {
+    const offset = document.offsetAt(position)
+    const node = this.getHtmlDocument(document).findNodeAt(offset)
+    const result =
+      node.tag != null && /^[A-Z]/.test(node.tag)
+        ? null
+        : await super.hover(document, position)
+    if (result != null) return result
+    const scanner = this.findToken(document, offset, TokenType.AttributeName)
+    if (scanner == null) return null
+
+    const attribute = scanner.getTokenText()
+    const directive =
+      this.shorthands[attribute.charAt(0)] ?? attribute.replace(/:.*$/, '')
+    if (!directive.startsWith('v-')) return null
+
+    const length = attribute.startsWith('v-') ? directive.length : 1
+    if (offset > scanner.getTokenOffset() + length + 1) return null
+
+    const info = this.template
+      .provideAttributes('Component')
+      .filter((attribute) => attribute.name === directive)[0]
+    if (info == null) return null
+
+    const contents = generateDocumentation(info)
+    if (contents == null) return null
+
+    const range = {
+      start: document.positionAt(scanner.getTokenOffset()),
+      end: document.positionAt(scanner.getTokenOffset() + length),
     }
 
-    return result
+    return { range, contents }
+  }
+
+  private findToken(
+    document: TextDocument,
+    offset: number,
+    type: TokenType,
+  ): Scanner | null {
+    const node = this.getHtmlDocument(document).findNodeAt(offset)
+    if (node.tag == null) return null
+    const scanner = this.service.createScanner(document.getText(), node.start)
+    let token = scanner.scan()
+    while (token !== TokenType.EOS && scanner.getTokenEnd() < offset) {
+      token = scanner.scan()
+    }
+    if (token !== type) return null
+    return scanner
   }
 }
 
@@ -133,3 +217,31 @@ export class LanguageModeVue extends BaseLanguageMode {
     )
   }
 }
+
+function generateDocumentation(
+  item: IAttributeData,
+): { kind: 'markdown'; value: string } | undefined {
+  const result = {
+    kind: 'markdown' as const,
+    value: '',
+  }
+  if (item.description != null) {
+    result.value +=
+      typeof item.description === 'string'
+        ? item.description
+        : item.description.value
+  }
+  if (item.references != null && item.references.length > 0) {
+    if (result.value.length > 0) {
+      result.value += '\n\n'
+    }
+
+    result.value += item.references
+      .map(function (r) {
+        return '['.concat(r.name, '](').concat(r.url, ')')
+      })
+      .join(' | ')
+  }
+  if (result.value === '') return
+  return result
+}

packages/typescript-plugin-vue/src/services/TypescriptContextService.ts

@@ -49,8 +49,6 @@ const enum MappingKey {
   Name,
 }
 
-const MappingNameRE = /^<<(P|S|T)>>(\d+)(?:|\d+)$/
-
 export class VueSFCDocument implements TextDocument {
   public readonly originalFileName: string
   public readonly generatedFileName: string
@@ -384,14 +382,17 @@ export class VueSFCDocument implements TextDocument {
   }
 
   public findGeneratedTextSpan(spanInOriginalText: TextSpan): TextSpan | null {
-    const start = this.generatedOffsetAt(spanInOriginalText.start)
+    const block = this.getBlockAt(spanInOriginalText.start)
+    if (block == null) return null
+    const isZeroWidth = spanInOriginalText.length === 0
+    const start = this.generatedOffsetAt(spanInOriginalText.start, isZeroWidth)
     if (start == null) return null
-    if (spanInOriginalText.length === 0) return { start, length: 0 }
+    if (isZeroWidth) return { start, length: 0 }
 
-    // TODO: collapse text span end to the end of the block
     const end =
       this.generatedOffsetAt(
         spanInOriginalText.start + spanInOriginalText.length,
+        true,
       ) ?? start
 
     return { start: Math.min(start, end), length: Math.abs(end - start) }
@@ -401,10 +402,10 @@ export class VueSFCDocument implements TextDocument {
     kind: 'generated' | 'original',
     span: TextSpan,
     mapping: Mapping,
-  ): TextSpan | null {
+  ): (TextSpan & { mapping: 'P' | 'S' | 'T' }) | null {
     const name = mapping[MappingKey.Name]
     if (name == null) return null
-    const result = MappingNameRE.exec(name)
+    const result = /^<<(P|S|T)>>(\d+)(?:\|(\d+))?$/.exec(name)
     if (result != null) {
       switch (result[1]) {
         case 'P':
@@ -435,6 +436,7 @@ export class VueSFCDocument implements TextDocument {
                 return {
                   start: original + skipLength,
                   length,
+                  mapping: 'P',
                 }
               }
             } else {
@@ -450,6 +452,7 @@ export class VueSFCDocument implements TextDocument {
                 return {
                   start: generated + skipLength,
                   length,
+                  mapping: 'P',
                 }
               }
             }
@@ -479,7 +482,11 @@ export class VueSFCDocument implements TextDocument {
               ) {
                 const skipLength = Math.abs(span.start - generated)
                 if (skipLength <= diffLength) {
-                  return { start: original, length: originalLength }
+                  return {
+                    start: original,
+                    length: originalLength,
+                    mapping: 'S',
+                  }
                 }
 
                 const length = Math.min(
@@ -490,6 +497,7 @@ export class VueSFCDocument implements TextDocument {
                 return {
                   start: original + skipLength,
                   length,
+                  mapping: 'S',
                 }
               } else {
                 if (
@@ -504,6 +512,7 @@ export class VueSFCDocument implements TextDocument {
                   return {
                     start: generated + diffLength + skipLength,
                     length,
+                    mapping: 'S',
                   }
                 }
               }
@@ -517,31 +526,32 @@ export class VueSFCDocument implements TextDocument {
             const generatedLength = parseInt(result[3], 10)
             invariant(Number.isInteger(originalLength))
             invariant(Number.isInteger(generatedLength))
-            invariant(originalLength >= generatedLength)
             const original = this.original.offsetAt({
               line: mapping[MappingKey.OriginalLine],
               character: mapping[MappingKey.OriginalColumn],
             })
 
-            const genreated = this.generated.offsetAt({
+            const generated = this.generated.offsetAt({
               line: mapping[MappingKey.GeneratedLine],
               character: mapping[MappingKey.GeneratedColumn],
             })
 
             if (kind === 'generated') {
               if (
-                contains({ start: genreated, length: generatedLength }, span)
+                contains({ start: generated, length: generatedLength }, span)
               ) {
                 return {
                   start: original,
                   length: originalLength,
+                  mapping: 'T',
                 }
               }
             } else {
               if (contains({ start: original, length: originalLength }, span)) {
                 return {
-                  start: genreated,
+                  start: generated,
                   length: generatedLength,
+                  mapping: 'T',
                 }
               }
             }
@@ -559,7 +569,10 @@ export class VueSFCDocument implements TextDocument {
     return this.generated.positionAt(generatedOffset)
   }
 
-  public generatedOffsetAt(offset: number): number | null {
+  public generatedOffsetAt(
+    offset: number,
+    isZeroWidth: boolean = false,
+  ): number | null {
     const position = this.original.positionAt(offset)
     const low = this.findMapping(
       'original',
@@ -573,7 +586,11 @@ export class VueSFCDocument implements TextDocument {
       { start: offset, length: 0 },
       low,
     )
-    if (result != null) return result.start
+    if (result != null) {
+      return isZeroWidth && result.mapping === 'T'
+        ? result.start + result.length
+        : result.start
+    }
 
     const originalStart = this.original.offsetAt({
       line: low[MappingKey.OriginalLine],

packages/vue-languageservice/src/modes/LanguageModeHTML.ts

@@ -121,13 +121,11 @@ const __VueDX_ctx = __VueDX_RegisterSelf(new __VueDX__ScriptSetup_Component())
 //#region <template>
 /*<vuedx:templateGlobals>*/
 const __VueDX__get_identifier_a = () => __VueDX_TypeCheck.internal.unref(a);
-const __VueDX__get_identifier_b = () => __VueDX_TypeCheck.internal.unref(b);
 const __VueDX__get_identifier_c = () => __VueDX_TypeCheck.internal.unref(c);
 /*</vuedx:templateGlobals>*/
 function __VueDX_render() {
   /*<vuedx:templateGlobals>*/
   let a = __VueDX__get_identifier_a();
-  let b = __VueDX__get_identifier_b();
   let c = __VueDX__get_identifier_c();
   let $slots = __VueDX_ctx.$slots
   /*</vuedx:templateGlobals>*/
@@ -157,7 +155,6 @@ __VueDX_render();
 function __VueDX__slots() {
   /*<vuedx:templateGlobals>*/
   let a = __VueDX__get_identifier_a();
-  let b = __VueDX__get_identifier_b();
   let c = __VueDX__get_identifier_c();
   let $slots = __VueDX_ctx.$slots
   /*</vuedx:templateGlobals>*/
@@ -192,7 +189,7 @@ exports[`sourcemaps directives 1`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-          ^^^^^ > 5 at 1544 (39:10)
+          ^^^^^ > 5 at 1444 (36:10)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -208,7 +205,7 @@ exports[`sourcemaps directives 2`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-          ^^^^^ > 5 at 1544 (39:10)
+          ^^^^^ > 5 at 1444 (36:10)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -224,7 +221,7 @@ exports[`sourcemaps directives 3`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-             ^^ > 2 at 1547 (39:13)
+             ^^ > 2 at 1447 (36:13)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -240,7 +237,7 @@ exports[`sourcemaps directives 4`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-             ^^ > 2 at 1547 (39:13)
+             ^^ > 2 at 1447 (36:13)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -256,7 +253,7 @@ exports[`sourcemaps directives 5`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-          ^^^^^ > 5 at 1544 (39:10)
+          ^^^^^ > 5 at 1444 (36:10)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -272,7 +269,7 @@ exports[`sourcemaps directives 6`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-          ^^^^^ > 5 at 1544 (39:10)
+          ^^^^^ > 5 at 1444 (36:10)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -288,7 +285,7 @@ exports[`sourcemaps directives 7`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-             ^^ > 2 at 1547 (39:13)
+             ^^ > 2 at 1447 (36:13)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -304,7 +301,7 @@ exports[`sourcemaps directives 8`] = `
         a=""
         onA={__VueDX_TypeCheck.internal.first([
           onNum, 
-             ^^ > 2 at 1547 (39:13)
+             ^^ > 2 at 1447 (36:13)
         ])}
         onB={__VueDX_TypeCheck.internal.first([
 `;
@@ -320,7 +317,7 @@ exports[`sourcemaps directives 9`] = `
         onC={__VueDX_TypeCheck.internal.first([
           ($event) => {
           call.a['func']($event)
-                ^^^^^^^^ > 8 at 1730 (46:16)
+                ^^^^^^^^ > 8 at 1630 (43:16)
           }, 
         ])}
 `;
@@ -336,7 +333,7 @@ exports[`sourcemaps directives 10`] = `
         onC={__VueDX_TypeCheck.internal.first([
           ($event) => {
           call.a['func']($event)
-                ^^^^^^^^ > 8 at 1730 (46:16)
+                ^^^^^^^^ > 8 at 1630 (43:16)
           }, 
         ])}
 `;
@@ -352,7 +349,7 @@ exports[`sourcemaps directives 11`] = `
         onC={__VueDX_TypeCheck.internal.first([
           ($event) => {
           call.a['func']($event)
-                         ^^^^^^ > 6 at 1739 (46:25)
+                         ^^^^^^ > 6 at 1639 (43:25)
           }, 
         ])}
 `;
@@ -368,7 +365,7 @@ exports[`sourcemaps directives 12`] = `
         onC={__VueDX_TypeCheck.internal.first([
           ($event) => {
           call.a['func']($event)
-                         ^^^^^^ > 6 at 1739 (46:25)
+                         ^^^^^^ > 6 at 1639 (43:25)
           }, 
         ])}
 `;
@@ -396,9 +393,6 @@ function __VueDX_RegisterSelf<T>(ctx: T) {
 }
 const __VueDX_ctx = __VueDX_RegisterSelf(new __VueDX__Script_Component())
 //#region <template>
-/*<vuedx:templateGlobals>*/
-const __VueDX__get_identifier_A = () => A;
-/*</vuedx:templateGlobals>*/
 function __VueDX_render() {
   /*<vuedx:templateGlobals>*/
   let $slots = __VueDX_ctx.$slots
@@ -418,7 +412,7 @@ function __VueDX_render() {
               <>
                 {$slots.a
                   ? <>
-                      {foo}
+                       {foo} 
                     </>
                   : null
                 }
@@ -468,7 +462,7 @@ exports[`sourcemaps v-on shorthand 1`] = `
       <B
         a=""
         onA={__VueDX_TypeCheck.internal.first([
-        ^ > 1 at 1464 (37:8)
+        ^^^ > 3 at 1364 (34:8)
           onStr, 
         ])}
 `;
@@ -477,14 +471,14 @@ exports[`sourcemaps v-on shorthand 2`] = `
 
     <template>
       <B a="" @a="onStr" />
-                > 0 at 31 (2:15)
+               ^ > 1 at 31 (2:15)
     </template>
     
 ----
       <B
         a=""
         onA={__VueDX_TypeCheck.internal.first([
-        ^ > 1 at 1464 (37:8)
+        ^^^ > 3 at 1364 (34:8)
           onStr, 
         ])}
 `;

packages/vue-virtual-textdocument/src/VueSFCDocument.ts

@@ -52,18 +52,16 @@ describe('VueSFCDocument', () => {
       const __VueDX_ctx = __VueDX_RegisterSelf(new __VueDX__ScriptSetup_Component())
       //#region <template>
       /*<vuedx:templateGlobals>*/
-      const __VueDX__get_identifier_Foo = () => Foo;
-      /*</vuedx:templateGlobals>*/
-      /*<vuedx:templateGlobals>*/
       const __VueDX__get_identifier_val = () => __VueDX_TypeCheck.internal.unref(val);
+      const __VueDX__get_identifier_Foo = () => __VueDX_TypeCheck.internal.unref(Foo);
       /*</vuedx:templateGlobals>*/
       function __VueDX_render() {
         /*<vuedx:templateGlobals>*/
         let val = __VueDX__get_identifier_val();
         let $slots = __VueDX_ctx.$slots
         /*</vuedx:templateGlobals>*/
         /*<vuedx:templateGlobals>*/
-        const Foo = __VueDX_TypeCheck.internal.resolveComponent({} as unknown as __VueDX_GlobalComponents, {} as unknown as JSX.IntrinsicElements, __VueDX_ctx, __VueDX__get_identifier_Foo(), "Foo" as const, "Foo" as const);
+        const Foo = __VueDX__get_identifier_Foo();
         /*</vuedx:templateGlobals>*/
         return (
           <>
@@ -74,7 +72,7 @@ describe('VueSFCDocument', () => {
                 default: () => {
                   return (
                     <>
-                      {val}
+                       {val} 
                     </>
                   )
                 },

packages/vue-virtual-textdocument/test/__snapshots__/sourcemap.spec.ts.snap

@@ -212,7 +212,7 @@ function getTemplateFile(code: string) {
     lines.push(line(start))
     lines.push(
       ' '.repeat(C) +
-        '^'.repeat(range.length) +
+        '^'.repeat(Math.max(1, range.length)) +
         ` > ${range.length} at ${range.start} (${L}:${C})`,
     )
 

packages/vue-virtual-textdocument/test/index.spec.ts

@@ -0,0 +1,16 @@
+<script lang="ts" setup>
+import FixtureAttrs from './fixture-attrs.vue';
+import FixtureScriptSetupTypeOnly from './fixture-script-setup-type-only.vue';
+import FixtureScriptSetup from './fixture-script-setup.vue';
+import FixtureScript from './fixture-script.vue';
+
+</script>
+
+<template>
+  <FixtureAttrs />
+  <FixtureScript />
+  <FixtureScriptSetup />
+  <FixtureScriptSetupTypeOnly />
+  <button />
+  <input />
+</template>

packages/vue-virtual-textdocument/test/sourcemap.spec.ts

@@ -0,0 +1,7 @@
+<script lang="ts" setup>
+import FixtureAttrs from './fixture-attrs.vue';
+</script>
+
+<template>
+  <
+</template>

samples/vue3/typescript-diagnostics/src/test-completions-attribute.vue

@@ -0,0 +1,226 @@
+import { createEditorContext, getProjectPath } from '../support/helpers'
+import { TestServer } from '../support/TestServer'
+
+describe('completions', () => {
+  const server = new TestServer()
+  const service = createEditorContext(
+    server,
+    getProjectPath('typescript-diagnostics'),
+  )
+
+  beforeAll(
+    async () =>
+      await server.sendCommand('configure', {
+        preferences: {
+          providePrefixAndSuffixTextForRename: true,
+          allowRenameOfImportPath: true,
+          includePackageJsonAutoImports: 'auto',
+        },
+      }),
+  )
+
+  afterAll(async () => await server.close())
+
+  test('suggests open tag', async () => {
+    const editor = await service.open('src/test-completions-tag.vue')
+    editor.setCursor({ line: 5, character: 3 })
+
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('a')
+    expect(completions).toContain('FixtureAttrs')
+  })
+
+  test('suggests auto import', async () => {
+    const editor = await service.open('src/test-completions-tag.vue')
+    editor.setCursor({ line: 5, character: 3 })
+
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+      includeExternalModuleExports: true,
+      includeInsertTextCompletions: true,
+    })
+    assert(response.body)
+    const entry = response.body.entries.find(
+      (entry) => entry.name === 'FixtureScript',
+    )
+
+    assert(entry)
+
+    const details = await server.sendCommand('completionEntryDetails', {
+      ...editor.fileAndLocation,
+      entryNames: [
+        {
+          name: entry.name,
+          source: entry.source,
+          data: entry.data,
+        },
+      ],
+    })
+
+    assert(details.body)
+    expect(details.body).toEqual([
+      expect.objectContaining({ name: 'FixtureScript' }),
+    ])
+
+    const textChanges =
+      details.body[0]?.codeActions?.[0]?.changes?.[0]?.textChanges
+
+    assert(textChanges)
+    await editor.edit(textChanges)
+    expect(editor.document.getText()).toMatchInlineSnapshot(`
+      "<script lang="ts" setup>
+      import FixtureAttrs from './fixture-attrs.vue';
+      import FixtureScript from './fixture-script.vue';
+      </script>
+
+      <template>
+        <
+      </template>
+      "
+    `)
+  })
+
+  test('suggests attributes for components', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 10, character: 17 })
+
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toEqual([
+      'a',
+      ':a',
+      'b',
+      ':b',
+      'c',
+      ':c',
+      'class',
+      ':class',
+      'key',
+      ':key',
+      '@a',
+      '@b',
+      '@c',
+      'ref',
+      ':ref',
+      'style',
+      ':style',
+    ])
+  })
+
+  test('suggests props for components', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 10, character: 17 })
+    editor.type(':')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toEqual(['a', 'b', 'c', 'class', 'key', 'ref', 'style'])
+  })
+
+  test('suggests props for components with prefix', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 10, character: 17 })
+    editor.type(':c')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('class')
+  })
+
+  test('suggests events for components', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 10, character: 17 })
+    editor.type('@')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toEqual([
+      'a',
+      'b',
+      'c',
+      'vnodeBeforeMount',
+      'vnodeBeforeUnmount',
+      'vnodeBeforeUpdate',
+      'vnodeMounted',
+      'vnodeUnmounted',
+      'vnodeUpdated',
+    ])
+  })
+
+  test('suggests attributes for elements', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 14, character: 9 })
+
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('type')
+    expect(completions).toContain(':type')
+    expect(completions).toContain('@click')
+  })
+
+  test('suggests attributes for elements with prefix', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 14, character: 9 })
+    editor.type(':ty')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('type')
+  })
+
+  test('suggests events for elements', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 14, character: 9 })
+    editor.type('@')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('click')
+  })
+
+  test('suggests events for elements with prefix', async () => {
+    const editor = await service.open('src/test-completions-attribute.vue')
+    editor.setCursor({ line: 14, character: 9 })
+    editor.type('@c')
+    const response = await server.sendCommand('completionInfo', {
+      ...editor.fileAndLocation,
+      triggerKind: 1,
+    })
+    assert(response.body)
+    const completions = response.body.entries.map((entry) => entry.name)
+    expect(completions).toContain('click')
+  })
+})
+
+function assert(value: any): asserts value {
+  expect(value).toBeTruthy()
+}

samples/vue3/typescript-diagnostics/src/test-completions-tag.vue

@@ -67,7 +67,7 @@ describe('project', () => {
     )
 
     test('v-html', async () => {
-      const fileName = await editor.open('src/v-html.vue')
+      const { fsPath: fileName } = await editor.open('src/v-html.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -81,7 +81,7 @@ describe('project', () => {
     })
 
     test('v-memo', async () => {
-      const fileName = await editor.open('src/v-memo.vue')
+      const { fsPath: fileName } = await editor.open('src/v-memo.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -93,7 +93,7 @@ describe('project', () => {
     })
 
     test('v-model', async () => {
-      const fileName = await editor.open('src/v-model.vue')
+      const { fsPath: fileName } = await editor.open('src/v-model.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -104,12 +104,21 @@ describe('project', () => {
           Type 'number' is not assignable to type 'string'.",
           "Type '{ modelValue: number | undefined; }' is not assignable to type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ foo?: unknown; bar?: unknown; } & {} & { bar?: string | number | undefined; foo?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })),...'.
           Property 'modelValue' does not exist on type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ foo?: unknown; bar?: unknown; } & {} & { bar?: string | number | undefined; foo?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })),...'.",
+          "Type '{ foo: string | undefined; }' is not assignable to type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.
+          Property 'foo' does not exist on type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.",
+          "Type '{ foo: number | undefined; }' is not assignable to type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.
+          Property 'foo' does not exist on type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.",
+          "Type 'number | undefined' is not assignable to type 'string | undefined'.",
+          "Type '{ bar: string | undefined; }' is not assignable to type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.
+          Property 'bar' does not exist on type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.",
+          "Type '{ bar: number | undefined; }' is not assignable to type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.
+          Property 'bar' does not exist on type 'ReservedProps & Partial<{}> & Omit<((Readonly<{ modelValue?: unknown; } & {} & { modelValue?: string | undefined; }> & { [x: \`on\${Capitalize<string>}\`]: ((...args: any[]) => any) | undefined; }) | (Readonly<...> & { ...; })) & (VNodeProps & ... 3 more ... & ({ ...; } | { ...; })), never>'.",
         ]
       `)
     })
 
     test('v-model-checkbox', async () => {
-      const fileName = await editor.open('src/v-model-checkbox.vue')
+      const { fsPath: fileName } = await editor.open('src/v-model-checkbox.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -118,14 +127,12 @@ describe('project', () => {
           Type '"yes"' is not assignable to type 'Booleanish | undefined'.",
           "Type '"yes" | "no"' is not assignable to type 'Booleanish | undefined'.",
           "Type '"yes" | "no"' is not assignable to type 'Booleanish | undefined'.",
-          "Object is possibly 'null'.",
-          "Property 'checked' does not exist on type 'EventTarget'.",
         ]
       `)
     })
 
     test('v-model-input', async () => {
-      const fileName = await editor.open('src/v-model-input.vue')
+      const { fsPath: fileName } = await editor.open('src/v-model-input.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -139,15 +146,15 @@ describe('project', () => {
     })
 
     test('v-model-select', async () => {
-      const fileName = await editor.open('src/v-model-select.vue')
+      const { fsPath: fileName } = await editor.open('src/v-model-select.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(
         semantic.map((diagnostic) => diagnostic.text),
       ).toMatchInlineSnapshot(`[]`)
     })
 
     test('v-on-native', async () => {
-      const fileName = await editor.open('src/v-on-native.vue')
+      const { fsPath: fileName } = await editor.open('src/v-on-native.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -165,7 +172,7 @@ describe('project', () => {
     })
 
     test('v-on', async () => {
-      const fileName = await editor.open('src/v-on.vue')
+      const { fsPath: fileName } = await editor.open('src/v-on.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -186,7 +193,7 @@ describe('project', () => {
     })
 
     test('v-once', async () => {
-      const fileName = await editor.open('src/v-once.vue')
+      const { fsPath: fileName } = await editor.open('src/v-once.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -202,15 +209,15 @@ describe('project', () => {
     })
 
     test('v-pre', async () => {
-      const fileName = await editor.open('src/v-pre.vue')
+      const { fsPath: fileName } = await editor.open('src/v-pre.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(
         semantic.map((diagnostic) => diagnostic.text),
       ).toMatchInlineSnapshot(`[]`)
     })
 
     test('v-show', async () => {
-      const fileName = await editor.open('src/v-show.vue')
+      const { fsPath: fileName } = await editor.open('src/v-show.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`
@@ -223,7 +230,7 @@ describe('project', () => {
     })
 
     test('v-text', async () => {
-      const fileName = await editor.open('src/v-text.vue')
+      const { fsPath: fileName } = await editor.open('src/v-text.vue')
       const { semantic } = await editor.getDiagnostics(fileName)
       expect(semantic.map((diagnostic) => diagnostic.text))
         .toMatchInlineSnapshot(`

test/specs/completions.spec.ts

@@ -278,7 +278,7 @@ export class TestServer {
     event: string,
     check: (event: any) => boolean = () => true,
   ): Promise<Proto.Event> {
-    return new Promise((resolve) => {
+    return await new Promise((resolve) => {
       this.onceEventHandlers.push((payload) => {
         if (payload.event === event && check(payload)) {
           resolve(payload)

test/specs/diagnostics.spec.ts

@@ -1,8 +1,14 @@
 import * as _FS from 'fs'
 import * as Path from 'path'
-import type { CodeEdit, Location, TextSpan } from 'typescript/lib/protocol'
+import type {
+  CodeEdit,
+  FileLocationRequestArgs,
+  Location,
+  TextSpan,
+} from 'typescript/lib/protocol'
 import {
   Position,
+  Range,
   TextDocument,
   TextEdit,
 } from 'vscode-languageserver-textdocument'
@@ -105,10 +111,10 @@ export async function findAllPositionsIn(
   return pos
 }
 
-const cache = new Map<string, TextDocument>()
+const documents = new Map<string, TextDocument>()
 
 export async function getTextDocument(file: string): Promise<TextDocument> {
-  return cache.get(file) ?? (await createTextDocument(file))
+  return documents.get(file) ?? (await createTextDocument(file))
 }
 
 async function createTextDocument(file: string): Promise<TextDocument> {
@@ -120,7 +126,7 @@ async function createTextDocument(file: string): Promise<TextDocument> {
     content,
   )
 
-  cache.set(file, document)
+  documents.set(file, document)
 
   return document
 }
@@ -143,6 +149,116 @@ export function getProjectPath(
   return Path.resolve(__dirname, '../../samples', version, name)
 }
 
+export class Editor {
+  private readonly server: TestServer
+
+  private _document: TextDocument
+  private _selections: Range[]
+
+  public readonly fsPath: string
+
+  public get document(): TextDocument {
+    return this._document
+  }
+
+  /**
+   * 0-based line number and character offset
+   */
+  public get cursor(): Position {
+    const selection = this._selections[0]
+    if (selection == null) throw new Error('No cursor set')
+    return selection.end
+  }
+
+  public get fileAndLocation(): FileLocationRequestArgs {
+    const location = positionToLocation(this.cursor)
+    return {
+      file: this.fsPath,
+      line: location.line,
+      offset: location.offset,
+    }
+  }
+
+  public get selection(): Range {
+    const selection = this._selections[0]
+    if (selection == null) throw new Error('No cursor set')
+    return selection
+  }
+
+  constructor(server: TestServer, fsPath: string, document: TextDocument) {
+    this.server = server
+    this.fsPath = fsPath
+    this._document = document
+    const end = this._document.positionAt(this._document.getText().length)
+    this._selections = [{ start: end, end }]
+  }
+
+  async type(newText: string): Promise<void> {
+    await this._apply(
+      this._selections.map((range) => ({
+        range,
+        newText,
+      })),
+    )
+  }
+
+  private _transform(offset: number, edits: TextEdit[]): number {
+    edits = edits
+      .slice()
+      .sort((a, b) => a.range.start.line - b.range.start.line)
+
+    let delta = 0
+    for (const edit of edits) {
+      const rangeOffset = this.document.offsetAt(edit.range.start)
+      if (offset < rangeOffset) break
+      delta += edit.newText.length - this.document.getText(edit.range).length
+    }
+
+    return offset + delta
+  }
+
+  private async _apply(edits: TextEdit[]): Promise<void> {
+    const offset = this._transform(this.document.offsetAt(this.cursor), edits)
+    const content = TextDocument.applyEdits(this._document, edits)
+    this._document = TextDocument.update(
+      this._document,
+      [{ text: content }],
+      this._document.version + 1,
+    )
+
+    documents.set(this.fsPath, this._document)
+
+    this.setCursor(this.document.positionAt(offset))
+
+    await this.server.sendCommand('updateOpen', {
+      changedFiles: [
+        {
+          fileName: this.fsPath,
+          textChanges: edits.map(textEditToCodeEdit),
+        },
+      ],
+    })
+  }
+
+  async edit(textChanges: CodeEdit[]): Promise<void> {
+    await this._apply(textChanges.map(codeEditToTextEdit))
+  }
+
+  /**
+   * 0-based line number and character offset
+   */
+  setSelection(cursor: Range): void {
+    this._selections = [cursor]
+  }
+
+  /**
+   * 0-based line number and character offset
+   */
+  setCursor(cursor: Position): void {
+    this.setSelection({ start: cursor, end: cursor })
+  }
+}
+
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function createEditorContext(server: TestServer, rootDir: string) {
   const openFiles = new Set<string>()
@@ -164,92 +280,13 @@ export function createEditorContext(server: TestServer, rootDir: string) {
         })),
       })
 
-      return absFilePath
-    },
-
-    async edit(fileName: string, textOrEdits: string | TextEdit[]) {
-      const absFilePath = abs(fileName)
-      const document = await getTextDocument(absFilePath)
-      const edits: TextEdit[] =
-        typeof textOrEdits === 'string'
-          ? [
-              {
-                newText: textOrEdits,
-                range: {
-                  start: document.positionAt(0),
-                  end: document.positionAt(document.getText().length),
-                },
-              },
-            ]
-          : textOrEdits
-      const content = TextDocument.applyEdits(document, edits)
-
-      cache.set(
-        fileName,
-        TextDocument.update(
-          document,
-          [{ text: content }],
-          document.version + 1,
-        ),
-      )
-
-      await server.sendCommand('updateOpen', {
-        changedFiles: [
-          {
-            fileName: absFilePath,
-            textChanges: edits.map((edit) => textEditToCodeEdit(edit)),
-          },
-        ],
-      })
-    },
-
-    async replaceIn(
-      fileName: string,
-      search: string | RegExp,
-      replace: (...args: string[]) => string,
-    ) {
-      const absFilePath = abs(fileName)
-      const document = await getTextDocument(absFilePath)
-      const content = document.getText()
-
-      if (typeof search === 'string') {
-        const index = content.indexOf(search)
-        if (index < 0) return false
-        await this.edit(fileName, [
-          {
-            range: {
-              start: document.positionAt(index),
-              end: document.positionAt(index + search.length),
-            },
-            newText: replace(),
-          },
-        ])
-        return true
-      } else {
-        const edits: TextEdit[] = []
-        let matches: RegExpExecArray | null
-        while ((matches = search.exec(content)) != null) {
-          const text = matches[0] as string
-          const index = matches.index
-          edits.push({
-            range: {
-              start: document.positionAt(index),
-              end: document.positionAt(index + text.length),
-            },
-            newText: replace(...matches),
-          })
-        }
-        if (edits.length > 0) {
-          await this.edit(fileName, edits)
-        }
-        return false
-      }
+      return new Editor(server, absFilePath, await getTextDocument(absFilePath))
     },
 
     async close(fileName: string) {
       const absFilePath = abs(fileName)
 
-      cache.delete(absFilePath)
+      documents.delete(absFilePath)
       openFiles.delete(absFilePath)
 
       const result = await server.sendCommand('updateOpen', {
@@ -262,17 +299,20 @@ export function createEditorContext(server: TestServer, rootDir: string) {
 
       if (!result.success) throw new Error(result.message)
     },
+
     async closeAll() {
       const result = await server.sendCommand('updateOpen', {
         closedFiles: Array.from(openFiles),
       })
       openFiles.forEach((fileName) => {
-        cache.delete(fileName)
+        documents.delete(fileName)
       })
       if (!result.success) throw new Error(result.message)
       await server.flush(['events', 'requests', 'responses'])
+      documents.clear()
       openFiles.clear()
     },
+
     async getCompilerDiagnostics(fileName: string) {
       const info = await api.getProjectInfo(api.abs(fileName))