Niklas/shadcn-vue
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cli): add an option to component.json to resolve nuxt buildDir (#447)

Browse Source 
* 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 <sadeghbaratiwork@gmail.com>
Co-authored-by: zernonia <zernonia@gmail.com>
This commit is contained in:
Sam K 2024-05-06 10:13:46 +02:00 committed by GitHub
parent e67c98b485
commit 10319df960
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
8 changed files with 32 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
apps/www/src/content/docs/installation/astro.md
View File

@ -104,6 +104,7 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Astro Which framework are you using? Astro
Which style would you like to use? › Default Which style would you like to use? › Default
Which color would you like to use as base color? › Slate 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 Where is your global CSS file? › src/styles/globals.css
Do you want to use CSS variables for colors? › no / yes Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config located? › tailwind.config.mjs Where is your tailwind.config located? › tailwind.config.mjs
@ -152,12 +153,12 @@ import { Button } from "@/components/ui/button"
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<title>Astro</title> <title>Astro</title>
</head> </head>
<body> <body>
<Button>Hello World</Button> <Button>Hello World</Button>
</body> </body>
</html> </html>
``` ```

1
apps/www/src/content/docs/installation/laravel.md
View File

@ -30,6 +30,7 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default Which style would you like to use? › Default
Which color would you like to use as base color? › Slate 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 Where is your global CSS file? › resources/css/app.css
Do you want to use CSS variables for colors? › no / yes Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js Where is your tailwind.config.js located? › tailwind.config.js

2
apps/www/src/content/docs/installation/nuxt.md
View File

@ -20,6 +20,7 @@ If you encounter the error `ERROR: Cannot read properties of undefined (reading
```bash ```bash
npm install -D typescript npm install -D typescript
``` ```
### Install TailwindCSS module ### Install TailwindCSS module
```bash ```bash
@ -183,6 +184,7 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default Which style would you like to use? › Default
Which color would you like to use as base color? › Slate 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 Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js Where is your tailwind.config.js located? › tailwind.config.js

3
apps/www/src/content/docs/installation/vite.md
View File

@ -75,7 +75,7 @@ Install `tailwindcss` and its peer dependencies, then generate your `tailwind.co
npm install -D tailwindcss autoprefixer postcss npm install -D tailwindcss autoprefixer postcss
``` ```
#### `postcss.config.js` #### `postcss.config.js`
```js ```js
module.exports = { module.exports = {
@ -159,6 +159,7 @@ Would you like to use TypeScript (recommended)? no / yes
Which framework are you using? Vite / Nuxt / Laravel Which framework are you using? Vite / Nuxt / Laravel
Which style would you like to use? › Default Which style would you like to use? › Default
Which color would you like to use as base color? › Slate 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 Where is your global CSS file? › › src/index.css
Do you want to use CSS variables for colors? › no / yes Do you want to use CSS variables for colors? › no / yes
Where is your tailwind.config.js located? › tailwind.config.js Where is your tailwind.config.js located? › tailwind.config.js

1
package.json
View File

@ -17,6 +17,7 @@
"lint": "eslint .", "lint": "eslint .",
"lint:fix": "eslint . --fix", "lint:fix": "eslint . --fix",
"dev:cli": "pnpm --filter shadcn-vue dev", "dev:cli": "pnpm --filter shadcn-vue dev",
"dev:nuxt": "pnpm --filter shadcn-nuxt dev",
"build:cli": "pnpm --filter shadcn-vue build", "build:cli": "pnpm --filter shadcn-vue build",
"build:registry": "pnpm --filter=www build:registry", "build:registry": "pnpm --filter=www build:registry",
"bumpp": "bumpp package.json packages/*/package.json apps/*/package.json", "bumpp": "bumpp package.json packages/*/package.json apps/*/package.json",

11
packages/cli/src/commands/init.ts
View File

@ -135,6 +135,16 @@ export async function promptForConfig(
value: color.name, 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', type: 'text',
name: 'tailwindCss', name: 'tailwindCss',
@ -189,6 +199,7 @@ export async function promptForConfig(
$schema: 'https://shadcn-vue.com/schema.json', $schema: 'https://shadcn-vue.com/schema.json',
style: options.style, style: options.style,
typescript: options.typescript, typescript: options.typescript,
tsConfigPath: options.tsConfigPath,
framework: options.framework, framework: options.framework,
tailwind: { tailwind: {
config: options.tailwindConfig, config: options.tailwindConfig,

7
packages/cli/src/utils/get-config.ts
View File

@ -9,6 +9,7 @@ import { resolveImport } from '@/src/utils/resolve-import'
export const DEFAULT_STYLE = 'default' export const DEFAULT_STYLE = 'default'
export const DEFAULT_COMPONENTS = '@/components' export const DEFAULT_COMPONENTS = '@/components'
export const DEFAULT_UTILS = '@/lib/utils' 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_CONFIG = 'tailwind.config.js'
export const DEFAULT_TAILWIND_BASE_COLOR = 'slate' export const DEFAULT_TAILWIND_BASE_COLOR = 'slate'
@ -24,6 +25,7 @@ export const rawConfigSchema = z
$schema: z.string().optional(), $schema: z.string().optional(),
style: z.string(), style: z.string(),
typescript: z.boolean().default(true), typescript: z.boolean().default(true),
tsConfigPath: z.string().default(DEFAULT_TYPESCRIPT_CONFIG),
tailwind: z.object({ tailwind: z.object({
config: z.string(), config: z.string(),
css: z.string(), css: z.string(),
@ -68,7 +70,7 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
let tsConfig: ConfigLoaderResult | undefined let tsConfig: ConfigLoaderResult | undefined
let tsConfigPath = path.resolve( let tsConfigPath = path.resolve(
cwd, cwd,
config.framework === 'nuxt' ? '.nuxt/tsconfig.json' : './tsconfig.json', config.tsConfigPath,
) )
if (config.typescript) { if (config.typescript) {
@ -83,10 +85,9 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
} }
} }
else { 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) tsConfig = loadConfig(tsConfigPath)
} }
if (tsConfig.resultType === 'failed') { if (tsConfig.resultType === 'failed') {
throw new Error( throw new Error(
`Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(), `Failed to load ${tsConfigPath}. ${tsConfig.message ?? ''}`.trim(),

4
packages/cli/test/utils/get-config.test.ts
View File

@ -19,6 +19,7 @@ it('get raw config', async () => {
baseColor: 'neutral', baseColor: 'neutral',
cssVariables: false, cssVariables: false,
}, },
tsConfigPath: './tsconfig.json',
aliases: { aliases: {
components: '@/components', components: '@/components',
utils: '@/lib/utils', utils: '@/lib/utils',
@ -55,6 +56,7 @@ it('get config', async () => {
utils: '@/lib/utils', utils: '@/lib/utils',
}, },
framework: 'Vite', framework: 'Vite',
tsConfigPath: './tsconfig.json',
resolvedPaths: { resolvedPaths: {
tailwindConfig: path.resolve( tailwindConfig: path.resolve(
__dirname, __dirname,
@ -102,6 +104,7 @@ it('get config', async () => {
utils: '~/lib/utils', utils: '~/lib/utils',
}, },
framework: 'Vite', framework: 'Vite',
tsConfigPath: './tsconfig.json',
resolvedPaths: { resolvedPaths: {
tailwindConfig: path.resolve( tailwindConfig: path.resolve(
__dirname, __dirname,
@ -148,6 +151,7 @@ it('get config', async () => {
utils: '@/lib/utils', utils: '@/lib/utils',
}, },
framework: 'Vite', framework: 'Vite',
tsConfigPath: './tsconfig.json',
resolvedPaths: { resolvedPaths: {
tailwindConfig: path.resolve( tailwindConfig: path.resolve(
__dirname, __dirname,