feat(shadcn): implement icons transformer

apps/www/public/schema.json

@@ -33,6 +33,9 @@
     "tsx": {
       "type": "boolean"
     },
+    "iconLibrary": {
+      "type": "string"
+    },
     "aliases": {
       "type": "object",
       "properties": {

packages/shadcn/src/commands/info.ts

@@ -0,0 +1,20 @@
+import { getConfig } from "@/src/utils/get-config"
+import { getProjectInfo } from "@/src/utils/get-project-info"
+import { logger } from "@/src/utils/logger"
+import { Command } from "commander"
+
+export const info = new Command()
+  .name("info")
+  .description("get information about your project")
+  .option(
+    "-c, --cwd <cwd>",
+    "the working directory. defaults to the current directory.",
+    process.cwd()
+  )
+  .action(async (opts) => {
+    logger.info("> project info")
+    console.log(await getProjectInfo(opts.cwd))
+    logger.break()
+    logger.info("> components.json")
+    console.log(await getConfig(opts.cwd))
+  })

packages/shadcn/src/commands/init.ts

@@ -333,5 +333,6 @@ async function promptForMinimalConfig(
     rsc: defaultConfig?.rsc,
     tsx: defaultConfig?.tsx,
     aliases: defaultConfig?.aliases,
+    iconLibrary: defaultConfig?.iconLibrary,
   })
 }

packages/shadcn/src/index.ts

@@ -1,6 +1,7 @@
 #!/usr/bin/env node
 import { add } from "@/src/commands/add"
 import { diff } from "@/src/commands/diff"
+import { info } from "@/src/commands/info"
 import { init } from "@/src/commands/init"
 import { migrate } from "@/src/commands/migrate"
 import { Command } from "commander"
@@ -20,7 +21,12 @@ async function main() {
       "display the version number"
     )
 
-  program.addCommand(init).addCommand(add).addCommand(diff).addCommand(migrate)
+  program
+    .addCommand(init)
+    .addCommand(add)
+    .addCommand(diff)
+    .addCommand(migrate)
+    .addCommand(info)
 
   program.parse()
 }

packages/shadcn/src/migrations/migrate-icons.ts

@@ -4,6 +4,7 @@ import { tmpdir } from "os"
 import path from "path"
 import { Config } from "@/src/utils/get-config"
 import { highlighter } from "@/src/utils/highlighter"
+import { ICON_LIBRARIES } from "@/src/utils/icon-libraries"
 import { logger } from "@/src/utils/logger"
 import { getRegistryIcons } from "@/src/utils/registry"
 import { iconsSchema } from "@/src/utils/registry/schema"
@@ -14,11 +15,6 @@ import { Project, ScriptKind, SyntaxKind } from "ts-morph"
 import { PackageJson } from "type-fest"
 import { z } from "zod"
 
-export const iconLibraries = {
-  lucide: "lucide-react",
-  radix: "@radix-ui/react-icons",
-}
-
 export async function migrateIcons(config: Config) {
   if (!config.resolvedPaths.ui) {
     throw new Error(
@@ -38,7 +34,7 @@ export async function migrateIcons(config: Config) {
     throw new Error("Something went wrong fetching the registry icons.")
   }
 
-  const libraryChoices = Object.entries(iconLibraries).map(
+  const libraryChoices = Object.entries(ICON_LIBRARIES).map(
     ([name, packageName]) => ({
       title: packageName,
       value: name,
@@ -74,17 +70,17 @@ export async function migrateIcons(config: Config) {
 
   if (
     !(
-      migrateOptions.sourceLibrary in iconLibraries &&
-      migrateOptions.targetLibrary in iconLibraries
+      migrateOptions.sourceLibrary in ICON_LIBRARIES &&
+      migrateOptions.targetLibrary in ICON_LIBRARIES
     )
   ) {
     throw new Error("Invalid icon library. Please choose a valid icon library.")
   }
 
   const sourceLibrary =
-    iconLibraries[migrateOptions.sourceLibrary as keyof typeof iconLibraries]
+    ICON_LIBRARIES[migrateOptions.sourceLibrary as keyof typeof ICON_LIBRARIES]
   const targetLibrary =
-    iconLibraries[migrateOptions.targetLibrary as keyof typeof iconLibraries]
+    ICON_LIBRARIES[migrateOptions.targetLibrary as keyof typeof ICON_LIBRARIES]
 
   const { confirm } = await prompts({
     type: "confirm",
@@ -129,12 +125,12 @@ export async function migrateIcons(config: Config) {
 
 export async function migrateIconsFile(
   content: string,
-  sourceLibrary: keyof typeof iconLibraries,
-  targetLibrary: keyof typeof iconLibraries,
+  sourceLibrary: keyof typeof ICON_LIBRARIES,
+  targetLibrary: keyof typeof ICON_LIBRARIES,
   iconsMapping: z.infer<typeof iconsSchema>
 ) {
-  const sourceLibraryName = iconLibraries[sourceLibrary]
-  const targetLibraryName = iconLibraries[targetLibrary]
+  const sourceLibraryName = ICON_LIBRARIES[sourceLibrary]
+  const targetLibraryName = ICON_LIBRARIES[targetLibrary]
 
   const dir = await fs.mkdtemp(path.join(tmpdir(), "shadcn-"))
   const project = new Project({
@@ -177,13 +173,10 @@ export async function migrateIconsFile(
       specifier.remove()
 
       // Replace with the targeted icon.
-      const jsxElements = sourceFile.getDescendantsOfKind(
-        SyntaxKind.JsxSelfClosingElement
-      )
-      const iconElement = jsxElements.find(
-        (node) => node.getTagNameNode()?.getText() === iconName
-      )
-      iconElement?.getTagNameNode()?.replaceWithText(targetedIcon)
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
     }
 
     // If the named import is empty, remove the import declaration.
@@ -205,7 +198,7 @@ export async function migrateIconsFile(
 }
 
 function _getIconLibraries(packageInfo: PackageJson) {
-  return Object.values(iconLibraries).filter(
+  return Object.values(ICON_LIBRARIES).filter(
     (library) =>
       packageInfo.dependencies?.[library] ||
       packageInfo.devDependencies?.[library]

packages/shadcn/src/utils/get-config.ts

@@ -38,6 +38,7 @@ export const rawConfigSchema = z
       lib: z.string().optional(),
       hooks: z.string().optional(),
     }),
+    iconLibrary: z.string().optional(),
   })
   .strict()
 
@@ -65,6 +66,11 @@ export async function getConfig(cwd: string) {
     return null
   }
 
+  // Set default icon library if not provided.
+  if (!config.iconLibrary) {
+    config.iconLibrary = config.style === "new-york" ? "radix" : "lucide"
+  }
+
   return await resolveConfigPaths(cwd, config)
 }
 

packages/shadcn/src/utils/get-project-info.ts

@@ -233,6 +233,7 @@ export async function getProjectConfig(
       cssVariables: true,
       prefix: "",
     },
+    iconLibrary: "lucide",
     aliases: {
       components: `${projectInfo.aliasPrefix}/components`,
       ui: `${projectInfo.aliasPrefix}/components/ui`,

packages/shadcn/src/utils/icon-libraries.ts

@@ -0,0 +1,4 @@
+export const ICON_LIBRARIES = {
+  lucide: "lucide-react",
+  radix: "@radix-ui/react-icons",
+}

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

@@ -4,6 +4,7 @@ import path from "path"
 import { Config } from "@/src/utils/get-config"
 import { registryBaseColorSchema } from "@/src/utils/registry/schema"
 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 { transformRsc } from "@/src/utils/transformers/transform-rsc"
@@ -42,6 +43,7 @@ export async function transform(
     transformRsc,
     transformCssVars,
     transformTwPrefixes,
+    transformIcons,
   ]
 ) {
   const tempFile = await createTempSourceFile(opts.filename)
@@ -50,7 +52,7 @@ export async function transform(
   })
 
   for (const transformer of transformers) {
-    transformer({ sourceFile, ...opts })
+    await transformer({ sourceFile, ...opts })
   }
 
   if (opts.transformJsx) {

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

@@ -0,0 +1,70 @@
+import { ICON_LIBRARIES } from "@/src/utils/icon-libraries"
+import { getRegistryIcons } from "@/src/utils/registry"
+import { Transformer } from "@/src/utils/transformers"
+import { SyntaxKind } from "ts-morph"
+
+// Lucide is the default icon library in the registry.
+const SOURCE_LIBRARY = "lucide"
+
+export const transformIcons: Transformer = async ({ sourceFile, config }) => {
+  // No transform if we cannot read the icon library.
+  if (!config.iconLibrary || !(config.iconLibrary in ICON_LIBRARIES)) {
+    return sourceFile
+  }
+
+  const registryIcons = await getRegistryIcons()
+  const sourceLibrary = SOURCE_LIBRARY
+  const targetLibrary = config.iconLibrary
+
+  if (sourceLibrary === targetLibrary) {
+    return sourceFile
+  }
+
+  let targetedIcons: string[] = []
+  for (const importDeclaration of sourceFile.getImportDeclarations() ?? []) {
+    if (
+      importDeclaration.getModuleSpecifier()?.getText() !==
+      `"${ICON_LIBRARIES[SOURCE_LIBRARY]}"`
+    ) {
+      continue
+    }
+
+    for (const specifier of importDeclaration.getNamedImports() ?? []) {
+      const iconName = specifier.getName()
+
+      const targetedIcon = registryIcons[iconName][targetLibrary]
+
+      if (!targetedIcon) {
+        continue
+      }
+
+      targetedIcons.push(targetedIcon)
+
+      // Remove the named import.
+      specifier.remove()
+
+      // Replace with the targeted icon.
+      sourceFile
+        .getDescendantsOfKind(SyntaxKind.JsxSelfClosingElement)
+        .filter((node) => node.getTagNameNode()?.getText() === iconName)
+        .forEach((node) => node.getTagNameNode()?.replaceWithText(targetedIcon))
+    }
+
+    // If the named import is empty, remove the import declaration.
+    if (importDeclaration.getNamedImports()?.length === 0) {
+      importDeclaration.remove()
+    }
+  }
+
+  if (targetedIcons.length > 0) {
+    sourceFile.addImportDeclaration({
+      moduleSpecifier:
+        ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES],
+      namedImports: targetedIcons.map((icon) => ({
+        name: icon,
+      })),
+    })
+  }
+
+  return sourceFile
+}

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

@@ -12,6 +12,7 @@ import { RegistryItem } from "@/src/utils/registry/schema"
 import { spinner } from "@/src/utils/spinner"
 import { transform } from "@/src/utils/transformers"
 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 { transformRsc } from "@/src/utils/transformers/transform-rsc"
 import { transformTwPrefixes } from "@/src/utils/transformers/transform-tw-prefix"
@@ -114,7 +115,13 @@ export async function updateFiles(
         baseColor,
         transformJsx: !config.tsx,
       },
-      [transformImport, transformRsc, transformCssVars, transformTwPrefixes]
+      [
+        transformImport,
+        transformRsc,
+        transformCssVars,
+        transformTwPrefixes,
+        transformIcons,
+      ]
     )
 
     await fs.writeFile(filePath, content, "utf-8")

packages/shadcn/test/fixtures/config-full/components.json

@@ -14,5 +14,6 @@
     "lib": "~/lib",
     "hooks": "~/lib/hooks",
     "ui": "~/ui"
-  }
+  },
+  "iconLibrary": "lucide"
 }

packages/shadcn/test/fixtures/config-jsx/components.json

@@ -10,5 +10,6 @@
   "aliases": {
     "utils": "@/lib/utils",
     "components": "@/components"
-  }
+  },
+  "iconLibrary": "radix"
 }

packages/shadcn/test/utils/get-config.test.ts

@@ -86,6 +86,7 @@ test("get config", async () => {
       hooks: path.resolve(__dirname, "../fixtures/config-partial", "./hooks"),
       lib: path.resolve(__dirname, "../fixtures/config-partial", "./lib"),
     },
+    iconLibrary: "lucide",
   })
 
   expect(
@@ -108,6 +109,7 @@ test("get config", async () => {
       hooks: "~/lib/hooks",
       ui: "~/ui",
     },
+    iconLibrary: "lucide",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-full"),
       tailwindConfig: path.resolve(
@@ -156,6 +158,7 @@ test("get config", async () => {
       components: "@/components",
       utils: "@/lib/utils",
     },
+    iconLibrary: "radix",
     resolvedPaths: {
       cwd: path.resolve(__dirname, "../fixtures/config-jsx"),
       tailwindConfig: path.resolve(