feat: autocomplete attributes on plain html elements FUI-1227 (#32)

* feat: script to get html attribute data and check in that data FUI-1227 * feat expose plain html attributes on global data api FUI-1227 * feat: autocomplete attribute for plain html elements FUI-1227 * chore: add jest coverage command FUI-1227 * test: update unit tests FUI-1227 * fix: html attr resource mislabling boolean attribute FUI-1227 * fix: add missing header plain html tag names FUI-1227 * chore: add running tests to pr template FUI-1227 * chore: add link to mozilla page in comment FUI-1227
genesiscommunitysuccess · Jul 19, 2023 · 8f652bb · 8f652bb
1 parent 82faffa
commit 8f652bb
Show file tree

Hide file tree

Showing 13 changed files with 1,773 additions and 24 deletions.
diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md
@@ -16,6 +16,7 @@ Update test steps to match your PR:
 ```
 1. Checkout branch
 2. `npm run bootstrap`
+3. `npm run test:unit`
 ```
 
 > These testing instructions assume that you've already setup the LSP in your IDE with the `example` app. If you haven't then follow the instructions in the `README.md`.

diff --git a/package.json b/package.json
@@ -18,6 +18,7 @@
 		"lint:eslint:all": "cross-env TIMING=1 node --max_old_space_size=4096 ./node_modules/eslint/bin/eslint.js \"./**/*.{ts,js}\"",
 		"lint:eslint:all:fix": "node --max_old_space_size=4096 ./node_modules/eslint/bin/eslint.js \"./**/*.{ts,js}\" --fix",
 		"test:unit": "jest",
+		"test:unit:coverage": "jest --coverage",
 		"test:unit:debug": "node --inspect-brk node_modules/jest/bin/jest.js",
 		"test:unit:verbose": "cross-env TEST_LOG=1 jest",
 		"test:unit:watch": "jest --watchAll"

diff --git a/src/jest/global-data.ts b/src/jest/global-data.ts
@@ -25,6 +25,18 @@ export const getGDServiceFromStubbedResource = () => {
     getHTMLElementTags() {
       return ['div', 'img', 'p', 'a'];
     },
+    getHTMLAttributes(tagName) {
+      if (tagName !== 'a') {
+        return [];
+      }
+      return [
+        {
+          name: 'href',
+          description: 'The URL of a linked resource.',
+          type: 'string',
+        },
+      ];
+    },
   };
 
   return new GlobalDataServiceImpl(getLogger(), resource);

diff --git a/src/plugin/completions/completions.test.ts b/src/plugin/completions/completions.test.ts
@@ -162,6 +162,44 @@ describe('getCompletionsAtPosition', () => {
     ]);
   });
 
+  it('Returns completions for the custom element and html tags after an incomplete or unknown html element', () => {
+    const service = getCompletionsService();
+    const context = html`<im `;
+    const position = {
+      line: 0,
+      character: 4,
+    };
+    const typeAndParam = getTokenTypeWithInfo(context, position);
+
+    const completions = service.getCompletionsAtPosition(baseCompletionInfo, {
+      context,
+      position,
+      typeAndParam,
+    });
+
+    expect(completions.entries).toEqual([
+      {
+        insertText: 'custom-element></custom-element>',
+        kind: 'type',
+        name: 'custom-element',
+        sortText: 'custom-element',
+        labelDetails: {
+          description: 'src/components/avatar/avatar.ts',
+        },
+      },
+      {
+        insertText: 'no-attr></no-attr>',
+        kind: 'type',
+        name: 'no-attr',
+        sortText: 'custom-element',
+        labelDetails: {
+          description: 'pkg',
+        },
+      },
+      ...globalDataNameCompletions,
+    ]);
+  });
+
   it('Returns attribute completions when past a valid custom element name which has defined attributes', () => {
     const service = getCompletionsService();
     const context = html`<custom-element `;
@@ -204,6 +242,37 @@ describe('getCompletionsAtPosition', () => {
     ]);
   });
 
+  it('Returns attribute completions when past a valid plain element name which has defined attributes', () => {
+    const service = getCompletionsService();
+    const context = html`<a `;
+    const position = {
+      line: 0,
+      character: 3,
+    };
+    const typeAndParam = getTokenTypeWithInfo(context, position);
+
+    const completions = service.getCompletionsAtPosition(baseCompletionInfo, {
+      context,
+      position,
+      typeAndParam,
+    });
+
+    expect(completions.entries).toEqual([
+      {
+        insertText: 'href=""',
+        kind: 'parameter',
+        kindModifiers: '',
+        labelDetails: {
+          description: '[attr] HTML Element',
+          detail: ' string',
+        },
+        name: 'href',
+        sortText: 'a',
+      },
+      ...globalDataAttributeAssersions,
+    ]);
+  });
+
   it('Returns attribute completions when writing an attribute', () => {
     const service = getCompletionsService();
     const context = html`<custom-element col`;
@@ -246,6 +315,37 @@ describe('getCompletionsAtPosition', () => {
     ]);
   });
 
+  it('Returns attribute completions when past a valid plain element name and writing a known attribute', () => {
+    const service = getCompletionsService();
+    const context = html`<a hr`;
+    const position = {
+      line: 0,
+      character: 5,
+    };
+    const typeAndParam = getTokenTypeWithInfo(context, position);
+
+    const completions = service.getCompletionsAtPosition(baseCompletionInfo, {
+      context,
+      position,
+      typeAndParam,
+    });
+
+    expect(completions.entries).toEqual([
+      {
+        insertText: 'href=""',
+        kind: 'parameter',
+        kindModifiers: '',
+        labelDetails: {
+          description: '[attr] HTML Element',
+          detail: ' string',
+        },
+        name: 'href',
+        sortText: 'a',
+      },
+      ...globalDataAttributeAssersions,
+    ]);
+  });
+
   it('Returns attribute completions when writing an attribute inside of a finished tag', () => {
     const service = getCompletionsService();
     const context = html`
@@ -308,6 +408,24 @@ describe('getCompletionsAtPosition', () => {
     expect(completions.entries).toEqual([...globalDataAttributeAssersions]);
   });
 
+  it('Returns only the global attribute completions when we try and complete attributes on a plain element with no attributes', () => {
+    const service = getCompletionsService();
+    const context = html`<div `;
+    const position = {
+      line: 0,
+      character: 5,
+    };
+    const typeAndParam = getTokenTypeWithInfo(context, position);
+
+    const completions = service.getCompletionsAtPosition(baseCompletionInfo, {
+      context,
+      position,
+      typeAndParam,
+    });
+
+    expect(completions.entries).toEqual([...globalDataAttributeAssersions]);
+  });
+
   it('Returns name completions when we try and complete attributes on an unknown custom element', () => {
     const service = getCompletionsService();
     const context = html`<unknown-element `;

diff --git a/src/plugin/completions/completions.ts b/src/plugin/completions/completions.ts
@@ -5,6 +5,7 @@ import { Services } from '../utils/services.types';
 import {
   CompletionCtx,
   CompletionsService,
+  constructElementAttrCompletion,
   constructGlobalAriaCompletion,
   constructGlobalAttrCompletion,
   constructGlobalEventCompletion,
@@ -36,11 +37,17 @@ export class CoreCompletionsServiceImpl implements CompletionsService {
         break;
 
       case 'element-attribute':
-        if (!this.services.customElements.customElementKnown(params.tagName)) {
+        const isUnknownCE =
+          params.isCustomElement &&
+          !this.services.customElements.customElementKnown(params.tagName);
+        const isUnknownPlainElement =
+          !params.isCustomElement &&
+          !this.services.globalData.getHTMLElementTags().includes(params.tagName);
+        if (isUnknownCE || isUnknownPlainElement) {
           baseEntries = this.getTagCompletions();
           break;
         }
-        baseEntries = this.getAttributeCompletions(params.tagName);
+        baseEntries = this.getAttributeCompletions(params.tagName, params.isCustomElement);
         break;
 
       case 'none':
@@ -56,9 +63,15 @@ export class CoreCompletionsServiceImpl implements CompletionsService {
     };
   }
 
-  private getAttributeCompletions(tagName: string): CompletionEntry[] {
-    const attrs = this.services.customElements.getCEAttributes(tagName);
-    this.logger.log(`element-attribute: ${tagName}, ${JSON.stringify(attrs)}`);
+  private getAttributeCompletions(tagName: string, isCustomElement: boolean): CompletionEntry[] {
+    const attrs = isCustomElement
+      ? this.services.customElements.getCEAttributes(tagName)
+      : this.services.globalData.getHTMLAttributes(tagName);
+    this.logger.log(
+      `${
+        isCustomElement ? 'custom-element' : 'html-element'
+      }-attribute: ${tagName}, ${JSON.stringify(attrs)}`
+    );
 
     const globalAttrs = getStore(this.logger).TSUnsafeGetOrAdd('global-attributes', () =>
       this.services.globalData
@@ -68,21 +81,7 @@ export class CoreCompletionsServiceImpl implements CompletionsService {
         .concat(this.services.globalData.getEvents().map(constructGlobalEventCompletion))
     );
 
-    return attrs
-      .map(
-        ({ name, type, referenceClass, deprecated }): CompletionEntry => ({
-          name,
-          insertText: `${name}${type === 'boolean' ? '' : '=""'}`,
-          kind: ScriptElementKind.parameterElement,
-          sortText: 'a',
-          labelDetails: {
-            description: (deprecated ? '(deprecated) ' : '') + `[attr] ${referenceClass}`,
-            detail: ` ${type}`,
-          },
-          kindModifiers: deprecated ? 'deprecated' : '',
-        })
-      )
-      .concat(globalAttrs);
+    return attrs.map(constructElementAttrCompletion).concat(globalAttrs);
   }
 
   private getTagCompletions(): CompletionEntry[] {

diff --git a/src/plugin/completions/helpers.test.ts b/src/plugin/completions/helpers.test.ts
@@ -2,11 +2,14 @@ import { LineAndCharacter } from 'typescript/lib/tsserverlibrary';
 import { TemplateContext } from 'typescript-template-language-service-decorator';
 import { html } from '../../jest/utils';
 import {
+  constructElementAttrCompletion,
   constructGlobalAriaCompletion,
   constructGlobalAttrCompletion,
   constructGlobalEventCompletion,
 } from './helpers';
 import { getTokenTypeWithInfo } from '../utils';
+import { PlainElementAttribute } from '../global-data/global-data.types';
+import { CustomElementAttribute } from '../custom-elements/custom-elements.types';
 
 describe('constructGlobalAriaCompletion', () => {
   it('returns CompletionEntry', () => {
@@ -78,3 +81,45 @@ describe('constructGlobalAttrCompletion', () => {
     });
   });
 });
+
+describe('constructElementAttrCompletion', () => {
+  it('returns CompletionEntry for a plain html attribute', () => {
+    const attrDef: PlainElementAttribute = {
+      name: 'test',
+      description: 'test description',
+      type: 'boolean',
+    };
+    expect(constructElementAttrCompletion(attrDef)).toEqual({
+      insertText: 'test',
+      kind: 'parameter',
+      kindModifiers: '',
+      labelDetails: {
+        description: '[attr] HTML Element',
+        detail: ' boolean',
+      },
+      name: 'test',
+      sortText: 'a',
+    });
+  });
+
+  it('returns CompletionEntry for a custom element attribute', () => {
+    const attrDef: CustomElementAttribute = {
+      name: 'test',
+      description: 'test description',
+      type: 'string',
+      deprecated: true,
+      referenceClass: 'ClassName',
+    };
+    expect(constructElementAttrCompletion(attrDef)).toEqual({
+      insertText: 'test=""',
+      kind: 'parameter',
+      kindModifiers: 'deprecated',
+      labelDetails: {
+        description: '(deprecated) [attr] ClassName',
+        detail: ' string',
+      },
+      name: 'test',
+      sortText: 'a',
+    });
+  });
+});
diff --git a/src/plugin/completions/helpers.ts b/src/plugin/completions/helpers.ts
@@ -1,5 +1,6 @@
 import { CompletionEntry, ScriptElementKind } from 'typescript/lib/tsserverlibrary';
-import { GlobalAttrType } from '../global-data/global-data.types';
+import { CustomElementAttribute } from '../custom-elements/custom-elements.types';
+import { GlobalAttrType, PlainElementAttribute } from '../global-data/global-data.types';
 
 export function constructGlobalAriaCompletion(name: string): CompletionEntry {
   return {
@@ -64,3 +65,24 @@ export function constructGlobalAttrCompletion(name: string, type: GlobalAttrType
       };
   }
 }
+
+export function constructElementAttrCompletion(
+  attr: CustomElementAttribute | PlainElementAttribute
+): CompletionEntry {
+  const { name, type, referenceClass, deprecated } = {
+    referenceClass: 'HTML Element',
+    deprecated: false,
+    ...attr,
+  };
+  return {
+    name,
+    insertText: `${name}${type === 'boolean' ? '' : '=""'}`,
+    kind: ScriptElementKind.parameterElement,
+    sortText: 'a',
+    labelDetails: {
+      description: (deprecated ? '(deprecated) ' : '') + `[attr] ${referenceClass}`.trim(),
+      detail: ` ${type}`,
+    },
+    kindModifiers: deprecated ? 'deprecated' : '',
+  };
+}