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

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

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.

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!

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!!!

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.

OK I get it

Another screenshot

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

mjbvz commented on Dec 7, 2018

Cammisuli commented on Apr 20, 2019

zavr-1 commented on Mar 16, 2020

Jack-Works commented on Mar 18, 2020

Jack-Works commented on Mar 18, 2020

Jack-Works commented on Mar 18, 2020

bkelley13 commented on Mar 23, 2020

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions