feat(vitest): 3 to 4 next steps (#797)

Author: jycouet

.changeset/ripe-lines-beg.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat(vitest): when `add vitest` is used within a project that uses vitest@3, the addon will display some next steps to finalize the migration to vitest@4

packages/addons/vitest-addon/index.ts

@@ -15,16 +15,25 @@ const options = defineAddonOptions()
 	})
 	.build();
 
+// Manage only version before current
+let vitestV3Installed = false;
+
 export default defineAddon({
 	id: 'vitest',
 	shortDescription: 'unit testing',
 	homepage: 'https://vitest.dev',
 	options,
-	run: ({ sv, files, typescript, kit, options }) => {
+
+	run: ({ sv, files, typescript, kit, options, dependencyVersion }) => {
 		const ext = typescript ? 'ts' : 'js';
 		const unitTesting = options.usages.includes('unit');
 		const componentTesting = options.usages.includes('component');
 
+		vitestV3Installed = (dependencyVersion('vitest') ?? '')
+			.replaceAll('^', '')
+			.replaceAll('~', '')
+			?.startsWith('3.');
+
 		sv.devDependency('vitest', '^4.0.10');
 
 		if (componentTesting) {
@@ -149,5 +158,27 @@ export default defineAddon({
 
 			return generateCode();
 		});
+	},
+
+	nextSteps: ({ highlighter, typescript, options }) => {
+		const toReturn: string[] = [];
+
+		if (vitestV3Installed) {
+			const componentTesting = options.usages.includes('component');
+			if (componentTesting) {
+				toReturn.push(`Uninstall ${highlighter.command('@vitest/browser')} package`);
+				toReturn.push(
+					`Update usage from ${highlighter.command("'@vitest/browser...'")} to ${highlighter.command("'vitest/browser'")}`
+				);
+			}
+			toReturn.push(
+				`${highlighter.optional('Optional')} Check ${highlighter.path('./vite.config.ts')} and remove duplicate project definitions`
+			);
+			toReturn.push(
+				`${highlighter.optional('Optional')} Remove ${highlighter.path('./vitest-setup-client' + (typescript ? '.ts' : '.js'))} file`
+			);
+		}
+
+		return toReturn;
 	}
 });

packages/cli/commands/add/utils.ts

@@ -123,6 +123,7 @@ export function getHighlighter(): Highlighter {
 		env: (str) => pc.yellow(str),
 		path: (str) => pc.green(str),
 		route: (str) => pc.bold(str),
-		website: (str) => pc.whiteBright(str)
+		website: (str) => pc.whiteBright(str),
+		optional: (str) => pc.gray(str)
 	};
 }

packages/core/addon/config.ts

@@ -56,6 +56,7 @@ export type Highlighter = {
 	website: (str: string) => string;
 	route: (str: string) => string;
 	env: (str: string) => string; // used for printing environment variable names
+	optional: (str: string) => string;
 };
 
 export function defineAddon<Args extends OptionDefinition>(config: Addon<Args>): Addon<Args> {