TypeScript error: "tagName" does not exist in type 'ClassDeclaration'

[nolanlawson]

Checklist

• Did you run the analyzer with the --dev flag to get more information?
• Did you create a minimal reproduction in the playground?

In the playground (or command line), use this custom element:

class MyElement extends HTMLElement {}
customElements.define("my-element", MyElement)

You'll get this JSON:

click to expand

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/my-element.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyElement",
          "superclass": {
            "name": "HTMLElement"
          },
          "tagName": "my-element",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement",
            "module": "src/my-element.js"
          }
        }
      ]
    }
  ]
}

If you compare this to the schema, it doesn't match because of tagName on the ClassDeclaration.

You can repro using a simple TypeScript file:

click to expand

import { Package } from 'custom-elements-manifest/schema'

const json: Package = {
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "index.js",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyElement",
          "superclass": {
            "name": "HTMLElement"
          },
          "tagName": "my-element",
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "custom-element-definition",
          "name": "my-element",
          "declaration": {
            "name": "MyElement",
            "module": "index.js"
          }
        }
      ]
    }
  ]
}

Then run:

mkdir test
cd test
npm init --yes
npm i --save [email protected] [email protected]
npx tsc index.ts

You'll see the error:

test.ts:18:11 - error TS2322: Type '{ kind: "class"; description: string; name: string; superclass: { name: string; }; tagName: string; customElement: true; }' is not assignable to type 'Declaration'.
  Object literal may only specify known properties, and '"tagName"' does not exist in type 'ClassDeclaration'.

18           "tagName": "my-element",
             ~~~~~~~~~~~~~~~~~~~~~~~


Found 1 error.

Expected behavior

The output schema should match the one from custom-elements-manifest .

I'm not sure if this is a problem in the analyzer or in the custom-elements-manifest schema itself, but I'm just reporting it.

[thepassle]

This seems like a bug in the schema. A custom element has a tagname: https://github.com/webcomponents/custom-elements-manifest/blob/master/schema.d.ts#L198 so the output JSON in this case is correct. Looks like this is the offender though: https://github.com/webcomponents/custom-elements-manifest/blob/master/schema.d.ts#L71

Would you mind creating an issue in https://github.com/webcomponents/custom-elements-manifest ?

[thepassle]

As for some of your comments in your PR, it is still early days for custom-elements.json, we only recently released the V1 version and tooling hasnt caught up yet, but we're actively working on these things. There's an open issue for api-viewer, as well as a PR for Storybook to support the latest version of the schema, Skypack is looking into adding a filter for searching custom elements based on the presence of a CEM in a package, and hopefully more tooling will start to support CEM soon as well 🙂

[nolanlawson]

No problem. Opened an issue here: webcomponents/custom-elements-manifest#69

And thanks, I understand it's early days for custom-elements.json. I appreciate the hard work you're putting into this. It's unglamorous standardization work, it's hard to move a big ecosystem (like herding cats!), but it's much needed, so thank you for putting in the effort. 🙂

[thepassle]

Great, ill close this issue then - lets continue discussion in the other repo. Thanks!