asyncapi / asyncapi-react

React component for rendering documentation from your specification in real-time in the browser. It also provides a WebComponent and bundle for Angular and Vue
https://asyncapi.github.io/asyncapi-react/
Apache License 2.0
184 stars 125 forks source link

Feat: React children components support #840

Closed Lancetnik closed 2 months ago

Lancetnik commented 11 months ago

Hello there! I am a core developer of FastStream - the Python frameworks to build well-structured publish/consumes services for various Message Brokers. One of the great FastStream features users love - automatic AsyncAPI schema generation (and hosting) right from the service code. Thus, I have a little request to you.

For now, FastStream uses CDN React Component version to draw a static HTML represention of user service schema. But we can easely (cuz we have backend to serve this static site) implement test message publishing funtional right from a web schema (like OpenAPI allows you to send test HTTP requests). At first, test messages will be addressed only to the original FastStream service... But then we'll implement AsyncAPI schema -> FastStream service generation, that allows us to generate publishers "on flyight" and publish any message to any FastStream-supported Message Broker right from the website.

A slightly confusing preface... We need to ability pass some React-children components to the AsyncAPI react component to draw user payload input somewhere around payload example. We can create the component fork and implement our own component version (with all required inputs), but it is a bad way to build long-living tools. So, I hope on your team collaboration in this question and believe, that together we able to make AsyncAPI environment riacher.

github-actions[bot] commented 11 months ago

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.

jonaslagoni commented 11 months ago

I agree, the components should be as extensible and overwritable as possible 👌

derberg commented 10 months ago

@Lancetnik please just share in more details what changes you will exactly introduce and definitely we are open to accept any PR that will make the component more flexible and extensible. We are even open to gain you as maintainers

devilkiller-ag commented 10 months ago

Hi, I am a bit curious about this discussion, but I am finding it a little difficult to understand. I will try to explore the async api react component in the upcoming weeks and update you all regarding this. It will be helpful if @Lancetnik can provide more details.

Lancetnik commented 10 months ago
Снимок экрана 2023-12-20 в 20 54 35

Here is a payload example component of AsyncAPI schema. This webpage is generated automatically by FastStream by passing AsyncAPI json/yaml schema to react component. But we are interested to make this page interactive by adding "Try it out" btn to make this payload textfield editable and make user able to publish a test message right to the broker like OpenAPI does.

Exactly in this case, probably, we can add a props to propogate it to the MessageExample as a child instead this div.

But it will be great to create public React components to provides your library users with making their own full-extendable AsyncAPILayout

github-actions[bot] commented 6 months ago

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

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 :heart: