breaking: stop re-exporting vitePreprocess (#11297)

Rich-Harris · dummdidumm · web-flow · commit 4542e68fa66f · 2023-12-13T20:29:39.000+01:00
---------

Co-authored-by: Rich Harris &lt;rich.harris@vercel.com&gt;
Co-authored-by: Simon Holthausen &lt;simon.holthausen@vercel.com&gt;
diff --git a/.changeset/nine-moles-buy.md b/.changeset/nine-moles-buy.md
@@ -0,0 +1,5 @@
+---
+'@sveltejs/kit': major
+---
+
+breaking: stop re-exporting vitePreprocess
diff --git a/documentation/docs/60-appendix/20-integrations.md b/documentation/docs/60-appendix/20-integrations.md
@@ -8,11 +8,11 @@ Preprocessors transform your `.svelte` files before passing them to the compiler
 
 ### `vitePreprocess`
 
-`vite-plugin-svelte` offers a [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) feature which utilizes Vite for preprocessing. It is capable of handling the language flavors Vite handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. For convenience, it is re-exported from the `@sveltejs/kit/vite` package. If you set your project up with TypeScript it will be included by default:
+`vite-plugin-svelte` offers a [`vitePreprocess`](https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/preprocess.md) feature which utilizes Vite for preprocessing. It is capable of handling the language flavors Vite handles: TypeScript, PostCSS, SCSS, Less, Stylus, and SugarSS. If you set your project up with TypeScript it will be included by default:
 
 ```js
 // svelte.config.js
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 export default {
   preprocess: [vitePreprocess()]
diff --git a/documentation/docs/60-appendix/30-migrating-to-sveltekit-2.md b/documentation/docs/60-appendix/30-migrating-to-sveltekit-2.md
@@ -127,6 +127,10 @@ If a form contains an `<input type="file">` but does not have an `enctype="multi
 
 Previously, the generated `tsconfig.json` was trying its best to still produce a somewhat valid config when your `tsconfig.json` included `paths` or `baseUrl`. In SvelteKit 2, the validation is more strict and will warn when you use either `paths` or `baseUrl` in your `tsconfig.json`. These settings are used to generate path aliases and you should use [the `alias` config](configuration#alias) option in your `svelte.config.js` instead, to also create a corresponding alias for the bundler.
 
+## `vitePreprocess` is no longer exported from `@sveltejs/kit/vite`
+
+Since `@sveltejs/vite-plugin-svelte` is now a peer dependency, SvelteKit 2 no longer re-exports `vitePreprocess`. You should import it directly from `@svelte/vite-plugin-svelte`.
+
 ## Updated dependency requirements
 
 SvelteKit 2 requires Node `18.13` or higher, and the following minimum dependency versions:
diff --git a/packages/create-svelte/shared/+default+checkjs/svelte.config.js b/packages/create-svelte/shared/+default+checkjs/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
diff --git a/packages/create-svelte/shared/+default+typescript/svelte.config.js b/packages/create-svelte/shared/+default+typescript/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
diff --git a/packages/create-svelte/shared/+typescript/svelte.config.js b/packages/create-svelte/shared/+typescript/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
diff --git a/packages/create-svelte/templates/default/package.json b/packages/create-svelte/templates/default/package.json
@@ -11,6 +11,7 @@
 		"@neoconfetti/svelte": "^1.0.0",
 		"@sveltejs/adapter-auto": "workspace:*",
 		"@sveltejs/kit": "workspace:*",
+		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"svelte": "^4.2.8",
 		"typescript": "^5.3.3",
 		"vite": "^5.0.8"
diff --git a/packages/create-svelte/templates/default/svelte.config.js b/packages/create-svelte/templates/default/svelte.config.js
@@ -1,5 +1,5 @@
 import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 
 // This config is ignored and replaced with one of the configs in the shared folder when a project is created.
 
diff --git a/packages/kit/src/exports/vite/index.js b/packages/kit/src/exports/vite/index.js
@@ -37,8 +37,6 @@ import {
 	sveltekit_paths
 } from './module_ids.js';
 
-export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
-
 const cwd = process.cwd();
 
 /** @type {import('./types.js').EnforcedConfig} */
diff --git a/packages/kit/types/index.d.ts b/packages/kit/types/index.d.ts
@@ -1837,7 +1837,6 @@ declare module '@sveltejs/kit/node/polyfills' {
 }
 
 declare module '@sveltejs/kit/vite' {
-	export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 	/**
 	 * Returns the SvelteKit Vite plugins.
 	 * */
diff --git a/packages/migrate/migrations/sveltekit-2/migrate.js b/packages/migrate/migrations/sveltekit-2/migrate.js
@@ -87,7 +87,47 @@ export function update_svelte_config() {
  */
 export function update_svelte_config_content(code) {
 	const regex = /\s*dangerZone:\s*{[^}]*},?/g;
-	return code.replace(regex, '');
+	const result = code.replace(regex, '');
+	if (result !== code) {
+		log_migration(
+			'Removed `dangerZone` from svelte.config.js: https://kit.svelte.dev/docs/v2-migration-guide#server-fetches-are-not-trackable-anymore'
+		);
+	}
+
+	const project = new Project({ useInMemoryFileSystem: true });
+	const source = project.createSourceFile('svelte.ts', result);
+
+	const namedImport = get_import(source, '@sveltejs/kit/vite', 'vitePreprocess');
+	if (!namedImport) return result;
+
+	const logger = log_on_ts_modification(
+		source,
+		'Changed `vitePreprocess` import: https://kit.svelte.dev/docs/v2-migration-guide#vitepreprocess-is-no-longer-exported-from-sveltejs-kit-vite'
+	);
+
+	if (namedImport.getParent().getParent().getNamedImports().length === 1) {
+		namedImport
+			.getParent()
+			.getParent()
+			.getParent()
+			.setModuleSpecifier('@sveltejs/vite-plugin-svelte');
+	} else {
+		namedImport.remove();
+		const vps = source.getImportDeclaration(
+			(i) => i.getModuleSpecifierValue() === '@sveltejs/vite-plugin-svelte'
+		);
+		if (vps) {
+			vps.addNamedImport('vitePreprocess');
+		} else {
+			source.addImportDeclaration({
+				moduleSpecifier: '@sveltejs/vite-plugin-svelte',
+				namedImports: ['vitePreprocess']
+			});
+		}
+	}
+
+	logger();
+	return source.getFullText();
 }
 
 /**
@@ -231,6 +271,11 @@ function replace_resolve_path(source) {
 	const namedImport = get_import(source, '@sveltejs/kit', 'resolvePath');
 	if (!namedImport) return;
 
+	const logger = log_on_ts_modification(
+		source,
+		'Replaced `resolvePath` with `resolveRoute`: https://kit.svelte.dev/docs/v2-migration-guide#resolvePath-has-been-removed'
+	);
+
 	for (const id of namedImport.getNameNode().findReferencesAsNodes()) {
 		id.replaceWithText('resolveRoute');
 	}
@@ -251,6 +296,8 @@ function replace_resolve_path(source) {
 			namedImports: ['resolveRoute']
 		});
 	}
+
+	logger();
 }
 
 /**
diff --git a/packages/migrate/migrations/sveltekit-2/svelte-config-samples.md b/packages/migrate/migrations/sveltekit-2/svelte-config-samples.md
@@ -42,3 +42,85 @@ export default {
 	}
 };
 ```
+
+## Replaces vitePreprocess import (1)
+
+```js before
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+```js after
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		adapter: adapter()
+	}
+};
+
+export default config;
+```
+
+## Replaces vitePreprocess import (2)
+
+```js before
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess, foo } from '@sveltejs/kit/vite';
+
+export default {
+	preprocess: vitePreprocess()
+};
+```
+
+<!-- prettier-ignore -->
+```js after
+import adapter from '@sveltejs/adapter-auto';
+import { foo } from '@sveltejs/kit/vite';
+import { vitePreprocess } from "@sveltejs/vite-plugin-svelte";
+
+export default {
+	preprocess: vitePreprocess()
+};
+```
+
+## Replaces vitePreprocess import (3)
+
+```js before
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess, foo } from '@sveltejs/kit/vite';
+import { a } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+	preprocess: vitePreprocess()
+};
+```
+
+```js after
+import adapter from '@sveltejs/adapter-auto';
+import { foo } from '@sveltejs/kit/vite';
+import { a, vitePreprocess } from '@sveltejs/vite-plugin-svelte';
+
+export default {
+	preprocess: vitePreprocess()
+};
+```
diff --git a/packages/package/package.json b/packages/package/package.json
@@ -18,6 +18,7 @@
 		"svelte2tsx": "~0.6.27"
 	},
 	"devDependencies": {
+		"@sveltejs/vite-plugin-svelte": "^3.0.1",
 		"@types/node": "^18.19.3",
 		"@types/semver": "^7.5.6",
 		"svelte": "^4.2.8",
diff --git a/packages/package/test/fixtures/resolve-alias/svelte.config.js b/packages/package/test/fixtures/resolve-alias/svelte.config.js
@@ -1,4 +1,4 @@
-import { vitePreprocess } from '../../../../kit/src/exports/vite/index.js';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { fileURLToPath } from 'node:url';
 import path from 'node:path';
 
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +'@sveltejs/kit': major
 +---
++
 +breaking: stop re-exporting vitePreprocess
Original file line number	Diff line number	Diff line change
`@@ -1837,7 +1837,6 @@ declare module '@sveltejs/kit/node/polyfills' {`
`1837`	`1837`	`}`
`1838`	`1838`
`1839`	`1839`	`declare module '@sveltejs/kit/vite' {`
`1840`		`- export { vitePreprocess } from '@sveltejs/vite-plugin-svelte';`
`1841`	`1840`	`/**`
`1842`	`1841`	`* Returns the SvelteKit Vite plugins.`
`1843`	`1842`	`* */`