feat: add vite.addPlugin (#633)

jycouet · manuel3108 · web-flow · commit 3bcd789ca5ca · 2025-07-26T06:36:34.000+02:00
* wip

* testing things out

* testing things out 2

* append &amp; 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 &lt;30698007+manuel3108@users.noreply.github.com&gt;

* 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 &lt;30698007+manuel3108@users.noreply.github.com&gt;
diff --git a/.changeset/tough-carrots-eat.md b/.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
diff --git a/packages/addons/devtools-json/index.ts b/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();
 		});
diff --git a/packages/addons/paraglide/index.ts b/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();
 		});
diff --git a/packages/addons/tailwindcss/index.ts b/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();
 		});
diff --git a/packages/core/tests/js/vite/add-plugin-mode/input.ts b/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()
+	]
+});
diff --git a/packages/core/tests/js/vite/add-plugin-mode/output.ts b/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()
+	]
+});
diff --git a/packages/core/tests/js/vite/add-plugin-mode/run.ts b/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' });
+}
diff --git a/packages/core/tests/js/vite/default/input.ts b/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()]
+});
diff --git a/packages/core/tests/js/vite/default/output.ts b/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()] });
diff --git a/packages/core/tests/js/vite/default/run.ts b/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}()` });
+}
diff --git a/packages/core/tests/js/vite/function-return/input.ts b/packages/core/tests/js/vite/function-return/input.ts
@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => {
+	// Some stuff here
+	return {
+		plugins: [sveltekit()]
+	};
+});
diff --git a/packages/core/tests/js/vite/function-return/output.ts b/packages/core/tests/js/vite/function-return/output.ts
@@ -0,0 +1,8 @@
+import myPlugin from 'my-plugin';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+export default defineConfig(() => {
+	// Some stuff here
+	return { plugins: [sveltekit(), myPlugin()] };
+});
diff --git a/packages/core/tests/js/vite/function-return/run.ts b/packages/core/tests/js/vite/function-return/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}()` });
+}
diff --git a/packages/core/tests/js/vite/with-variable/input.ts b/packages/core/tests/js/vite/with-variable/input.ts
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+const config = defineConfig({
+	plugins: [sveltekit()]
+});
+
+export default config;
diff --git a/packages/core/tests/js/vite/with-variable/output.ts b/packages/core/tests/js/vite/with-variable/output.ts
@@ -0,0 +1,7 @@
+import myPlugin from 'my-plugin';
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vite';
+
+const config = defineConfig({ plugins: [sveltekit(), myPlugin()] });
+
+export default config;
diff --git a/packages/core/tests/js/vite/with-variable/run.ts b/packages/core/tests/js/vite/with-variable/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}()` });
+}
diff --git a/packages/core/tests/js/vite/without-defineConfig/input.ts b/packages/core/tests/js/vite/without-defineConfig/input.ts
@@ -0,0 +1,8 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig } from 'vite';
+
+const config: UserConfig = {
+	plugins: [sveltekit()]
+};
+
+export default config;
diff --git a/packages/core/tests/js/vite/without-defineConfig/output.ts b/packages/core/tests/js/vite/without-defineConfig/output.ts
@@ -0,0 +1,7 @@
+import myPlugin from 'my-plugin';
+import { sveltekit } from '@sveltejs/kit/vite';
+import type { UserConfig, defineConfig } from 'vite';
+
+const config: UserConfig = { plugins: [myPlugin(), sveltekit()] };
+
+export default config;
diff --git a/packages/core/tests/js/vite/without-defineConfig/run.ts b/packages/core/tests/js/vite/without-defineConfig/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}()`, mode: 'prepend' });
+}
diff --git a/packages/core/tooling/js/imports.ts b/packages/core/tooling/js/imports.ts
@@ -59,8 +59,8 @@ export function addDefault(node: AstTypes.Program, options: { from: string; as:
 export function addNamed(
 	node: AstTypes.Program,
 	options: {
-		from: string;
 		imports: Record<string, string> | string[];
+		from: string;
 		isType?: boolean;
 	}
 ): void {
diff --git a/packages/core/tooling/js/index.ts b/packages/core/tooling/js/index.ts
@@ -6,4 +6,5 @@ export * as imports from './imports.ts';
 export * as variables from './variables.ts';
 export * as exports from './exports.ts';
 export * as kit from './kit.ts';
+export * as vite from './vite.ts';
 export type { AstTypes } from '../index.ts';
diff --git a/packages/core/tooling/js/vite.ts b/packages/core/tooling/js/vite.ts

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