Update index.d.ts

[mgenware]

Use the right way to add custom element to TypeScript definitions.

Sadly, I didn't find any official docs on this matter, only some posts/repos:

• https://justinfagnani.com/2019/11/01/how-to-publish-web-components-to-npm/
• https://github.com/runem/lit-analyzer/tree/master/packages/lit-analyzer#-no-unknown-tag-name

[koddsson]

Hey @mgenware!

Is there any benefits to this way over our current way? I'd be hesitant to change this without a tangible benefit since I would want to update all the other elements we have so that they are uniform.

[mgenware]

Well, I guess TypeScript-related tools may fail on this definition file. For us, it happens on lit-analyzer, which is used to lint our typescript codebase.

btw found more convincing examples:

The official TypeScript lib.dom.d.ts:

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;
    "address": HTMLElement;
   /* ... */
}

Some random generated component file from stencil:

declare global {
  /* ... */
  interface HTMLElementTagNameMap {
    'hello-vdom': HTMLHelloVdomElement;
  }
}

angular.io:

declare global {
  interface HTMLElementTagNameMap {
    'my-dialog': NgElement & WithProperties<{content: string}>;
    'my-other-element': NgElement & WithProperties<{foo: 'bar'}>;
    ...
  }
}

[koddsson]

Thanks for all the references @mgenware, those are really helpful. It sucks that there aren't more documentation around this use case.

I think this change is good. It moves us to be more inline with other components and tools as well as the DOM definitions of TypeScript.

I'll look into updating this in our other components as well.

[keithamus]

I think we want both. Having the entry in HTMLElementTagNameMap is helpful for APIs like querySelector('image-crop') but also we need to keep the type for window.ImageCropElement, given this line:

image-crop-element/index.js

Line 246 in b2202a3

window.ImageCropElement = ImageCropElement