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

packages/shadcn/package.json

@@ -104,6 +104,7 @@
     "recast": "^0.23.11",
     "stringify-object": "^5.0.0",
     "ts-morph": "^26.0.0",
+    "ts-morph-react": "^1.0.6",
     "tsconfig-paths": "^4.2.0",
     "zod": "^3.24.1",
     "zod-to-json-schema": "^3.24.6"

packages/shadcn/src/registry/schema.ts

@@ -41,6 +41,20 @@ export const rawConfigSchema = z
     iconLibrary: z.string().optional(),
     menuColor: z.enum(["default", "inverted"]).default("default").optional(),
     menuAccent: z.enum(["subtle", "bold"]).default("subtle").optional(),
+    transform: z
+      .object({
+        enforceDirectExports: z.boolean().default(false).optional(),
+        enforceFunctionComponent: z.boolean().default(false).optional(),
+        enforceNamedImports: z.boolean().default(false).optional(),
+        enforceFormat: z.boolean().default(false).optional(),
+        enforceEslint: z.boolean().default(false).optional(),
+        enforcePrettier: z.boolean().default(false).optional(),
+        enforceLineSeparation: z.boolean().default(false).optional(),
+        format: z.any(),
+        eslint: z.any(),
+        prettier: z.any(),
+      })
+      .optional(),
     aliases: z.object({
       components: z.string(),
       utils: z.string(),

packages/shadcn/src/utils/transformers/index.ts

@@ -7,6 +7,7 @@ import { transformCssVars } from "@/src/utils/transformers/transform-css-vars"
 import { transformIcons } from "@/src/utils/transformers/transform-icons"
 import { transformImport } from "@/src/utils/transformers/transform-import"
 import { transformJsx } from "@/src/utils/transformers/transform-jsx"
+import { transformReact } from "@/src/utils/transformers/transform-react"
 import { transformRsc } from "@/src/utils/transformers/transform-rsc"
 import { Project, ScriptKind, type SourceFile } from "ts-morph"
 import { z } from "zod"
@@ -45,6 +46,7 @@ export async function transform(
     transformCssVars,
     transformTwPrefixes,
     transformIcons,
+    transformReact,
   ]
 ) {
   const tempFile = await createTempSourceFile(opts.filename)

packages/shadcn/src/utils/transformers/transform-react.ts

@@ -0,0 +1,10 @@
+import { Transformer } from "@/src/utils/transformers"
+import { transform } from "ts-morph-react"
+
+export const transformReact: Transformer = async ({ sourceFile, config }) => {
+  if (!config.tsx) {
+    return sourceFile
+  }
+  await transform(sourceFile, { ...config.transform })
+  return sourceFile
+}

packages/shadcn/src/utils/updaters/update-files.ts

@@ -24,6 +24,7 @@ import { transformIcons } from "@/src/utils/transformers/transform-icons"
 import { transformImport } from "@/src/utils/transformers/transform-import"
 import { transformMenu } from "@/src/utils/transformers/transform-menu"
 import { transformNext } from "@/src/utils/transformers/transform-next"
+import { transformReact } from "@/src/utils/transformers/transform-react"
 import { transformRsc } from "@/src/utils/transformers/transform-rsc"
 import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
 import prompts from "prompts"
@@ -146,6 +147,7 @@ export async function updateFiles(
             ...(_isNext16Middleware(filePath, projectInfo, config)
               ? [transformNext]
               : []),
+            transformReact,
           ]
         )
 

packages/shadcn/test/fixtures/transform-react/example.ts

@@ -0,0 +1,42 @@
+export const example = `"use client"
+
+import * as React from "react"
+import { Button as ButtonPrimitive } from "@base-ui/react/button"
+
+import { cn } from "@/lib/utils"
+
+type ExampleContextProps = {
+  content: string
+}
+
+const ExampleContext = React.createContext<ExampleContextProps | null>(null)
+
+function ExampleProvider({
+  value,
+  ...props
+}: React.PropsWithChildren<{
+  value: ExampleContextProps
+}>) {
+  return (
+    <ExampleContext.Provider value={value}>
+      {props.children}
+    </ExampleContext.Provider>
+  )
+}
+
+function Example({
+  content,
+  className,
+  ...props
+}: ButtonPrimitive.Props & {
+  content: string
+}) {
+  return (
+    <ExampleProvider value={{ content }}>
+      <ButtonPrimitive className={cn('p-2', className)} {...props} />
+    </ExampleProvider>
+  )
+}
+
+export { ExampleProvider, Example }
+`

packages/shadcn/test/utils/__snapshots__/transform-react.test.ts.snap

@@ -0,0 +1,118 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`combined 1`] = `
+"'use client'
+
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { type FunctionComponent, type PropsWithChildren, createContext } from 'react'
+
+import { cn } from '@/lib/utils'
+
+type ExampleContextProps = { content: string }
+
+const ExampleContext = createContext<ExampleContextProps | null>(null)
+export const ExampleProvider: FunctionComponent<PropsWithChildren<{ value: ExampleContextProps }>> = ({
+  value,
+  ...props
+}) => {
+  return <ExampleContext.Provider value={value}>{props.children}</ExampleContext.Provider>
+}
+export const Example: FunctionComponent<ButtonPrimitive.Props & { content: string }> = ({
+  content,
+  className,
+  ...props
+}) => {
+  return (
+    <ExampleProvider value={{ content }}>
+      <ButtonPrimitive className={cn('p-2', className)} {...props} />
+    </ExampleProvider>
+  )
+}
+"
+`;
+
+exports[`enforceDirectExports 1`] = `
+"'use client'
+
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+type ExampleContextProps = { content: string }
+
+const ExampleContext = React.createContext<ExampleContextProps | null>(null)
+
+export function ExampleProvider({ value, ...props }: React.PropsWithChildren<{ value: ExampleContextProps }>) {
+  return <ExampleContext.Provider value={value}>{props.children}</ExampleContext.Provider>
+}
+
+export function Example({ content, className, ...props }: ButtonPrimitive.Props & { content: string }) {
+  return (
+    <ExampleProvider value={{ content }}>
+      <ButtonPrimitive className={cn('p-2', className)} {...props} />
+    </ExampleProvider>
+  )
+}
+"
+`;
+
+exports[`enforceFunctionComponent 1`] = `
+"'use client'
+
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import * as React from 'react'
+
+import { cn } from '@/lib/utils'
+
+type ExampleContextProps = { content: string }
+
+const ExampleContext = React.createContext<ExampleContextProps | null>(null)
+const ExampleProvider: React.FunctionComponent<React.PropsWithChildren<{ value: ExampleContextProps }>> = ({
+  value,
+  ...props
+}) => {
+  return <ExampleContext.Provider value={value}>{props.children}</ExampleContext.Provider>
+}
+const Example: React.FunctionComponent<ButtonPrimitive.Props & { content: string }> = ({
+  content,
+  className,
+  ...props
+}) => {
+  return (
+    <ExampleProvider value={{ content }}>
+      <ButtonPrimitive className={cn('p-2', className)} {...props} />
+    </ExampleProvider>
+  )
+}
+export { Example, ExampleProvider }
+"
+`;
+
+exports[`enforceNamedImports 1`] = `
+"'use client'
+
+import { Button as ButtonPrimitive } from '@base-ui/react/button'
+import { type PropsWithChildren, createContext } from 'react'
+
+import { cn } from '@/lib/utils'
+
+type ExampleContextProps = { content: string }
+
+const ExampleContext = createContext<ExampleContextProps | null>(null)
+
+function ExampleProvider({ value, ...props }: PropsWithChildren<{ value: ExampleContextProps }>) {
+  return <ExampleContext.Provider value={value}>{props.children}</ExampleContext.Provider>
+}
+
+function Example({ content, className, ...props }: ButtonPrimitive.Props & { content: string }) {
+  return (
+    <ExampleProvider value={{ content }}>
+      <ButtonPrimitive className={cn('p-2', className)} {...props} />
+    </ExampleProvider>
+  )
+}
+
+export { Example, ExampleProvider }
+"
+`;

packages/shadcn/test/utils/transform-react.test.ts

@@ -0,0 +1,85 @@
+import { TransformerConfig } from "ts-morph-react"
+import { expect, test } from "vitest"
+import { transform } from "../../src/utils/transformers"
+import { example } from "../fixtures/transform-react/example"
+
+const sharedConfig = {
+  tsx: true,
+  rsc: true,
+  style: "base-lyra",
+  tailwind: { baseColor: "neutral", cssVariables: true },
+  aliases: { components: "@/components", lib: "@/lib", utils: "@/lib/utils" }
+}
+
+const transformConfig = {
+  enforceFormat: true,
+  enforceEslint: true,
+  enforcePrettier: true,
+  eslint: {},
+  format: {},
+  prettier: {}
+}
+
+test("enforceNamedImports", async () => {
+  expect(await transform({
+    filename: "test.tsx",
+    raw: example,
+    config: {
+      ...sharedConfig,
+      transform: {
+        enforceNamedImports: true,
+        enforceDirectExports: false,
+        enforceFunctionComponent: false,
+        ...transformConfig
+      } satisfies TransformerConfig
+    }
+  })).toMatchSnapshot()
+})
+
+test("enforceDirectExports", async () => {
+  expect(await transform({
+    filename: "test.tsx",
+    raw: example,
+    config: {
+      ...sharedConfig,
+      transform: {
+        enforceNamedImports: false,
+        enforceDirectExports: true,
+        enforceFunctionComponent: false,
+        ...transformConfig
+      } satisfies TransformerConfig
+    }
+  })).toMatchSnapshot()
+})
+
+test("enforceFunctionComponent", async () => {
+  expect(await transform({
+    filename: "test.tsx",
+    raw: example,
+    config: {
+      ...sharedConfig,
+      transform: {
+        enforceNamedImports: false,
+        enforceDirectExports: false,
+        enforceFunctionComponent: true,
+        ...transformConfig
+      } satisfies TransformerConfig
+    }
+  })).toMatchSnapshot()
+})
+
+test("combined", async () => {
+  expect(await transform({
+    filename: "test.tsx",
+    raw: example,
+    config: {
+      ...sharedConfig,
+      transform: {
+        enforceNamedImports: true,
+        enforceDirectExports: true,
+        enforceFunctionComponent: true,
+        ...transformConfig
+      } satisfies TransformerConfig
+    }
+  })).toMatchSnapshot()
+})