FSX Component Rendering Plugin

The fsxPlugin enables rendering FabricElements (FSX components) to generate file output. Essential for transforming component trees into file content.

Use fsxPlugin when: You need to render Fabric Core's custom FSX components to strings.

Perfect for: Fabric Core workflows, custom component rendering, non-React code generation.

Key features:

• Render FSX components to strings
• Component tree tracking
• Debug mode for development
• Lifecycle event integration

Usage

Create and render FSX components with the fsx plugin.

Example: Create a simple component and render it.

run.ts

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

const fabric = createFabric()

fabric.use(fsxPlugin)

const App = createComponent('App', () => {
  return 'Hello from Fabric!'
})

const output = await fabric.render(App())

output

"Hello from Fabric!"

Plugin Options

treeNode

Provide a custom tree node to track the component hierarchy:

Type:	TreeNode<ComponentNode>
Required:	false
Default:	new TreeNode<ComponentNode>()

debug

Enable debug mode to see render output in the console:

Type:	boolean
Required:	false
Default:	false

Injected Methods

The fsxPlugin adds the following methods to the Fabric instance:

render(App)

Renders a FabricElement component tree and returns the output as a string. This method also emits the lifecycle:start event.

Signature:

render(Fabric: FabricElement<any>): Promise<string>

waitUntilExit()

Waits until the rendering process exits. This method is useful for ensuring that all asynchronous rendering operations complete before proceeding.

Signature:

waitUntilExit(): Promise<void>

createComponent

The createComponent helper allows you to build reusable components for code generation:

component-example.ts

import { createComponent, Const } from '@kubb/fabric-core'

const MyConst = createComponent('MyConst', ({ name }: { name: string }) => {
  return Const({ name, children: '"hello"' })
})

const output = MyConst({ name: 'greeting' })()

component-with-children.ts

import { createComponent, Const } from '@kubb/fabric-core'

const MyConst = createComponent('MyConst', ({ name }: { name: string }) => {
  return Const({ name }).children('"hello"')
})

const output = MyConst({ name: 'greeting' })()

output

const greeting = "hello"

Examples

Code Generation from Templates

Generate TypeScript code using component composition:

run.ts

import { createFabric, Type, Const, File, createComponent, Br } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const ModelGenerator = createComponent('ModelGenerator', ({ name, fields }: {
  name: string
  fields: Array<{ name: string; type: string }>
}) => {
  return File({
    baseName: `${name.toLowerCase()}.ts`,
    path: `./${name.toLowerCase()}.ts`,
    children: [
      Type({
        name,
        export: true,
        children: `{ ${fields.map(f => `${f.name}: ${f.type}`).join('; ')} }`,
      }),
      Br(),
      Const({
        name: `default${name}`,
        export: true,
        type: name,
        children: `{ ${fields.map(f => `${f.name}: undefined`).join(', ')} }`,
      }),
      Br()
    ],
  })
})

const fabric = createFabric()

fabric.use(fsxPlugin)

const output = await fabric.render(
  ModelGenerator({
    name: 'User',
    fields: [
      { name: 'id', type: 'number' },
      { name: 'name', type: 'string' },
      { name: 'email', type: 'string' },
    ],
  })
)

output

export type User = { id: number; name: string; email: string }
export const defaultUser: User = { id: undefined, name: undefined, email: undefined }

Building Component Libraries

Create reusable components for consistent code generation:

run.ts

import { createFabric, Type, Const, File, createComponent, Br } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'

const ApiEndpoint = createComponent('ApiEndpoint', ({ name, path }: {
  name: string
  path: string
}) => {
  return Const({
    name: `${name.toUpperCase()}_ENDPOINT`,
    export: true,
    asConst: true,
    children: `'${path}'`,
  })
})
const fabric = createFabric()

fabric.use(fsxPlugin)

const output = await fabric.render(ApiEndpoint({ name: 'user', path: '/api/users' }))

output

export const USER_ENDPOINT = '/api/users' as const

See Also

• createFabric - Fabric API reference
• fsPlugin - Write files to disk
• Creating Plugins - Build custom plugins
• File Generation Patterns - Best practices