react-doctor 0.1.3 → 0.1.4

package/dist/cli.js

@@ -214,7 +214,7 @@ const finalize = (method, originalText, displayText) => {
 	sharedInstance.stop();
 	ora({
 		text: displayText,
-		indent: 2
+		indent: 0
 	}).start()[method](displayText);
 	const [remainingText] = pendingTexts;
 	if (remainingText) sharedInstance.text = remainingText;
@@ -226,7 +226,7 @@ const spinner = (text) => ({ start() {
 	pendingTexts.add(text);
 	if (!sharedInstance) sharedInstance = ora({
 		text,
-		indent: 2
+		indent: 0
 	}).start();
 	else sharedInstance.text = text;
 	const handle = {
@@ -304,28 +304,6 @@ const runInstallSkill = async (options = {}) => {
 	}
 };
 //#endregion
-//#region src/utils/build-category-breakdown.ts
-const buildCategoryBreakdown = (diagnostics) => {
-	const entriesByCategory = /* @__PURE__ */ new Map();
-	for (const diagnostic of diagnostics) {
-		const existingEntry = entriesByCategory.get(diagnostic.category) ?? {
-			category: diagnostic.category,
-			totalCount: 0,
-			errorCount: 0,
-			warningCount: 0
-		};
-		existingEntry.totalCount += 1;
-		if (diagnostic.severity === "error") existingEntry.errorCount += 1;
-		else existingEntry.warningCount += 1;
-		entriesByCategory.set(diagnostic.category, existingEntry);
-	}
-	return [...entriesByCategory.values()].sort((entryA, entryB) => {
-		if (entryA.errorCount !== entryB.errorCount) return entryB.errorCount - entryA.errorCount;
-		if (entryA.totalCount !== entryB.totalCount) return entryB.totalCount - entryA.totalCount;
-		return entryA.category.localeCompare(entryB.category);
-	});
-};
-//#endregion
 //#region src/utils/build-hidden-diagnostics-summary.ts
 const buildHiddenDiagnosticsSummary = (hiddenDiagnostics) => {
 	const errorCount = hiddenDiagnostics.filter((diagnostic) => diagnostic.severity === "error").length;
@@ -1675,6 +1653,32 @@ const loadConfig = (rootDirectory) => {
 	return null;
 };
 //#endregion
+//#region src/utils/wrap-indented-text.ts
+const wrapLine = (lineText, contentWidth) => {
+	if (lineText.length <= contentWidth) return [lineText];
+	const wrappedLines = [];
+	let remainingText = lineText.trim();
+	while (remainingText.length > contentWidth) {
+		const candidateText = remainingText.slice(0, contentWidth);
+		const breakIndex = candidateText.lastIndexOf(" ");
+		if (breakIndex <= 0) {
+			wrappedLines.push(candidateText);
+			remainingText = remainingText.slice(contentWidth).trimStart();
+			continue;
+		}
+		wrappedLines.push(remainingText.slice(0, breakIndex));
+		remainingText = remainingText.slice(breakIndex + 1).trimStart();
+	}
+	if (remainingText.length > 0) wrappedLines.push(remainingText);
+	return wrappedLines;
+};
+const wrapIndentedText = (text, linePrefix, width) => {
+	const contentWidth = width - linePrefix.length;
+	if (contentWidth <= 0) return indentOnly(text, linePrefix);
+	return text.split("\n").flatMap((lineText) => wrapLine(lineText, contentWidth)).map((lineText) => `${linePrefix}${lineText}`).join("\n");
+};
+const indentOnly = (text, linePrefix) => text.split("\n").map((lineText) => `${linePrefix}${lineText}`).join("\n");
+//#endregion
 //#region src/utils/resolve-compatible-node.ts
 const parseNodeVersion = (versionString) => {
 	const [major = 0, minor = 0, patch = 0] = versionString.replace(/^v/, "").trim().split(".").map(Number);
@@ -3154,6 +3158,7 @@ const parseOxlintOutput = (stdout) => {
 			severity: diagnostic.severity,
 			message: cleaned.message,
 			help: cleaned.help,
+			url: diagnostic.url,
 			line: primaryLabel?.span.line ?? 0,
 			column: primaryLabel?.span.column ?? 0,
 			category: resolveDiagnosticCategory(plugin, rule)
@@ -3285,6 +3290,11 @@ const buildVerboseSiteMap = (diagnostics) => {
 	return fileSites;
 };
 const formatSiteCountBadge = (count) => count > 1 ? `×${count}` : "";
+const formatIssueCount = (count) => `${count} ${count === 1 ? "issue" : "issues"}`;
+const toRuleTitle = (ruleName) => {
+	const readableRuleName = ruleName.replace(/^(no|prefer|require|use)-/, "").replace(/^(nextjs|tanstack-start)-/, "").replaceAll("-", " ");
+	return (readableRuleName.charAt(0).toUpperCase() + readableRuleName.slice(1)).replace(/\b(css|html|url|svg|jsx|api|ua)\b/gi, (match) => match.toUpperCase());
+};
 const computeRuleNameColumnWidth = (ruleKeys) => {
 	const longestRuleNameLength = ruleKeys.reduce((longest, ruleKey) => Math.max(longest, ruleKey.length), 0);
 	return Math.max(36, longestRuleNameLength);
@@ -3296,6 +3306,9 @@ const padRuleNameToColumn = (ruleName, columnWidth) => {
 const grayLine = (text) => {
 	logger.log(highlighter.gray(text));
 };
+const grayWrappedLine = (text, linePrefix) => {
+	grayLine(wrapIndentedText(text, linePrefix, 88));
+};
 const printCompactRuleGroupLine = (ruleKey, ruleDiagnostics, ruleNameColumnWidth) => {
 	const firstDiagnostic = ruleDiagnostics[0];
 	const icon = colorizeBySeverity(firstDiagnostic.severity === "error" ? "✗" : "⚠", firstDiagnostic.severity);
@@ -3304,13 +3317,38 @@ const printCompactRuleGroupLine = (ruleKey, ruleDiagnostics, ruleNameColumnWidth
 	const trailingBadge = siteCountBadge.length > 0 ? ` ${highlighter.gray(siteCountBadge)}` : "";
 	logger.log(`  ${icon} ${ruleNameRendering}${trailingBadge}`);
 };
-const printDetailedRuleGroup = (ruleKey, ruleDiagnostics, rootDirectory, ruleNameColumnWidth) => {
-	printCompactRuleGroupLine(ruleKey, ruleDiagnostics, ruleNameColumnWidth);
+const getWorstSeverity = (diagnostics) => diagnostics.some((diagnostic) => diagnostic.severity === "error") ? "error" : "warning";
+const buildCategoryDiagnosticGroups = (diagnostics) => {
+	return [...groupBy(diagnostics, (diagnostic) => diagnostic.category).entries()].map(([category, categoryDiagnostics]) => {
+		return {
+			category,
+			diagnostics: categoryDiagnostics,
+			ruleGroups: sortByImportance([...groupBy(categoryDiagnostics, (diagnostic) => `${diagnostic.plugin}/${diagnostic.rule}`).entries()])
+		};
+	}).toSorted((categoryGroupA, categoryGroupB) => {
+		const severityDelta = SEVERITY_ORDER[getWorstSeverity(categoryGroupA.diagnostics)] - SEVERITY_ORDER[getWorstSeverity(categoryGroupB.diagnostics)];
+		if (severityDelta !== 0) return severityDelta;
+		if (categoryGroupA.diagnostics.length !== categoryGroupB.diagnostics.length) return categoryGroupB.diagnostics.length - categoryGroupA.diagnostics.length;
+		return categoryGroupA.category.localeCompare(categoryGroupB.category);
+	});
+};
+const printDefaultRuleGroup = (ruleKey, ruleDiagnostics, rootDirectory) => {
 	const firstDiagnostic = ruleDiagnostics[0];
-	grayLine(indentMultilineText(firstDiagnostic.message, "      "));
-	if (firstDiagnostic.help) grayLine(indentMultilineText(`→ ${firstDiagnostic.help}`, "      "));
+	const ruleTitle = toRuleTitle(firstDiagnostic.rule);
+	const icon = colorizeBySeverity(firstDiagnostic.severity === "error" ? "✗" : "⚠", firstDiagnostic.severity);
+	const siteCountBadge = formatSiteCountBadge(ruleDiagnostics.length);
+	const trailingBadge = siteCountBadge.length > 0 ? ` ${highlighter.gray(siteCountBadge)}` : "";
+	logger.log(`  ${icon} ${ruleTitle}${trailingBadge}`);
+	grayWrappedLine(firstDiagnostic.message, "    ");
+	if (firstDiagnostic.help) grayWrappedLine(firstDiagnostic.help, "    ");
+	if (firstDiagnostic.url) grayLine(`    ${firstDiagnostic.url}`);
 	const firstLocation = ruleDiagnostics.find((diagnostic) => diagnostic.line > 0);
-	if (firstLocation) grayLine(`      ${toRelativePath(firstLocation.filePath, rootDirectory)}:${firstLocation.line}`);
+	if (firstLocation) grayLine(`    ${toRelativePath(firstLocation.filePath, rootDirectory)}:${firstLocation.line}`);
+};
+const printDefaultCategoryGroup = (categoryGroup, visibleRuleGroups, rootDirectory) => {
+	const issueCount = formatIssueCount(categoryGroup.diagnostics.length);
+	logger.log(`${highlighter.bold(categoryGroup.category)} ${highlighter.dim(issueCount)}`);
+	for (const [ruleKey, ruleDiagnostics] of visibleRuleGroups) printDefaultRuleGroup(ruleKey, ruleDiagnostics, rootDirectory);
 	logger.break();
 };
 const printVerboseRuleGroup = (ruleKey, ruleDiagnostics, ruleNameColumnWidth) => {
@@ -3326,22 +3364,36 @@ const printVerboseRuleGroup = (ruleKey, ruleDiagnostics, ruleNameColumnWidth) =>
 	else grayLine(`      ${filePath}`);
 	logger.break();
 };
+const printDefaultDiagnostics = (diagnostics, rootDirectory) => {
+	const categoryGroups = buildCategoryDiagnosticGroups(diagnostics);
+	const hiddenRuleGroups = [];
+	const visibleCategoryGroups = categoryGroups.slice(0, 5);
+	const hiddenCategoryGroups = categoryGroups.slice(5);
+	for (const categoryGroup of visibleCategoryGroups) {
+		const visibleRuleGroups = categoryGroup.ruleGroups.slice(0, 3);
+		const remainingRuleGroups = categoryGroup.ruleGroups.slice(3);
+		printDefaultCategoryGroup(categoryGroup, visibleRuleGroups, rootDirectory);
+		hiddenRuleGroups.push(...remainingRuleGroups);
+	}
+	hiddenRuleGroups.push(...hiddenCategoryGroups.flatMap((categoryGroup) => categoryGroup.ruleGroups));
+	if (hiddenRuleGroups.length > 0) printHiddenDiagnosticsSummary(hiddenRuleGroups);
+};
 const printDiagnostics = (diagnostics, isVerbose, rootDirectory) => {
-	const sortedRuleGroups = sortByImportance([...groupBy(diagnostics, (diagnostic) => `${diagnostic.plugin}/${diagnostic.rule}`).entries()]);
-	const visibleRuleGroups = isVerbose ? sortedRuleGroups : sortedRuleGroups.slice(0, 5);
-	const hiddenRuleGroups = isVerbose ? [] : sortedRuleGroups.slice(5);
+	if (!isVerbose) {
+		printDefaultDiagnostics(diagnostics, rootDirectory);
+		return;
+	}
+	const visibleRuleGroups = sortByImportance([...groupBy(diagnostics, (diagnostic) => `${diagnostic.plugin}/${diagnostic.rule}`).entries()]);
 	const ruleNameColumnWidth = computeRuleNameColumnWidth(visibleRuleGroups.map(([ruleKey]) => ruleKey));
 	visibleRuleGroups.forEach(([ruleKey, ruleDiagnostics]) => {
-		if (isVerbose) {
-			printVerboseRuleGroup(ruleKey, ruleDiagnostics, ruleNameColumnWidth);
-			return;
-		}
-		printDetailedRuleGroup(ruleKey, ruleDiagnostics, rootDirectory, ruleNameColumnWidth);
+		printVerboseRuleGroup(ruleKey, ruleDiagnostics, ruleNameColumnWidth);
 	});
-	if (hiddenRuleGroups.length > 0) printHiddenDiagnosticsSummary(hiddenRuleGroups);
 };
 const printHiddenDiagnosticsSummary = (hiddenRuleGroups) => {
-	const renderedParts = buildHiddenDiagnosticsSummary(hiddenRuleGroups.flatMap(([, ruleDiagnostics]) => ruleDiagnostics)).map((part) => colorizeBySeverity(part.text, part.severity));
+	const renderedParts = buildHiddenDiagnosticsSummary(hiddenRuleGroups.flatMap(([, ruleDiagnostics]) => ruleDiagnostics)).map((part) => {
+		const [icon, ...labelParts] = part.text.split(" ");
+		return `${colorizeBySeverity(icon, part.severity)} ${highlighter.dim(labelParts.join(" "))}`;
+	});
 	logger.log(`  ${renderedParts.join("  ")}`);
 	grayLine("    Run `npx react-doctor@latest . --verbose` to get all details");
 	logger.break();
@@ -3361,6 +3413,7 @@ const formatRuleSummary = (ruleKey, ruleDiagnostics) => {
 		firstDiagnostic.message
 	];
 	if (firstDiagnostic.help) sections.push("", `Suggestion: ${firstDiagnostic.help}`);
+	if (firstDiagnostic.url) sections.push("", `Docs: ${firstDiagnostic.url}`);
 	sections.push("", "Files:");
 	const fileSites = buildVerboseSiteMap(ruleDiagnostics);
 	for (const [filePath, sites] of fileSites) if (sites.length > 0) for (const site of sites) {
@@ -3432,32 +3485,6 @@ const printNoScoreHeader = (noScoreMessage) => {
 	logger.log(`  ${highlighter.gray(noScoreMessage)}`);
 	logger.break();
 };
-const buildCategoryBar = (count, maximumCount, useErrorColor) => {
-	if (maximumCount === 0) return highlighter.dim("░".repeat(16));
-	const filledCount = Math.max(1, Math.round(count / maximumCount * 16));
-	const cappedFilledCount = Math.min(filledCount, 16);
-	const emptyCount = 16 - cappedFilledCount;
-	const filledSegment = "█".repeat(cappedFilledCount);
-	const emptySegment = "░".repeat(emptyCount);
-	return `${useErrorColor ? highlighter.error(filledSegment) : highlighter.warn(filledSegment)}${highlighter.dim(emptySegment)}`;
-};
-const padCategoryLabel = (categoryLabel) => {
-	if (categoryLabel.length >= 18) return categoryLabel;
-	return categoryLabel + " ".repeat(18 - categoryLabel.length);
-};
-const printCategoryBreakdown = (entries) => {
-	if (entries.length === 0) return;
-	const maximumCount = Math.max(...entries.map((entry) => entry.totalCount));
-	logger.dim("  By category");
-	for (const entry of entries) {
-		const paddedLabel = padCategoryLabel(entry.category);
-		const categoryBar = buildCategoryBar(entry.totalCount, maximumCount, entry.errorCount > 0);
-		const totalCountDisplay = String(entry.totalCount);
-		const errorBadge = entry.errorCount > 0 ? ` ${highlighter.error(`${entry.errorCount}×`)}` : "";
-		logger.log(`    ${paddedLabel}${categoryBar} ${totalCountDisplay}${errorBadge}`);
-	}
-	logger.break();
-};
 const buildShareUrl = (diagnostics, scoreResult, projectName) => {
 	const errorCount = diagnostics.filter((diagnostic) => diagnostic.severity === "error").length;
 	const warningCount = diagnostics.filter((diagnostic) => diagnostic.severity === "warning").length;
@@ -3483,7 +3510,6 @@ const printCountsSummaryLine = (diagnostics, totalSourceFileCount, elapsedMillis
 	logger.log(`  ${issueCountColor(issueCountText)} ${highlighter.dim(`${fileCountText}  ${elapsedTimeText}`)}`);
 };
 const printSummary = (diagnostics, elapsedMilliseconds, scoreResult, projectName, totalSourceFileCount, noScoreMessage, isOffline) => {
-	printCategoryBreakdown(buildCategoryBreakdown(diagnostics));
 	if (scoreResult) printScoreHeader(scoreResult);
 	else printNoScoreHeader(noScoreMessage);
 	printCountsSummaryLine(diagnostics, totalSourceFileCount, elapsedMilliseconds);
@@ -4102,7 +4128,7 @@ const promptProjectSelection = async (workspacePackages, rootDirectory) => {
 };
 //#endregion
 //#region src/cli.ts
-const VERSION = "0.1.3";
+const VERSION = "0.1.4";
 const VALID_FAIL_ON_LEVELS = new Set([
 	"error",
 	"warning",

package/dist/eslint-plugin.js

@@ -6946,7 +6946,7 @@ const ALL_RULES_AT_RECOMMENDED_SEVERITY = {
 const eslintPlugin = {
 	meta: {
 		name: PLUGIN_NAMESPACE,
-		version: "0.1.3"
+		version: "0.1.4"
 	},
 	rules: eslintShapedRules,
 	configs: {

package/dist/index.d.ts

@@ -18,6 +18,7 @@ interface Diagnostic {
   severity: "error" | "warning";
   message: string;
   help: string;
+  url?: string;
   line: number;
   column: number;
   category: string;

package/dist/index.js

@@ -2821,6 +2821,7 @@ const parseOxlintOutput = (stdout) => {
 			severity: diagnostic.severity,
 			message: cleaned.message,
 			help: cleaned.help,
+			url: diagnostic.url,
 			line: primaryLabel?.span.line ?? 0,
 			column: primaryLabel?.span.column ?? 0,
 			category: resolveDiagnosticCategory(plugin, rule)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-doctor",
-  "version": "0.1.3",
+  "version": "0.1.4",
   "description": "Diagnose and fix React codebases for security, performance, correctness, accessibility, bundle-size, and architecture issues",
   "keywords": [
     "accessibility",