Dedent fabric-core

The Dedent component decreases the indentation level in generated code. Use with Indent to control code block formatting.

Use Dedent when: You need to decrease indentation after code blocks, closing braces, or nested structures.

Perfect for: Closing function bodies, exiting nested blocks, maintaining proper code formatting.

NOTE

This is the Fabric Core version. In React Fabric, use the <dedent /> JSX element instead.

Usage

run.ts

import { createFabric } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'
import { Fabric, Indent, Dedent, Br } from '@kubb/fabric-core'

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

const component = Fabric().children([
  'function example() {',
  Br(),
  Indent(),
  'return true',
  Br(),
  Dedent(),
  '}'
])

const output = await fabric.render(component)

output

function example() {
  return true
}

Props

This component accepts no props.

Examples

Multi-Level Nesting

run.ts

import { createFabric } from '@kubb/fabric-core'
import { fsxPlugin } from '@kubb/fabric-core/plugins'
import { Fabric, Indent, Dedent, Br } from '@kubb/fabric-core'

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

const component = Fabric().children([
  'switch (value) {',
  Br(),
  Indent(),
  'case 1:',
  Br(),
  Indent(),
  'doSomething()',
  Br(),
  'break',
  Br(),
  Dedent(),
  'default:',
  Br(),
  Indent(),
  'doDefault()',
  Br(),
  Dedent(),
  Dedent(),
  '}'
])

const output = await fabric.render(component)

output

switch (value) {
  case 1:
    doSomething()
    break
  default:
    doDefault()
}

See Also

• Indent - Increase indentation
• Br - Line breaks
• Function - Function declarations