feat: use unjs modules and improve cli from main shadcn-ui source, custom ui dir (#324)

* feat: add devDeps, add nypm for installing deps

* feat: custom ui dir

* refactor: use consola instead of chalk

* test: ui alias

* refactor: import { z } from 'zod' instead of *, replace node:path with pathe

* chore: add components name to `configFile` option

* chore: update `c12` which fix json5 parse issue

and it also supports .config directory

* chore: update `https-proxy-agent`

* fix: await until dependencies are installed then run detypes process

* feat: add tailwind prefix

* test: tw-prefix snapshot

* chore: add prefix option to init

* test: apply prefix

* fix: tw-prefix parse wrongly

* chore: hide prefix temporarily

---------

Co-authored-by: zernonia <zernonia@gmail.com>

Author: sadeghbarati

apps/www/src/content/docs/components/data-table.md

@@ -4,7 +4,6 @@ description: Powerful table and datagrids built using TanStack Table.
 primitive: https://tanstack.com/table/v8/docs/guide/introduction
 ---
 
-
 <ComponentPreview name="DataTableDemo" />
 
 ## Introduction
@@ -56,7 +55,6 @@ npm install @tanstack/vue-table
 
 <ComponentPreview name="DataTableColumnPinningDemo" />
 
-
 ## Prerequisites
 
 We are going to build a table to show recent payments. Here's what our data looks like:
@@ -219,7 +217,6 @@ const table = useVueTable({
 
 </Callout>
 
-
 ### Render the table
 
 Finally, we'll render our table in our index component.
@@ -270,7 +267,6 @@ Let's format the amount cell to display the dollar amount. We'll also align the
 
 Update the `header` and `cell` definitions for amount as follows:
 
-
 ```ts:line-numbers title="components/payments/columns.ts" {5-17}
 import { h } from 'vue'
 
@@ -345,7 +341,6 @@ function copy(id: string) {
 
 Update our columns definition to add a new `actions` column. The `actions` cell returns a `<Dropdown />` component.
 
-
 ```ts:line-numbers showLineNumber{2,6-16}
 import { ColumnDef } from "@tanstack/vue-table"
 import DropdownAction from '@/components/DataTableDropDown.vue'

apps/www/src/public/schema.json

@@ -42,6 +42,9 @@
         },
         "components": {
           "type": "string"
+        },
+        "ui": {
+          "type": "string"
         }
       },
       "required": ["utils", "components"]

eslint.config.js

@@ -24,6 +24,7 @@ export default antfu(
       'no-tabs': 0,
       'import/first': 0,
       'node/prefer-global/process': 0,
+      'style/no-tabs': 0,
     },
   },
 )

packages/cli/package.json

@@ -32,7 +32,7 @@
     "dev": "tsup --watch",
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "clean": "rimraf dist && rimraf components",
+    "clean": "node ./scripts/rimraf.js",
     "lint": "eslint .",
     "lint:fix": "eslint --fix .",
     "start:dev": "COMPONENTS_REGISTRY_URL=http://localhost:3001 node dist/index.js",
@@ -45,41 +45,39 @@
     "test:ui": "vitest --ui"
   },
   "dependencies": {
-    "@antfu/ni": "^0.21.8",
-    "@babel/core": "^7.22.17",
-    "@babel/parser": "^7.22.16",
-    "@babel/plugin-transform-typescript": "^7.22.15",
+    "@babel/core": "^7.24.0",
+    "@babel/parser": "^7.24.0",
     "@vue/compiler-sfc": "^3.4",
-    "chalk": "5.3.0",
-    "commander": "^11.0.0",
-    "cosmiconfig": "^8.3.6",
+    "c12": "^1.9.0",
+    "commander": "^12.0.0",
+    "consola": "^3.2.3",
     "detype": "npm:detypes@^0.7.9",
-    "diff": "^5.1.0",
-    "execa": "^8.0.1",
-    "fs-extra": "^11.1.1",
-    "https-proxy-agent": "^7.0.2",
+    "diff": "^5.2.0",
+    "fs-extra": "^11.2.0",
+    "https-proxy-agent": "^7.0.4",
     "lodash.template": "^4.5.0",
-    "magic-string": "^0.30.3",
-    "node-fetch": "^3.3.2",
-    "ora": "^7.0.1",
+    "magic-string": "^0.30.8",
+    "nypm": "^0.3.8",
+    "ofetch": "^1.3.3",
+    "ora": "^8.0.1",
+    "pathe": "^1.1.2",
     "prompts": "^2.4.2",
-    "radix-vue": "^1.4.8",
-    "recast": "^0.23.4",
-    "rimraf": "^5.0.1",
-    "ts-morph": "^19.0.0",
+    "radix-vue": "^1.4.9",
+    "ts-morph": "^21.0.1",
     "tsconfig-paths": "^4.2.0",
-    "vite-tsconfig-paths": "^4.2.1",
-    "zod": "^3.22.2"
+    "zod": "^3.22.4"
   },
   "devDependencies": {
-    "@types/babel__core": "^7.20.1",
-    "@types/diff": "^5.0.3",
-    "@types/fs-extra": "^11.0.1",
-    "@types/lodash.template": "^4.5.1",
-    "@types/prompts": "^2.4.4",
+    "@types/babel__core": "^7.20.5",
+    "@types/diff": "^5.0.9",
+    "@types/fs-extra": "^11.0.4",
+    "@types/lodash.template": "^4.5.3",
+    "@types/node": "^20.11.24",
+    "@types/prompts": "^2.4.9",
     "@vitest/ui": "^0.34.4",
-    "tsup": "^7.2.0",
-    "type-fest": "^4.3.1",
-    "typescript": "^5.2.2"
+    "tsup": "^8.0.2",
+    "type-fest": "^4.10.3",
+    "typescript": "^5.3.3",
+    "vite-tsconfig-paths": "^4.3.1"
   }
 }

packages/cli/scripts/rimraf.js

@@ -0,0 +1,10 @@
+import fsp from 'node:fs/promises'
+
+function rmdir(dirs) {
+  dirs.forEach(async (dir) => {
+    await fsp.unlink(dir).catch(() => {})
+    await fsp.rm(dir, { recursive: true, force: true }).catch(() => {})
+  })
+}
+
+rmdir(['dist', 'components'])

packages/cli/src/commands/add.ts

@@ -1,17 +1,16 @@
 import { existsSync, promises as fs, rmSync } from 'node:fs'
-import path from 'node:path'
 import process from 'node:process'
-import chalk from 'chalk'
+import path from 'pathe'
+import { consola } from 'consola'
+import { colors } from 'consola/utils'
 import { Command } from 'commander'
-import { execa } from 'execa'
 import ora from 'ora'
 import prompts from 'prompts'
-import * as z from 'zod'
+import { z } from 'zod'
+import { addDependency, addDevDependency } from 'nypm'
 import { transform } from '@/src/utils/transformers'
 import { getConfig } from '@/src/utils/get-config'
-import { getPackageManager } from '@/src/utils/get-package-manager'
 import { handleError } from '@/src/utils/handle-error'
-import { logger } from '@/src/utils/logger'
 import {
   fetchTree,
   getItemTargetPath,
@@ -52,15 +51,15 @@ export const add = new Command()
       const cwd = path.resolve(options.cwd)
 
       if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`)
+        consola.error(`The path ${cwd} does not exist. Please try again.`)
         process.exit(1)
       }
 
       const config = await getConfig(cwd)
+
       if (!config) {
-        logger.warn(
-          `Configuration is missing. Please run ${chalk.green('init')} to create a components.json file.`,
-        )
+        consola.warn(`Configuration is missing. Please run ${colors.green('init')} to create a components.json file.`)
+
         process.exit(1)
       }
 
@@ -88,7 +87,7 @@ export const add = new Command()
       }
 
       if (!selectedComponents?.length) {
-        logger.warn('No components selected. Exiting.')
+        consola.warn('No components selected. Exiting.')
         process.exit(0)
       }
 
@@ -97,7 +96,7 @@ export const add = new Command()
       const baseColor = await getRegistryBaseColor(config.tailwind.baseColor)
 
       if (!payload.length) {
-        logger.warn('Selected components not found. Exiting.')
+        consola.warn('Selected components not found. Exiting.')
         process.exit(0)
       }
 
@@ -114,7 +113,6 @@ export const add = new Command()
       }
 
       const spinner = ora('Installing components...').start()
-      const skippedDeps = new Set<string>()
       for (const item of payload) {
         spinner.text = `Installing ${item.name}...`
         const targetDir = getItemTargetPath(
@@ -144,8 +142,8 @@ export const add = new Command()
             })
 
             if (!overwrite) {
-              logger.info(
-                `Skipped ${item.name}. To overwrite, run with the ${chalk.green(
+              consola.info(
+                `Skipped ${item.name}. To overwrite, run with the ${colors.green(
                   '--overwrite',
                 )} flag.`,
               )
@@ -159,6 +157,20 @@ export const add = new Command()
           }
         }
 
+        // Install dependencies.
+        await Promise.allSettled(
+          [
+            item.dependencies?.length && await addDependency(item.dependencies, {
+              cwd,
+              silent: true,
+            }),
+            item.devDependencies?.length && await addDevDependency(item.devDependencies, {
+              cwd,
+              silent: true,
+            }),
+          ],
+        )
+
         const componentDir = path.resolve(targetDir, item.name)
         if (!existsSync(componentDir))
           await fs.mkdir(componentDir, { recursive: true })
@@ -201,25 +213,6 @@ export const add = new Command()
 
           await fs.writeFile(filePath, content)
         }
-
-        // Install dependencies.
-        if (item.dependencies?.length) {
-          item.dependencies.forEach(dep =>
-            skippedDeps.add(dep),
-          )
-
-          const packageManager = await getPackageManager(cwd)
-          await execa(
-            packageManager,
-            [
-              packageManager === 'npm' ? 'install' : 'add',
-              ...item.dependencies,
-            ],
-            {
-              cwd,
-            },
-          )
-        }
       }
       spinner.succeed('Done.')
     }

packages/cli/src/commands/diff.ts

@@ -1,14 +1,14 @@
 import { existsSync, promises as fs } from 'node:fs'
-import path from 'node:path'
 import process from 'node:process'
-import chalk from 'chalk'
+import path from 'pathe'
+import { consola } from 'consola'
+import { colors } from 'consola/utils'
 import { Command } from 'commander'
 import { type Change, diffLines } from 'diff'
-import * as z from 'zod'
+import { z } from 'zod'
 import type { Config } from '@/src/utils/get-config'
 import { getConfig } from '@/src/utils/get-config'
 import { handleError } from '@/src/utils/handle-error'
-import { logger } from '@/src/utils/logger'
 import {
   fetchTree,
   getItemTargetPath,
@@ -45,14 +45,14 @@ export const diff = new Command()
       const cwd = path.resolve(options.cwd)
 
       if (!existsSync(cwd)) {
-        logger.error(`The path ${cwd} does not exist. Please try again.`)
+        consola.error(`The path ${cwd} does not exist. Please try again.`)
         process.exit(1)
       }
 
       const config = await getConfig(cwd)
       if (!config) {
-        logger.warn(
-          `Configuration is missing. Please run ${chalk.green(
+        consola.warn(
+          `Configuration is missing. Please run ${colors.green(
             'init',
           )} to create a components.json file.`,
         )
@@ -88,19 +88,20 @@ export const diff = new Command()
         }
 
         if (!componentsWithUpdates.length) {
-          logger.info('No updates found.')
+          consola.info('No updates found.')
           process.exit(0)
         }
 
-        logger.info('The following components have updates available:')
+        consola.info('The following components have updates available:')
         for (const component of componentsWithUpdates) {
-          logger.info(`- ${component.name}`)
+          consola.info(`- ${component.name}`)
           for (const change of component.changes)
-            logger.info(`  - ${change.filePath}`)
+            consola.info(`  - ${change.filePath}`)
         }
-        logger.break()
-        logger.info(
-          `Run ${chalk.green('diff <component>')} to see the changes.`,
+
+        consola.log('')
+        consola.info(
+          `Run ${colors.green('diff <component>')} to see the changes.`,
         )
         process.exit(0)
       }
@@ -111,23 +112,23 @@ export const diff = new Command()
       )
 
       if (!component) {
-        logger.error(
-          `The component ${chalk.green(options.component)} does not exist.`,
+        consola.error(
+          `The component ${colors.green(options.component)} does not exist.`,
         )
         process.exit(1)
       }
 
       const changes = await diffComponent(component, config)
 
       if (!changes.length) {
-        logger.info(`No updates found for ${options.component}.`)
+        consola.info(`No updates found for ${options.component}.`)
         process.exit(0)
       }
 
       for (const change of changes) {
-        logger.info(`- ${change.filePath}`)
+        consola.info(`- ${change.filePath}`)
         printDiff(change.patch)
-        logger.info('')
+        consola.log('')
       }
     }
     catch (error) {
@@ -184,10 +185,10 @@ function printDiff(diff: Change[]) {
   diff.forEach((part) => {
     if (part) {
       if (part.added)
-        return process.stdout.write(chalk.green(part.value))
+        return process.stdout.write(colors.green(part.value))
 
       if (part.removed)
-        return process.stdout.write(chalk.red(part.value))
+        return process.stdout.write(colors.red(part.value))
 
       return process.stdout.write(part.value)
     }