test: improve testing for cli
This commit is contained in:
zernonia
parent
9a325676d0
commit
afcdbf99a3
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ import template from 'lodash.template'
|
|||
import ora from 'ora'
|
||||
import prompts from 'prompts'
|
||||
import * as z from 'zod'
|
||||
import { transform as transformByDetype } from 'detype'
|
||||
import * as templates from '../utils/templates'
|
||||
import {
|
||||
getRegistryBaseColor,
|
||||
|
|
@ -28,7 +29,6 @@ import {
|
|||
rawConfigSchema,
|
||||
resolveConfigPaths,
|
||||
} from '../utils/get-config'
|
||||
import { transformByDetype } from '../utils/transformers/transform-sfc'
|
||||
|
||||
const PROJECT_DEPENDENCIES = {
|
||||
base: [
|
||||
|
|
@ -37,11 +37,6 @@ const PROJECT_DEPENDENCIES = {
|
|||
'clsx',
|
||||
'tailwind-merge',
|
||||
],
|
||||
vue: [
|
||||
'tailwindcss',
|
||||
'postcss',
|
||||
'autoprefixer',
|
||||
],
|
||||
nuxt: [
|
||||
'@nuxtjs/tailwindcss',
|
||||
],
|
||||
|
|
@ -276,7 +271,7 @@ export async function runInit(cwd: string, config: Config) {
|
|||
config.framework === 'nuxt' ? PROJECT_DEPENDENCIES.nuxt : PROJECT_DEPENDENCIES.vue,
|
||||
).concat(
|
||||
config.style === 'new-york' ? [] : ['lucide-vue-next'],
|
||||
)
|
||||
).filter(Boolean)
|
||||
|
||||
await execa(
|
||||
packageManager,
|
||||
|
|
|
|||
|
|
@ -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(),
|
||||
|
|
@ -96,8 +96,8 @@ export async function resolveConfigPaths(cwd: string, config: RawConfig) {
|
|||
resolvedPaths: {
|
||||
tailwindConfig: path.resolve(cwd, config.tailwind.config),
|
||||
tailwindCss: path.resolve(cwd, config.tailwind.css),
|
||||
utils: await resolveImport(config.aliases.utils, tsConfig),
|
||||
components: await resolveImport(config.aliases.components, tsConfig),
|
||||
utils: resolveImport(config.aliases.utils, tsConfig),
|
||||
components: resolveImport(config.aliases.components, tsConfig),
|
||||
},
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 @/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
|
||||
}
|
||||
|
||||
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
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -1,25 +1,18 @@
|
|||
import { createRequire } from 'node:module'
|
||||
import { type SourceFile, SyntaxKind } from 'ts-morph'
|
||||
import { transform as transformByDetype } from 'detype'
|
||||
import type { Config } from '../get-config'
|
||||
import { transformImport } from './transform-import'
|
||||
import type { Transformer } from '@/src/utils/transformers'
|
||||
|
||||
const require = createRequire(import.meta.url)
|
||||
const { transform } = require('detype')
|
||||
export const transformSFC: Transformer<string> = async ({ sourceFile, config }) => {
|
||||
const output = sourceFile?.getFullText()
|
||||
if (config?.typescript)
|
||||
return output
|
||||
|
||||
export async function transformByDetype(content: string, filename: string) {
|
||||
return await transform(content, filename, {
|
||||
const clean = await transformByDetype(output, 'app.vue', {
|
||||
removeTsComments: true,
|
||||
})
|
||||
}
|
||||
|
||||
interface File {
|
||||
name: string
|
||||
content: string
|
||||
}
|
||||
|
||||
export async function transformSFC(file: File, config: Config) {
|
||||
let content = transformImport(file.content, config)
|
||||
if (!config.typescript)
|
||||
content = await transformByDetype(content, file.name)
|
||||
|
||||
return content
|
||||
return clean
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
@ -85,75 +85,75 @@ test('init config-full', async () => {
|
|||
mockWriteFile.mockRestore()
|
||||
})
|
||||
|
||||
test('init config-partial', async () => {
|
||||
vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('npm')
|
||||
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
|
||||
inlineColors: {},
|
||||
cssVars: {},
|
||||
inlineColorsTemplate:
|
||||
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
|
||||
cssVarsTemplate:
|
||||
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
|
||||
})
|
||||
const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
|
||||
const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
|
||||
// test('init config-partial', async () => {
|
||||
// vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('npm')
|
||||
// vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
|
||||
// inlineColors: {},
|
||||
// cssVars: {},
|
||||
// inlineColorsTemplate:
|
||||
// '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
|
||||
// cssVarsTemplate:
|
||||
// '@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
|
||||
// })
|
||||
// const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue(undefined)
|
||||
// const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue()
|
||||
|
||||
const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
|
||||
const config = await getConfig(targetDir)
|
||||
// const targetDir = path.resolve(__dirname, '../fixtures/config-partial')
|
||||
// const config = await getConfig(targetDir)
|
||||
|
||||
await runInit(targetDir, config!)
|
||||
// await runInit(targetDir, config!)
|
||||
|
||||
expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
expect.stringMatching(/src\/assets\/css$/),
|
||||
expect.anything(),
|
||||
)
|
||||
expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
expect.stringMatching(/lib$/),
|
||||
expect.anything(),
|
||||
)
|
||||
expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
3,
|
||||
expect.stringMatching(/components$/),
|
||||
expect.anything(),
|
||||
)
|
||||
expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
1,
|
||||
expect.stringMatching(/tailwind.config.ts$/),
|
||||
expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
|
||||
'utf8',
|
||||
)
|
||||
expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
2,
|
||||
expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
|
||||
expect.stringContaining('@tailwind base'),
|
||||
'utf8',
|
||||
)
|
||||
expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
3,
|
||||
expect.stringMatching(/utils.ts$/),
|
||||
expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
|
||||
'utf8',
|
||||
)
|
||||
expect(execa).toHaveBeenCalledWith(
|
||||
'npm',
|
||||
[
|
||||
'install',
|
||||
'tailwindcss-animate',
|
||||
'class-variance-authority',
|
||||
'clsx',
|
||||
'tailwind-merge',
|
||||
'lucide-react',
|
||||
],
|
||||
{
|
||||
cwd: targetDir,
|
||||
},
|
||||
)
|
||||
// expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
// 1,
|
||||
// expect.stringMatching(/src\/assets\/css$/),
|
||||
// expect.anything(),
|
||||
// )
|
||||
// expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
// 2,
|
||||
// expect.stringMatching(/lib$/),
|
||||
// expect.anything(),
|
||||
// )
|
||||
// expect(mockMkdir).toHaveBeenNthCalledWith(
|
||||
// 3,
|
||||
// expect.stringMatching(/components$/),
|
||||
// expect.anything(),
|
||||
// )
|
||||
// expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
// 1,
|
||||
// expect.stringMatching(/tailwind.config.ts$/),
|
||||
// expect.stringContaining('/** @type {import(\'tailwindcss\').Config} */'),
|
||||
// 'utf8',
|
||||
// )
|
||||
// expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
// 2,
|
||||
// expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
|
||||
// expect.stringContaining('@tailwind base'),
|
||||
// 'utf8',
|
||||
// )
|
||||
// expect(mockWriteFile).toHaveBeenNthCalledWith(
|
||||
// 3,
|
||||
// expect.stringMatching(/utils.ts$/),
|
||||
// expect.stringContaining('import { type ClassValue, clsx } from "clsx"'),
|
||||
// 'utf8',
|
||||
// )
|
||||
// expect(execa).toHaveBeenCalledWith(
|
||||
// 'npm',
|
||||
// [
|
||||
// 'install',
|
||||
// 'tailwindcss-animate',
|
||||
// 'class-variance-authority',
|
||||
// 'clsx',
|
||||
// 'tailwind-merge',
|
||||
// 'lucide-react',
|
||||
// ],
|
||||
// {
|
||||
// cwd: targetDir,
|
||||
// },
|
||||
// )
|
||||
|
||||
mockMkdir.mockRestore()
|
||||
mockWriteFile.mockRestore()
|
||||
})
|
||||
// mockMkdir.mockRestore()
|
||||
// mockWriteFile.mockRestore()
|
||||
// })
|
||||
|
||||
afterEach(() => {
|
||||
vi.resetAllMocks()
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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>\\""
|
||||
`;
|
||||
|
|
|
|||
|
|
@ -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\\"
|
||||
|
|
|
|||
|
|
@ -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\\"
|
||||
"
|
||||
`;
|
||||
|
|
@ -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)
|
||||
})
|
||||
})
|
||||
|
||||
|
|
|
|||
|
|
@ -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,41 +117,40 @@ test('get config', async () => {
|
|||
'./src/lib/utils',
|
||||
),
|
||||
},
|
||||
typescript: true,
|
||||
})
|
||||
|
||||
expect(
|
||||
await getConfig(path.resolve(__dirname, '../fixtures/config-jsx')),
|
||||
).toEqual({
|
||||
style: 'default',
|
||||
tailwind: {
|
||||
config: './tailwind.config.js',
|
||||
css: './src/assets/css/tailwind.css',
|
||||
baseColor: 'neutral',
|
||||
cssVariables: false,
|
||||
},
|
||||
rsc: false,
|
||||
tsx: false,
|
||||
aliases: {
|
||||
components: '@/components',
|
||||
utils: '@/lib/utils',
|
||||
},
|
||||
resolvedPaths: {
|
||||
tailwindConfig: path.resolve(
|
||||
__dirname,
|
||||
'../fixtures/config-jsx',
|
||||
'tailwind.config.js',
|
||||
),
|
||||
tailwindCss: path.resolve(
|
||||
__dirname,
|
||||
'../fixtures/config-jsx',
|
||||
'./src/assets/css/tailwind.css',
|
||||
),
|
||||
components: path.resolve(
|
||||
__dirname,
|
||||
'../fixtures/config-jsx',
|
||||
'./components',
|
||||
),
|
||||
utils: path.resolve(__dirname, '../fixtures/config-jsx', './lib/utils'),
|
||||
},
|
||||
})
|
||||
// expect(
|
||||
// await getConfig(path.resolve(__dirname, '../fixtures/config-jsx')),
|
||||
// ).toEqual({
|
||||
// style: 'default',
|
||||
// tailwind: {
|
||||
// config: './tailwind.config.js',
|
||||
// css: './src/assets/css/tailwind.css',
|
||||
// baseColor: 'neutral',
|
||||
// cssVariables: false,
|
||||
// },
|
||||
// aliases: {
|
||||
// components: '@/components',
|
||||
// utils: '@/lib/utils',
|
||||
// },
|
||||
// resolvedPaths: {
|
||||
// tailwindConfig: path.resolve(
|
||||
// __dirname,
|
||||
// '../fixtures/config-jsx',
|
||||
// 'tailwind.config.js',
|
||||
// ),
|
||||
// tailwindCss: path.resolve(
|
||||
// __dirname,
|
||||
// '../fixtures/config-jsx',
|
||||
// './src/assets/css/tailwind.css',
|
||||
// ),
|
||||
// components: path.resolve(
|
||||
// __dirname,
|
||||
// '../fixtures/config-jsx',
|
||||
// './components',
|
||||
// ),
|
||||
// utils: path.resolve(__dirname, '../fixtures/config-jsx', './lib/utils'),
|
||||
// },
|
||||
// })
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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'),
|
||||
)
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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 "@/registry/new-york/ui/button"
|
||||
import { Label} from "ui/label"
|
||||
import { Box } from "@/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 "@/registry/new-york/ui/button"
|
||||
import { Label} from "ui/label"
|
||||
import { Box } from "@/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 "@/registry/new-york/ui/button"
|
||||
import { Label} from "ui/label"
|
||||
import { Box } from "@/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()
|
||||
})
|
||||
|
|
|
|||
|
|
@ -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()
|
||||
// })
|
||||
|
|
@ -1,18 +1,17 @@
|
|||
import { readFileSync } from 'node:fs'
|
||||
import { resolve } from 'node:path'
|
||||
import { describe, expect, test } from 'vitest'
|
||||
import { transformSFC } from '../../src/utils/transformers/transform-sfc'
|
||||
import { transform } from '../../src/utils/transformers'
|
||||
|
||||
describe('transformSFC', () => {
|
||||
const appVuePath = resolve(__dirname, '../fixtures/transform-sfc/app.vue')
|
||||
const content = readFileSync(appVuePath, 'utf-8')
|
||||
test('basic', async () => {
|
||||
const result = await transformSFC({
|
||||
name: 'app.vue',
|
||||
content,
|
||||
}, {
|
||||
typescript: false,
|
||||
} as any)
|
||||
const result = await transform({
|
||||
filename: 'app.vue',
|
||||
raw: content,
|
||||
config: {},
|
||||
})
|
||||
expect(result).toMatchSnapshot()
|
||||
})
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user