api-viewer-element
api-viewer-element copied to clipboard
Custom elements without exports are not recognized
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"
}
}
]
}
]
}
Hi @web-padawan I have the same problem after upgrading from v. 0.5.0 to the latest. Any tips?
Hi, will look into this over the weekend. @rallets did you upgrade from web-component-analyzer
to CEM analyzer?
@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.
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!
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.
@web-padawan switching to manifest
and passing in it the whole json, make it working now, thank you!
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.
@baermathias Thanks for reminding, I will check your example in the evening.
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
- As there is
"customElement": true
- the second check (isCustomElement
) also returns true, - 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.
@web-padawan just wanted to hear if there was any progress with this issue?
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.
Hi @baermathias, currently looking into this but so far I couldn't reproduce the issue using fixtures in the repo.
- Removed
export
statement for theProgressBar
base class - Replaced
@customElement
withcustomElements.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?