fix(cli): prevent duplicate template traversal in icon transform

by claude
phosphor icon test snap
update REGISTRY_URL port to 3000

Author: sadeghbarati

packages/cli/package.json

@@ -53,7 +53,7 @@
     "clean": "node ./scripts/rimraf.js",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
-    "start:dev": "REGISTRY_URL=http://localhost:5173/r node dist/index.js",
+    "start:dev": "REGISTRY_URL=http://localhost:3000/r node dist/index.js",
     "start": "node dist/index.js",
     "release": "changeset version",
     "pub:beta": "pnpm build && pnpm publish --no-git-checks --access public --tag beta",

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

@@ -33,47 +33,53 @@ export function transformIcons(opts: TransformOpts, registryIcons: Record<string
         return transformCount
       }
 
-      // Map<orignalIcon, targetedIcon>
+      // Map<originalIcon, targetedIcon>
       const targetedIconsMap: Map<string, string> = new Map()
+
       for (const scriptAST of scriptASTs) {
         traverseScriptAST(scriptAST, {
-
           visitImportDeclaration(path) {
-            if (!ICON_LIBRARY_IMPORTS.has(String(path.node.source.value)))
+            const source = String(path.node.source.value)
+            if (![...ICON_LIBRARY_IMPORTS].some(prefix => source.startsWith(prefix)))
               return this.traverse(path)
 
+            let hasChanges = false
+
             for (const specifier of path.node.specifiers ?? []) {
               if (specifier.type === 'ImportSpecifier') {
                 const iconName = specifier.imported.name
-
                 const targetedIcon = registryIcons[iconName]?.[targetLibrary]
 
-                if (!targetedIcon || targetedIconsMap.has(targetedIcon)) {
+                if (!targetedIcon || targetedIconsMap.has(iconName)) {
                   continue
                 }
 
                 targetedIconsMap.set(iconName, targetedIcon)
                 specifier.imported.name = targetedIcon
+                hasChanges = true
               }
             }
 
-            if (targetedIconsMap.size > 0)
+            if (hasChanges) {
               path.node.source.value = ICON_LIBRARIES[targetLibrary as keyof typeof ICON_LIBRARIES].import
+              transformCount++
+            }
 
             return this.traverse(path)
           },
         })
+      }
 
-        if (sfcAST) {
-          traverseTemplateAST(sfcAST, {
-            enterNode(node) {
-              if (node.type === 'VElement' && targetedIconsMap.has(node.rawName)) {
-                node.rawName = targetedIconsMap.get(node.rawName) ?? ''
-                transformCount++
-              }
-            },
-          })
-        }
+      // Move template traversal outside the loop
+      if (sfcAST && targetedIconsMap.size > 0) {
+        traverseTemplateAST(sfcAST, {
+          enterNode(node) {
+            if (node.type === 'VElement' && targetedIconsMap.has(node.rawName)) {
+              node.rawName = targetedIconsMap.get(node.rawName) ?? ''
+              transformCount++
+            }
+          },
+        })
       }
 
       return transformCount

packages/cli/test/utils/__snapshots__/transform-icons.test.ts.snap

@@ -28,12 +28,12 @@ import { Primitive } from "reka-ui";
 
 exports[`transformIcons > transforms phosphor icons 1`] = `
 "<script setup>
-import { Check } from "lucide-vue-next";
+import { PhCheck } from '@phosphor-icons/vue';
 import { Primitive } from "reka-ui";
 </script>
 
 <template>
-  <Check />
+  <PhCheck />
   <Primitive />
 </template>
 "