breaking: stop re-exporting vitePreprocess (#11297)

--------- Co-authored-by: Rich Harris <[email protected]> Co-authored-by: Simon Holthausen <[email protected]>
sveltejs · Dec 13, 2023 · 4542e68 · 4542e68
1 parent 4f71ea1
commit 4542e68
Show file tree

Hide file tree

Showing 15 changed files with 162 additions and 382 deletions.
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';