Auto complete custom element tags in TSX not working with hyphen in name

[Cammisuli]

When using tsx to develop components for custom elements (web components), auto complete does not show element names that have a - in it's name.

I'm using https://stenciljs.com/ to create these components, and custom element names are added to an extended InstrinsicElements interface. Which looks like this:

interface StencilIntrinsicElements {
    'app-home': Components.AppHomeAttributes;
    'app-profile': Components.AppProfileAttributes;
    'app-root': Components.AppRootAttributes;
    'app-tester': Components.AppTesterAttributes;
    'tester2': Components.Tester2Attributes;
  }

• VSCode Version:
  Version: 1.29.1 (system setup)
  Commit: bc24f98b5f70467bc689abf41cc5550ca637088e
  Date: 2018-11-15T19:13:36.375Z
  Electron: 2.0.12
  Chrome: 61.0.3163.100
  Node.js: 8.9.3
  V8: 6.1.534.41
  Architecture: x64

• OS: Windows 10

Steps to Reproduce:
Repo here - https://github.com/Cammisuli/tsx-completion-bug

Preview of issue discussed:

• Not working
  

• Working
  

After either element is added, hovering over it shows the proper type of the element.

Does this issue occur when all extensions are disabled?: Yes

[mjbvz]

Repo by augmenting JSX :

import * as React from 'react'

declare global {
    namespace JSX {
        interface IntrinsicElements {
            'div-2': React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
        }
    }
}

const x = <div| 

Completion item for div-2 is not returned.

[Cammisuli]

This is actually something I would like to see fix. If help is needed to get this going, I'm more than willing to try to create a PR; I would just need to get some direction on where to look/debug.

Thanks!

[zavr-1]

WHY ARE YOU NOT FIXING THIS MICROSOFT.

The Software Engineering Code of Ethics and Professional Practice

1.07. Consider issues of physical disabilities, allocation of resources, economic disadvantage and other factors that can diminish access to the benefits of software.

All React's Aria tags use hyphens. When people start typing aria for an attribute, they cannot discover it in VSCode because of this BUG! People are less likely to discover and pay attention to accessibility because of that.

STOP BREAKING SOFTWARE ENGINEERING CODE AND IMPLEMENT ESSENTIAL FUNCTIONALITY!!!

[Jack-Works]

I think I can fix it. Let me have a try...
The reason for this bug is

TypeScript/src/services/completions.ts

Line 2414 in f9945f5

if (isIdentifierText(name, target) || symbol.valueDeclaration && isPrivateIdentifierPropertyDeclaration(symbol.valueDeclaration)) {

here filter out the hyphened name because TypeScript thinks it isn't a valid identifier name.

[Jack-Works]

OK I get it

[Jack-Works]

Another screenshot

[bkelley13]

This would be very helpful to fix, Jack-works! Many thanks for your efforts.