Plugins

Fabric uses a plugin-based architecture to extend its code generation capabilities. Plugins provide file system operations, logging, dependency tracking, and React integration for JSX-based code generation.

Core Plugins

fsPlugin

Write files to disk and manage file system operations.

This is the foundational plugin that handles file I/O, providing the ability to write generated code to disk with options for dry runs and cleanup operations.

import { createFabric } from '@kubb/fabric-core'
import { fsPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()

fabric.use(fsPlugin, {
  dryRun: false,
  clean: { path: './generated' },
})

fsxPlugin

Process FSX (Fabric JSX) components and transform them into code.

Enables JSX-based code generation by processing FSX components and transforming them into the target output format.

import { createFabric } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()

fabric.use(fsxPlugin)

Utilities

loggerPlugin

Add logging capabilities to your Fabric instance.

Provides structured logging for tracking file generation, processing steps, and debugging code generation workflows.

import { createFabric } from '@kubb/fabric-core'
import { loggerPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()

fabric.use(loggerPlugin, {
  logLevel: 'info',
})

barrelPlugin

Generate barrel files (index exports) for your code.

Automatically creates index files that re-export modules, simplifying imports and improving the developer experience.

import { createFabric } from '@kubb/fabric-core'
import { barrelPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()

fabric.use(barrelPlugin, {
  output: './generated',
})

React Integration

reactPlugin

Enable React and JSX support for code generation.

Provides React reconciler integration, allowing you to use React components and hooks in your code generators.

import { createReactFabric } from '@kubb/react-fabric'
import { reactPlugin } from '@kubb/react-fabric/plugins'

const fabric = createReactFabric()

fabric.use(reactPlugin)

Example

Plugins are configured when creating your Fabric instance:

import { createFabric } from '@kubb/fabric-core'
import { fsPlugin, fsxPlugin, loggerPlugin } from '@kubb/fabric-core/plugins'

const fabric = createFabric()

fabric.use(loggerPlugin)
fabric.use(fsxPlugin)
fabric.use(fsPlugin, {
  dryRun: false,
  clean: { path: './generated' },
})