Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: make @asyncapi/react-component compatible with vs-asyncapi-preview #1078

Conversation

catosaurusrex2003
Copy link
Contributor

Description
I merged library/src/containers/AsyncApi/AsyncApi.tsx and library/src/containers/AsyncApi/Standalone.tsx functionality into library/src/containers/AsyncApi/Standalone.tsx

This pr will not cause any change/improvement in the working of playground or @asyncapi/react-component.
It wil improve vs-asyncapi-preview and will make the error to render as expected.

Before:
image

After:
image

Related issue(s)
solves the issue #1077
and
asyncapi/vs-asyncapi-preview#200

@catosaurusrex2003 catosaurusrex2003 changed the title feat: make @asyncapi/react-component with vs-asyncapi-preview feat: make @asyncapi/react-component compatible with vs-asyncapi-preview Oct 9, 2024
@AceTheCreator
Copy link
Member

@catosaurusrex2003 Did you check to ensure it doesn't break the web-component?

Copy link

sonarcloud bot commented Oct 9, 2024

@catosaurusrex2003
Copy link
Contributor Author

@AceTheCreator Thanks for pointing that out! I missed that check. I'll review it and get back to you shortly.

@catosaurusrex2003
Copy link
Contributor Author

@AceTheCreator web-component is working

image

(The title is not showing though)
Below is the html in which i used the locally symlinked web-component and react-component

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- Load the webcomponents polyfill if targeting older browsers -->
    <script src="https://unpkg.com/@webcomponents/webcomponentsjs@2.5.0/webcomponents-bundle.js"></script>

    <script
      type="module"
      src="./node_modules/@asyncapi/web-component/lib/asyncapi-web-component.js"
      defer
    ></script>

    <asyncapi-component
      schemaUrl="./asyncapi.yml"
      config='{"show": {"info": false}}'
      schemaFetchOptions='{"method":"GET","mode":"cors"}'
      cssImportPath="./node_modules/@asyncapi/react-component/styles/default.min.css"
    >
    </asyncapi-component>
  </body>
</html>

@asyncapi/react-component also work for standalone

I also checked using it in nextjs
and it is working fine
image
image

should i test in angular, vue.
If yes then this is gonna take time because i am not familiar with these frameworks.

@AceTheCreator
Copy link
Member

@catosaurusrex2003 I think it's cuz you set info to false in the config

config='{"show": {"info": false}}'

@catosaurusrex2003
Copy link
Contributor Author

yes that seems to be the reason

@catosaurusrex2003
Copy link
Contributor Author

@AceTheCreator am i missing something in scope of this library. Like somewhere this library is used and my changes might break it.
One thing i noticed is that these changes might make Studio slower and more laggy, as the document is parsed more than once times.

@AceTheCreator
Copy link
Member

@AceTheCreator am i missing something in scope of this library. Like somewhere this library is used and my changes might break it. One thing i noticed is that these changes might make Studio slower and more laggy, as the document is parsed more than once times.

Exactly what i thought, currently working on a possible fix, i'll ping.

@catosaurusrex2003
Copy link
Contributor Author

I’d like to discard this PR as I realize I've made the solution more complicated than necessary.

The simpler solution can be found in PR #1082.

I should have taken more time to think through my approach before coding. @AceTheCreator

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants