feat: add vite.addPlugin

packages/addons/devtools-json/index.ts

@@ -1,6 +1,6 @@
 import { defineAddon } from '@sveltejs/cli-core';
-import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js';
-import { parseScript } from '@sveltejs/cli-core/parsers';
+import { imports } from '@sveltejs/cli-core/js';
+import { addInArrayOfObject, addPluginToViteConfig } from '../../core/tooling/helpers.ts';
 
 export default defineAddon({
 	id: 'devtools-json',
@@ -15,26 +15,14 @@ export default defineAddon({
 
 		// add the vite plugin
 		sv.file(`vite.config.${ext}`, (content) => {
-			const { ast, generateCode } = parseScript(content);
-
-			const vitePluginName = 'devtoolsJson';
-			imports.addDefault(ast, { from: 'vite-plugin-devtools-json', as: vitePluginName });
-
-			const { value: rootObject } = exports.createDefault(ast, {
-				fallback: functions.createCall({ name: 'defineConfig', args: [] })
-			});
-
-			const param1 = functions.getArgument(rootObject, {
-				index: 0,
-				fallback: object.create({})
+			return addPluginToViteConfig(content, (ast, configObject) => {
+				const vitePluginName = 'devtoolsJson';
+				imports.addDefault(ast, { from: 'vite-plugin-devtools-json', as: vitePluginName });
+				addInArrayOfObject(configObject, {
+					array: 'plugins',
+					code: `${vitePluginName}()`
+				});
 			});
-
-			const pluginsArray = object.property(param1, { name: 'plugins', fallback: array.create() });
-			const pluginFunctionCall = functions.createCall({ name: vitePluginName, args: [] });
-
-			array.append(pluginsArray, pluginFunctionCall);
-
-			return generateCode();
 		});
 	}
 });

packages/core/tests/helpers.ts

@@ -0,0 +1,240 @@
+import { describe, expect, it } from 'vitest';
+import {
+	addPluginToViteConfig,
+	exportDefaultConfig,
+	addInArrayOfObject
+} from '../tooling/helpers.ts';
+import { parseScript } from '../tooling/parsers.ts';
+import { imports } from '../dist/js.js';
+
+const config_default = `
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});
+`;
+
+const config_w_variable = `
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+const config = defineConfig({
+	plugins: [sveltekit()]
+});
+
+export default config;
+`;
+
+const config_wo_defineConfig = `
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+
+const config: UserConfig = {
+	plugins: [sveltekit()]
+};
+
+export default config;
+`;
+
+describe('helpers', () => {
+	describe('getConfigObject', () => {
+		it('gets object from defineConfig wrapper', () => {
+			const { ast } = parseScript(config_default);
+			const configObject = exportDefaultConfig(ast, { ignoreWrapper: 'defineConfig' });
+
+			expect(configObject.type).toBe('ObjectExpression');
+			expect(configObject.properties).toHaveLength(1);
+		});
+
+		it('gets object without wrapper', () => {
+			const { ast } = parseScript(config_wo_defineConfig);
+			const configObject = exportDefaultConfig(ast);
+
+			expect(configObject.type).toBe('ObjectExpression');
+			expect(configObject.properties).toHaveLength(1);
+		});
+
+		it('creates fallback config when no export default exists', () => {
+			const { ast } = parseScript(`import { someHelper } from './helper';`);
+			const configObject = exportDefaultConfig(ast, {
+				fallback: 'defineConfig({ build: { target: "es2015" } })',
+				ignoreWrapper: 'defineConfig'
+			});
+
+			expect(configObject.type).toBe('ObjectExpression');
+			expect(configObject.properties).toHaveLength(1);
+		});
+	});
+
+	describe('addToObjectArray', () => {
+		it('adds to existing array property', () => {
+			const { ast, generateCode } = parseScript(config_default);
+			const configObject = exportDefaultConfig(ast, { ignoreWrapper: 'defineConfig' });
+
+			imports.addDefault(ast, { from: 'my-best-plugin', as: 'newPlugin' });
+			addInArrayOfObject(configObject, {
+				code: 'newPlugin({ hello: "world" })',
+				array: 'plugins',
+				mode: 'append'
+			});
+
+			expect(generateCode()).toMatchInlineSnapshot(`
+				"import newPlugin from 'my-best-plugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({
+					plugins: [
+						sveltekit(),
+						newPlugin({ hello: 'world' })
+					]
+				});"
+			`);
+		});
+
+		it('creates new array property', () => {
+			const { ast, generateCode } = parseScript(config_default);
+			const configObject = exportDefaultConfig(ast, { ignoreWrapper: 'defineConfig' });
+
+			imports.addDefault(ast, { from: 'eslint', as: 'eslint' });
+			addInArrayOfObject(configObject, {
+				code: 'eslint()',
+				array: 'tools',
+				mode: 'append'
+			});
+
+			expect(generateCode()).toMatchInlineSnapshot(`
+				"import eslint from 'eslint';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({
+					plugins: [sveltekit()],
+					tools: [eslint()]
+				});"
+			`);
+		});
+
+		it('prepends to array', () => {
+			const { ast, generateCode } = parseScript(config_default);
+			const configObject = exportDefaultConfig(ast, { ignoreWrapper: 'defineConfig' });
+
+			imports.addDefault(ast, { from: 'firstPlugin', as: 'firstPlugin' });
+			addInArrayOfObject(configObject, {
+				code: 'firstPlugin()',
+				array: 'plugins',
+				mode: 'prepend'
+			});
+
+			expect(generateCode()).toMatchInlineSnapshot(`
+				"import firstPlugin from 'firstPlugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({
+					plugins: [firstPlugin(), sveltekit()]
+				});"
+			`);
+		});
+
+		it('multiple items with different modes', () => {
+			const { ast, generateCode } = parseScript(config_default);
+			const configObject = exportDefaultConfig(ast, { ignoreWrapper: 'defineConfig' });
+
+			// Add to end first
+			imports.addDefault(ast, { from: 'lastPlugin', as: 'lastPlugin' });
+			addInArrayOfObject(configObject, {
+				code: 'lastPlugin()',
+				array: 'plugins',
+				mode: 'append'
+			});
+
+			// Then add to beginning
+			imports.addDefault(ast, { from: 'firstPlugin', as: 'firstPlugin' });
+			addInArrayOfObject(configObject, {
+				code: 'firstPlugin()',
+				array: 'plugins',
+				mode: 'prepend'
+			});
+
+			expect(generateCode()).toMatchInlineSnapshot(`
+				"import firstPlugin from 'firstPlugin';
+				import lastPlugin from 'lastPlugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({
+					plugins: [
+						firstPlugin(),
+						sveltekit(),
+						lastPlugin()
+					]
+				});"
+			`);
+		});
+	});
+
+	describe('addPluginToViteConfig', () => {
+		const addTestPlugin = (content: string) =>
+			addPluginToViteConfig(content, (ast, configObject) => {
+				const vitePluginName = 'bestPlugin';
+				imports.addDefault(ast, { from: 'my-best-plugin', as: vitePluginName });
+
+				addInArrayOfObject(configObject, {
+					array: 'plugins',
+					code: `${vitePluginName}()`
+				});
+			});
+
+		it('empty config', () => {
+			expect(addTestPlugin(``)).toMatchInlineSnapshot(`
+				"import bestPlugin from 'my-best-plugin';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({ plugins: [bestPlugin()] });"
+			`);
+		});
+
+		it('config_default', () => {
+			expect(addTestPlugin(config_default)).toMatchInlineSnapshot(`
+				"import bestPlugin from 'my-best-plugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				export default defineConfig({
+					plugins: [sveltekit(), bestPlugin()]
+				});"
+			`);
+		});
+
+		it('config_w_variable', () => {
+			expect(addTestPlugin(config_w_variable)).toMatchInlineSnapshot(`
+				"import bestPlugin from 'my-best-plugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import { defineConfig } from 'vite';
+
+				const config = defineConfig({
+					plugins: [sveltekit(), bestPlugin()]
+				});
+
+				export default config;"
+			`);
+		});
+
+		it('config_wo_defineConfig', () => {
+			expect(addTestPlugin(config_wo_defineConfig)).toMatchInlineSnapshot(`
+				"import bestPlugin from 'my-best-plugin';
+				import { sveltekit } from '@sveltejs/kit/vite';
+				import type { UserConfig, defineConfig } from 'vite';
+
+				const config: UserConfig = {
+					plugins: [sveltekit(), bestPlugin()]
+				};
+
+				export default config;"
+			`);
+		});
+	});
+});

packages/core/tooling/helpers.ts

@@ -0,0 +1,94 @@
+import { array, functions, imports, object, exports, type AstTypes, common } from './js/index.ts';
+import { parseScript } from './parsers.ts';
+
+export function exportDefaultConfig(
+	ast: AstTypes.Program,
+	options: {
+		fallback?: AstTypes.Expression | string;
+		ignoreWrapper?: string;
+	} = {}
+): AstTypes.ObjectExpression {
+	const { fallback, ignoreWrapper } = options;
+
+	// Get or create the default export
+	let fallbackExpression: AstTypes.Expression;
+	if (fallback) {
+		fallbackExpression = typeof fallback === 'string' ? common.parseExpression(fallback) : fallback;
+	} else {
+		fallbackExpression = object.create({});
+	}
+
+	const { value: rootObject } = exports.createDefault(ast, { fallback: fallbackExpression });
+
+	// Handle wrapper functions (e.g., defineConfig({})) if ignoreWrapper is specified
+	let configObject: AstTypes.ObjectExpression;
+	if (ignoreWrapper && 'arguments' in rootObject && Array.isArray(rootObject.arguments)) {
+		// Check if this is the wrapper we want to ignore
+		if (
+			rootObject.type === 'CallExpression' &&
+			rootObject.callee.type === 'Identifier' &&
+			rootObject.callee.name === ignoreWrapper
+		) {
+			// For wrapper function calls like defineConfig({})
+			configObject = functions.getArgument(rootObject as any, {
+				index: 0,
+				fallback: object.create({})
+			});
+		} else {
+			// For other function calls, treat as the config object
+			configObject = rootObject as unknown as AstTypes.ObjectExpression;
+		}
+	} else {
+		// For plain object literals
+		configObject = rootObject as unknown as AstTypes.ObjectExpression;
+	}
+
+	return configObject;
+}
+
+export function addInArrayOfObject(
+	ast: AstTypes.ObjectExpression,
+	options: {
+		array: string;
+		code: string;
+		/** default: `append` */
+		mode?: 'append' | 'prepend';
+	}
+): void {
+	const { code, array: arrayProperty, mode = 'append' } = options;
+
+	// Get or create the array property
+	const targetArray = object.property(ast, {
+		name: arrayProperty,
+		fallback: array.create()
+	});
+
+	// Parse the expression
+	const expression = common.parseExpression(code);
+
+	// Add to array based on mode
+	if (mode === 'prepend') {
+		array.prepend(targetArray, expression);
+	} else {
+		array.append(targetArray, expression);
+	}
+}
+
+export const addPluginToViteConfig = (
+	content: string,
+	fn: (ast: AstTypes.Program, configObject: AstTypes.ObjectExpression) => void
+): string => {
+	const { ast, generateCode } = parseScript(content);
+
+	// Step 1: Get the config object, or fallback.
+	imports.addNamed(ast, { from: 'vite', imports: { defineConfig: 'defineConfig' } });
+	const configObject = exportDefaultConfig(ast, {
+		fallback: 'defineConfig()',
+		ignoreWrapper: 'defineConfig'
+	});
+
+	// Step 2: Add the plugin to the plugins array
+	fn(ast, configObject);
+
+	return generateCode();
+};