Added Option to Automatically Add Vitest to New Projects using svelte-create

.changeset/dirty-teachers-hug.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+Added the option to add Vitest to new projects

packages/create-svelte/bin.js

@@ -110,6 +110,14 @@ async function main() {
 					initial: false,
 					active: 'Yes',
 					inactive: 'No'
+				},
+				{
+					type: 'toggle',
+					name: 'vitest',
+					message: 'Add Vitest for unit testing?',
+					initial: false,
+					active: 'Yes',
+					inactive: 'No'
 				}
 			],
 			{
@@ -150,6 +158,11 @@ async function main() {
 		console.log(cyan('  https://playwright.dev'));
 	}
 
+	if (options.vitest) {
+		console.log(bold('✔ Vitest'));
+		console.log(cyan('  https://vitest.dev'));
+	}
+
 	console.log('\nInstall community-maintained integrations:');
 	console.log(cyan('  https://github.com/svelte-add/svelte-adders'));
 

packages/create-svelte/scripts/build-templates.js

@@ -206,22 +206,41 @@ async function generate_shared() {
 		}
 
 		if (name.endsWith('.ts') && !include.includes('typescript')) {
+			// file includes types in TypeScript and JSDoc —
+			// create .js file, with and without JSDoc
+			const js = convert_typescript(contents);
 			const js_name = name.replace(/\.ts$/, '.js');
-			shared.add(js_name);
 
+			// typescript
 			files.push({
-				name: js_name,
-				include: [...include],
-				exclude: [...exclude, 'typescript'],
-				contents: convert_typescript(contents)
+				name,
+				include: [...include, 'typescript'],
+				exclude,
+				contents: strip_jsdoc(contents)
 			});
 
-			include.push('typescript');
-		}
+			// checkjs
+			files.push({
+				name: js_name,
+				include: [...include, 'checkjs'],
+				exclude,
+				contents: js
+			});
 
-		shared.add(name);
+			// no typechecking
+			files.push({
+				name: js_name,
+				include,
+				exclude: [...exclude, 'typescript', 'checkjs'],
+				contents: strip_jsdoc(js)
+			});
 
-		files.push({ name, include, exclude, contents });
+			shared.add(name);
+			shared.add(js_name);
+		} else {
+			shared.add(name);
+			files.push({ name, include, exclude, contents });
+		}
 	});
 
 	files.sort((a, b) => a.include.length + a.exclude.length - (b.include.length + b.exclude.length));

packages/create-svelte/scripts/update-template-repo-contents.js

@@ -19,5 +19,6 @@ await create(repo, {
 	eslint: false,
 	types: 'checkjs',
 	prettier: true,
-	playwright: false
+	playwright: false,
+	vitest: false
 });

packages/create-svelte/shared/+vitest+checkjs/jsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"types": ["vitest/globals"],
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}

packages/create-svelte/shared/+vitest+playwright+typescript/playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testMatch: 'tests/**/*.{js,ts}'
+};
+
+export default config;

packages/create-svelte/shared/+vitest+playwright-typescript/playwright.config.js

@@ -0,0 +1,10 @@
+/** @type {import('@playwright/test').PlaywrightTestConfig} */
+const config = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testMatch: 'tests/**/*.js'
+};
+
+export default config;

packages/create-svelte/shared/+vitest+typescript/tsconfig.json

@@ -0,0 +1,14 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"types": ["vitest/globals"],
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true
+	}
+}

packages/create-svelte/shared/+vitest/package.json

@@ -0,0 +1,8 @@
+{
+	"devDependencies": {
+		"vitest": "^0.19.1"
+	},
+	"scripts": {
+		"test:unit": "vitest"
+	}
+}

packages/create-svelte/shared/+vitest/src/lib/sum.test.ts

@@ -0,0 +1,7 @@
+import { sum } from './sum';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(sum(1, 2)).toBe(3);
+	});
+});

packages/create-svelte/shared/+vitest/src/lib/sum.ts

@@ -0,0 +1,8 @@
+/**
+ * Add two numbers
+ * @param {number} a
+ * @param {number} b
+ */
+export function sum(a: number, b: number): number {
+	return a + b;
+}

packages/create-svelte/shared/+vitest/vite.config.js

@@ -0,0 +1,12 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test}.{js,ts}'],
+		globals: true
+	}
+};
+
+export default config;

packages/create-svelte/shared/-vitest/vite.config.js

@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+
+/** @type {import('vite').UserConfig} */
+const config = {
+	plugins: [sveltekit()]
+};
+
+export default config;

packages/create-svelte/types/internal.d.ts

@@ -5,6 +5,7 @@ export type Options = {
 	prettier: boolean;
 	eslint: boolean;
 	playwright: boolean;
+	vitest: boolean;
 };
 
 export type File = {
@@ -18,6 +19,7 @@ export type Condition =
 	| 'typescript'
 	| 'checkjs'
 	| 'playwright'
+	| 'vitest'
 	| 'skeleton'
 	| 'default';