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: initial try to get the parser working #1026

Closed
wants to merge 1 commit into from

Conversation

Shurtu-gal
Copy link
Collaborator

Description

  • Initial Implementation for docs

Related issue(s)
#684

Copy link

changeset-bot bot commented Mar 18, 2024

⚠️ No Changeset found

Latest commit: b4585ec

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

Copy link

netlify bot commented Mar 18, 2024

Deploy Preview for asyncapi-studio-design-system ready!

Name Link
🔨 Latest commit b4585ec
🔍 Latest deploy log https://app.netlify.com/sites/asyncapi-studio-design-system/deploys/65f8a3951d6642000828c4fa
😎 Deploy Preview https://deploy-preview-1026--asyncapi-studio-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Mar 18, 2024

Deploy Preview for modest-rosalind-098b67 ready!

Name Link
🔨 Latest commit b4585ec
🔍 Latest deploy log https://app.netlify.com/sites/modest-rosalind-098b67/deploys/65f8a39578880e0008542eee
😎 Deploy Preview https://deploy-preview-1026--modest-rosalind-098b67.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

Copy link

netlify bot commented Mar 18, 2024

Deploy Preview for studio-next failed.

Name Link
🔨 Latest commit b4585ec
🔍 Latest deploy log https://app.netlify.com/sites/studio-next/deploys/65f8a395c20fb40008bfa630

Copy link

sonarcloud bot commented Mar 18, 2024

Quality Gate Passed Quality Gate passed

Issues
3 New issues
0 Accepted issues

Measures
0 Security Hotspots
No data about Coverage
1.5% Duplication on New Code

See analysis details on SonarCloud

@Shurtu-gal Shurtu-gal marked this pull request as draft March 18, 2024 20:27
@KhudaDad414
Copy link
Member

@Shurtu-gal Hey man, I want to be a part of this initiative and provide some help if I can. For that, I tried to migrate the studio to Next.js before and faced some challenges but overall it was smooth.

But I had to have "use client"on my main page and it was working as a SPA without any features of Next.js in it.

Can you provide what the challenge is here? And how you are trying to resolve it? 🙏

@Shurtu-gal
Copy link
Collaborator Author

@KhudaDad414 this is the error which I have been facing for the last couple of days.
https://app.netlify.com/sites/studio-next/deploys/65f8a395c20fb40008bfa630#L210-L233

@KhudaDad414
Copy link
Member

KhudaDad414 commented Mar 20, 2024

@Shurtu-gal the error seems... strange to say the least.
I have uploaded my version of the studio in next here(apps/studio) : https://github.com/KhudaDad414/studio/tree/playground-next

it works great in dev and builds fine. There may be some rough edges that we need to iron out.

@Shurtu-gal
Copy link
Collaborator Author

But I had to have "use client"on my main page and it was working as a SPA without any features of Next.js in it

@KhudaDad414 then is there any benefit in shifting to Next.js then 🤔

@KhudaDad414
Copy link
Member

TBH, I don't think there is any for the current studio.

We can structure it a little better to have the "use client" in Editor's own component.
But it will be more or less the same.

Why? Three main components in the page are the editor, navigator, and the preview window.

The editor can't be server side rendered, based on what I could gather. (Code mirror and Monaco use react hooks in their codebase. They both were made to be rendered on the client)

The other two other main components rely on the editor to display their info, so they have to be client side rendered as well.

What about when we have the visual editor? I believe it can be server side rendered.
But we need to figure out a way to share the file between the two editors. URL params maybe?

Plus, we can do what server-api currently does with Next API routes.

My point is that there isn't any Next benefit now, but there can be in the future.

cc: @fmvilas @Amzani

@Shurtu-gal
Copy link
Collaborator Author

Agree with the API philosophy, maybe can make an API route which does the requisite parsing and populates the errors, and other stuff in AsyncAPIDocumentInterface which is basically in json format as well.

@KhudaDad414
Copy link
Member

@Shurtu-gal the thing is that we can't keep the AsyncAPI document on the server. and if it has to be on the client, then the current approach (keeping the file in the browser and using state management) is the only approach.

@Shurtu-gal
Copy link
Collaborator Author

I believe there was a misunderstanding. It will be like AsyncAPI doc in the browser but will get parsed over at the server.

However, while writing this I can think of the disadvantages as well, as there will be too many calls to the API functions.

@Amzani
Copy link
Collaborator

Amzani commented Mar 25, 2024

@Shurtu-gal, @KhudaDad414 there are no immediate benefits, but this will unlock a couple of features:

If we have an alternative to nextjs to enable that I'm fine with it

@Shurtu-gal
Copy link
Collaborator Author

So should I move forward with using 'use client' everywhere?

But I believe this will cause problems down the line 😔.

Maybe 🤔 we could resolve this, let me debug it a little

Also @KhudaDad414 @Amzani your help and inputs would be great too.

@KhudaDad414
Copy link
Member

@Shurtu-gal I am afraid there is no other way.

@Amzani
Copy link
Collaborator

Amzani commented Mar 26, 2024

@Shurtu-gal @KhudaDad414 what if we use use client at layout level ? so we don't need to repeat it in each component.

@Shurtu-gal
Copy link
Collaborator Author

@Shurtu-gal @KhudaDad414 what if we use use client at layout level ? so we don't need to repeat it in each component.

That would work, let me try it out and I will let you know.

@Amzani
Copy link
Collaborator

Amzani commented Mar 26, 2024

@Shurtu-gal @KhudaDad414 NextJS might sound useless in the beginning, especially as the components are tightly coupled to Browser API, for instance, the TopBar might directly use browser Local storage, so we can't make it a Server Side component.

Once we complete the migration we can follow this pattern that @fmvilas defined in the following: https://github.com/asyncapi/studio/pull/739/files (this is still relevant), so a component like TopBar could be a server-side component for instance.

@Shurtu-gal
Copy link
Collaborator Author

@Shurtu-gal @KhudaDad414 what if we use use client at layout level ? so we don't need to repeat it in each component.

That would work, let me try it out and I will let you know.

I tried that, but it is showing the same errors. Furthermore @KhudaDad414 your implementation is also not working. FYI there was a similar try in this direction before too in this PR.

@KhudaDad414
Copy link
Member

@Shurtu-gal let me give it a try. 🤔

@KhudaDad414
Copy link
Member

Hey @Shurtu-gal, I have opened a PR with a solution. (there were too much complications pushing the changes to this PR)
please let me know what you think.

@Shurtu-gal
Copy link
Collaborator Author

Shurtu-gal commented Apr 4, 2024

@KhudaDad414 I am fine with it, it's a great solution, however, we still need to think of something so that we don't need an app-level use client.@Amzani I guess as there are not many changes to the original app, we should wait before we migrate to CodeMirror. Or I can do it again after the migration PR gets merged.

Closing this PR then.

@Shurtu-gal Shurtu-gal closed this Apr 4, 2024
@Shurtu-gal Shurtu-gal deleted the feat/layout branch April 4, 2024 03:55
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants