feat: add vite-plugin-devtools-json addon

.changeset/twelve-shirts-tell.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: add `devtools-json` addon (using `vite-plugin-devtools-json`)

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]
 ```

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)

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.

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';
 
@@ -25,7 +26,8 @@ export const officialAddons = [
 	lucia,
 	mdsvex,
 	paraglide,
-	storybook
+	storybook,
+	devtoolsJson
 ] as AddonWithoutExplicitArgs[];
 
 export function getAddonDetails(id: string): AddonWithoutExplicitArgs {

packages/addons/_tests/devtools-json/test.ts

@@ -0,0 +1,26 @@
+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 });
+
+test.concurrent.for(variants)('core - %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()`);
+});

packages/addons/devtools-json/index.ts

@@ -0,0 +1,33 @@
+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: {},
+
+	run: ({ sv, typescript }) => {
+		const ext = typescript ? 'ts' : 'js';
+
+		sv.devDependency('vite-plugin-devtools-json', '^0.1.1');
+
+		// 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();
+		});
+	}
+});