As in title: integrate context like in normal React in our React renderer. Idea is described here.

Copied comment from above link:

Context

If we go with React engine as a base solution for model generation, then we should also introduce context for React components. It should works similar to React-DOM context. Let's check the example:

<NamespaceContext>
  <Namespace>
    <ClassContext>
      <Class>
        <PropertyContext>
          <Property />
        </PropertyContext>

        <MethodContext>
          <Method />
        </MethodContext>
      </Class>
    </ClassContext>
  </Namespace>
</NamespaceContext>

Then inside Property and Method components we can use contexts: NamespaceContext, ClassContext, PropertyContext (only Property can use it) and MethodContext (only Method can use it). In Class component we can use contexts: NamespaceContext, ClassContext. By this we lookup for contexts in parent components (not in children - it is not logical).

Using context in component:

import { useContext } from "@asyncapi/generator-react-sdk";

function Property({ ...props }) {
  // we can retrieve some data from ClassContext
  const { className } = useContext(ClassContext);
  // and also from NamespaceContext
  const { namespaceName } = useContext(NamespaceContext);
}

Context can store some data (because context can be written and used as normal JS class) in rendering time and then developer can change output based on stored data.

Similar issue in shape-up repository: asyncapi/shape-up-process#54

More info on this issue can be found here

Security issues:

@babel/traverse

• CVE-2023-45133 (Critical, Fixed in 7.23.2)

@babel/core

• json5
  • CVE-2022-46175 (High, Fixed in 2.2.2)

There are some very old dependencies used by asyncapi. E.g. babel/core is 3 years old.

Can you please update the dependencies? I know it is used for code generation, but still.

Reason/Context

As in title. Support TS in react-sdk. It should be done at this same moment next to asyncapi/generator#455

Description

It need to be use the official TS Rollup plugin https://github.com/rollup/plugins/tree/master/packages/typescript

Describe the bug

LICENSE file does not contain correct information -

Reason/Context

This is to replace the old AsyncAPI logo in this repo's README with the banner attached below that represents the new branding.

Here are a few guidelines for this change as well:

1. Make sure you are using Markdown syntax only
2. Be sure to remove the old logo as well as the old title of the repo as this image will replace both elements
3. Make sure you link this image to the website: https://www.asyncapi.com
4. If there is any description text below the repo title, let's make it left-aligned if it isn't already, so as to match the left-alignment of the content in the new banner image

Download the image file:
github-repobanner-reactsdk.png.zip

Banner preview

Please note that this is only a preview of the image, the contributor should download and use the above zip file

Describe the bug

The API.md file are not generated, or it is empty at least.

This issue defines a list of tasks that need to be performed in this repo to make sure it's ci/cd automation works long term without any issues.

It is up to maintainers to decide if it must be addressed in one or multiple PRs.

Below are 3 different sections describing 3 different important ci/cd changes.

IMPORTANT-START
For GitHub workflows that contain This workflow is centrally managed in https://github.com/asyncapi/.github/ you do not have to perform any work. These workflows were already updated through the update in .github. The only exception is the workflows related to nodejs release. More details in Upgrade Release pipeline - in case of nodejs projects section
IMPORTANT-END

Deprecation of way data is shared between steps

Every single GitHub Action workflow that has echo "::set-output name={name}::{value}" need to be updated to follow echo "{name}={value}" >> $GITHUB_OUTPUT

We do not yet know when set-output will stop working. Previous disable date was 31.05 but now then say community needs more time.

For more details read official article from GitHub

Deprecation of node12

2nd bullet point is still relevant for you even if your projects in not nodejs project

• Every single workflow that uses setup-node action needs an update to follow v3 version of this action, and make sure minimum node 14 is used
• Now this part is more complex. Problem with node12 is that node-based GitHub Actions were using it in majority as a runtime environment. Look for example at this action.yaml file for setup-node action v2. So the job that you have to do is go through all the workflows, and verify every single action that you use, make sure you are using the latest version that is not based on node12. I already did review a lot of actions as part of this PR so maybe you will find some actions there and can copy from me. For example action/checkout needs to be updated to v3.

Node12 end of support in action is probably September 27th.

For more details read official article from GitHub

Upgrade Release pipeline - in case of nodejs projects

ignore this section if your project is not nodejs project

You have 2 options. You can:

A. choose to switch to new release pipeline using instruction from asyncapi/.github#205

B. stay with old release pipeline, and manually update GitHub workflows and actions used in it, you can inspire a lot from this PR asyncapi/.github#226

I definitely recommend going with A

Workflows related to release:

• .github/workflows/if-nodejs-release.yml
• .github/workflows/if-nodejs-version-bump.yml
• .github/workflows/bump.yml

Describe the bug

When I generate markdown template I get this in the console

Warning: Each child in a list should have a unique "key" prop. See https://reactjs.org/link/warning-keys for more information.
    at Server (/Users/wookiee/sources/markdown-template/__transpiled/asyncapi.js:227:26)
Warning: Each child in a list should have a unique "key" prop.

Check the top-level render call using <Text>. See https://reactjs.org/link/warning-keys for more information.
    at Schema (/Users/wookiee/sources/markdown-template/__transpiled/asyncapi.js:320:21)

How to Reproduce

just generate with markdown-template and you'll see it

Expected behavior

these logs should not be visible

For a few hours our Markdown documentation generation fails. Since it indicates this module as the cause and fetches the version just released I thought this is the cause rather than something with markdown-template. Generation worked fine before that.

Here's the output (project references anonymized - I hope):

$ npm run asyncapi-md

> @[email protected] asyncapi-md /home/martin/project
> ag ./docs/asyncapi.yaml @asyncapi/markdown-template --param outFilename=events.md --output ./docs/ --force-write

npm http fetch GET 304 ...
...

+ @asyncapi/[email protected]
added 162 packages from 85 contributors, removed 168 packages and moved 2 packages in 10.37s

11 packages are looking for funding
  run `npm fund` for details

Something went wrong:
Error: Cannot find module '/home/martin/project/node_modules/@asyncapi/generator/node_modules/@asyncapi/markdown-template/node_modules/@asyncapi/generator-react-sdk/lib/index.js'. Please verify that the package.json has a valid "main" entry
    at tryPackage (internal/modules/cjs/loader.js:295:19)
    at Function.Module._findPath (internal/modules/cjs/loader.js:508:18)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:802:27)
    at Function.Module._load (internal/modules/cjs/loader.js:667:27)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at Object.<anonymous> (/home/martin/project/node_modules/@asyncapi/generator/node_modules/@asyncapi/markdown-template/__transpiled/asyncapi.js:5:25)
    at Module._compile (internal/modules/cjs/loader.js:999:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1027:10)
    at Module.load (internal/modules/cjs/loader.js:863:32)
    at Function.Module._load (internal/modules/cjs/loader.js:708:14)
    at Module.require (internal/modules/cjs/loader.js:887:19)
    at require (internal/modules/cjs/helpers.js:74:18)
    at /home/martin/project/node_modules/@asyncapi/generator-react-sdk/src/renderer/template.ts:45:25
    at new Promise (<anonymous>)
    at importComponent (/home/martin/project/node_modules/@asyncapi/generator-react-sdk/src/renderer/template.ts:38:10)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @[email protected] asyncapi-md: `ag ./docs/asyncapi.yaml @asyncapi/markdown-template --param outFilename=events.md --output ./docs/ --force-write`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the @[email protected] asyncapi-md script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/martin/.npm/_logs/2021-02-05T14_16_38_557Z-debug.log

I also attached the (also anonymized) 2021-02-05T14_16_38_557Z-debug.log.

Providing a full project would take a bit longer. Just let me know if this doesn't show up for you at all and I'll dig into that.

Thanks for any pointers! Or a fix :)

Reason/Context

Since its creation we have used version 0, however with more than 1 year with no bugs, I think it's fair to say we can release this as being stable version 1 🙂

@magicmatatjahu what do you think?

Reason/Context

It doesn't make sense to me that the generator and this library don't have the same codeowners, as they are directly linked.

So I am suggesting that we add @fmvilas @derberg as codeowners here.

Any thoughts? cc @magicmatatjahu

Reason/Context

It is currently not possible to use a default asynchronous function in the template such as

export default async function schemaRender({ asyncapi }) {
   ...
}

Description

This is required in order to use the new model library.

stack trace when trying to use it

Something went wrong:
ReferenceError: regeneratorRuntime is not defined
    at _schemaRender (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/__transpiled/src/schemas/schema.ts.js:155:51)
    at schemaRender (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/template/src/schemas/schema.ts.js:15:1)
    at /Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/src/renderer/template.ts:50:52
    at new Promise (<anonymous>)
    at importComponent (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/src/renderer/template.ts:42:10)
    at Object.<anonymous> (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/src/renderer/template.ts:19:18)
    at step (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/lib/renderer/template.js:33:23)
    at Object.next (/Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/lib/renderer/template.js:14:53)
    at /Users/lagoni/Documents/AsyncAPI/ts-nats-template/node_modules/@asyncapi/generator-react-sdk/lib/renderer/template.js:8:71
    at new Promise (<anonymous>)

Reason/Context

Some people know or not, the Generator has feature called File template. More info here https://github.com/asyncapi/generator/blob/master/docs/authoring.md#file-templates

Issue is created to start discussion about how to simplify this feature. File template is good for Nunjucks but using React we can make it more powerful and more flexible.

Proposition

My proposition is return as output from template an array of <File> components and then render and save every given File, something like:

export default function({ asyncapi }) {
  if (!asyncapi.components().hasSchemas()) {
    return null;
  }

  return Object.entries(asyncapi.components().schemas()).map(([schemaName, schema]) => {
    return (
      <File name={`${schemaName}.html`}>
        <SchemaFile schemaName={schemaName} schema={schema} />
      </File>
    );
  });
}

function SchemaFile({ schemaName, schema }) {
  // implementation...
}

Any other ideas? :)