From b55573ac4d831248e06c9edf922bdfd2b234a40f Mon Sep 17 00:00:00 2001 From: MuhammadM1998 Date: Fri, 21 Jun 2024 17:11:43 +0300 Subject: [PATCH] refactor: move 'diff' command to vue folder --- packages/cli/src/commands/diff.ts | 154 ++--------------- packages/cli/src/commands/frameworks/index.ts | 2 + .../cli/src/commands/frameworks/vue/diff.ts | 155 ++++++++++++++++++ 3 files changed, 168 insertions(+), 143 deletions(-) create mode 100644 packages/cli/src/commands/frameworks/vue/diff.ts diff --git a/packages/cli/src/commands/diff.ts b/packages/cli/src/commands/diff.ts index 8bf17aa9..76a88ea6 100644 --- a/packages/cli/src/commands/diff.ts +++ b/packages/cli/src/commands/diff.ts @@ -1,22 +1,12 @@ -import { existsSync, promises as fs } from 'node:fs' +import { existsSync } from 'node:fs' import process from 'node:process' import path from 'pathe' import { consola } from 'consola' import { colors } from 'consola/utils' import { Command } from 'commander' -import { type Change, diffLines } from 'diff' import { z } from 'zod' -import type { Config } from '@/src/utils/get-config' -import { getConfig } from '@/src/utils/get-config' +import frameworksCommands from './frameworks' import { handleError } from '@/src/utils/handle-error' -import { - fetchTree, - getItemTargetPath, - getRegistryBaseColor, - getRegistryIndex, -} from '@/src/utils/registry' -import type { registryIndexSchema } from '@/src/utils/registry/schema' -import { transform } from '@/src/utils/transformers' const updateOptionsSchema = z.object({ component: z.string().optional(), @@ -49,7 +39,13 @@ export const diff = new Command() process.exit(1) } - const config = await getConfig(cwd) + // Get the corresponding framework commands + // TODO: Pass this to action inside a `context` argument to the function + const framework = 'vue' + const { loadConfig, diff } = frameworksCommands[framework] + + // Load Config + const config = await loadConfig(cwd, options) if (!config) { consola.warn( `Configuration is missing. Please run ${colors.green( @@ -59,138 +55,10 @@ export const diff = new Command() process.exit(1) } - const registryIndex = await getRegistryIndex() - - if (!options.component) { - const targetDir = config.resolvedPaths.components - - // Find all components that exist in the project. - const projectComponents = registryIndex.filter((item) => { - for (const file of item.files) { - const filePath = path.resolve(targetDir, file) - if (existsSync(filePath)) - return true - } - - return false - }) - - // Check for updates. - const componentsWithUpdates = [] - for (const component of projectComponents) { - const changes = await diffComponent(component, config) - if (changes.length) { - componentsWithUpdates.push({ - name: component.name, - changes, - }) - } - } - - if (!componentsWithUpdates.length) { - consola.info('No updates found.') - process.exit(0) - } - - consola.info('The following components have updates available:') - for (const component of componentsWithUpdates) { - consola.info(`- ${component.name}`) - for (const change of component.changes) - consola.info(` - ${change.filePath}`) - } - - consola.log('') - consola.info( - `Run ${colors.green('diff ')} to see the changes.`, - ) - process.exit(0) - } - - // Show diff for a single component. - const component = registryIndex.find( - item => item.name === options.component, - ) - - if (!component) { - consola.error( - `The component ${colors.green(options.component)} does not exist.`, - ) - process.exit(1) - } - - const changes = await diffComponent(component, config) - - if (!changes.length) { - consola.info(`No updates found for ${options.component}.`) - process.exit(0) - } - - for (const change of changes) { - consola.info(`- ${change.filePath}`) - printDiff(change.patch) - consola.log('') - } + // Run Diff Command + await diff(cwd, config, options) } catch (error) { handleError(error) } }) - -async function diffComponent( - component: z.infer[number], - config: Config, -) { - const payload = await fetchTree(config.style, [component]) - const baseColor = await getRegistryBaseColor(config.tailwind.baseColor) - - const changes = [] - - for (const item of payload) { - const targetDir = await getItemTargetPath(config, item) - - if (!targetDir) - continue - - for (const file of item.files) { - const filePath = path.resolve(targetDir, file.name) - - if (!existsSync(filePath)) - continue - - const fileContent = await fs.readFile(filePath, 'utf8') - - const registryContent = await transform({ - filename: file.name, - raw: file.content, - config, - baseColor, - }) - - const patch = diffLines(registryContent as string, fileContent) - if (patch.length > 1) { - changes.push({ - file: file.name, - filePath, - patch, - }) - } - } - } - - return changes -} - -// TODO: Does is it need to async? -function printDiff(diff: Change[]) { - diff.forEach((part) => { - if (part) { - if (part.added) - return process.stdout.write(colors.green(part.value)) - - if (part.removed) - return process.stdout.write(colors.red(part.value)) - - return process.stdout.write(part.value) - } - }) -} diff --git a/packages/cli/src/commands/frameworks/index.ts b/packages/cli/src/commands/frameworks/index.ts index 111c56c2..f9491bf0 100644 --- a/packages/cli/src/commands/frameworks/index.ts +++ b/packages/cli/src/commands/frameworks/index.ts @@ -1,11 +1,13 @@ import loadConfigVue from './vue/config' import initVue from './vue/init' import addVue from './vue/add' +import diffVue from './vue/diff' export default { vue: { loadConfig: loadConfigVue, init: initVue, add: addVue, + diff: diffVue, }, } diff --git a/packages/cli/src/commands/frameworks/vue/diff.ts b/packages/cli/src/commands/frameworks/vue/diff.ts new file mode 100644 index 00000000..75762bf6 --- /dev/null +++ b/packages/cli/src/commands/frameworks/vue/diff.ts @@ -0,0 +1,155 @@ +import { existsSync, promises as fs } from 'node:fs' +import { consola } from 'consola' +import path from 'pathe' +import { colors } from 'consola/utils' +import { type Change, diffLines } from 'diff' +import type { z } from 'zod' +import type { Config } from '../../../utils/get-config' +import { + fetchTree, + getItemTargetPath, + getRegistryBaseColor, + getRegistryIndex, +} from '@/src/utils/registry' +import type { registryIndexSchema } from '@/src/utils/registry/schema' +import { transform } from '@/src/utils/transformers' + +interface DiffOptions { + yes: boolean + cwd: string + path?: string + component?: string +} + +export default async function (cwd: string, config: Config, options: DiffOptions) { + const registryIndex = await getRegistryIndex() + + if (!options.component) { + const targetDir = config.resolvedPaths.components + + // Find all components that exist in the project. + const projectComponents = registryIndex.filter((item) => { + for (const file of item.files) { + const filePath = path.resolve(targetDir, file) + if (existsSync(filePath)) + return true + } + + return false + }) + + // Check for updates. + const componentsWithUpdates = [] + for (const component of projectComponents) { + const changes = await diffComponent(component, config) + if (changes.length) { + componentsWithUpdates.push({ + name: component.name, + changes, + }) + } + } + + if (!componentsWithUpdates.length) { + consola.info('No updates found.') + process.exit(0) + } + + consola.info('The following components have updates available:') + for (const component of componentsWithUpdates) { + consola.info(`- ${component.name}`) + for (const change of component.changes) + consola.info(` - ${change.filePath}`) + } + + consola.log('') + consola.info( + `Run ${colors.green('diff ')} to see the changes.`, + ) + process.exit(0) + } + + // Show diff for a single component. + const component = registryIndex.find( + item => item.name === options.component, + ) + + if (!component) { + consola.error( + `The component ${colors.green(options.component)} does not exist.`, + ) + process.exit(1) + } + + const changes = await diffComponent(component, config) + + if (!changes.length) { + consola.info(`No updates found for ${options.component}.`) + process.exit(0) + } + + for (const change of changes) { + consola.info(`- ${change.filePath}`) + printDiff(change.patch) + consola.log('') + } +} + +async function diffComponent( + component: z.infer[number], + config: Config, +) { + const payload = await fetchTree(config.style, [component]) + const baseColor = await getRegistryBaseColor(config.tailwind.baseColor) + + const changes = [] + + for (const item of payload) { + const targetDir = await getItemTargetPath(config, item) + + if (!targetDir) + continue + + for (const file of item.files) { + const filePath = path.resolve(targetDir, file.name) + + if (!existsSync(filePath)) + continue + + const fileContent = await fs.readFile(filePath, 'utf8') + + const registryContent = await transform({ + filename: file.name, + raw: file.content, + config, + baseColor, + }) + + const patch = diffLines(registryContent as string, fileContent) + if (patch.length > 1) { + changes.push({ + file: file.name, + filePath, + patch, + }) + } + } + } + + return changes +} + +// TODO: Does is it need to async? +function printDiff(diff: Change[]) { + diff.forEach((part) => { + if (part) { + if (part.added) + return process.stdout.write(colors.green(part.value)) + + if (part.removed) + return process.stdout.write(colors.red(part.value)) + + return process.stdout.write(part.value) + } + }) +}