feat: add vite.addPlugin (#633)

* wip

* testing things out

* testing things out 2

* append & prepend

* looks cool already

* split

* some cleanup

* adding some tests

* api could look like this

* refactor location

* refacto to test style of repo

* managing also function return (my case actually!)

* playing with api style

* lol! that's even simpler now!

* add convenience imports.addNamed

* update paraglide to new style

* update tailwind to new style

* .

* Update .changeset/tough-carrots-eat.md

Co-authored-by: Manuel <[email protected]>

* chore: allow passing an array of import names to imports.addNamed

* update usage

* update mode test

* bailing out early

* already merged with the other PR. (an better naming)

---------

Co-authored-by: Manuel <[email protected]>

Author: jycouet

.changeset/tough-carrots-eat.md

@@ -0,0 +1,5 @@
+---
+'sv': patch
+---
+
+feat: add `vite.addPlugin` to simplify adding a plugin on various vite config styles

packages/addons/devtools-json/index.ts

@@ -1,5 +1,5 @@
 import { defineAddon } from '@sveltejs/cli-core';
-import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js';
+import { imports, vite } from '@sveltejs/cli-core/js';
 import { parseScript } from '@sveltejs/cli-core/parsers';
 
 export default defineAddon({
@@ -18,21 +18,8 @@ export default defineAddon({
 			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({})
-			});
-
-			const pluginsArray = object.property(param1, { name: 'plugins', fallback: array.create() });
-			const pluginFunctionCall = functions.createCall({ name: vitePluginName, args: [] });
-
-			array.append(pluginsArray, pluginFunctionCall);
+			imports.addDefault(ast, { as: vitePluginName, from: 'vite-plugin-devtools-json' });
+			vite.addPlugin(ast, { code: `${vitePluginName}()` });
 
 			return generateCode();
 		});

packages/addons/paraglide/index.ts

@@ -1,15 +1,6 @@
 import MagicString from 'magic-string';
 import { colors, defineAddon, defineAddonOptions, log } from '@sveltejs/cli-core';
-import {
-	array,
-	common,
-	functions,
-	imports,
-	object,
-	variables,
-	exports,
-	kit as kitJs
-} from '@sveltejs/cli-core/js';
+import { common, imports, variables, exports, kit as kitJs, vite } from '@sveltejs/cli-core/js';
 import * as html from '@sveltejs/cli-core/html';
 import { parseHtml, parseJson, parseScript, parseSvelte } from '@sveltejs/cli-core/parsers';
 import { addToDemoPage } from '../common.ts';
@@ -94,26 +85,13 @@ export default defineAddon({
 			const { ast, generateCode } = parseScript(content);
 
 			const vitePluginName = 'paraglideVitePlugin';
-			imports.addNamed(ast, {
-				from: '@inlang/paraglide-js',
-				imports: [vitePluginName]
-			});
-			const { value: rootObject } = exports.createDefault(ast, {
-				fallback: functions.createCall({ name: 'defineConfig', args: [] })
-			});
-			const param1 = functions.getArgument(rootObject, {
-				index: 0,
-				fallback: object.create({})
-			});
-
-			const pluginsArray = object.property(param1, { name: 'plugins', fallback: array.create() });
-			const pluginFunctionCall = functions.createCall({ name: vitePluginName, args: [] });
-			const pluginConfig = object.create({
-				project: './project.inlang',
-				outdir: `./${paraglideOutDir}`
+			imports.addNamed(ast, { imports: [vitePluginName], from: '@inlang/paraglide-js' });
+			vite.addPlugin(ast, {
+				code: `${vitePluginName}({ 
+					project: './project.inlang', 
+					outdir: './${paraglideOutDir}' 
+				})`
 			});
-			functions.getArgument(pluginFunctionCall, { index: 0, fallback: pluginConfig });
-			array.append(pluginsArray, pluginFunctionCall);
 
 			return generateCode();
 		});

packages/addons/tailwindcss/index.ts

@@ -1,5 +1,5 @@
 import { defineAddon, defineAddonOptions } from '@sveltejs/cli-core';
-import { array, functions, imports, object, exports } from '@sveltejs/cli-core/js';
+import { imports, vite } from '@sveltejs/cli-core/js';
 import { parseCss, parseJson, parseScript, parseSvelte } from '@sveltejs/cli-core/parsers';
 import { addSlot } from '@sveltejs/cli-core/html';
 
@@ -61,19 +61,8 @@ export default defineAddon({
 			const { ast, generateCode } = parseScript(content);
 
 			const vitePluginName = 'tailwindcss';
-			imports.addDefault(ast, { from: '@tailwindcss/vite', as: vitePluginName });
-
-			const { value: rootObject } = exports.createDefault(ast, {
-				fallback: functions.createCall({ name: 'defineConfig', args: [] })
-			});
-			const param1 = functions.getArgument(rootObject, {
-				index: 0,
-				fallback: object.create({})
-			});
-
-			const pluginsArray = object.property(param1, { name: 'plugins', fallback: array.create() });
-			const pluginFunctionCall = functions.createCall({ name: vitePluginName, args: [] });
-			array.prepend(pluginsArray, pluginFunctionCall);
+			imports.addDefault(ast, { as: vitePluginName, from: '@tailwindcss/vite' });
+			vite.addPlugin(ast, { code: `${vitePluginName}()`, mode: 'prepend' });
 
 			return generateCode();
 		});

packages/core/tests/js/vite/add-plugin-mode/input.ts

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		// a default plugin
+		sveltekit()
+	]
+});

packages/core/tests/js/vite/add-plugin-mode/output.ts

@@ -0,0 +1,15 @@
+import { firstPlugin } from 'first-plugin';
+import lastPlugin from 'last-plugin';
+import middlePlugin from 'middle-plugin';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [
+		firstPlugin(),
+		// a default plugin
+		sveltekit(),
+		middlePlugin(),
+		lastPlugin()
+	]
+});

packages/core/tests/js/vite/add-plugin-mode/run.ts

@@ -0,0 +1,15 @@
+import { imports, vite, type AstTypes } from '@sveltejs/cli-core/js';
+
+export function run(ast: AstTypes.Program): void {
+	const pMiddle = 'middlePlugin';
+	imports.addDefault(ast, { as: pMiddle, from: 'middle-plugin' });
+	vite.addPlugin(ast, { code: `${pMiddle}()` });
+
+	const pLast = 'lastPlugin';
+	imports.addDefault(ast, { as: pLast, from: 'last-plugin' });
+	vite.addPlugin(ast, { code: `${pLast}()`, mode: 'append' });
+
+	const pFirst = 'firstPlugin';
+	imports.addNamed(ast, { imports: { [pFirst]: pFirst }, from: 'first-plugin' });
+	vite.addPlugin(ast, { code: `${pFirst}()`, mode: 'prepend' });
+}

packages/core/tests/js/vite/default/input.ts

@@ -0,0 +1,6 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+	plugins: [sveltekit()]
+});

packages/core/tests/js/vite/default/output.ts

@@ -0,0 +1,5 @@
+import myPlugin from 'my-plugin';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig({ plugins: [sveltekit(), myPlugin()] });

packages/core/tests/js/vite/default/run.ts

@@ -0,0 +1,7 @@
+import { imports, vite, type AstTypes } from '@sveltejs/cli-core/js';
+
+export function run(ast: AstTypes.Program): void {
+	const vitePluginName = 'myPlugin';
+	imports.addDefault(ast, { as: vitePluginName, from: 'my-plugin' });
+	vite.addPlugin(ast, { code: `${vitePluginName}()` });
+}