From 10319df9604747df7f64f01ea98fe3f6bdf4c0d5 Mon Sep 17 00:00:00 2001 From: Sam K <33263129+samk-dev@users.noreply.github.com> Date: Mon, 6 May 2024 10:13:46 +0200 Subject: [PATCH] fix(cli): add an option to `component.json` to resolve nuxt buildDir (#447) * fix(cli): add an option to `component.json` to resolve nuxt buildDir dynamically * feat: add `tsConfigPath` option * docs: updated installation docs to reflect the new option `tsConfigPath` * feat: include option in init --------- Co-authored-by: Sadegh Barati Co-authored-by: zernonia --- apps/www/src/content/docs/installation/astro.md | 13 +++++++------ apps/www/src/content/docs/installation/laravel.md | 1 + apps/www/src/content/docs/installation/nuxt.md | 2 ++ apps/www/src/content/docs/installation/vite.md | 3 ++- package.json | 1 + packages/cli/src/commands/init.ts | 11 +++++++++++ packages/cli/src/utils/get-config.ts | 7 ++++--- packages/cli/test/utils/get-config.test.ts | 4 ++++ 8 files changed, 32 insertions(+), 10 deletions(-) diff --git a/apps/www/src/content/docs/installation/astro.md b/apps/www/src/content/docs/installation/astro.md index b465dd45..470de011 100644 --- a/apps/www/src/content/docs/installation/astro.md +++ b/apps/www/src/content/docs/installation/astro.md @@ -104,6 +104,7 @@ Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Astro Which style would you like to use? › Default Which color would you like to use as base color? › Slate +Where is your tsconfig.json located? › ./tsconfig.json Where is your global CSS file? › src/styles/globals.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config located? › tailwind.config.mjs @@ -152,12 +153,12 @@ import { Button } from "@/components/ui/button" --- - - Astro - - - - + + Astro + + + + ``` diff --git a/apps/www/src/content/docs/installation/laravel.md b/apps/www/src/content/docs/installation/laravel.md index 9f83e77d..a86bc62f 100644 --- a/apps/www/src/content/docs/installation/laravel.md +++ b/apps/www/src/content/docs/installation/laravel.md @@ -30,6 +30,7 @@ Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default Which color would you like to use as base color? › Slate +Where is your tsconfig.json located? › ./tsconfig.json Where is your global CSS file? › resources/css/app.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js diff --git a/apps/www/src/content/docs/installation/nuxt.md b/apps/www/src/content/docs/installation/nuxt.md index 2e5567e1..13c1b018 100644 --- a/apps/www/src/content/docs/installation/nuxt.md +++ b/apps/www/src/content/docs/installation/nuxt.md @@ -20,6 +20,7 @@ If you encounter the error `ERROR: Cannot read properties of undefined (reading ```bash npm install -D typescript ``` + ### Install TailwindCSS module ```bash @@ -183,6 +184,7 @@ Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default Which color would you like to use as base color? › Slate +Where is your tsconfig.json located? › ./tsconfig.json Where is your global CSS file? › › src/index.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js diff --git a/apps/www/src/content/docs/installation/vite.md b/apps/www/src/content/docs/installation/vite.md index 2d223dc5..5f99b6c6 100644 --- a/apps/www/src/content/docs/installation/vite.md +++ b/apps/www/src/content/docs/installation/vite.md @@ -75,7 +75,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co npm install -D tailwindcss autoprefixer postcss ``` - #### `postcss.config.js` +#### `postcss.config.js` ```js module.exports = { @@ -159,6 +159,7 @@ Would you like to use TypeScript (recommended)? no / yes Which framework are you using? Vite / Nuxt / Laravel Which style would you like to use? › Default Which color would you like to use as base color? › Slate +Where is your tsconfig.json located? › ./tsconfig.json Where is your global CSS file? › › src/index.css Do you want to use CSS variables for colors? › no / yes Where is your tailwind.config.js located? › tailwind.config.js diff --git a/package.json b/package.json index acd2fa58..bd49c4c5 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "lint": "eslint .", "lint:fix": "eslint . --fix", "dev:cli": "pnpm --filter shadcn-vue dev", + "dev:nuxt": "pnpm --filter shadcn-nuxt dev", "build:cli": "pnpm --filter shadcn-vue build", "build:registry": "pnpm --filter=www build:registry", "bumpp": "bumpp package.json packages/*/package.json apps/*/package.json", diff --git a/packages/cli/src/commands/init.ts b/packages/cli/src/commands/init.ts index 05e24c48..4bac72c4 100644 --- a/packages/cli/src/commands/init.ts +++ b/packages/cli/src/commands/init.ts @@ -135,6 +135,16 @@ export async function promptForConfig( value: color.name, })), }, + { + type: 'text', + name: 'tsConfigPath', + message: (prev, values) => `Where is your ${highlight(values.typescript ? 'tsconfig.json' : 'jsconfig.json')} file?`, + initial: (prev, values) => { + const prefix = values.framework === 'nuxt' ? '.nuxt/' : './' + const path = values.typescript ? 'tsconfig.json' : 'jsconfig.json' + return prefix + path + }, + }, { type: 'text', name: 'tailwindCss', @@ -189,6 +199,7 @@ export async function promptForConfig( $schema: 'https://shadcn-vue.com/schema.json', style: options.style, typescript: options.typescript, + tsConfigPath: options.tsConfigPath, framework: options.framework, tailwind: { config: options.tailwindConfig, diff --git a/packages/cli/src/utils/get-config.ts b/packages/cli/src/utils/get-config.ts index 40c75e5d..cfd9a65c 100644 --- a/packages/cli/src/utils/get-config.ts +++ b/packages/cli/src/utils/get-config.ts @@ -9,6 +9,7 @@ import { resolveImport } from '@/src/utils/resolve-import' export const DEFAULT_STYLE = 'default' export const DEFAULT_COMPONENTS = '@/components' export const DEFAULT_UTILS = '@/lib/utils' +export const DEFAULT_TYPESCRIPT_CONFIG = './tsconfig.json' export const DEFAULT_TAILWIND_CONFIG = 'tailwind.config.js' export const DEFAULT_TAILWIND_BASE_COLOR = 'slate' @@ -24,6 +25,7 @@ export const rawConfigSchema = z $schema: z.string().optional(), style: z.string(), typescript: z.boolean().default(true), + tsConfigPath: z.string().default(DEFAULT_TYPESCRIPT_CONFIG), tailwind: z.object({ config: z.string(), css: z.string(), @@ -68,7 +70,7 @@ 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', + config.tsConfigPath, ) if (config.typescript) { @@ -83,10 +85,9 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) { } } else { - tsConfigPath = path.resolve(cwd, './jsconfig.json') + tsConfigPath = config.tsConfigPath.includes('tsconfig.json') ? path.resolve(cwd, './jsconfig.json') : path.resolve(cwd, config.tsConfigPath) tsConfig = loadConfig(tsConfigPath) } - if (tsConfig.resultType === 'failed') { throw new Error( `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(), diff --git a/packages/cli/test/utils/get-config.test.ts b/packages/cli/test/utils/get-config.test.ts index 44399044..477265ef 100644 --- a/packages/cli/test/utils/get-config.test.ts +++ b/packages/cli/test/utils/get-config.test.ts @@ -19,6 +19,7 @@ it('get raw config', async () => { baseColor: 'neutral', cssVariables: false, }, + tsConfigPath: './tsconfig.json', aliases: { components: '@/components', utils: '@/lib/utils', @@ -55,6 +56,7 @@ it('get config', async () => { utils: '@/lib/utils', }, framework: 'Vite', + tsConfigPath: './tsconfig.json', resolvedPaths: { tailwindConfig: path.resolve( __dirname, @@ -102,6 +104,7 @@ it('get config', async () => { utils: '~/lib/utils', }, framework: 'Vite', + tsConfigPath: './tsconfig.json', resolvedPaths: { tailwindConfig: path.resolve( __dirname, @@ -148,6 +151,7 @@ it('get config', async () => { utils: '@/lib/utils', }, framework: 'Vite', + tsConfigPath: './tsconfig.json', resolvedPaths: { tailwindConfig: path.resolve( __dirname,