feat: add vite-plugin-devtools-json addon (#581)

jycouet · manuel3108 · web-flow · commit 102a536923ca · 2025-06-19T04:54:04.000+02:00
* adding vite-plugin-devtools-json * fix a typo * adding a tests * back to kit * check if my tests are affecting the thing ? * Revert "check if my tests are affecting the thing ?" This reverts commit 0aec23c. * also supporting vite project * Update .changeset/twelve-shirts-tell.md Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update documentation/docs/30-add-ons/60-vite-plugin-devtools-json .md Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update packages/addons/vite-plugin-devtools-json/index.ts Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * Update packages/addons/vite-plugin-devtools-json/index.ts Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> * update namings * chromium-devtools -> devtools-json (while waiting for better thing) * Update the description of the plugin to help doc search * using vite-plugin-devtools-json@0.2.0 to have it working for WSL users * adding defaultSelection fn in setup phase * minor tweaks * ordering --------- Co-authored-by: Manuel <30698007+manuel3108@users.noreply.github.com> Co-authored-by: Manuel Serret <mserret99@gmail.com>
diff --git a/.changeset/twelve-shirts-tell.md b/.changeset/twelve-shirts-tell.md
@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: add `devtools-json` addon (using `vite-plugin-devtools-json`)
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -70,7 +70,7 @@ Run package specific tests by specifying a project flag to the package and runni
 pnpm test --project core # addons / create / migrate / etc.
 ```
 
-To run a individual test. `cd` into the package. Run the local `test` script to that package, with a path arg to the individual peice you want tested. Eg:
+To run a individual test. `cd` into the package. Run the local `test` script to that package, with a path arg to the individual piece you want tested. Eg:
 ```bash
 pnpm test [path-to-test]
 ```
diff --git a/documentation/docs/20-commands/20-sv-add.md b/documentation/docs/20-commands/20-sv-add.md
@@ -38,3 +38,4 @@ You can select multiple space-separated add-ons from [the list below](#Official-
 - [`sveltekit-adapter`](sveltekit-adapter)
 - [`tailwindcss`](tailwind)
 - [`vitest`](vitest)
+- [`devtools-json`](devtools-json)
diff --git a/documentation/docs/30-add-ons/60-devtools-json.md b/documentation/docs/30-add-ons/60-devtools-json.md
@@ -0,0 +1,21 @@
+---
+title: devtools-json
+---
+
+`devtools-json` is essentially a vite plugin [vite-plugin-devtools-json](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) for generating the Chrome DevTools project settings file on-the-fly in the devserver.
+
+It will prevent this server log:
+
+```sh
+Not found: /.well-known/appspecific/com.chrome.devtools.json
+```
+
+## Usage
+
+```bash
+npx sv add devtools-json
+```
+
+## What you get
+
+- the `vite` plugin added to your vite plugin options.
diff --git a/packages/addons/_config/official.ts b/packages/addons/_config/official.ts
@@ -1,14 +1,15 @@
 import type { AddonWithoutExplicitArgs } from '@sveltejs/cli-core';
 
+import devtoolsJson from '../devtools-json/index.ts';
 import drizzle from '../drizzle/index.ts';
 import eslint from '../eslint/index.ts';
-import sveltekitAdapter from '../sveltekit-adapter/index.ts';
 import lucia from '../lucia/index.ts';
 import mdsvex from '../mdsvex/index.ts';
 import paraglide from '../paraglide/index.ts';
 import playwright from '../playwright/index.ts';
 import prettier from '../prettier/index.ts';
 import storybook from '../storybook/index.ts';
+import sveltekitAdapter from '../sveltekit-adapter/index.ts';
 import tailwindcss from '../tailwindcss/index.ts';
 import vitest from '../vitest-addon/index.ts';
 
@@ -21,6 +22,7 @@ export const officialAddons = [
 	playwright,
 	tailwindcss,
 	sveltekitAdapter,
+	devtoolsJson,
 	drizzle,
 	lucia,
 	mdsvex,
diff --git a/packages/addons/_tests/devtools-json/test.ts b/packages/addons/_tests/devtools-json/test.ts
@@ -0,0 +1,50 @@
+import { expect } from '@playwright/test';
+import { setupTest } from '../_setup/suite.ts';
+import devtoolsJson from '../../devtools-json/index.ts';
+import fs from 'node:fs';
+import path from 'node:path';
+
+const { test, variants, prepareServer } = setupTest({ devtoolsJson } as {
+	devtoolsJson?: typeof devtoolsJson;
+});
+
+test.concurrent.for(variants)('default - %s', async (variant, { page, ...ctx }) => {
+	const cwd = await ctx.run(variant, { devtoolsJson: {} });
+
+	const { close } = await prepareServer({ cwd, page });
+	// kill server process when we're done
+	ctx.onTestFinished(async () => await close());
+
+	const ext = variant.includes('ts') ? 'ts' : 'js';
+	const viteFile = path.resolve(cwd, `vite.config.${ext}`);
+	const viteContent = fs.readFileSync(viteFile, 'utf8');
+
+	// Check if we have the import part
+	expect(viteContent).toContain(`import devtoolsJson from`);
+	expect(viteContent).toContain(`vite-plugin-devtools-json`);
+
+	// Check if it's called
+	expect(viteContent).toContain(`devtoolsJson()`);
+});
+
+test.concurrent.for(variants)(
+	'without selecting the addon specifically - %s',
+	async (variant, { page, ...ctx }) => {
+		const cwd = await ctx.run(variant, {});
+
+		const { close } = await prepareServer({ cwd, page });
+		// kill server process when we're done
+		ctx.onTestFinished(async () => await close());
+
+		const ext = variant.includes('ts') ? 'ts' : 'js';
+		const viteFile = path.resolve(cwd, `vite.config.${ext}`);
+		const viteContent = fs.readFileSync(viteFile, 'utf8');
+
+		// Check if we have the import part
+		expect(viteContent).toContain(`import devtoolsJson from`);
+		expect(viteContent).toContain(`vite-plugin-devtools-json`);
+
+		// Check if it's called
+		expect(viteContent).toContain(`devtoolsJson()`);
+	}
+);
diff --git a/packages/addons/devtools-json/index.ts b/packages/addons/devtools-json/index.ts
@@ -0,0 +1,40 @@
+import { defineAddon } from '@sveltejs/cli-core';
+import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js';
+import { parseScript } from '@sveltejs/cli-core/parsers';
+
+export default defineAddon({
+	id: 'devtools-json',
+	shortDescription: 'devtools json',
+	homepage: 'https://github.com/ChromeDevTools/vite-plugin-devtools-json',
+	options: {},
+
+	setup: ({ defaultSelection }) => {
+		defaultSelection({
+			create: true,
+			add: false
+		});
+	},
+
+	run: ({ sv, typescript }) => {
+		const ext = typescript ? 'ts' : 'js';
+
+		sv.devDependency('vite-plugin-devtools-json', '^0.2.0');
+
+		// add the vite plugin
+		sv.file(`vite.config.${ext}`, (content) => {
+			const { ast, generateCode } = parseScript(content);
+
+			const vitePluginName = 'devtoolsJson';
+			imports.addDefault(ast, 'vite-plugin-devtools-json', vitePluginName);
+
+			const { value: rootObject } = exports.defaultExport(ast, functions.call('defineConfig', []));
+			const param1 = functions.argumentByIndex(rootObject, 0, object.createEmpty());
+
+			const pluginsArray = object.property(param1, 'plugins', array.createEmpty());
+			const pluginFunctionCall = functions.call(vitePluginName, []);
+			array.push(pluginsArray, pluginFunctionCall);
+
+			return generateCode();
+		});
+	}
+});
diff --git a/packages/cli/commands/add/index.ts b/packages/cli/commands/add/index.ts
@@ -201,15 +201,16 @@ export const add = new Command('add')
 
 		common.runCommand(async () => {
 			const selectedAddonIds = selectedAddons.map(({ id }) => id);
-			const { nextSteps } = await runAddCommand(options, selectedAddonIds);
-			if (nextSteps) p.note(nextSteps, 'Next steps', { format: (line) => line });
+			const { nextSteps } = await runAddCommand(options, selectedAddonIds, 'add');
+			if (nextSteps) p.note(nextSteps, 'Next steps', { format: (line: string) => line });
 		});
 	});
 
 type SelectedAddon = { type: 'official' | 'community'; addon: AddonWithoutExplicitArgs };
 export async function runAddCommand(
 	options: Options,
-	selectedAddonIds: string[]
+	selectedAddonIds: string[],
+	from: 'create' | 'add'
 ): Promise<{ nextSteps?: string; packageManager?: AgentName | null }> {
 	const selectedAddons: SelectedAddon[] = selectedAddonIds.map((id) => ({
 		type: 'official',
@@ -390,6 +391,11 @@ export async function runAddCommand(
 	const setups = selectedAddons.length ? selectedAddons.map(({ addon }) => addon) : officialAddons;
 	const addonSetupResults = setupAddons(setups, workspace);
 
+	// get all addons that have been marked to be preselected
+	const initialValues = Object.entries(addonSetupResults)
+		.filter(([_, value]) => value.defaultSelection[from] === true)
+		.map(([key]) => key);
+
 	// prompt which addons to apply
 	if (selectedAddons.length === 0) {
 		const addonOptions = officialAddons
@@ -404,7 +410,8 @@ export async function runAddCommand(
 		const selected = await p.multiselect({
 			message: `What would you like to add to your project? ${pc.dim('(use arrow keys / space bar)')}`,
 			options: addonOptions,
-			required: false
+			required: false,
+			initialValues
 		});
 		if (p.isCancel(selected)) {
 			p.cancel('Operation cancelled.');
diff --git a/packages/cli/commands/create.ts b/packages/cli/commands/create.ts
@@ -184,7 +184,8 @@ async function createProject(cwd: ProjectPath, options: Options) {
 				community: [],
 				addons: {}
 			},
-			[]
+			[],
+			'create'
 		);
 		packageManager = pm;
 		addOnNextSteps = nextSteps;
diff --git a/packages/cli/lib/install.ts b/packages/cli/lib/install.ts
@@ -87,15 +87,23 @@ export function setupAddons(
 	const addonSetupResults: Record<string, AddonSetupResult> = {};
 
 	for (const addon of addons) {
-		const setupResult: AddonSetupResult = { unsupported: [], dependsOn: [], runsAfter: [] };
+		const setupResult: AddonSetupResult = {
+			unsupported: [],
+			dependsOn: [],
+			runsAfter: [],
+			defaultSelection: { create: false, add: false }
+		};
 		addon.setup?.({
 			...workspace,
 			dependsOn: (name) => {
 				setupResult.dependsOn.push(name);
 				setupResult.runsAfter.push(name);
 			},
 			unsupported: (reason) => setupResult.unsupported.push(reason),
-			runsAfter: (name) => setupResult.runsAfter.push(name)
+			runsAfter: (name) => setupResult.runsAfter.push(name),
+			defaultSelection: (defaultSelection) => {
+				setupResult.defaultSelection = defaultSelection;
+			}
 		});
 		addonSetupResults[addon.id] = setupResult;
 	}
diff --git a/packages/core/addon/config.ts b/packages/core/addon/config.ts
@@ -38,6 +38,7 @@ export type Addon<Args extends OptionDefinition> = {
 			dependsOn: (name: string) => void;
 			unsupported: (reason: string) => void;
 			runsAfter: (addonName: string) => void;
+			defaultSelection: (args: { create: boolean; add: boolean }) => void;
 		}
 	) => MaybePromise<void>;
 	run: (workspace: Workspace<Args> & { sv: SvApi }) => MaybePromise<void>;
@@ -60,7 +61,12 @@ export function defineAddon<Args extends OptionDefinition>(config: Addon<Args>):
 	return config;
 }
 
-export type AddonSetupResult = { dependsOn: string[]; unsupported: string[]; runsAfter: string[] };
+export type AddonSetupResult = {
+	dependsOn: string[];
+	unsupported: string[];
+	runsAfter: string[];
+	defaultSelection: { create: boolean; add: boolean };
+};
 
 export type AddonWithoutExplicitArgs = Addon<Record<string, Question>>;
 export type AddonConfigWithoutExplicitArgs = Addon<Record<string, Question>>;

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'sv': patch
 +---
++
 +feat: add `devtools-json` addon (using `vite-plugin-devtools-json`)