feat: add vite-plugin-devtools-json addon

.changeset/twelve-shirts-tell.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+add vite-plugin-devtools-json addon

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/30-add-ons/60-vite-plugin-devtools-json .md

@@ -0,0 +1,15 @@
+---
+title: vite-plugin-devtools-json
+---
+
+[vite-plugin-devtools-json](https://github.com/ChromeDevTools/vite-plugin-devtools-json/) is a Vite plugin for generating the Chrome DevTools project settings file on-the-fly in the devserver.
+
+## Usage
+
+```bash
+npx sv add vite-plugin-devtools-json
+```
+
+## What you get
+
+- the plugin added to your vite plugin options.

packages/addons/_config/official.ts

@@ -10,6 +10,7 @@ import playwright from '../playwright/index.ts';
 import prettier from '../prettier/index.ts';
 import storybook from '../storybook/index.ts';
 import tailwindcss from '../tailwindcss/index.ts';
+import vitePluginDevtoolsJson from '../vite-plugin-devtools-json/index.ts';
 import vitest from '../vitest-addon/index.ts';
 
 // The order of addons here determines the order they are displayed inside the CLI
@@ -25,7 +26,8 @@ export const officialAddons = [
 	lucia,
 	mdsvex,
 	paraglide,
-	storybook
+	storybook,
+	vitePluginDevtoolsJson
 ] as AddonWithoutExplicitArgs[];
 
 export function getAddonDetails(id: string): AddonWithoutExplicitArgs {

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

@@ -0,0 +1,26 @@
+import { expect } from '@playwright/test';
+import { setupTest } from '../_setup/suite.ts';
+import devtoolsJson from '../../vite-plugin-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/vite-plugin-devtools-json/index.ts

@@ -0,0 +1,34 @@
+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: 'vite-plugin-devtools-json',
+	alias: 'devtools-json',
+	shortDescription: 'Generate DevTools project settings in the devserver',
+	homepage: 'https://github.com/ChromeDevTools/vite-plugin-devtools-json',
+	options: {},
+
+	run: ({ sv, typescript }) => {
+		const ext = typescript ? 'ts' : 'js';
+
+		sv.dependency('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();
+		});
+	}
+});