Custom elements without exports are not recognized

[baermathias]

In my case <api-viewer> is being rendered into the site, but it displays the following:

What does the json file has to look like, so that custom elements are found inside it? Currently it looks like this:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/components/my-button.ts",
      "declarations": [
        {
          "kind": "class",
          "description": "",
          "name": "MyButton",
          "members": [
            {
              "kind": "field",
              "name": "theme",
              "type": {
                "text": "string"
              },
              "default": "''",
              "attribute": "theme"
            },
            {
              "kind": "field",
              "name": "isDisabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "disabled"
            },
            {
              "kind": "field",
              "name": "isLoading",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "attribute": "loading"
            },
            {
              "kind": "method",
              "name": "handler",
              "privacy": "private",
              "parameters": [
                {
                  "name": "e",
                  "type": {
                    "text": "Event"
                  }
                }
              ]
            }
          ],
          "attributes": [
            {
              "name": "theme",
              "type": {
                "text": "string"
              },
              "default": "''",
              "fieldName": "theme"
            },
            {
              "name": "disabled",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "isDisabled"
            },
            {
              "name": "loading",
              "type": {
                "text": "boolean"
              },
              "default": "false",
              "fieldName": "isLoading"
            }
          ],
          "superclass": {
            "name": "LitElement",
            "package": "lit"
          },
          "customElement": true
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "MyButton",
          "declaration": {
            "name": "MyButton",
            "module": "src/components/my-button.ts"
          }
        }
      ]
    }
  ]
}

[rallets]

Hi @web-padawan I have the same problem after upgrading from v. 0.5.0 to the latest. Any tips?

[web-padawan]

Hi, will look into this over the weekend. @rallets did you upgrade from web-component-analyzer to CEM analyzer?

[rallets]

@web-padawan no, I haven't noticed it was changed the analyzer! So now I have

"@custom-elements-manifest/analyzer": "^0.5.7",
"web-component-analyzer": "^1.1.6"

and I ran:

"analyze": "cem analyze"

using the config file

export default {
  globs: ['src/components/**/*.{js,ts}'],
  outdir: './',
  litelement: true,
  plugins: [],
}

that produce something like:

{
  "schemaVersion": "1.0.0",
  "readme": "",
  "modules": [
    {
      "kind": "javascript-module",
      "path": "src/components/section-bar/section-bar-style.ts",
      "declarations": [
        {
          "kind": "variable",
          "name": "SectionBarStyle",
          "type": {
            "text": "array"
          },
          "default": "[theme, css`\r\n  #container {\r\n    display: flex;\r\n  }\r\n`]"
        }
      ],
      "exports": [
        {
          "kind": "js",
          "name": "SectionBarStyle",
          "declaration": {
            "name": "SectionBarStyle",
            "module": "src/components/section-bar/section-bar-style.ts"
          }
        }
      ]
    }
  ]
}

but still renders No custom elements found in the JSON file.

I'm passing the full object to elements (I'm using Angular 13.1)

import elements from 'a-npm-local-package/custom-elements.json';

<api-viewer [elements]="elements"></api-viewer>

btw do you know if cem can also output as md? I have a:

"docs-md": "wca analyze \"src/**/*.{js,ts}\" --outFile custom-elements.md --format markdown"

that it looks like cem doesn't support anymore, and I haven't found a plugin for this.

[rallets]

I tried to use the json file you are using in the demo https://api-viewer-element.netlify.app/assets/custom-elements.json and I get the same result. Does api-viewer still expose the attribute elements ? I'm using that because I need to fetch a json from node_modules, and in that way I can avoid to specify a src with a node_modules path (that doesn't work neither)

Let me know if you need more info. Thank you for the great component!

[web-padawan]

Sorry, I missed to document upgrading from 0.5.0. The property is now called manifest. I will add separate page to the docs about that.

[rallets]

@web-padawan switching to manifest and passing in it the whole json, make it working now, thank you!

[baermathias]

I tried it this way:

<api-viewer 
  src="../custom-elements.json"
></api-viewer>

And also this way:

import manifest from '../custom-elements.json'
return html`
  <api-viewer 
    .manifest="${manifest}"
  ></api-viewer>
`  

Unfortunately without luck.

[web-padawan]

@baermathias Thanks for reminding, I will check your example in the evening.

[web-padawan]

Tested locally with the JSON attached, and the problem seems to be related to following lines:

https://github.com/web-padawan/api-viewer-element/blob/639c2662d1429b189b63eaae032788426118782e/src/lib/manifest.ts#L50-L54

1. As there is "customElement": true - the second check (isCustomElement) also returns true,
2. However, there is no export for this custom element, hence api-viewer fails to recognize it.

So, this is indeed a bug. I will try to find some time tomorrow to come up with a proper workaround.

[baermathias]

@web-padawan just wanted to hear if there was any progress with this issue?

[web-padawan]

Sorry about the delay, I forgot to check this issue before the holidays and then it got lost in my backlog of things. Now when I'm done with converting to monorepo etc, I'm going to work on this for the next 1.0.0-pre release.

[web-padawan]

Hi @baermathias, currently looking into this but so far I couldn't reproduce the issue using fixtures in the repo.

1. Removed export statement for the ProgressBar base class
2. Replaced @customElement with customElements.define()

As you can see in 084207a471727c49ed3381e913b5c6d31d6127c3, the export with "kind": "custom-element-definition" is still there. Could you please provide a source code of your component to produce JSON you shared?