@yamada-ui/cli 2.0.0-dev-20250816072830 → 2.0.0-dev-20250817141319

package/dist/index.js

@@ -23,15 +23,17 @@ import { mkdir, readFile, readdir, writeFile } from "fs/promises";
 import { Listr } from "listr2";
 import ora from "ora";
 import prompts from "prompts";
-import { execSync } from "child_process";
+import { execa } from "execa";
 import "validate-npm-package-name";
 import YAML from "yamljs";
+import { glob } from "glob";
 import { format as format$1, resolveConfig, resolveConfigFile } from "prettier";
 import { build } from "esbuild";
 import nodeEval from "node-eval";
 import { Script } from "vm";
 import { HttpsProxyAgent } from "https-proxy-agent";
 import fetch from "node-fetch";
+import { diffLines } from "diff";
 import { rimraf } from "rimraf";
 import { ESLint } from "eslint";
 
@@ -5230,8 +5232,10 @@ var dependencies = {
 	"cli-check-node": "^1.3.4",
 	"cli-handle-unhandled": "^1.1.2",
 	"commander": "^14.0.0",
+	"diff": "^8.0.2",
 	"esbuild": "^0.25.8",
 	"eslint": "^9.32.0",
+	"execa": "9.3.1",
 	"glob": "^11.0.3",
 	"https-proxy-agent": "^7.0.6",
 	"listr2": "^9.0.1",
@@ -5306,13 +5310,37 @@ function timer() {
 	const end = () => {
 		const end$1 = process.hrtime.bigint();
 		const duration = (Number(end$1 - start) / 1e9).toFixed(2);
-		console.log("\n", c.green(`Done in ${duration}s`));
+		console.log("");
+		console.log(c.green(`Done in ${duration}s`));
 	};
 	return {
 		end,
 		start
 	};
 }
+async function getComponentFiles(componentName, { srcPath }) {
+	const files$1 = {};
+	const [dirPath] = await glob(path$1.join(srcPath, "**", componentName));
+	if (!dirPath) return files$1;
+	const dirents = await readdir(dirPath, { withFileTypes: true });
+	await Promise.all(dirents.map(async (dirent) => {
+		const name$1 = dirent.name;
+		if (dirent.isDirectory()) {
+			const data = await readdir(path$1.join(dirent.parentPath, name$1), { withFileTypes: true });
+			await Promise.all(data.map(async (dirent$1) => {
+				if (dirent$1.isDirectory()) return;
+				const targetPath = path$1.join(dirent$1.parentPath, dirent$1.name);
+				const data$1 = await readFile(targetPath, "utf-8");
+				files$1[`${name$1}/${dirent$1.name}`] = data$1;
+			}));
+		} else {
+			const targetPath = path$1.join(dirent.parentPath, dirent.name);
+			const data = await readFile(targetPath, "utf-8");
+			files$1[name$1] = data;
+		}
+	}));
+	return files$1;
+}
 
 //#endregion
 //#region src/utils/prettier.ts
@@ -5380,37 +5408,49 @@ function splitVersion(value) {
 function getPackageName(value) {
 	return isObject(value) ? `${value.name}@${value.wanted}` : value;
 }
-function packageAddCommand(packageManager, { dev = false, exact = false } = {}) {
-	const command = [packageManager];
-	if (packageManager === "npm") command.push("install");
-	else command.push("add");
-	if (dev) if (packageManager === "npm") command.push("--save-dev");
-	else command.push("--dev");
-	if (exact) command.push("--save-exact");
-	return command.join(" ");
+function packageAddArgs(packageManager, { dev = false, exact = false } = {}) {
+	const args = [];
+	if (packageManager === "npm") args.push("install");
+	else args.push("add");
+	if (dev) if (packageManager === "npm") args.push("--save-dev");
+	else args.push("--dev");
+	if (exact) args.push("--save-exact");
+	return args;
 }
-function packageExecuteCommand(packageManager) {
+function packageExecuteCommands(packageManager) {
 	switch (packageManager) {
-		case "npm": return "npx";
-		case "pnpm": return "pnpm dlx";
-		case "yarn": return "yarn dlx";
-		case "bun": return "bunx --bun";
+		case "npm": return {
+			args: [],
+			command: "npx"
+		};
+		case "pnpm": return {
+			args: ["dlx"],
+			command: "pnpm"
+		};
+		case "yarn": return {
+			args: ["dlx"],
+			command: "yarn"
+		};
+		case "bun": return {
+			args: ["--bun"],
+			command: "bunx"
+		};
 	}
 }
-function installDependencies(dependencies$1, { cwd: cwd$2, dev, exact = true } = {}) {
+async function installDependencies(dependencies$1, { cwd: cwd$2, dev, exact = true } = {}) {
 	const packageManager = getPackageManager();
 	if (dependencies$1?.length) {
-		const command = packageAddCommand(packageManager, {
+		const args = packageAddArgs(packageManager, {
 			dev,
 			exact
 		});
-		execSync(`${command} ${dependencies$1.join(" ")}`, {
+		await execa(packageManager, [...args, ...dependencies$1], {
 			cwd: cwd$2,
-			stdio: "ignore"
+			stdout: "ignore"
 		});
-	} else execSync(`${packageManager} install`, {
+	} else await execa(packageManager, ["install"], {
 		cwd: cwd$2,
-		stdio: "ignore"
+		stdout: "ignore"
 	});
 }
 async function addWorkspace(cwd$2, workspacePath) {
@@ -5502,8 +5542,9 @@ async function getConfig(cwd$2, configPath) {
 		};
 	} catch {
 		const packageManager = getPackageManager();
-		const command = packageExecuteCommand(packageManager);
-		throw new Error(`No config found. Please run ${c.cyan(`${command} ${package_default.name}@latest init`)}.`);
+		const { args, command } = packageExecuteCommands(packageManager);
+		const prefix = `${command}${args.length ? ` ${args.join(" ")}` : ""}`;
+		throw new Error(`No config found. Please run ${c.cyan(`${prefix} ${package_default.name}@latest init`)}.`);
 	}
 }
 
@@ -5630,7 +5671,7 @@ async function getGeneratedNameMap(config$1) {
 	}));
 	return Object.fromEntries(results);
 }
-function transformTemplate(targetSection, content, { getSection }, generatedNames) {
+function transformContent(targetSection, content, { getSection }, generatedNames) {
 	const matches = content.matchAll(/from\s+["']([^"']+)["']/g);
 	matches.forEach((match) => {
 		const [searchValue, value] = match;
@@ -5684,11 +5725,11 @@ async function generateSources(dirPath, { section, sources }, config$1, generate
 	await Promise.all(sources.map(async ({ name: fileName, content, data, template }) => {
 		const targetPath = path$1.resolve(dirPath, fileName);
 		if (content) {
-			content = transformTemplate(section, content, config$1, generatedNames);
+			content = transformContent(section, content, config$1, generatedNames);
 			await writeFileSafe(targetPath, await format$2(content));
 		} else if (template && data) await Promise.all(data.map(async ({ name: fileName$1,...rest }) => {
 			content = transformTemplateContent(template, rest);
-			content = transformTemplate(section, content, config$1, generatedNames);
+			content = transformContent(section, content, config$1, generatedNames);
 			await writeFileSafe(path$1.resolve(targetPath, fileName$1), await format$2(content));
 		}));
 	}));
@@ -5823,18 +5864,18 @@ const add = new Command("add").description("Add a component to your project").ar
 			componentNames = await fetchRegistryNames();
 			spinner.succeed("Fetched all available components");
 		} else {
-			spinner.start("Getting generated data");
+			spinner.start("Getting generated components");
 			generatedNameMap = await getGeneratedNameMap(config$1);
 			const generatedNames = Object.values(generatedNameMap).flat();
 			const existsNames = componentNames.filter((name$1) => generatedNames.includes(name$1));
-			spinner.succeed("Got generated data");
+			spinner.succeed("Got generated components");
 			if (!overwrite && existsNames.length) {
 				const colorizedNames = existsNames.map((name$1) => c.yellow(name$1));
 				const { overwrite: overwrite$1 } = await prompts({
 					type: "confirm",
 					name: "overwrite",
 					initial: false,
-					message: c.reset(`The ${colorizedNames.join(", ")} components already exist. Do you want to overwrite them?`)
+					message: c.reset([`The ${colorizedNames.join(", ")} components already exist.`, "Do you want to overwrite them?"].join(" "))
 				});
 				if (!overwrite$1) process.exit(0);
 			}
@@ -5895,7 +5936,7 @@ const add = new Command("add").description("Add a component to your project").ar
 					type: "confirm",
 					name: "update",
 					initial: true,
-					message: c.reset(`The following generated files will be updated: ${colorizedNames.join(", ")}. Do you want to update them?`)
+					message: c.reset([`The following generated files will be updated: ${colorizedNames.join(", ")}.`, "Do you want to update them?"].join(" "))
 				});
 				if (update) overwrite = update;
 			}
@@ -5910,7 +5951,7 @@ const add = new Command("add").description("Add a component to your project").ar
 							await Promise.all(dirents.map(async (dirent) => {
 								if (dirent.isDirectory()) return;
 								const targetPath = path$1.join(dirent.parentPath, dirent.name);
-								const content = transformTemplate(section, await readFile(targetPath, "utf-8"), config$1, targetNames);
+								const content = transformContent(section, await readFile(targetPath, "utf-8"), config$1, targetNames);
 								await writeFileSafe(targetPath, await format$2(content));
 							}));
 							task.title = `Updated ${c.cyan(name$1)}`;
@@ -5932,13 +5973,13 @@ const add = new Command("add").description("Add a component to your project").ar
 					type: "confirm",
 					name: "proceed",
 					initial: true,
-					message: c.reset(`The following dependencies are not installed: ${colorizedNames.join(", ")}. Do you want to install them?`)
+					message: c.reset([`The following dependencies are not installed: ${colorizedNames.join(", ")}.`, "Do you want to install them?"].join(" "))
 				});
 				install = proceed;
 			}
 			if (install) tasks.add({
-				task: (_, task) => {
-					installDependencies(notInstalledDependencies.map(getPackageName), { cwd: targetPath });
+				task: async (_, task) => {
+					await installDependencies(notInstalledDependencies.map(getPackageName), { cwd: targetPath });
 					task.title = "Installed dependencies";
 				},
 				title: "Installing dependencies"
@@ -5954,17 +5995,125 @@ const add = new Command("add").description("Add a component to your project").ar
 
 //#endregion
 //#region src/commands/diff/index.ts
-const diff = new Command("diff").description("Check for updates against the registry").argument("[component]", "Component to check").option("--cwd <path>", "Current working directory", process.cwd()).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).action(async function(componentName, { config: configPath, cwd: cwd$2 }) {
+async function getData(componentNames, config$1) {
+	const data = {};
+	const registries = {};
+	const tasks = new Listr([...componentNames.map((componentName) => ({
+		task: async (_, task) => {
+			data[componentName] = await getComponentFiles(componentName, config$1);
+			task.title = `Got ${c.cyan(componentName)} files`;
+		},
+		title: `Getting ${c.cyan(componentName)} files`
+	})), ...componentNames.map((componentName) => ({
+		task: async (_, task) => {
+			registries[componentName] = await fetchRegistry(componentName);
+			task.title = `Fetched ${c.cyan(componentName)} registry`;
+		},
+		title: `Fetching ${c.cyan(componentName)} registry`
+	}))], { concurrent: true });
+	await tasks.run();
+	return {
+		data,
+		registries
+	};
+}
+async function getDiff(generatedNames, data, registries, config$1) {
+	const changes = {};
+	await Promise.all(Object.entries(data).map(async ([name$1, files$1]) => {
+		const registry = registries[name$1];
+		if (!registry) return;
+		await Promise.all(Object.entries(files$1).map(async ([fileName, file$1]) => {
+			const registryFile = registry.sources.find(({ name: name$2 }) => name$2 === fileName);
+			if (!registryFile?.content) return;
+			const content = await format$2(transformContent(registry.section, registryFile.content, config$1, generatedNames));
+			const diff$1 = diffLines(file$1, content);
+			if (diff$1.length < 2) return;
+			changes[name$1] ??= {};
+			changes[name$1][fileName] = diff$1;
+		}));
+	}));
+	return changes;
+}
+const diff = new Command("diff").description("Check for updates against the registry").argument("[component]", "Component to check").option("--cwd <path>", "Current working directory", process.cwd()).option("-c, --config <path>", "Path to the config file", CONFIG_FILE_NAME).option("-d, --detail", "Show detailed changes", false).action(async function(componentName, { config: configPath, cwd: cwd$2, detail = false }) {
 	const spinner = ora();
 	try {
 		const { end } = timer();
+		const packageManager = getPackageManager();
+		const { args, command } = packageExecuteCommands(packageManager);
+		const prefix = `${command}${args.length ? ` ${args.join(" ")}` : ""}`;
+		const addCommand = c.cyan(`${prefix} ${package_default.name}@latest add`);
+		const diffCommand = c.cyan(`${prefix} ${package_default.name}@latest diff`);
 		spinner.start("Validating directory");
 		await validateDir(cwd$2);
 		spinner.succeed("Validated directory");
 		spinner.start("Fetching config");
 		const config$1 = await getConfig(cwd$2, configPath);
-		console.log(config$1);
 		spinner.succeed("Fetched config");
+		const componentNames = [];
+		spinner.start("Getting generated components");
+		const generatedNameMap = await getGeneratedNameMap(config$1);
+		const generatedNames = Object.values(generatedNameMap).flat();
+		spinner.succeed("Got generated components");
+		if (componentName) if (generatedNames.includes(componentName)) componentNames.push(componentName);
+		else throw new Error([
+			`No ${c.yellow(componentName)} found in generated components.`,
+			`Please run ${addCommand} ${c.green(componentName)}`,
+			"to add it."
+		].join(" "));
+		else componentNames.push(...generatedNames);
+		if (!componentNames.length) throw new Error([
+			"No components found.",
+			`Please run ${addCommand} ${c.green("<component>")}`,
+			"to add components."
+		].join(" "));
+		const { data, registries } = await getData(componentNames, config$1);
+		const changes = await getDiff(generatedNames, data, registries, config$1);
+		const hasChanges = Object.keys(changes).length;
+		console.log("---------------------------------");
+		if (!hasChanges) console.log(c.cyan("No updates found."));
+		else if (componentName) {
+			const diff$1 = changes[componentName];
+			if (!diff$1) return;
+			Object.entries(diff$1).forEach(([fileName, diff$2], index) => {
+				if (!!index) console.log("");
+				console.log(`- ${c.cyan(fileName)}`);
+				console.log("");
+				diff$2.forEach(({ added, removed, value }) => {
+					if (added) return process.stdout.write(c.green(value));
+					else if (removed) return process.stdout.write(c.red(value));
+					else if (detail) return process.stdout.write(value);
+				});
+			});
+		} else {
+			componentNames.forEach((name$1) => {
+				const diff$1 = changes[name$1];
+				if (!diff$1) return;
+				console.log(`- ${name$1}`);
+				Object.entries(diff$1).forEach(([fileName, diff$2]) => {
+					const added = diff$2.reduce((prev, { added: added$1, count }) => {
+						if (added$1) return prev + count;
+						return prev;
+					}, 0);
+					const removed = diff$2.reduce((prev, { count, removed: removed$1 }) => {
+						if (removed$1) return prev + count;
+						return prev;
+					}, 0);
+					console.log(`  - ${c.cyan(fileName)} ${c.green(added)} insertions ${c.red(removed)} deletions`);
+				});
+			});
+			console.log("");
+			console.log(boxen([
+				"Run",
+				c.cyan(diffCommand),
+				c.green("<component>"),
+				"to see the changes."
+			].join(" "), {
+				borderColor: "yellow",
+				borderStyle: "round",
+				padding: 1,
+				textAlignment: "center"
+			}));
+		}
 		end();
 	} catch (e) {
 		if (e instanceof Error) spinner.fail(e.message);
@@ -6045,7 +6194,7 @@ const init = new Command("init").description("Initialize your project and instal
 				type: "confirm",
 				name: "overwrite",
 				initial: false,
-				message: c.reset(`The ${c.yellow(outdir)} directory already exists. Do you want to overwrite it?`)
+				message: c.reset([`The ${c.yellow(outdir)} directory already exists.`, "Do you want to overwrite it?"].join(" "))
 			});
 			if (!overwrite$1) process.exit(0);
 			spinner.start("Clearing directory");
@@ -6141,7 +6290,7 @@ const init = new Command("init").description("Initialize your project and instal
 					type: "confirm",
 					name: "install",
 					initial: true,
-					message: c.reset(`The following dependencies are not installed: ${colorizedNames.join(", ")}. Do you want to install them?`)
+					message: c.reset([`The following dependencies are not installed: ${colorizedNames.join(", ")}.`, "Do you want to install them?"].join(" "))
 				});
 				if (install) {
 					dependencies$1 = notInstalledDependencies.map(getPackageName);
@@ -6151,21 +6300,25 @@ const init = new Command("init").description("Initialize your project and instal
 		}
 		if (dependencies$1 || devDependencies$1) {
 			spinner.start("Installing dependencies");
-			if (dependencies$1) installDependencies(dependencies$1, { cwd: cwd$2 });
-			if (devDependencies$1) installDependencies(devDependencies$1, {
+			if (dependencies$1) await installDependencies(dependencies$1, { cwd: cwd$2 });
+			if (devDependencies$1) await installDependencies(devDependencies$1, {
 				cwd: cwd$2,
 				dev: true
 			});
-			if (monorepo) installDependencies(["@yamada-ui/react@dev"], { cwd: outdirPath });
+			if (monorepo) await installDependencies(["@yamada-ui/react@dev"], { cwd: outdirPath });
 			spinner.succeed("Installed dependencies");
 		}
 		if (monorepo) {
 			const packageManager = getPackageManager();
-			const command = packageAddCommand(packageManager);
-			console.log(boxen(`Run ${c.cyan(`${command} "${packageName}@workspace:*"`)} in your application.`, {
+			const args = packageAddArgs(packageManager);
+			console.log("");
+			console.log(boxen([
+				"Run",
+				c.cyan(`${packageManager} ${args.join(" ")} "${packageName}@workspace:*"`),
+				"in your application."
+			].join(" "), {
 				borderColor: "yellow",
 				borderStyle: "round",
-				margin: 1,
 				padding: 1,
 				textAlignment: "center"
 			}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@yamada-ui/cli",
   "type": "module",
-  "version": "2.0.0-dev-20250816072830",
+  "version": "2.0.0-dev-20250817141319",
   "description": "The official CLI for Yamada UI projects",
   "keywords": [
     "theme",
@@ -41,8 +41,10 @@
     "cli-check-node": "^1.3.4",
     "cli-handle-unhandled": "^1.1.2",
     "commander": "^14.0.0",
+    "diff": "^8.0.2",
     "esbuild": "^0.25.8",
     "eslint": "^9.32.0",
+    "execa": "9.3.1",
     "glob": "^11.0.3",
     "https-proxy-agent": "^7.0.6",
     "listr2": "^9.0.1",