From 552187a03e2226e06ed22cd040ce6bbeacc4bcaa Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 10 Dec 2020 23:56:35 +0900
Subject: [PATCH 1/4] Dont include used attributes in suggestions

---
 .prettierignore                               |  1 +
 .../modes/template/services/htmlCompletion.ts | 48 +++++++++++++++++--
 .../modes/template/test/completion.test.ts    | 21 +++++---
 .../features/completion/property.test.ts      |  2 +-
 .../completion/propertyDecorator/Parent.vue   |  2 +-
 5 files changed, 63 insertions(+), 11 deletions(-)
 create mode 100644 .prettierignore

diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000000..647f4f6c54
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1 @@
+server/src/modes/template/test/completion.test.ts
diff --git a/server/src/modes/template/services/htmlCompletion.ts b/server/src/modes/template/services/htmlCompletion.ts
index 4611317584..dc0cebf784 100644
--- a/server/src/modes/template/services/htmlCompletion.ts
+++ b/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: Set<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.has(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(): Set<string> {
+    const attrScanner = createScanner(text, currentTagStartOffset);
+
+    let token = attrScanner.scan();
+    let currentAttributeName!: string;
+    const attrs = new Set<string>();
+    while (token !== TokenType.EOS && token !== TokenType.StartTagClose) {
+      if (token === TokenType.AttributeName) {
+        currentAttributeName = normalizeAttribute(attrScanner.getTokenText());
+      } else if (token === TokenType.AttributeValue) {
+        attrs.add(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:/, '@');
+}
diff --git a/server/src/modes/template/test/completion.test.ts b/server/src/modes/template/test/completion.test.ts
index c3d45fc4cc..b142b84fc2 100644
--- a/server/src/modes/template/test/completion.test.ts
+++ b/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', () => {
diff --git a/test/interpolation/features/completion/property.test.ts b/test/interpolation/features/completion/property.test.ts
index 1a9a3d69fb..0b52e92ec3 100644
--- a/test/interpolation/features/completion/property.test.ts
+++ b/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 () => {
diff --git a/test/interpolation/fixture/completion/propertyDecorator/Parent.vue b/test/interpolation/fixture/completion/propertyDecorator/Parent.vue
index 51f70b8dd1..78b34d3048 100644
--- a/test/interpolation/fixture/completion/propertyDecorator/Parent.vue
+++ b/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  />
     <

From 1680b2606ca5d01e6cf9dfd457b6f60020b4970b Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Mon, 14 Dec 2020 23:07:34 +0900
Subject: [PATCH 2/4] fix and refactor

---
 .../modes/template/services/htmlCompletion.ts | 71 ++++++++++---------
 .../template/services/vuePropValidation.ts    | 30 ++------
 2 files changed, 41 insertions(+), 60 deletions(-)

diff --git a/server/src/modes/template/services/htmlCompletion.ts b/server/src/modes/template/services/htmlCompletion.ts
index dc0cebf784..a2e88edd83 100644
--- a/server/src/modes/template/services/htmlCompletion.ts
+++ b/server/src/modes/template/services/htmlCompletion.ts
@@ -16,6 +16,7 @@ import { NULL_COMPLETION } from '../../nullMode';
 import { getModifierProvider, Modifier } from '../modifierProvider';
 import { toMarkupContent } from '../../../utils/strings';
 import { Priority } from '../tagProviders/common';
+import { kebabCase } from 'lodash';
 
 export function doComplete(
   document: TextDocument,
@@ -42,7 +43,6 @@ 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) {
@@ -148,12 +148,15 @@ export function doComplete(
     return result;
   }
 
-  function collectAttributeNameSuggestions(
-    usedAttributes: Set<string>,
-    nameStart: number,
-    nameEnd: number = offset
-  ): CompletionList {
-    const execArray = /^[:@]/.exec(scanner.getTokenText());
+  function getUsedAttributes(offset: number) {
+    const node = htmlDocument.findNodeBefore(offset);
+    return node.attributeNames.map(normalizeAttributeNameToKebabCase);
+  }
+
+  function collectAttributeNameSuggestions(nameStart: number, nameEnd: number = offset): CompletionList {
+    const usedAttributes = getUsedAttributes(nameStart);
+    const currentAttribute = scanner.getTokenText();
+    const execArray = /^[:@]/.exec(currentAttribute);
     const filterPrefix = execArray ? execArray[0] : '';
     const start = filterPrefix ? nameStart + 1 : nameStart;
     const range = getReplaceRange(start, nameEnd);
@@ -164,12 +167,14 @@ export function doComplete(
       const priority = provider.priority;
       provider.collectAttributes(currentTag, (attribute, type, documentation) => {
         if (
-          usedAttributes.has(normalizeAttribute(attribute)) &&
+          // include current typing attribute for completing `="$1"`
+          !(attribute === currentAttribute && text[nameEnd] !== '=') &&
           // can listen to same event by adding modifiers
           type !== 'event' &&
           // `class` and `:class`, `style` and `:style` can coexist
           attribute !== 'class' &&
-          attribute !== 'style'
+          attribute !== 'style' &&
+          usedAttributes.includes(normalizeAttributeNameToKebabCase(attribute))
         ) {
           return;
         }
@@ -286,23 +291,6 @@ export function doComplete(
     return offset;
   }
 
-  function collectUsedAttributes(): Set<string> {
-    const attrScanner = createScanner(text, currentTagStartOffset);
-
-    let token = attrScanner.scan();
-    let currentAttributeName!: string;
-    const attrs = new Set<string>();
-    while (token !== TokenType.EOS && token !== TokenType.StartTagClose) {
-      if (token === TokenType.AttributeName) {
-        currentAttributeName = normalizeAttribute(attrScanner.getTokenText());
-      } else if (token === TokenType.AttributeValue) {
-        attrs.add(currentAttributeName);
-      }
-      token = attrScanner.scan();
-    }
-    return attrs;
-  }
-
   let token = scanner.scan();
 
   while (token !== TokenType.EOS && scanner.getTokenOffset() <= offset) {
@@ -312,7 +300,6 @@ 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()) {
@@ -322,8 +309,7 @@ export function doComplete(
         break;
       case TokenType.AttributeName:
         if (scanner.getTokenOffset() <= offset && offset <= scanner.getTokenEnd()) {
-          const usedAttrs = collectUsedAttributes();
-          return collectAttributeNameSuggestions(usedAttrs, scanner.getTokenOffset(), scanner.getTokenEnd());
+          return collectAttributeNameSuggestions(scanner.getTokenOffset(), scanner.getTokenEnd());
         }
         currentAttributeName = scanner.getTokenText();
         break;
@@ -355,8 +341,7 @@ export function doComplete(
               return collectTagSuggestions(startPos, endTagPos);
             case ScannerState.WithinTag:
             case ScannerState.AfterAttributeName:
-              const usedAttrs = collectUsedAttributes();
-              return collectAttributeNameSuggestions(usedAttrs, scanner.getTokenEnd());
+              return collectAttributeNameSuggestions(scanner.getTokenEnd());
             case ScannerState.BeforeAttributeValue:
               return collectAttributeValueSuggestions(currentAttributeName, scanner.getTokenEnd());
             case ScannerState.AfterOpeningEndTag:
@@ -428,9 +413,25 @@ function getWordEnd(s: string, offset: number, limit: number): number {
   return offset;
 }
 
-function normalizeAttribute(attr: string): string {
-  // trim modifiers
-  attr = attr.replace(/\..+$/, '');
+export function normalizeAttributeNameToKebabCase(attr: string): string {
+  let result = attr;
 
-  return attr.replace(/^(?:v-bind:|:)/, '').replace(/^v-on:/, '@');
+  if (result.startsWith('v-model:')) {
+    result = attr.slice('v-model:'.length);
+  }
+
+  if (result.startsWith('v-bind:')) {
+    result = attr.slice('v-bind:'.length);
+  } else if (result.startsWith(':')) {
+    result = attr.slice(':'.length);
+  }
+
+  // Remove modifiers
+  if (result.includes('.')) {
+    result = result.slice(0, result.indexOf('.'));
+  }
+
+  result = kebabCase(result);
+
+  return result;
 }
diff --git a/server/src/modes/template/services/vuePropValidation.ts b/server/src/modes/template/services/vuePropValidation.ts
index 8af8620226..c3f8afa94a 100644
--- a/server/src/modes/template/services/vuePropValidation.ts
+++ b/server/src/modes/template/services/vuePropValidation.ts
@@ -4,6 +4,7 @@ import type { TextDocument } from 'vscode-languageserver-textdocument';
 import { HTMLDocument, Node } from '../parser/htmlParser';
 import { kebabCase } from 'lodash';
 import { getSameTagInSet } from '../tagProviders/common';
+import { normalizeAttributeNameToKebabCase } from './htmlCompletion';
 
 export function doPropValidation(document: TextDocument, htmlDocument: HTMLDocument, info: VueFileInfo): Diagnostic[] {
   const diagnostics: Diagnostic[] = [];
@@ -50,7 +51,7 @@ function generateDiagnostic(n: Node, definedProps: PropInfo[], document: TextDoc
   const seenProps = n.attributeNames.map(attr => {
     return {
       name: attr,
-      normalized: normalizeHtmlAttributeNameToKebabCase(
+      normalized: normalizeHtmlAttributeNameToKebabCaseAndReplaceVModel(
         attr,
         definedProps.find(prop => prop.isBoundToModel)?.name ?? 'value'
       )
@@ -86,31 +87,10 @@ function generateDiagnostic(n: Node, definedProps: PropInfo[], document: TextDoc
   };
 }
 
-function normalizeHtmlAttributeNameToKebabCase(attr: string, modelProp: string) {
-  let result = attr;
-
+function normalizeHtmlAttributeNameToKebabCaseAndReplaceVModel(attr: string, modelProp: string) {
   // v-model.trim
-  if (!result.startsWith('v-model:') && result.startsWith('v-model')) {
+  if (!attr.startsWith('v-model:') && attr.startsWith('v-model')) {
     return kebabCase(modelProp);
   }
-
-  // Allow `v-model:prop` in vue 3
-  if (result.startsWith('v-model:')) {
-    result = attr.slice('v-model:'.length);
-  }
-
-  if (result.startsWith('v-bind:')) {
-    result = attr.slice('v-bind:'.length);
-  } else if (result.startsWith(':')) {
-    result = attr.slice(':'.length);
-  }
-
-  // Remove modifiers
-  if (result.includes('.')) {
-    result = result.slice(0, result.indexOf('.'));
-  }
-
-  result = kebabCase(result);
-
-  return result;
+  return normalizeAttributeNameToKebabCase(attr);
 }

From 116af020aa07a47378cc6d1fab39754f8ddc31f0 Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Tue, 29 Dec 2020 17:51:26 +0900
Subject: [PATCH 3/4] use Set

---
 server/src/modes/template/services/htmlCompletion.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/server/src/modes/template/services/htmlCompletion.ts b/server/src/modes/template/services/htmlCompletion.ts
index a2e88edd83..a998f6de6c 100644
--- a/server/src/modes/template/services/htmlCompletion.ts
+++ b/server/src/modes/template/services/htmlCompletion.ts
@@ -150,7 +150,7 @@ export function doComplete(
 
   function getUsedAttributes(offset: number) {
     const node = htmlDocument.findNodeBefore(offset);
-    return node.attributeNames.map(normalizeAttributeNameToKebabCase);
+    return new Set(node.attributeNames.map(normalizeAttributeNameToKebabCase));
   }
 
   function collectAttributeNameSuggestions(nameStart: number, nameEnd: number = offset): CompletionList {
@@ -174,7 +174,7 @@ export function doComplete(
           // `class` and `:class`, `style` and `:style` can coexist
           attribute !== 'class' &&
           attribute !== 'style' &&
-          usedAttributes.includes(normalizeAttributeNameToKebabCase(attribute))
+          usedAttributes.has(normalizeAttributeNameToKebabCase(attribute))
         ) {
           return;
         }

From e8f9635ebef8ccf8c7af033d1d0716426c8a725a Mon Sep 17 00:00:00 2001
From: sapphi-red <green@sapphi.red>
Date: Thu, 7 Jan 2021 23:59:30 +0900
Subject: [PATCH 4/4] CHANGELOG

---
 CHANGELOG.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0a17b88e78..63579083f9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,7 @@
 # Changelog
 
+- 🙌 Remove used attributes from suggestions. Thanks to contribution from [@sapphi-red](https://github.com/sapphi-red).
+
 ### 0.31.3 | 2020-12-13 | [VSIX](https://marketplace.visualstudio.com/_apis/public/gallery/publishers/octref/vsextensions/vetur/0.31.3/vspackage)
 
 - Console error only message when unimportant.