Message details (payload) not rendered correctly when $ref is used in channels

[AMulgrave]

asyncapi.yaml.txt

Loading the yaml attachment into VS Code renders as follows:

Note the missing payload details for the channels messages using $ref.

While the same yaml renders correctly in Web Studio beta:

The rendering is also incomplete when the channels messsages are $ref to external asyncapi yaml files.

[ivangsa]

Hi @AMulgrave

thanks for taking the time to report this

You are right, this asyncapi.yml file renders alright in https://studio.asyncapi.com/
but it fails to render in vscode.

I will need to investigate further.

[ivangsa]

Hi @AMulgrave

we have investigates this issue, and we a reporting it to the react-component upstream...

Any way, you can simplify your asyncapi.yml definition without loosing any readability or reusability, for instance placing the channels section as first child (instead of inside components) would solve this rendering problem... I'm not sure what advantage you see in that indirection from channels -> component/channels

[ashmit-coder]

HI @ivangsa ,
was working on the same issue and found the same cause.
Just wanted to ask if have you created a issue for it, If so could you please refrence it here.

In the case you haven't I would like to work towards it.

[ivangsa]

@ashmit-coder please, go ahead an create a PR!
Out of curiosity, if you can share the details of what it's about..

[ashmit-coder]

Out of curiosity, if you can share the details of what it's about..
sure i wiill i need to look into to the working of the asycapi-react project. i will share my findings as soon as possible

[AMulgrave]

Hi @AMulgrave

we have investigates this issue, and we a reporting it to the react-component upstream...

Any way, you can simplify your asyncapi.yml definition without loosing any readability or reusability, for instance placing the channels section as first child (instead of inside components) would solve this rendering problem... I'm not sure what advantage you see in that indirection from channels -> component/channels

This is just an example to show the issue from a single file. In my project the channel definitions are in an external file.

[ashmit-coder]

Hi @AMulgrave
we have investigates this issue, and we a reporting it to the react-component upstream...
Any way, you can simplify your asyncapi.yml definition without loosing any readability or reusability, for instance placing the channels section as first child (instead of inside components) would solve this rendering problem... I'm not sure what advantage you see in that indirection from channels -> component/channels

This is just an example to show the issue from a single file. In my project the channel definitions are in an external file.

Could you please provide aother image this one is not visible

[AMulgrave]

In practice, I have the yaml structured that way to provide links to external yaml definitions. For simplicity, I provided the example to show the issue in one yaml file.

[aditygrg2]

@ashmit-coder @ivangsa Have a look on this #240, if it is fine we can close this on both the repos.

[ivangsa]

hi @aditygrg2, I'm not convinced of #240

why it fixes the issue? what was causing the problem?

[aditygrg2]

hello @ivangsa prefetching the complete text and using it as schema does not cause this problem, when fetched the order mattered, parsing happens synchronously top to bottom, if there are any references to a reference which are defined later, as in this case, it didn't worked

[ivangsa]

so, how it works in the Studio... it's not using the same parser or react/component?

[aditygrg2]

@ivangsa not much experience about the studio, but as I can see here it also passes in the complete content, instead of fetching

https://github.com/asyncapi/studio/blob/40f287a2bfb30797e1e92c7e385a72ccb7870e27/apps/studio/src/services/parser.service.ts#L47C7-L47C101

[ivangsa]

This is where the parsing of the schema is done in the react/component

https://github.com/asyncapi/asyncapi-react/blob/master/library/src/containers/AsyncApi/Standalone.tsx#L97-L98

I guess something is quite not right on the parsing for this not to work..

I think would be a better fix to understand the root cause before adventuring a fix..

[ivangsa]

I dont like the idea of fixing something without understanding why...

I cant find where the standalone component parses the url, but if I do this on a separate project it seems that it resolves the channels :-/

import { Parser, fromURL, stringify, unstringify } from "@asyncapi/parser";

const parser = new Parser();

const { document, diagnostics } = await fromURL(
  parser,
  "https://github.com/asyncapi/vs-asyncapi-preview/files/13897525/asyncapi.yaml.txt",
).parse();

// console.log(document, diagnostics);

console.log(stringify(document));

[ivangsa]

@aditygrg2 are you willing to maintain (or even improve) this vscode extension?

[aditygrg2]

@ivangsa Yes, agree. I might be wrong, but I think the VSCode works differently in some way from the web browsers, the same code is being used on the react/component and VSCode but on web browser it works.

Here are some of my findings:

Ref is not getting parsed, so if you log the parsed schema with the same order, here is what appears:

But if you use the complete operations tag below (at the bottom of the file), it will parse successfully because the operations references will not require the previous references to be fulfilled as they will be there already by parser.

It depends on the reference orders. Here the operations depends on channels, channels on component which is not rendered until that part of the code is parsed, if you put the complete operations block at the end it will work. There might be more caveats to this, but my findings for anyone else to look out for the exact issue!

[aditygrg2]

@ivangsa

@aditygrg2 are you willing to maintain (or even improve) this vscode extension?

Yes, I would love to help!