AsyncAPI React SDK is a set of components/functions to use React as render engine in the Generator.
Run this command to install the SDK in your project:
npm install --save @asyncapi/generator-react-sdkThe process of creating content from React components consists of two main process: transpile and rendering.
The SDK has a custom transpiler which ensures that any directory are transpiled using Rollup. Rollup helps bundling all dependencies and transpile them into CommonJS modules. This is required because this library will be used through NodeJS which does not understand these new modules natively and we do not want to limit the developer in which syntax they prefer nor how they want to separate code.
SDK has its own reconciler for React components. It traverses through each element in the template structure and transforms it into a pure string. Additionally, prop children is also converted to a regular string and stored in the childrenContent prop, which is appended to each component. See example.
Restrictions:
- React hooks is not allowed.
- HTML tags at the moment is not supported.
- React internal components like Fragments, Suspense etc. are skipped.
To render the transpiled template SDK requires:
- Node.js v18 and higher
When rendering you have the option of passing a debug flag which does not remove the transpiled files after the rendering process is done.
import { Text, Indent, IndentationTypes, render } from '@asyncapi/generator-react-sdk';
class ClassComponent extends React.Component {
constructor(props) {
super(props);
}
render() {
// In `childrenContent` prop is stored `text wrapped by custom component\n\n`.
// The content of the `children` prop is transformed to string and saved to the `childrenContent` prop.
return this.props.childrenContent;
}
}
function FunctionComponent() {
return (
<Indent size={3} type={IndentationTypes.TABS}>
indented text
<ClassComponent>
<Text newLines={2}>
text wrapped by custom component
</Text>
</ClassComponent>
</Indent>
);
}
// content will be `\t\t\tindented text text wrapped by custom component\n\n`
const content = render(<FunctionComponent />);template-for-generator-templatestemplate showcases features of the AsyncAPI Generator, including the React renderer. It shows how to write templates, reusable parts (components), what are the recommended patterns. It has simple and complex examples of usingReact.markdown-templateis written using React. It generates documentation into a Markdown file.
For more help join our Slack workspace.
- Setup project by installing dependencies
npm install - Write code and tests.
- Make sure all tests pass
npm test - Make sure code is well formatted and secure
npm run lint
Read CONTRIBUTING guide.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent
