Merge remote-tracking branch 'origin/dev' into 58-feature-improve-installation-section-to-accommodate-other-frameworks

.github/workflows/test.yaml

@@ -0,0 +1,53 @@
+name: Test
+
+on:
+  push:
+    branches:
+      - dev
+    paths:
+      - 'packages/**'
+
+  pull_request:
+    branches:
+      - dev
+    paths:
+      - 'packages/**'
+
+jobs:
+  test:
+    needs: build
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v2
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2
+        with:
+          node-version: 16
+
+      - uses: pnpm/action-setup@v2
+        name: Install pnpm
+        with:
+          version: 8
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - uses: actions/cache@v3
+        name: Setup pnpm cache
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - name: Install dependencies
+        run: pnpm i --frozen-lockfile
+
+      - name: Test
+        run: pnpm test

.gitignore

@@ -7,6 +7,7 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+.nuxt
 .env
 node_modules
 .DS_Store

apps/www/src/content/docs/theming.md

@@ -17,7 +17,6 @@ To use utility classes for theming set `tailwind.cssVariables` to `false` in you
 ```json {8} title="components.json"
 {
   "style": "default",
-  "rsc": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",
@@ -43,7 +42,6 @@ To use CSS variables for theming set `tailwind.cssVariables` to `true` in your `
 ```json {8} title="components.json"
 {
   "style": "default",
-  "rsc": true,
   "tailwind": {
     "config": "tailwind.config.js",
     "css": "app/globals.css",

apps/www/src/public/registry/styles/new-york/command.json

@@ -22,7 +22,7 @@
     },
     {
       "name": "CommandGroup.vue",
-      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string\n}>()\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')\"\n  >\n    <ComboboxLabel class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
+      "content": "<script setup lang=\"ts\">\nimport type { ComboboxGroupProps } from 'radix-vue'\nimport { ComboboxGroup, ComboboxLabel } from 'radix-vue'\nimport { cn } from '@/lib/utils'\n\nconst props = defineProps<ComboboxGroupProps & {\n  heading?: string\n}>()\n</script>\n\n<template>\n  <ComboboxGroup\n    v-bind=\"props\"\n    :class=\"cn('overflow-hidden p-1 text-foreground', $attrs.class ?? '')\"\n  >\n    <ComboboxLabel v-if=\"heading\" class=\"px-2 py-1.5 text-xs font-medium text-muted-foreground\">\n      {{ heading }}\n    </ComboboxLabel>\n    <slot />\n  </ComboboxGroup>\n</template>\n"
     },
     {
       "name": "CommandInput.vue",

apps/www/src/public/schema.json

@@ -24,12 +24,6 @@
       },
       "required": ["config", "css", "baseColor", "cssVariables"]
     },  
-    "rsc": {
-      "type": "boolean"
-    },
-    "tsx": {
-      "type": "boolean"
-    },
     "aliases": {
       "type": "object",
       "properties": {
@@ -43,5 +37,5 @@
       "required": ["utils", "components"]
     }
   },
-  "required": ["style", "tailwind", "rsc", "aliases"]
+  "required": ["style", "tailwind", "aliases"]
 }

package.json

@@ -40,6 +40,11 @@
       "@commitlint/config-conventional"
     ]
   },
+  "pnpm": {
+    "patchedDependencies": {
+      "detype@0.6.3": "patches/detype@0.6.3.patch"
+    }
+  },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged",
     "commit-msg": "pnpm commitlint --edit ${1}"

packages/cli/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-vue",
   "type": "module",
-  "version": "0.1.3",
+  "version": "0.1.6",
   "description": "Add components to your apps.",
   "publishConfig": {
     "access": "public"
@@ -52,6 +52,7 @@
     "chalk": "5.3.0",
     "commander": "^11.0.0",
     "cosmiconfig": "^8.3.6",
+    "detype": "^0.6.3",
     "diff": "^5.1.0",
     "execa": "^8.0.1",
     "fs-extra": "^11.1.1",

packages/cli/src/commands/add.ts

@@ -7,7 +7,7 @@ import { execa } from 'execa'
 import ora from 'ora'
 import prompts from 'prompts'
 import * as z from 'zod'
-import { transformImport } from '../utils/transformers/transform-import'
+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'
@@ -129,15 +129,11 @@ export const add = new Command()
         if (existingComponent.length && !options.overwrite) {
           if (selectedComponents.includes(item.name)) {
             logger.warn(
-							`\nComponent ${
-								item.name
-							} already exists. Use ${chalk.green(
+              `Component ${item.name} already exists. Use ${chalk.green(
                 '--overwrite',
               )} to overwrite.`,
             )
-            spinner.stop()
-            process.exitCode = 1
-            return
+            process.exit(1)
           }
 
           continue
@@ -145,18 +141,26 @@ export const add = new Command()
 
         for (const file of item.files) {
           const componentDir = path.resolve(targetDir, item.name)
-          const filePath = path.resolve(
+          let filePath = path.resolve(
             targetDir,
             item.name,
             file.name,
           )
 
-          // Run transformers.
-          const content = transformImport(file.content, config)
+          if (!config.typescript)
+            filePath = filePath.replace(/\.ts$/, '.js')
 
           if (!existsSync(componentDir))
             await fs.mkdir(componentDir, { recursive: true })
 
+          // Run transformers.
+          const content = await transform({
+            filename: file.name,
+            raw: file.content,
+            config,
+            baseColor,
+          })
+
           await fs.writeFile(filePath, content)
         }
 

packages/cli/src/commands/init.ts

@@ -17,6 +17,7 @@ import {
 import { logger } from '../utils/logger'
 import { handleError } from '../utils/handle-error'
 import { getPackageManager } from '../utils/get-package-manager'
+import { transformByDetype } from '../utils/transformers/transform-sfc'
 import {
   type Config,
   DEFAULT_COMPONENTS,
@@ -36,11 +37,6 @@ const PROJECT_DEPENDENCIES = {
     'clsx',
     'tailwind-merge',
   ],
-  vue: [
-    'tailwindcss',
-    'postcss',
-    'autoprefixer',
-  ],
   nuxt: [
     '@nuxtjs/tailwindcss',
   ],
@@ -260,7 +256,7 @@ export async function runInit(cwd: string, config: Config) {
   // Write cn file.
   await fs.writeFile(
     `${config.resolvedPaths.utils}.${extension}`,
-    extension === 'ts' ? templates.UTILS : templates.UTILS_JS,
+    extension === 'ts' ? templates.UTILS : await transformByDetype(templates.UTILS, '.ts'),
     'utf8',
   )
 
@@ -270,12 +266,11 @@ export async function runInit(cwd: string, config: Config) {
   const dependenciesSpinner = ora('Installing dependencies...')?.start()
   const packageManager = await getPackageManager(cwd)
 
-  // TODO: add support for other icon libraries.
   const deps = PROJECT_DEPENDENCIES.base.concat(
-    config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : PROJECT_DEPENDENCIES.vue,
+    config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : [],
   ).concat(
     config.style === 'new-york' ? [] : ['lucide-vue-next'],
-  )
+  ).filter(Boolean)
 
   await execa(
     packageManager,

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

@@ -10,7 +10,7 @@ export const DEFAULT_STYLE = 'default'
 export const DEFAULT_COMPONENTS = '@/components'
 export const DEFAULT_UTILS = '@/lib/utils'
 export const DEFAULT_TAILWIND_CSS = 'src/assets/index.css'
-export const DEFAULT_TAILWIND_CSS_NUXT = 'assets/style/tailwind.css'
+export const DEFAULT_TAILWIND_CSS_NUXT = 'assets/css/tailwind.css'
 export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js'
 export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'
 
@@ -24,14 +24,14 @@ export const rawConfigSchema = z
   .object({
     $schema: z.string().optional(),
     style: z.string(),
-    typescript: z.boolean().default(false),
+    typescript: z.boolean().default(true),
     tailwind: z.object({
       config: z.string(),
       css: z.string(),
       baseColor: z.string(),
       cssVariables: z.boolean().default(true),
     }),
-    framework: z.string(),
+    framework: z.string().default('Vite'),
     aliases: z.object({
       components: z.string(),
       utils: z.string(),
@@ -64,35 +64,40 @@ export async function getConfig(cwd: string) {
 
 export async function resolveConfigPaths(cwd: string, config: RawConfig) {
   let tsConfig: ConfigLoaderResult | undefined
+  let tsConfigPath = path.resolve(
+    cwd,
+    config.framework === 'nuxt' ? '.nuxt/tsconfig.json' : './tsconfig.json',
+  )
+
   if (config.typescript) {
-    const TSCONFIG_PATH = config.framework === 'nuxt' ? '.nuxt/tsconfig.json' : './tsconfig.json'
-
     // Read tsconfig.json.
-    const tsconfigPath = path.resolve(cwd, TSCONFIG_PATH)
-    tsConfig = loadConfig(tsconfigPath)
-
+    tsConfig = loadConfig(tsConfigPath)
     // In new Vue project, tsconfig has references to tsconfig.app.json, which is causing the path not resolving correctly
     // If no paths were found, try to load tsconfig.app.json.
     if ('paths' in tsConfig && Object.keys(tsConfig.paths).length === 0) {
-      const FALLBACK_TSCONFIG_PATH = path.resolve(cwd, './tsconfig.app.json')
-      if (existsSync(FALLBACK_TSCONFIG_PATH))
-        tsConfig = loadConfig(FALLBACK_TSCONFIG_PATH)
+      tsConfigPath = path.resolve(cwd, './tsconfig.app.json')
+      if (existsSync(tsConfigPath))
+        tsConfig = loadConfig(tsConfigPath)
+    }
+  }
+  else {
+    tsConfigPath = path.resolve(cwd, './jsconfig.json')
+    tsConfig = loadConfig(tsConfigPath)
   }
 
   if (tsConfig.resultType === 'failed') {
     throw new Error(
-        `Failed to load tsconfig.json. ${tsConfig.message ?? ''}`.trim(),
+        `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),
     )
   }
-  }
 
   return configSchema.parse({
     ...config,
     resolvedPaths: {
       tailwindConfig: path.resolve(cwd, config.tailwind.config),
       tailwindCss: path.resolve(cwd, config.tailwind.css),
-      utils: tsConfig ? await resolveImport(config.aliases.utils, tsConfig) : config.aliases.utils,
-      components: tsConfig ? await resolveImport(config.aliases.components, tsConfig) : config.aliases.components,
+      utils: resolveImport(config.aliases.utils, tsConfig),
+      components: resolveImport(config.aliases.components, tsConfig),
     },
   })
 }

packages/cli/src/utils/registry/index.ts

@@ -1,4 +1,5 @@
 import path from 'node:path'
+import process from 'node:process'
 import { HttpsProxyAgent } from 'https-proxy-agent'
 import fetch from 'node-fetch'
 import type * as z from 'zod'

packages/cli/src/utils/templates.ts

@@ -15,7 +15,7 @@ export function useEmitAsProps<Name extends string>(
   const result: Record<string, any> = {}
   if (!events?.length) {
     console.warn(
-      'No emitted event found. Please check component: \${vm?.type.__name}',
+      \`No emitted event found. Please check component: \${vm?.type.__name}\`,
     )
   }
 
@@ -25,31 +25,6 @@ export function useEmitAsProps<Name extends string>(
   return result
 }`
 
-export const UTILS_JS = `import { clsx } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs) {
-  return twMerge(clsx(inputs))
-}
-
-export function useEmitAsProps(emit) {
-  const vm = getCurrentInstance()
-
-  const events = vm?.type.emits
-  const result = {}
-  if (!events?.length) {
-    console.warn(
-      'No emitted event found. Please check component: \${vm?.type.__name}',
-    )
-  }
-
-  events?.forEach((ev) => {
-    result[toHandlerKey(camelize(ev))] = (...arg) => emit(ev, ...arg)
-  })
-  return result
-}
-`
-
 export const TAILWIND_CONFIG = `/** @type {import('tailwindcss').Config} */
 module.exports = {
   darkMode: ["class"],

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

@@ -6,6 +6,8 @@ import type * as z from 'zod'
 import type { Config } from '@/src/utils/get-config'
 import type { registryBaseColorSchema } from '@/src/utils/registry/schema'
 import { transformCssVars } from '@/src/utils/transformers/transform-css-vars'
+import { transformImport } from '@/src/utils/transformers/transform-import'
+import { transformSFC } from '@/src/utils/transformers/transform-sfc'
 
 export interface TransformOpts {
   filename: string
@@ -22,6 +24,7 @@ export type Transformer<Output = SourceFile> = (
 
 const transformers: Transformer[] = [
   transformCssVars,
+  transformImport,
 ]
 
 const project = new Project({
@@ -36,14 +39,14 @@ async function createTempSourceFile(filename: string) {
 export async function transform(opts: TransformOpts) {
   const tempFile = await createTempSourceFile(opts.filename)
   const sourceFile = project.createSourceFile(tempFile, opts.raw, {
-    scriptKind: ScriptKind.TSX,
+    scriptKind: ScriptKind.Unknown,
   })
 
   for (const transformer of transformers)
     transformer({ sourceFile, ...opts })
 
-  // return await transformJsx({
-  //   sourceFile,
-  //   ...opts,
-  // })
+  return await transformSFC({
+    sourceFile,
+    ...opts,
+  })
 }

packages/cli/src/utils/transformers/transform-css-vars.ts

@@ -14,7 +14,12 @@ export const transformCssVars: Transformer = async ({
 
   sourceFile.getDescendantsOfKind(SyntaxKind.StringLiteral).forEach((node) => {
     const value = node.getText()
-    if (value) {
+
+    if (value.includes('cn(')) {
+      const splitted = value.split('\'').map(i => applyColorMapping(i, baseColor.inlineColors))
+      node.replaceWithText(`${splitted.join('\'')}`)
+    }
+    else if (value) {
       const valueWithColorMapping = applyColorMapping(
         value.replace(/"/g, ''),
         baseColor.inlineColors,

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

@@ -1,49 +1,32 @@
-import MagicString from 'magic-string'
-import type { z } from 'zod'
-import type { Config } from '../get-config'
-import type { registryBaseColorSchema } from '../registry/schema'
+import type { Transformer } from '@/src/utils/transformers'
 
-export interface TransformOpts {
-  filename: string
-  raw: string
-  config: Config
-  baseColor?: z.infer<typeof registryBaseColorSchema>
+export const transformImport: Transformer = async ({ sourceFile, config }) => {
+  const importDeclarations = sourceFile.getImportDeclarations()
+
+  for (const importDeclaration of importDeclarations) {
+    const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
+
+    // Replace @/lib/registry/[style] with the components alias.
+    if (moduleSpecifier.startsWith('@/lib/registry/')) {
+      importDeclaration.setModuleSpecifier(
+        moduleSpecifier.replace(
+          /^@\/lib\/registry\/[^/]+/,
+          config.aliases.components,
+        ),
+      )
+    }
+
+    // Replace `import { cn } from "@/lib/utils"`
+    if (moduleSpecifier === '@/lib/utils') {
+      const namedImports = importDeclaration.getNamedImports()
+      const cnImport = namedImports.find(i => i.getName() === 'cn')
+      if (cnImport) {
+        importDeclaration.setModuleSpecifier(
+          moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils),
+        )
+      }
+    }
+  }
+
+  return sourceFile
 }
-
-export function transformImport(content: string, config: Config) {
-  const s = new MagicString(content)
-  s.replaceAll(/@\/registry\/[^/]+/g, config.aliases.components)
-  s.replaceAll(/@\/lib\/utils/g, config.aliases.utils)
-  return s.toString()
-}
-
-// export const transformImport: Transformer = async ({ sourceFile, config }) => {
-//   const importDeclarations = sourceFile.getImportDeclarations()
-
-//   for (const importDeclaration of importDeclarations) {
-//     const moduleSpecifier = importDeclaration.getModuleSpecifierValue()
-
-//     // Replace @/registry/[style] with the components alias.
-//     if (moduleSpecifier.startsWith('@/registry/')) {
-//       importDeclaration.setModuleSpecifier(
-//         moduleSpecifier.replace(
-//           /^@\/registry\/[^/]+/,
-//           config.aliases.components,
-//         ),
-//       )
-//     }
-
-//     // Replace `import { cn } from "@/lib/utils"`
-//     if (moduleSpecifier === '@/lib/utils') {
-//       const namedImports = importDeclaration.getNamedImports()
-//       const cnImport = namedImports.find(i => i.getName() === 'cn')
-//       if (cnImport) {
-//         importDeclaration.setModuleSpecifier(
-//           moduleSpecifier.replace(/^@\/lib\/utils/, config.aliases.utils),
-//         )
-//       }
-//     }
-//   }
-
-//   return sourceFile
-// }

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

@@ -0,0 +1,20 @@
+import { createRequire } from 'node:module'
+import type { Transformer } from '@/src/utils/transformers'
+
+// required cause Error: Dynamic require of "@babel/core" is not supported
+const require = createRequire(import.meta.url)
+const { transform } = require('detype')
+
+export async function transformByDetype(content: string, filename: string) {
+  return await transform(content, filename, {
+    removeTsComments: true,
+  })
+}
+
+export const transformSFC: Transformer<string> = async ({ sourceFile, config }) => {
+  const output = sourceFile?.getFullText()
+  if (config?.typescript)
+    return output
+
+  return await transformByDetype(output, 'app.vue')
+}

packages/cli/test/commands/init.test.ts

@@ -63,7 +63,8 @@ test('init config-full', async () => {
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
     expect.stringMatching(/src\/lib\/utils.ts$/),
-    expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
+    // eslint-disable-next-line @typescript-eslint/quotes
+    expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
     'utf8',
   )
   expect(execa).toHaveBeenCalledWith(
@@ -74,7 +75,6 @@ test('init config-full', async () => {
       'class-variance-authority',
       'clsx',
       'tailwind-merge',
-      '@radix-ui/react-icons',
     ],
     {
       cwd: targetDir,
@@ -133,7 +133,8 @@ test('init config-partial', async () => {
   expect(mockWriteFile).toHaveBeenNthCalledWith(
     3,
     expect.stringMatching(/utils.ts$/),
-    expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
+    // eslint-disable-next-line @typescript-eslint/quotes
+    expect.stringContaining("import { type ClassValue, clsx } from 'clsx'"),
     'utf8',
   )
   expect(execa).toHaveBeenCalledWith(
@@ -144,7 +145,7 @@ test('init config-partial', async () => {
       'class-variance-authority',
       'clsx',
       'tailwind-merge',
-      'lucide-react',
+      'lucide-vue-next',
     ],
     {
       cwd: targetDir,

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

@@ -1,12 +1,11 @@
 {
-  "style": "default",
+  "style": "new-york",
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "src/app/globals.css",
     "baseColor": "zinc",
     "cssVariables": true
   },
-  "rsc": false,
   "aliases": {
     "utils": "~/lib/utils",
     "components": "~/components"

packages/cli/test/fixtures/config-js/components.json

@@ -1,6 +1,5 @@
 {
   "style": "default",
-  "tsx": false,
   "tailwind": {
     "config": "./tailwind.config.js",
     "css": "./src/assets/css/tailwind.css",
@@ -10,5 +9,6 @@
   "aliases": {
     "utils": "@/lib/utils",
     "components": "@/components"
-  }
+  },
+  "typescript": false
 }

packages/cli/test/fixtures/nuxt/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

packages/cli/test/fixtures/nuxt/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

packages/cli/test/fixtures/nuxt/README.md

@@ -0,0 +1,75 @@
+# Nuxt 3 Minimal Starter
+
+Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install the dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm run dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm run build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm run preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

packages/cli/test/fixtures/nuxt/app.vue

@@ -0,0 +1,28 @@
+<template>
+  <div>
+    <UiButton :variant="'secondary'" :size="'lg'">
+      Save
+    </UiButton>
+
+    <UiAlertDialog>
+      <UiAlertDialogTrigger as-child>
+        <UiButton variant="outline">
+          Show Dialog
+        </UiButton>
+      </UiAlertDialogTrigger>
+      <UiAlertDialogContent>
+        <UiAlertDialogHeader>
+          <UiAlertDialogTitle>Are you absolutely sure?</UiAlertDialogTitle>
+          <UiAlertDialogDescription>
+            This action cannot be undone. This will permanently delete your
+            account and remove your data from our servers.
+          </UiAlertDialogDescription>
+        </UiAlertDialogHeader>
+        <UiAlertDialogFooter>
+          <UiAlertDialogCancel>Cancel</UiAlertDialogCancel>
+          <UiAlertDialogAction>Continue</UiAlertDialogAction>
+        </UiAlertDialogFooter>
+      </UiAlertDialogContent>
+    </UiAlertDialog>
+  </div>
+</template>

packages/cli/test/fixtures/nuxt/assets/css/tailwind.css

@@ -0,0 +1,78 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+ 
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+ 
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+ 
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+ 
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+ 
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+ 
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 222.2 84% 4.9%;
+ 
+    --radius: 0.5rem;
+  }
+ 
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+ 
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+ 
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+ 
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+ 
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+ 
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+ 
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+ 
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+ 
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

packages/cli/test/fixtures/nuxt/components.json

@@ -0,0 +1,15 @@
+{
+  "style": "default",
+  "typescript": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils"
+  }
+}

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialog.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot } from 'radix-vue'
+import { useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<AlertDialogProps>()
+
+const emits = defineEmits<AlertDialogEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="{ ...props, ...emitsAsProps }">
+    <slot />
+  </AlertDialogRoot>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogAction.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogActionProps>()
+</script>
+
+<template>
+  <AlertDialogAction v-bind="props" :class="cn(buttonVariants(), $attrs.class ?? '')">
+    <slot />
+  </AlertDialogAction>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
+
+const props = defineProps<AlertDialogCancelProps>()
+</script>
+
+<template>
+  <AlertDialogCancel v-bind="props" :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', $attrs.class ?? '')">
+    <slot />
+  </AlertDialogCancel>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+} from 'radix-vue'
+import { cn, useEmitAsProps } from '@/lib/utils'
+
+const props = defineProps<AlertDialogContentProps & { class?: string }>()
+
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const emitsAsProps = useEmitAsProps(emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-background/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="{ ...props, ...emitsAsProps }"
+      :class="
+        cn(
+          'fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogDescription
+    :class="cn('text-muted-foreground text-sm', props.class)"
+    :as-child="props.asChild"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col space-y-2 sm:space-y-0 mt-3.5 sm:flex-row sm:justify-end sm:space-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogHeader.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col space-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AlertDialogTitleProps & { class?: string }>()
+</script>
+
+<template>
+  <AlertDialogTitle
+    :as-child="props.asChild"
+    :class="cn('text-lg text-foreground font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/alert-dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'

packages/cli/test/fixtures/nuxt/components/ui/button/Button.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+
+interface Props {
+  variant?: NonNullable<Parameters<typeof buttonVariants>[0]>['variant']
+  size?: NonNullable<Parameters<typeof buttonVariants>[0]>['size']
+  as?: string
+}
+
+withDefaults(defineProps<Props>(), {
+  as: 'button',
+})
+</script>
+
+<template>
+  <component
+    :is="as"
+    :class="cn(buttonVariants({ variant, size }), $attrs.class ?? '')"
+  >
+    <slot />
+  </component>
+</template>

packages/cli/test/fixtures/nuxt/components/ui/button/index.ts

@@ -0,0 +1,32 @@
+import { cva } from 'class-variance-authority'
+
+export { default as Button } from './Button.vue'
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+)

packages/cli/test/fixtures/nuxt/lib/utils.ts

@@ -0,0 +1,26 @@
+import { type ClassValue, clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
+import { camelize, getCurrentInstance, toHandlerKey } from 'vue'
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}
+
+export function useEmitAsProps<Name extends string>(
+  emit: (name: Name, ...args: any[]) => void,
+) {
+  const vm = getCurrentInstance()
+
+  const events = vm?.type.emits as Name[]
+  const result: Record<string, any> = {}
+  if (!events?.length) {
+    console.warn(
+      `No emitted event found. Please check component: ${vm?.type.__name}`,
+    )
+  }
+
+  events?.forEach((ev) => {
+    result[toHandlerKey(camelize(ev))] = (...arg: any) => emit(ev, ...arg)
+  })
+  return result
+}

packages/cli/test/fixtures/nuxt/nuxt.config.ts

@@ -0,0 +1,12 @@
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  devtools: { enabled: true },
+  modules: ['@nuxtjs/tailwindcss'],
+  components: [
+    {
+      path: '~/components/ui',
+      extensions: ['.vue'],
+      prefix: 'Ui',
+    },
+  ],
+})

packages/cli/test/fixtures/nuxt/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "test-cli-nuxt",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "build": "nuxt build",
+    "dev": "nuxt dev",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare"
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.0.0",
+    "lucide-vue-next": "^0.276.0",
+    "radix-vue": "^0.2.2",
+    "tailwind-merge": "^1.14.0",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "latest",
+    "@nuxtjs/tailwindcss": "^6.8.0",
+    "nuxt": "^3.7.3"
+  }
+}

packages/cli/test/fixtures/nuxt/tailwind.config.js

@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  darkMode: ['class'],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: 0 },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+}

packages/cli/test/fixtures/nuxt/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  // https://nuxt.com/docs/guide/concepts/typescript
+  "extends": "./.nuxt/tsconfig.json"
+}

packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap

@@ -1,25 +1,22 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`transform css vars 1`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <div class=\\"bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground\\">foo</div>
-}\\"
-    "
+"<script setup lang=\\"ts\\"></script>
+<template>
+<div class=\\"bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground\\">foo</div>
+</template>\\""
 `;
 
 exports[`transform css vars 2`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <div class=\\"bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50\\">foo</div>
-}\\"\\"
-    "
+"<script setup lang=\\"ts\\"></script>
+<template>
+<div class=\\"bg-white hover:bg-stone-100 text-stone-50 sm:focus:text-stone-900 dark:bg-stone-950 dark:hover:bg-stone-800 dark:text-stone-900 dark:sm:focus:text-stone-50\\">foo</div>
+</template>\\""
 `;
 
 exports[`transform css vars 3`] = `
-"import * as React from \\"react\\"
-export function Foo() {
-	return <div class={cn(\\"bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800\\", true && \\"text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50\\")}>foo</div>
-}\\"\\"
-    "
+"<script setup lang=\\"ts\\"></script>
+<template>
+<div :class=\\"cn( 'bg-white hover:bg-stone-100 dark:bg-stone-950 dark:hover:bg-stone-800', true &&  'text-stone-50 sm:focus:text-stone-900 dark:text-stone-900 dark:sm:focus:text-stone-50')\\" >foo</div>
+</template>\\""
 `;

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

@@ -1,8 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`transform import 1`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
+"import { Foo } from \\"bar\\"
     import { Button } from \\"@/components/ui/button\\"
     import { Label} from \\"ui/label\\"
     import { Box } from \\"@/components/box\\"
@@ -12,8 +11,7 @@ import { Foo } from \\"bar\\"
 `;
 
 exports[`transform import 2`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
+"import { Foo } from \\"bar\\"
       import { Button } from \\"~/src/components/ui/button\\"
       import { Label} from \\"ui/label\\"
       import { Box } from \\"~/src/components/box\\"
@@ -24,8 +22,7 @@ import { Foo } from \\"bar\\"
 `;
 
 exports[`transform import 3`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
+"import { Foo } from \\"bar\\"
       import { Button } from \\"~/src/components/ui/button\\"
       import { Label} from \\"ui/label\\"
       import { Box } from \\"~/src/components/box\\"

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

@@ -1,31 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`transform rsc 1`] = `
-"import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 2`] = `
-"\\"use client\\"
-
-      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 3`] = `
-"      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-    "
-`;
-
-exports[`transform rsc 4`] = `
-"\\"use foo\\"
-
-      import * as React from \\"react\\"
-import { Foo } from \\"bar\\"
-
-\\"use client\\"
-    "
-`;

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

@@ -0,0 +1,14 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`transformSFC > basic 1`] = `
+"<script setup>
+const array = [1, 2, 3];
+</script>
+
+<template>
+  <div v-bind=\\"{ array }\\">template</div>
+</template>
+
+<style scoped></style>
+"
+`;

packages/cli/test/utils/apply-color-mapping.test.ts

@@ -2,7 +2,7 @@ import { describe, expect, test } from 'vitest'
 
 import {
   applyColorMapping,
-  splitclass,
+  splitClassName,
 } from '../../src/utils/transformers/transform-css-vars'
 import baseColor from '../fixtures/colors/slate.json'
 
@@ -44,8 +44,8 @@ describe('split class', () => {
       input: 'sm:focus:text-accent-foreground/30',
       output: ['sm:focus', 'text-accent-foreground', '30'],
     },
-  ])('splitclass($input) -> $output', ({ input, output }) => {
-    expect(splitclass(input)).toStrictEqual(output)
+  ])('splitClassName($input) -> $output', ({ input, output }) => {
+    expect(splitClassName(input)).toStrictEqual(output)
   })
 })
 

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

@@ -12,18 +12,18 @@ test('get raw config', async () => {
     await getRawConfig(path.resolve(__dirname, '../fixtures/config-partial')),
   ).toEqual({
     style: 'default',
+    framework: 'Vite',
     tailwind: {
       config: './tailwind.config.ts',
       css: './src/assets/css/tailwind.css',
       baseColor: 'neutral',
       cssVariables: false,
     },
-    rsc: false,
-    tsx: true,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
+    typescript: true,
   })
 
   expect(
@@ -50,12 +50,11 @@ test('get config', async () => {
       baseColor: 'neutral',
       cssVariables: false,
     },
-    rsc: false,
-    tsx: true,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
+    framework: 'Vite',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -78,14 +77,13 @@ test('get config', async () => {
         './lib/utils',
       ),
     },
+    typescript: true,
   })
 
   expect(
     await getConfig(path.resolve(__dirname, '../fixtures/config-full')),
   ).toEqual({
     style: 'new-york',
-    rsc: false,
-    tsx: true,
     tailwind: {
       config: 'tailwind.config.ts',
       baseColor: 'zinc',
@@ -96,6 +94,7 @@ test('get config', async () => {
       components: '~/components',
       utils: '~/lib/utils',
     },
+    framework: 'Vite',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
@@ -118,10 +117,11 @@ test('get config', async () => {
         './src/lib/utils',
       ),
     },
+    typescript: true,
   })
 
   expect(
-    await getConfig(path.resolve(__dirname, '../fixtures/config-jsx')),
+    await getConfig(path.resolve(__dirname, '../fixtures/config-js')),
   ).toEqual({
     style: 'default',
     tailwind: {
@@ -130,29 +130,29 @@ test('get config', async () => {
       baseColor: 'neutral',
       cssVariables: false,
     },
-    rsc: false,
-    tsx: false,
+    typescript: false,
     aliases: {
       components: '@/components',
       utils: '@/lib/utils',
     },
+    framework: 'Vite',
     resolvedPaths: {
       tailwindConfig: path.resolve(
         __dirname,
-        '../fixtures/config-jsx',
+        '../fixtures/config-js',
         'tailwind.config.js',
       ),
       tailwindCss: path.resolve(
         __dirname,
-        '../fixtures/config-jsx',
+        '../fixtures/config-js',
         './src/assets/css/tailwind.css',
       ),
       components: path.resolve(
         __dirname,
-        '../fixtures/config-jsx',
+        '../fixtures/config-js',
         './components',
       ),
-      utils: path.resolve(__dirname, '../fixtures/config-jsx', './lib/utils'),
+      utils: path.resolve(__dirname, '../fixtures/config-js', './lib/utils'),
     },
   })
 })

packages/cli/test/utils/registry.test.ts

@@ -6,36 +6,60 @@ test('resolve tree', async () => {
   const index = [
     {
       name: 'button',
-      dependencies: ['@radix-ui/react-slot'],
+      dependencies: ['radix-vue'],
       type: 'components:ui',
-      files: ['button.tsx'],
+      files: [
+        'button/Button.vue',
+        'button/index.ts',
+      ],
     },
     {
       name: 'dialog',
-      dependencies: ['@radix-ui/react-dialog'],
+      dependencies: ['radix-vue'],
       registryDependencies: ['button'],
       type: 'components:ui',
-      files: ['dialog.tsx'],
+      files: ['dialog/Dialog.vue',
+        'dialog/DialogContent.vue',
+        'dialog/DialogDescription.vue',
+        'dialog/DialogFooter.vue',
+        'dialog/DialogHeader.vue',
+        'dialog/DialogTitle.vue',
+        'dialog/DialogTrigger.vue',
+        'dialog/index.ts',
+      ],
     },
     {
       name: 'input',
       registryDependencies: ['button'],
       type: 'components:ui',
-      files: ['input.tsx'],
+      files: [
+        'input/Input.vue',
+        'input/index.ts',
+      ],
     },
     {
       name: 'alert-dialog',
-      dependencies: ['@radix-ui/react-alert-dialog'],
+      dependencies: ['radix-vue'],
       registryDependencies: ['button', 'dialog'],
       type: 'components:ui',
-      files: ['alert-dialog.tsx'],
-    },
-    {
-      name: 'example-card',
-      type: 'components:component',
-      files: ['example-card.tsx'],
-      registryDependencies: ['button', 'dialog', 'input'],
+      files: ['alert-dialog/AlertDialog.vue',
+        'alert-dialog/AlertDialogAction.vue',
+        'alert-dialog/AlertDialogCancel.vue',
+        'alert-dialog/AlertDialogContent.vue',
+        'alert-dialog/AlertDialogDescription.vue',
+        'alert-dialog/AlertDialogFooter.vue',
+        'alert-dialog/AlertDialogHeader.vue',
+        'alert-dialog/AlertDialogTitle.vue',
+        'alert-dialog/AlertDialogTrigger.vue',
+        'alert-dialog/index.ts',
+      ],
     },
+    // {
+    //   name: 'example-card',
+    //   type: 'components:component',
+    //   files: ['example-card.tsx'],
+    //   registryDependencies: ['button', 'dialog', 'input'],
+    // },
   ]
 
   expect(
@@ -52,11 +76,11 @@ test('resolve tree', async () => {
       .sort(),
   ).toEqual(['alert-dialog', 'button', 'dialog'])
 
-  expect(
-    (await resolveTree(index, ['example-card']))
-      .map(entry => entry.name)
-      .sort(),
-  ).toEqual(['button', 'dialog', 'example-card', 'input'])
+  // expect(
+  //   (await resolveTree(index, ['example-card']))
+  //     .map(entry => entry.name)
+  //     .sort(),
+  // ).toEqual(['button', 'dialog', 'example-card', 'input'])
 
   expect(
     (await resolveTree(index, ['foo'])).map(entry => entry.name).sort(),

packages/cli/test/utils/resolve-import.test.ts

@@ -6,7 +6,7 @@ import { resolveImport } from '../../src/utils/resolve-import'
 
 test('resolve import', async () => {
   expect(
-    await resolveImport('@/foo/bar', {
+    resolveImport('@/foo/bar', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         '@/*': ['./src/*'],
@@ -17,7 +17,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/foo/bar')
 
   expect(
-    await resolveImport('~/components/foo/bar/baz', {
+    resolveImport('~/components/foo/bar/baz', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         '@/*': ['./src/*'],
@@ -28,7 +28,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/components/foo/bar/baz')
 
   expect(
-    await resolveImport('components/foo/bar', {
+    resolveImport('components/foo/bar', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         'components/*': ['./src/app/components/*'],
@@ -39,7 +39,7 @@ test('resolve import', async () => {
   ).toEqual('/Users/shadcn/Projects/foobar/src/app/components/foo/bar')
 
   expect(
-    await resolveImport('lib/utils', {
+    resolveImport('lib/utils', {
       absoluteBaseUrl: '/Users/shadcn/Projects/foobar',
       paths: {
         'components/*': ['./src/app/components/*'],
@@ -52,30 +52,30 @@ test('resolve import', async () => {
 
 test('resolve import with base url', async () => {
   const cwd = path.resolve(__dirname, '../fixtures/with-base-url')
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
+  const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult
 
-  expect(await resolveImport('@/components/ui', config)).toEqual(
+  expect(resolveImport('@/components/ui', config)).toEqual(
     path.resolve(cwd, 'components/ui'),
   )
-  expect(await resolveImport('@/lib/utils', config)).toEqual(
+  expect(resolveImport('@/lib/utils', config)).toEqual(
     path.resolve(cwd, 'lib/utils'),
   )
-  expect(await resolveImport('foo/bar', config)).toEqual(
+  expect(resolveImport('foo/bar', config)).toEqual(
     path.resolve(cwd, 'foo/bar'),
   )
 })
 
 test('resolve import without base url', async () => {
   const cwd = path.resolve(__dirname, '../fixtures/without-base-url')
-  const config = (await loadConfig(cwd)) as ConfigLoaderSuccessResult
+  const config = (loadConfig(cwd)) as ConfigLoaderSuccessResult
 
-  expect(await resolveImport('~/components/ui', config)).toEqual(
+  expect(resolveImport('~/components/ui', config)).toEqual(
     path.resolve(cwd, 'components/ui'),
   )
-  expect(await resolveImport('~/lib/utils', config)).toEqual(
+  expect(resolveImport('~/lib/utils', config)).toEqual(
     path.resolve(cwd, 'lib/utils'),
   )
-  expect(await resolveImport('foo/bar', config)).toEqual(
+  expect(resolveImport('foo/bar', config)).toEqual(
     path.resolve(cwd, 'foo/bar'),
   )
 })

packages/cli/test/utils/transform-css-vars.test.ts

@@ -1,75 +1,69 @@
-// import { expect, test } from 'vitest'
+import { expect, test } from 'vitest'
 
-// import { transform } from '../../src/utils/transformers'
-// import stone from '../fixtures/colors/stone.json'
+import { transform } from '../../src/utils/transformers'
+import stone from '../fixtures/colors/stone.json'
 
-// test('transform css vars', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: true,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
+test('transform css vars', async () => {
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: true,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: false,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div class="bg-background hover:bg-muted text-primary-foreground sm:focus:text-accent-foreground">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: false,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// export function Foo() {
-// 	return <div class={cn("bg-background hover:bg-muted", true && "text-primary-foreground sm:focus:text-accent-foreground")}>foo</div>
-// }"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'stone',
-//           cssVariables: false,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//       baseColor: stone,
-//     }),
-//   ).toMatchSnapshot()
-// })
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `<script setup lang="ts"></script>
+<template>
+<div :class="cn('bg-background hover:bg-muted', true && 'text-primary-foreground sm:focus:text-accent-foreground')">foo</div>
+</template>"`,
+      config: {
+        tailwind: {
+          baseColor: 'stone',
+          cssVariables: false,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+      baseColor: stone,
+    }),
+  ).toMatchSnapshot()
+})

packages/cli/test/utils/transform-import.test.ts

@@ -1,74 +1,67 @@
-// import { expect, test } from 'vitest'
+import { expect, test } from 'vitest'
+import { transform } from '../../src/utils/transformers'
 
-// import { transform } from '../../src/utils/transformers'
+test('transform import', async () => {
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+    import { Button } from "@/lib/registry/new-york/ui/button"
+    import { Label} from "ui/label"
+    import { Box } from "@/lib/registry/new-york/box"
 
-// test('transform import', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
+    import { cn } from "@/lib/utils"
+    `,
+      config: {
+        tailwind: {
+          baseColor: 'neutral',
+          cssVariables: true,
+        },
+        aliases: {
+          components: '@/components',
+          utils: '@/lib/utils',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
 
-//     import { cn } from "@/lib/utils"
-//     `,
-//       config: {
-//         tsx: true,
-//         tailwind: {
-//           baseColor: 'neutral',
-//           cssVariables: true,
-//         },
-//         aliases: {
-//           components: '@/components',
-//           utils: '@/lib/utils',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+      import { Button } from "@/lib/registry/new-york/ui/button"
+      import { Label} from "ui/label"
+      import { Box } from "@/lib/registry/new-york/box"
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
+      import { cn, foo, bar } from "@/lib/utils"
+      import { bar } from "@/lib/utils/bar"
+      `,
+      config: {
+        aliases: {
+          components: '~/src/components',
+          utils: '~/lib',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
 
-//     import { cn, foo, bar } from "@/lib/utils"
-//     import { bar } from "@/lib/utils/bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         aliases: {
-//           components: '~/src/components',
-//           utils: '~/lib',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
+  expect(
+    await transform({
+      filename: 'app.vue',
+      raw: `import { Foo } from "bar"
+      import { Button } from "@/lib/registry/new-york/ui/button"
+      import { Label} from "ui/label"
+      import { Box } from "@/lib/registry/new-york/box"
 
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     import { Button } from "@/registry/new-york/ui/button"
-//     import { Label} from "ui/label"
-//     import { Box } from "@/registry/new-york/box"
-
-//     import { cn } from "@/lib/utils"
-//     import { bar } from "@/lib/utils/bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         aliases: {
-//           components: '~/src/components',
-//           utils: '~/src/utils',
-//         },
-//       },
-//     }),
-//   ).toMatchSnapshot()
-// })
+    import { cn } from "@/lib/utils"
+    import { bar } from "@/lib/utils/bar"
+    `,
+      config: {
+        aliases: {
+          components: '~/src/components',
+          utils: '~/src/utils',
+        },
+      },
+    }),
+  ).toMatchSnapshot()
+})

packages/cli/test/utils/transform-rsc.test.ts

@@ -1,65 +0,0 @@
-// import { expect, test } from 'vitest'
-
-// import { transform } from '../../src/utils/transformers'
-
-// test('transform rsc', async () => {
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: true,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use client"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: true,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use client"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: false,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-
-//   expect(
-//     await transform({
-//       filename: 'test.ts',
-//       raw: `"use foo"
-
-//       import * as React from "react"
-// import { Foo } from "bar"
-
-// "use client"
-//     `,
-//       config: {
-//         tsx: true,
-//         rsc: false,
-//       },
-//     }),
-//   ).toMatchSnapshot()
-// })

packages/cli/test/utils/transform-sfc.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, test } from 'vitest'
+import { transform } from '../../src/utils/transformers'
+
+describe('transformSFC', () => {
+  test('basic', async () => {
+    const result = await transform({
+      filename: 'app.vue',
+      raw: `<script lang="ts" setup>
+      const array: (number | string)[] = [1, 2, 3]
+      </script>
+      
+      <template>
+        <div v-bind="{ array }">
+          template
+        </div>
+      </template>
+      
+      <style scoped>
+      </style>
+      `,
+      config: {},
+    })
+    expect(result).toMatchSnapshot()
+  })
+})

packages/cli/tsconfig.json

@@ -4,6 +4,7 @@
   "compilerOptions": {
     "isolatedModules": false,
     "baseUrl": ".",
+    "module": "ES2020",
     "paths": {
       "@/*": ["./*"]
     }

patches/detype@0.6.3.patch

@@ -0,0 +1,16 @@
+diff --git a/dist/index.js b/dist/index.js
+index 8b8e0d078e27474da1cf58ce3fef1d7acefb1cd4..314b23766204dcc6d2873e8ea654dcc3040ba0a5 100644
+--- a/dist/index.js
++++ b/dist/index.js
+@@ -146,9 +146,9 @@ async function removeTypesFromVueSfcScript(code, fileName, script, templateAst,
+     (0, import_template_ast_types.traverse)(templateAst, {
+       enter(node) {
+         if ((0, import_template_ast_types.isSimpleExpressionNode)(node) && !node.isStatic) {
+-          expressions.add(node.content);
++          expressions.add(`[${node.content}]`);
+         } else if ((0, import_template_ast_types.isComponentNode)(node)) {
+-          expressions.add(node.tag);
++          expressions.add(`[${node.tag}]`);
+         }
+       }
+     });