Parsers - Code Formatting & Transformation

Fabric parsers transform generated code into the correct format, handling imports, exports, formatting, and language-specific syntax.

Use parsers to:

• Format TypeScript/TSX code
• Organize imports and exports
• Handle file extension mapping
• Transform file objects to strings

Perfect for: TypeScript generation, React component generation, multi-language code generation.

Available Parsers

TypeScript Parser

Parse and format TypeScript (.ts) files with import/export handling.

Use for: TypeScript type definitions, constants, functions, interfaces.

import { createFabric } from '@kubb/fabric-core'
import { typescriptParser } from '@kubb/fabric-core/parsers'

const fabric = createFabric()
fabric.use(typescriptParser)

TSX Parser

Parse and format TSX (.tsx) files with JSX syntax support.

Use for: React components, JSX templates, TypeScript + JSX files.

import { createFabric } from '@kubb/fabric-core'
import { tsxParser } from '@kubb/fabric-core/parsers'

const fabric = createFabric()
fabric.use(tsxParser)

Default Parser

Basic parser for plain text or non-TypeScript files.

Use for: JavaScript, JSON, YAML, or any plain text files.

import { createFabric } from '@kubb/fabric-core'
import { defaultParser } from '@kubb/fabric-core/parsers'

const fabric = createFabric()

fabric.use(defaultParser)

How Parsers Work

Parsers are registered with fabric.use() and automatically selected based on file extensions during fabric.write().

Example: Register multiple parsers for different file types.

import { createFabric } from '@kubb/fabric-core'
import { typescriptParser, tsxParser, defaultParser } from '@kubb/fabric-core/parsers'

const fabric = createFabric()

// Register parsers for different file types
fabric.use(typescriptParser)  // Handles .ts files
fabric.use(tsxParser)          // Handles .tsx files
fabric.use(defaultParser)      // Handles all other files

How selection works:

1. Fabric checks the file extension (e.g., .ts, .tsx)
2. Selects the parser whose extNames match the extension
3. Calls the parser's parse() function to generate file content

Common Use Cases

TypeScript Type Generation

Use typescriptParser for generating type definitions, interfaces, and constants.

fabric.use(typescriptParser)

await fabric.addFile({
  baseName: 'types.ts',
  path: './generated/types.ts',
  sources: [
    { value: 'export type User = { id: number }', isExportable: true }
  ],
  imports: [],
  exports: []
})

React Component Generation

Use tsxParser for JSX/React components.

fabric.use(tsxParser)

await fabric.addFile({
  baseName: 'Button.tsx',
  path: './components/Button.tsx',
  sources: [
    { value: 'export const Button = () => <button>Click</button>', isExportable: true }
  ],
  imports: [],
  exports: []
})

Multi-Format Output

Register multiple parsers for different file types in the same project.

fabric.use(typescriptParser)
fabric.use(tsxParser)
fabric.use(defaultParser)

await fabric.write({
  extension: {
    '.ts': '.ts',
    '.tsx': '.tsx',
    '.js': '.js'
  }
})

Next Steps

• TypeScript Parser - Format .ts files
• TSX Parser - Format .tsx files with JSX
• Default Parser - Plain text parser
• Creating Custom Parsers - Build your own

FAQ

Which parser should I use?

• Use typescriptParser for .ts files (types, functions, constants)
• Use tsxParser for .tsx files (React components, JSX templates)
• Use defaultParser for plain text, JSON, or other formats

Can I register multiple parsers?

Yes, register multiple parsers for different file types. Fabric selects the correct parser based on file extension.

How do I create a custom parser?

See Creating Custom Parsers for a complete guide.

What if no parser matches my file extension?

Fabric uses the defaultParser as a fallback for unrecognized extensions.

Related Resources

• Creating Parsers - Build custom parsers
• Configuration Guide - Configure parsers
• Core API - Fabric Core overview