Skip to content

docs(no-parser): add README + minimal TypeScript example demonstrating Parser Types usage #1245

@DeepakSinghRajputC

Description

@DeepakSinghRajputC

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:
// 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 <AsyncApiComponent schema={doc} />;
}

createRoot(document.getElementById('root')!).render(<App />);

I would like to add this once assigned/approved

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions