feat(shadcn): Customize code style for components (ESLint / Prettier / TS)

[tobiasstrebitzer]

Description

Adds support for configurable code style adjustment using ESLint, Prettier and TypeScript Language Service.

Changes

• Added ts-morph-react dependency to package.json (I maintain this library separately to avoid bloating the codebase)
• Added transform setting to config schema (see details below)
• Created transform-react.ts to run the code style adjustments

Configuration

Documentation available on ts-morph-react github page

{
  "transform": {
    // Avoid export assignment `export =`, and instead enfore specific exports `export const Button`
    "enforceDirectExports": true,
    // Transform functions to react function components / arrow functions `export const Button: FunctionComponent = `
    "enforceFunctionComponent": true,
    // Use named imports for react, e.g. `import { type FunctionComponent } from 'react'`
    "enforceNamedImports": true,
    // Ensure newline separation on root level (imports group, components)
    "enforceLineSeparation": true,
    // Enfore TypeScript Language Service code style adjustments
    "enforceFormat": true,
    // Enfore ESLint code style adjustments
    "enforceEslint": true,
    // Enfore Prettier code style adjustments
    "enforcePrettier": true,
    // TypeScript Language Service format options
    "format": { ... },
    // ESLint rules (@typescript-eslint/*, @stylistic/* supported)
    "eslint": { ... },
    // Prettier options
    "prettier": { ... }
  }
}

Testing

• ✅ Tested npx shadcn@latest add command to ensure code style adjustments apply
• ✅ Tested adding multiple components to ensure compatibility across files
• ✅ Create multiple tests for transform-react and different configuration options
• ✅ Ensured all existing tests are passing

Related

• Fixes ui code generated from cli add command differs from project's eslint code style #2205
• Fixes CLI diff quote style #1334
• Fixes Experimental diff command gives false positives due to code style #1202

[vercel]

@tobiasstrebitzer is attempting to deploy a commit to the shadcn-pro Team on Vercel.

A member of the Team first needs to authorize it.

[tobiasstrebitzer]

This PR introduces new packages to shadcn (eslint, prettier). This increases the bundle size and grows the project scope and technical debt (additional documentation, maintenance, package compatibility).

Alternatively, pluggable transformers / plugins could help keep shadcn easier to maintain, and allow users to configure additional transformers. For example:

$ shadcn use react-transformer
✔ Checking plugin registry.
✔ Installing dependencies.
✔ Enabling plugin.

If this helps, happy to work on a PR.