The web component doesn't support the config attribute? #394
Comments
|
Welcome to AsyncAPI. Thanks a lot for reporting your first issue. Please check out our contributors guide and the instructions about a basic recommended setup useful for opening a pull request. Keep in mind there are also other channels you can use to interact with AsyncAPI community. For more details check out this issue. |
|
@jonsage Hi! Did you use the Please also add more information in which environment - framework are you using the component. |
|
Hi, I've tried both master and next, I'm not using the component in any framework, just HTML. The scripts load from unpkg as in the examples. I've tried config as an attribute, and also as a property (accessing the webcomponent node through JS). I've taken a look in the webcomponent tsx file, and the config property isn't exported but it is registered when defining the custom element. I can find no usage example of using config with the web component so this might just be something I'm doing wrong - right now I've tried passing in a JSON object as the value: |
|
For me this html works: <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@asyncapi/[email protected]/lib/asyncapi-web-component.js" defer></script>
</head>
<body>
<asyncapi-component
schemaUrl="https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml"
schemaFetchOptions='{"method":"GET","mode":"cors"}'
config='{"show": {"info": false}}'
cssImportPath="https://unpkg.com/@asyncapi/[email protected]/lib/styles/fiori.css">
</asyncapi-component>
</body>
</html>So I pass config as stringified JSON as in your example. |
|
I have this, but it wont show the sidebar :/ <asyncapi-component
schemaUrl="https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml"
schemaFetchOptions='{"method":"GET","mode":"cors"}'
cssImportPath="https://unpkg.com/@asyncapi/[email protected]/lib/styles/fiori.css"
config='{"show": {"sidebar": true}}'>
</asyncapi-component> |
|
Sidebar is added in the Try this: <!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/@asyncapi/[email protected]/lib/asyncapi-web-component.js" defer></script>
</head>
<body>
<asyncapi-component
schemaUrl="https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml"
schemaFetchOptions='{"method":"GET","mode":"cors"}'
config='{"show": {"sidebar": true }}'
cssImportPath="https://unpkg.com/@asyncapi/[email protected]/styles/default.min.css">
</asyncapi-component>
</body>
</html> |
|
You can also use the standalone bundle - preferrer way, because web-component has shadow dom, which breaks the <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/@asyncapi/[email protected]/styles/default.min.css">
</head>
<body>
<div id="asyncapi"></div>
<script src="https://unpkg.com/@asyncapi/[email protected]/browser/standalone/index.js"></script>
<script>
AsyncApiStandalone.render({
schema: {
url: 'https://raw.githubusercontent.com/asyncapi/spec/v2.0.0/examples/2.0.0/streetlights.yml',
options: { method: "GET", mode: "cors" },
},
config: {
show: {
sidebar: true,
}
},
}, document.getElementById('asyncapi'));
</script>
</body>
</html>I will update the docs and sorry for the problems with unclear docs :) |
|
One problem with the approach above is the default.css (without shadow DOM) leaks Tailwind global CSS affecting typography amongst other things - it would be good if all the styles included were scoped to just the component and not the rest of the site hosting it. I'm not knowledgeable on React and Tailwind so I'm not sure the best way to do this, but I thought I'd just bring it to your attention in case you felt it was worth looking into :) Thank you so much for your time and effort btw - it's extremely appreciated. |
|
If you have in mind normalizer/reset CSS from TailwindCSS, we know about that and we have issue for that #368 and PR is on the way :) |
|
Docs will be merged with PR #395 |
Is there a plan to capture the click and scroll to the target element instead of relying on the |
|
It's a solution, but we don't want to add "extra" logic inside component. It should only render the html. We have something similar in the master branch:
and it's a buggy, really buggy. Probably in the future we will remove the BTW. I merged the #395 PR with docs how to pass the config to web-component. If you will have another problems, please open another issue, or reopen it. I will close it, thanks for informing us about this issue :) |
The web component doesn't appear to support the config attribute in any way.
The text was updated successfully, but these errors were encountered: