asyncapi / asyncapi/asyncapi-react
docs(no-parser): add README + minimal TypeScript example demonstrating Parser Types usage
- Dominant language
- TypeScript
- Stars
- 243
- Forks
- 182
- Avg merge
- 3d 3h
- Merged PRs (30d)
- 15
Description
**Description**
The repo provides a no-parser distribution but lacks a simple example showing how consumers can use Parser Types without the runtime parser. Adding a short README and a tiny TypeScript example will help new users and clarify the no-parser intent.
**Reasons**
1. **Clarifies intent and reduces confusion** :The no-parser bundle exists, but users may not understand how to use it safely in TypeScript projects. A short README will explain when to use the no-parser build versus the full bundle.
2. **Improves DX for TypeScript users** : Showing how to `import type { AsyncAPIDocument } from '@asyncapi/parser'` demonstrates how to get typings without bundling the parser runtime, avoiding surprise bundle size increases.
3. **Aligns with project goals** :This change directly supports the stated goal of making the no-parser distribution rely on types only, and reduces friction for users who cannot include the runtime parser (e.g., lightweight web apps or strict CSP environments).
4. **Low risk, high impact contribution** : Documentation + a tiny example is easy to review and fast to merge, but it gives visible benefit and demonstrates contributor familiarity with the codebase.
5. **Use cases**
- A browser only SPA wants to render AsyncAPI docs but parse the spec server side — consumer provides already parsed object and uses no-parser bundle.
- A TypeScript library wants typed access to AsyncAPI shapes (for validation or static checks) without bundling `@asyncapi/parser`.
- Environments with restricted dependencies (CDN/UMD setups) that must avoid Node only parser code.
**Attachments**
- **Minimal example:**
```tsx
// examples/no-parser/types-example.tsx
import React from 'react';
import { createRoot } from 'react-dom/client';
// Use the no-parser UMD/ESM build to avoid bundling @asyncapi/parser runtime.
// For a bundler-free environment, the path may be:
// '@asyncapi/react-component/browser/without-parser.js'
import AsyncApiComponent from '@asyncapi/react-component/browser/without-parser.js';
// Import only types from the parser package , TypeScript will strip this at compile time.
import type { AsyncAPIDocument } from '@asyncapi/parser';
const doc: AsyncAPIDocument = {
asyncapi: '2.6.0',
info: {
title: 'Example API',
version: '1.0.0',
},
channels: {
'my/channel': {
subscribe: {
message: {
payload: {
type: 'object',
properties: {
hello: { type: 'string' }
}
}
}
}
}
}
};
function App() {
// Provide the parsed document (object) to the component.
// Since we're using the "without-parser" bundle, the component will not try to
// parse strings itself — the consumer is responsible for parsing if needed.
return ;
}
createRoot(document.getElementById('root')!).render();
```
I would like to add this once assigned/approved
Contributor guide
Research direction
Review the existing no-parser distribution and its documentation structure, then use examples/no-parser/types-example.tsx as the starting example. Add the README explaining full versus no-parser use and ensure the TypeScript example imports AsyncAPIDocument as a type and passes a parsed object to the component; done when both artifacts are clear and usable.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- documentation, frontend
- Issue type
- Documentation
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100