Dont include used attributes in suggestions

Author: sapphi-red

.prettierignore

@@ -0,0 +1 @@
+server/src/modes/template/test/completion.test.ts

server/src/modes/template/services/htmlCompletion.ts

@@ -42,6 +42,7 @@ export function doComplete(
   const scanner = createScanner(text, node.start);
   let currentTag: string;
   let currentAttributeName = '';
+  let currentTagStartOffset: number;
 
   function getReplaceRange(replaceStart: number, replaceEnd: number = offset): Range {
     if (replaceStart > offset) {
@@ -147,7 +148,11 @@ export function doComplete(
     return result;
   }
 
-  function collectAttributeNameSuggestions(nameStart: number, nameEnd: number = offset): CompletionList {
+  function collectAttributeNameSuggestions(
+    usedAttributes: string[],
+    nameStart: number,
+    nameEnd: number = offset
+  ): CompletionList {
     const execArray = /^[:@]/.exec(scanner.getTokenText());
     const filterPrefix = execArray ? execArray[0] : '';
     const start = filterPrefix ? nameStart + 1 : nameStart;
@@ -158,6 +163,16 @@ export function doComplete(
     tagProviders.forEach(provider => {
       const priority = provider.priority;
       provider.collectAttributes(currentTag, (attribute, type, documentation) => {
+        if (
+          usedAttributes.includes(normalizeAttribute(attribute)) &&
+          // can listen to same event by adding modifiers
+          type !== 'event' &&
+          // `class` and `:class`, `style` and `:style` can coexist
+          attribute !== 'class' &&
+          attribute !== 'style'
+        ) {
+          return;
+        }
         if ((type === 'event' && filterPrefix !== '@') || (type !== 'event' && filterPrefix === '@')) {
           return;
         }
@@ -271,6 +286,23 @@ export function doComplete(
     return offset;
   }
 
+  function collectUsedAttributes(): string[] {
+    const attrScanner = createScanner(text, currentTagStartOffset);
+
+    let token = attrScanner.scan();
+    let currentAttributeName!: string;
+    const attrs = [];
+    while (token !== TokenType.EOS && token !== TokenType.StartTagClose) {
+      if (token === TokenType.AttributeName) {
+        currentAttributeName = normalizeAttribute(attrScanner.getTokenText());
+      } else if (token === TokenType.AttributeValue) {
+        attrs.push(currentAttributeName);
+      }
+      token = attrScanner.scan();
+    }
+    return attrs;
+  }
+
   let token = scanner.scan();
 
   while (token !== TokenType.EOS && scanner.getTokenOffset() <= offset) {
@@ -280,6 +312,7 @@ export function doComplete(
           const endPos = scanNextForEndPos(TokenType.StartTag);
           return collectTagSuggestions(offset, endPos);
         }
+        currentTagStartOffset = scanner.getTokenOffset();
         break;
       case TokenType.StartTag:
         if (scanner.getTokenOffset() <= offset && offset <= scanner.getTokenEnd()) {
@@ -289,7 +322,8 @@ export function doComplete(
         break;
       case TokenType.AttributeName:
         if (scanner.getTokenOffset() <= offset && offset <= scanner.getTokenEnd()) {
-          return collectAttributeNameSuggestions(scanner.getTokenOffset(), scanner.getTokenEnd());
+          const usedAttrs = collectUsedAttributes();
+          return collectAttributeNameSuggestions(usedAttrs, scanner.getTokenOffset(), scanner.getTokenEnd());
         }
         currentAttributeName = scanner.getTokenText();
         break;
@@ -321,7 +355,8 @@ export function doComplete(
               return collectTagSuggestions(startPos, endTagPos);
             case ScannerState.WithinTag:
             case ScannerState.AfterAttributeName:
-              return collectAttributeNameSuggestions(scanner.getTokenEnd());
+              const usedAttrs = collectUsedAttributes();
+              return collectAttributeNameSuggestions(usedAttrs, scanner.getTokenEnd());
             case ScannerState.BeforeAttributeValue:
               return collectAttributeValueSuggestions(currentAttributeName, scanner.getTokenEnd());
             case ScannerState.AfterOpeningEndTag:
@@ -392,3 +427,10 @@ function getWordEnd(s: string, offset: number, limit: number): number {
   }
   return offset;
 }
+
+function normalizeAttribute(attr: string): string {
+  // trim modifiers
+  attr = attr.replace(/\..+$/, '');
+
+  return attr.replace(/^(?:v-bind:|:)/, '').replace(/^v-on:/, '@');
+}

server/src/modes/template/test/completion.test.ts

@@ -77,24 +77,21 @@ suite('HTML Completion', () => {
       .become('<input tabindex="$1"');
 
     html`<input t|ype="text"`
-      .has('type')
-      .become('<input type="text"')
+      .hasNo('type')
       .has('tabindex')
       .become('<input tabindex="text"');
 
     html`<input type="text" |`
       .has('style')
       .become('<input type="text" style="$1"')
-      .has('type')
-      .become('<input type="text" type="$1"')
+      .hasNo('type')
       .has('size')
       .become('<input type="text" size="$1"');
 
     html`<input type="text" s|`
       .has('style')
       .become('<input type="text" style="$1"')
-      .has('type')
-      .become('<input type="text" type="$1"')
+      .hasNo('type')
       .has('size')
       .become('<input type="text" size="$1"');
 
@@ -114,7 +111,19 @@ suite('HTML Completion', () => {
 
     html`<input :di| type="text"`.has('dir').become('<input :dir="$1" type="text"');
 
+    html`<input :type="type" |`.hasNo('type');
+
+    html`<input :type.prop="type" |`.hasNo('type');
+
+    // `class` and `:class`, `style` and `:style` can coexist
+    html`<input :class="$style.input" |`.has('class');
+    html`<input style="style" |`.has('style');
+    html`<input :cl|ass="$style.input"`.has('class').become('<input :class="$style.input"');
+
     html`<input @|`.has('mousemove').become('<input @mousemove="$1"');
+
+    // can listen to same event by adding modifiers
+    html`<input @mousemove="mousemove" @|`.has('mousemove').become('<input @mousemove="mousemove" @mousemove="$1"');
   });
 
   test('Complete Value', () => {

test/interpolation/features/completion/property.test.ts

@@ -93,7 +93,7 @@ describe('Should autocomplete interpolation for <template> in property class com
     ];
 
     it(`completes child component's props`, async () => {
-      await testCompletion(parentTemplateDocUri, position(2, 27), propsList);
+      await testCompletion(parentTemplateDocUri, position(2, 26), propsList);
     });
 
     it(`completes child component's props when camel case component name`, async () => {

test/interpolation/fixture/completion/propertyDecorator/Parent.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <basic-property-class :foo=""></basic-property-class>
+    <basic-property-class ></basic-property-class>
     <basic-property-class v-if="" @click="" :foo=""></basic-property-class>
     <BasicPropertyClass  />
     <