feat: update CLI to use clack-prompts for user interaction, add new dependency, and improve file handling

Author: Simon-He95

cli.mjs

@@ -1,2 +1,2 @@
 #!/usr/bin/env node --no-warnings
-import('./dist/cli.js')
+import('./dist/cli.cjs')

package.json

@@ -59,6 +59,7 @@
   },
   "dependencies": {
     "@babel/core": "^7.26.10",
+    "@simon_he/clack-prompts": "^0.8.11",
     "fast-glob": "^3.3.3"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -2,94 +2,144 @@ import type { SuffixType } from './type'
 import fs from 'node:fs'
 import path from 'node:path'
 import process from 'node:process'
+import { setTimeout } from 'node:timers/promises'
+import * as p from '@simon_he/clack-prompts'
 import colorize from '@simon_he/colorize'
 import fg from 'fast-glob'
 import { transfromCode } from './transformCode'
-import { flag } from './utils'
-
-const log = console.log
+import { TRANSFER_FLAG } from './utils'
 
 export async function cli() {
+  console.clear()
+  await setTimeout(100)
+  const s = p.spinner()
+  p.intro(
+    `${colorize({
+      text: colorize({
+        text: ' 🚀 Transform Code To Unocss ',
+        color: 'black',
+      }),
+      bgColor: 'cyan',
+    })}`,
+  )
   const asset = process.argv[2]
 
   if (!asset) {
-    log(
-      colorize({
-        text: '需要指定一个目录',
-        color: 'red',
-      }),
-    )
+    p.cancel('❌  Please specify a directory or file path to convert.')
     return
   }
   const fileDir = path.resolve(process.cwd(), asset)
+  // 如果传入的是一个文件路径，则直接转换这个文件
+  if (fs.existsSync(fileDir) && fs.statSync(fileDir).isFile()) {
+    p.note(`${fileDir}`, 'Converting file...')
+    s.start('Converting...')
+    const suffix = fileDir.slice(fileDir.lastIndexOf('.') + 1) as SuffixType
+    const code = await fs.promises.readFile(fileDir, 'utf-8')
+    const codeTransfer = await transfromCode(code, {
+      filepath: fileDir,
+      type: suffix,
+    })
+    // 创建新文件
+    try {
+      await fs.promises.writeFile(
+        fileDir.replace(`.${suffix}`, `${TRANSFER_FLAG}.${suffix}`),
+        codeTransfer,
+      )
+      s.stop('Conversion completed.')
+    }
+    catch (error) {
+      p.cancel(`❌  Conversion failed: ${error}`)
+    }
+    return
+  }
+  // 判断这个目录是否存在
+  if (!fs.existsSync(fileDir)) {
+    p.cancel(`Directory not found: ${fileDir}`)
+    return
+  }
   const isRevert = process.argv[3] === '-r' || process.argv[3] === '--revert'
+  const isForce = process.argv.includes('--force')
   const entries = await fg(
     ['**.vue', '**.tsx', '**.html', '**.svelte', '**.astro'],
     { cwd: fileDir },
   )
-  entries
-    .filter(entry => !entry.endsWith(flag))
-    .forEach(async (entry) => {
-      const filepath = `${fileDir}/${entry}`
-      const suffix = entry.slice(entry.lastIndexOf('.') + 1) as SuffixType
+  if (!entries.length) {
+    p.cancel('No convertible files found in the specified directory.')
+    return
+  }
 
-      const newfilepath = filepath.endsWith(flag)
-        ? filepath
-        : filepath.replace(`.${suffix}`, `${flag}.${suffix}`)
-      if (fs.existsSync(newfilepath)) {
-        if (isRevert) {
-          // 删除
-          try {
-            await fs.promises.unlink(newfilepath)
-            log(
-              colorize({
-                text: `${newfilepath} already revert`,
-                color: 'green',
-              }),
-            )
+  p.note(`${fileDir}`, 'Converting directory...')
+
+  s.start('Converting...')
+  await Promise.all(
+    entries
+      .filter(entry => !entry.includes(TRANSFER_FLAG))
+      .map(async (entry) => {
+        const filepath = path.join(fileDir, entry)
+        const suffix = entry.slice(entry.lastIndexOf('.') + 1) as SuffixType
+
+        const newfilepath = filepath.endsWith(TRANSFER_FLAG)
+          ? filepath
+          : filepath.replace(`.${suffix}`, `${TRANSFER_FLAG}.${suffix}`)
+        if (fs.existsSync(newfilepath)) {
+          if (isRevert) {
+            try {
+              await fs.promises.unlink(newfilepath)
+              p.note(
+                colorize({ text: newfilepath, color: 'cyan' }),
+                colorize({ text: 'Revert succeeded', color: 'green' }),
+              )
+            }
+            catch (error) {
+              p.note(
+                colorize({ text: newfilepath, color: 'cyan' }),
+                colorize({ text: `Revert failed: ${error}`, color: 'red' }),
+              )
+            }
+            return
+          }
+          if (isForce) {
+            // Overwrite
           }
-          catch (error) {
-            log(
+          else {
+            p.note(
+              colorize({ text: newfilepath, color: 'cyan' }),
               colorize({
-                text: `revert failed: ${error}`,
-                color: 'red',
+                text: 'Skipped (use --force to overwrite)',
+                color: 'yellow',
               }),
             )
+            return
           }
+        }
+        else if (isRevert) {
           return
         }
-        log(
-          colorize({
-            text: `${newfilepath} has transferred`,
-            color: 'yellow',
-          }),
-        )
-        return
-      }
-      else if (isRevert) {
-        return
-      }
-      const code = await fs.promises.readFile(filepath, 'utf-8')
-      const codeTransfer = await transfromCode(code, { filepath, type: suffix })
-      // 创建新文件
-      try {
-        await fs.promises.writeFile(newfilepath, codeTransfer)
-        log(
-          colorize({
-            text: `${newfilepath} transfer succeed`,
-            color: 'green',
-          }),
-        )
-      }
-      catch (error) {
-        log(
-          colorize({
-            text: `${newfilepath} transfer failed: ${error}`,
-            color: 'red',
-          }),
-        )
-      }
-    })
+        const code = await fs.promises.readFile(filepath, 'utf-8')
+        const codeTransfer = await transfromCode(code, {
+          filepath,
+          type: suffix,
+        })
+        try {
+          await fs.promises.writeFile(newfilepath, codeTransfer)
+          p.note(
+            colorize({ text: newfilepath, color: 'cyan' }),
+            colorize({
+              text: `Transfer succeeded${isForce ? ' (overwritten)' : ''}`,
+              color: 'green',
+            }),
+          )
+        }
+        catch (error) {
+          p.note(
+            colorize({ text: newfilepath, color: 'cyan' }),
+            colorize({ text: `Transfer failed: ${error}`, color: 'red' }),
+          )
+        }
+      }),
+  )
+  s.stop('Conversion completed.')
+  p.outro('✅ All files have been processed.')
 }
 
 cli()

src/cli.ts

@@ -9,13 +9,13 @@ import { tail } from './tail'
 import { transformVue } from './transformVue'
 import {
   diffTemplateStyle,
-  flag,
   getCssType,
   getStyleScoped,
   getVueCompilerSfc, // 从utils引入公共函数
   isEmptyStyle,
   isNot,
   joinWithUnderLine,
+  TRANSFER_FLAG,
   transformUnocssBack,
   trim,
 } from './utils'
@@ -255,7 +255,7 @@ async function importCss(
     const restStyle = getStyleScoped(transfer)
 
     fsp.writeFile(
-      url.replace(`.${type}`, `${flag}.${type}`),
+      url.replace(`.${type}`, `${TRANSFER_FLAG}.${type}`),
       restStyle,
       'utf-8',
     )

src/transformCss.ts

@@ -14,7 +14,7 @@ export async function transformJsx(
     const ast = babelParse(code, {
       babelrc: false,
       comments: true,
-      plugins: [[vueJsxPlugin, {}]],
+      plugins: [[vueJsxPlugin]],
     })
 
     let container: any = null

src/transformJsx.ts

@@ -2,7 +2,7 @@ import { createGenerator } from '@unocss/core'
 import presetUno from '@unocss/preset-uno'
 
 export type CssType = 'less' | 'scss' | 'css' | 'styl'
-export const flag = '.__unocss_transfer__'
+export const TRANSFER_FLAG = '.__unocss_transfer__'
 
 export function isNot(s: string) {
   return /\[&:not\(/.test(s)
@@ -92,7 +92,8 @@ export function transformUnocssBack(code: string[]) {
 export function diffTemplateStyle(before: string, after: string) {
   const s1 = before.match(/<style scoped>.*<\/style>/s)!
   const s2 = after.match(/<style scoped>.*<\/style>/s)!
-
+  if (!s1 || !s2)
+    return false
   return s1[0] === s2[0]
 }
 

src/utils.ts

@@ -14,6 +14,7 @@ export default defineConfig({
     'fast-glob',
     'unocss',
     '@vue/compiler-sfc',
+    '@babel/core',
   ],
   dts: {
     resolve: true,