How to use playground as a React component?

[SimonAlling]

Description

I'm building an app in which I would like to include the playground, i.e. the default-exported Playground component from playground/src/Playground.tsx. However, it doesn't seem to be included in the npm package. I tried a very hacky solution using git submodule add https://github.com/asyncapi/asyncapi-react and then, in my code,

import Playground from "../asyncapi-react/playground/src/Playground"

but after manually installing a dozen dependencies required by the playground, I still got a bunch of TS6133 errors ('editor' is declared but its value is never read etc) as well as a TS2322: Type 'Timeout' is not assignable to type 'number'. And even if it had worked, it would have been a very hacky and fragile workaround.

Reasons

It would be nice to be able to include the playground in a React app.

[github-actions]

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.

[derberg]

@SimonAlling tbh Playground intention was never the one you described. It's purpose was to ease testing and showcasing of the component. We had a similar request from community here #146

@magicmatatjahu you need to take it into account when you will work on probably removing the playground and replacing it with studio

[SimonAlling]

Thanks for the quick reply!

@SimonAlling tbh Playground intention was never the one you described. It's purpose was to ease testing and showcasing of the component.

I thought so. Nevertheless, being able to use it that way would be an appreciated improvement.

We had a similar request from community here #146

Apparently I'm not the only one then. 🙂

[derberg]

Apparently I'm not the only one then. 🙂

yeap, we actually need it to for our new playground (studio) that we will work on

I would suggest closing this issue and invite you to join the discussion here where among other things the future of the playground is also decided 😄

[SimonAlling]

I see! Let the issue be closed then, but I'm not sure I have too much to add to the discussion in #265; I'm not that familiar with React. 😅

In the meantime, I managed to get it sort of working by copying the source code and fixing the type errors manually. The only problem is that if I go directly to the route where the playground is shown (i.e. I type http://localhost:8080/playground into the address bar and hit Enter), the schema editor (i.e. the left half of the playground) is empty until I switch to the Configuration tab and then back. However, if I go to some other route, e.g. /, and then click on a link to the /playground route, it works as expected. (I'm using React Router, as you can probably tell.)

I totally understand if there isn't enough context above to understand why this might be happening, but please let me know if you have any idea.

[magicmatatjahu]

@SimonAlling Hi! As @derberg wrote, the Playground intention was never to use as standalone editor/package, but as we see, more and more people want this feature. But also as Łukasz wrote, we are during the migration of the old playground (this is not the React playground 😄) to the new studio that will use the React component and finally we wanna also switch to studio with testing/developing playground for React component. Also studio will be pushed to npm and you will be able to set your own "studio", but studio has a lot dependencies and features not related to your case, so we should also think to make package something like studio-editor with only editor and component.

Regarding to your problem with routing: tbh, I don't know 😅 I remember that once we had a similar problem in the playgroud (related to the transition between tabs for the playground to start working properly, but now everything working as expected - https://asyncapi.github.io/asyncapi-react/). I will write back to you, when I check what problem was. Also, if for you this is a real problem and priority, I mean using playground in app, if you could create a repository that I could download and test locally and check why it doesn't work for you, that would be great!

[SimonAlling]

Also, if for you this is a real problem and priority, I mean using playground in app, if you could create a repository that I could download and test locally and check why it doesn't work for you, that would be great!

Cool! 🙂 Indeed it is, so here you go. Thanks in advance!

[magicmatatjahu]

@SimonAlling Ok, I checked your repo. Sorry for delay, I saw your comment today 😅 So problem is not with our component or playground itself, but with react-codemirror2 package which is React wrapper for CodeMirror editor. I checked that editor "mount" faster than it has to, and based on that, it calculates margins and paddings in wrong way - another parts aren't rendered yet so you "have" very huge left margin on initial render. I tried to fix it with https://codemirror.net/doc/manual.html#refresh but it doesn't work, so I make very tricky hack using setTimeout:

in Playground.tsx file (please aware that some content is cut to show only important parts):

interface State {
  ...
  afterFirstRender: boolean;
}

class Playground extends Component<{}, State> {
  state = {
    ...
    afterFirstRender: false,
  };
 
   componentDidMount() {
    setTimeout(() => {
      this.setState({ afterFirstRender: true, })
    }, 100);
  }
 
  render() {
    const { schema, config, schemaFromExternalResource, afterFirstRender } = this.state;
    const parsedConfig = parse<ConfigInterface>(config || defaultConfig);

    if (afterFirstRender === false) {
      return null;
    }
    ...
  }
  ... 
}

So I wait 100msc after first render and then switch flag and everything works. I will also try another solution, but if you need only fast fix, here it is 😅

EDIT: TBH I don't know why we haven't this kind of problem in https://asyncapi.github.io/asyncapi-react/

[SimonAlling]

Many thanks, @magicmatatjahu! I also experimented for a while but couldn’t figure out a better solution, so I’ll probably roll with it until the Studio is available. 🙂

[SimonAlling]

   componentDidMount() {
     setTimeout(() => {
       this.setState({ afterFirstRender: true, })
     }, 100);
   }

So I wait 100msc after first render and then switch flag and everything works.

@magicmatatjahu: Surprisingly, its not the actual delay per se that constitutes the workaround. This works just as well:

   componentDidMount() {
     setTimeout(() => {
       this.setState({ afterFirstRender: true, })
     }, 0); // 👈
   }

However, this doesn't:

   componentDidMount() {
     this.setState({ afterFirstRender: true, })
   }

So yeah … ¯\_(ツ)_/¯

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴
It will be closed in 60 days if no further activity occurs. To unstale this issue, add a comment with detailed explanation.
Thank you for your contributions ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[derberg]

@magicmatatjahu I guess plan is to use studio as react component?

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️

[derberg]

Hey, please have a look at #146 (comment)

[github-actions]

This issue has been automatically marked as stale because it has not had recent activity 😴

It will be closed in 120 days if no further activity occurs. To unstale this issue, add a comment with a detailed explanation.

There can be many reasons why some specific issue has no activity. The most probable cause is lack of time, not lack of interest. AsyncAPI Initiative is a Linux Foundation project not owned by a single for-profit company. It is a community-driven initiative ruled under open governance model.

Let us figure out together how to push this issue forward. Connect with us through one of many communication channels we established here.

Thank you for your patience ❤️