Custom elements without exports are not recognized about api-viewer-element HOT 12 OPEN

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

from api-viewer-element.

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

from api-viewer-element.

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.

from api-viewer-element.

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

from api-viewer-element.

@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.

from api-viewer-element.

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!

from api-viewer-element.

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.

from api-viewer-element.

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.

from api-viewer-element.

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

from api-viewer-element.

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

from api-viewer-element.

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.

from api-viewer-element.

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 084207a, 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?

from api-viewer-element.