feat: remove SvelteKit specific handling

.changeset/smooth-llamas-reflect.md

@@ -0,0 +1,9 @@
+---
+'@sveltejs/vite-plugin-svelte': minor
+---
+
+Remove internal SvelteKit specific handling
+
+- Disallow `kit` prop in inline options
+- Remove default `hydratable: true` option for SvelteKit
+- Inspector code mounts on `/@vite/client` to be framework agnostic

docs/config.md

@@ -338,15 +338,6 @@ export default {
      * inject custom styles when inspector is active
      */
     customStyles?: boolean;
-
-    /**
-     * append an import to the module id ending with `appendTo` instead of adding a script into body
-     * useful for frameworks that do not support trannsformIndexHtml hook
-     *
-     * WARNING: only set this if you know exactly what it does.
-     * Regular users of vite-plugin-svelte or SvelteKit do not need it
-     */
-    appendTo?: string;
   }
   ```
 

packages/e2e-tests/inspector-kit/__tests__/inspector.kit.spec.ts

@@ -1,11 +1,12 @@
-import { getEl, getText, isBuild } from '~utils';
+import { getEl, getText, isBuild, page } from '~utils';
 
 describe('inspector-kit', () => {
 	it('should render page', async () => {
 		expect(await getText('h1')).toBe('Hello Inspector!');
 	});
 	if (!isBuild) {
 		it('should show inspector toggle during dev', async () => {
+			await page.waitForLoadState('networkidle');
 			expect(await getEl('#svelte-inspector-toggle')).not.toBe(null);
 		});
 	} else {

packages/vite-plugin-svelte/src/ui/inspector/plugin.ts

@@ -25,7 +25,6 @@ export function svelteInspector(): Plugin {
 	const inspectorPath = getInspectorPath();
 	log.debug.enabled && log.debug(`svelte inspector path: ${inspectorPath}`);
 	let inspectorOptions: InspectorOptions;
-	let appendTo: string | undefined;
 	let disabled = false;
 
 	return {
@@ -45,13 +44,6 @@ export function svelteInspector(): Plugin {
 				...defaultInspectorOptions,
 				...options
 			};
-			const isSvelteKit = config.plugins.some((p) => p.name.startsWith('vite-plugin-sveltekit'));
-			if (isSvelteKit && !inspectorOptions.appendTo) {
-				// this could append twice if a user had a file that ends with /generated/root.svelte
-				// but that should be rare and inspector doesn't execute twice
-				inspectorOptions.appendTo = `/generated/root.svelte`;
-			}
-			appendTo = inspectorOptions.appendTo;
 		},
 
 		async resolveId(importee: string, importer, options) {
@@ -84,32 +76,13 @@ export function svelteInspector(): Plugin {
 			}
 		},
 
-		transform(code: string, id: string, options?: { ssr?: boolean }) {
-			if (options?.ssr || disabled || !appendTo) {
+		transform(code, id, options) {
+			if (options?.ssr || disabled) {
 				return;
 			}
-			if (id.endsWith(appendTo)) {
-				return { code: `${code}\nimport 'virtual:svelte-inspector-path:load-inspector.js'` };
-			}
-		},
-		transformIndexHtml(html) {
-			if (disabled || appendTo) {
-				return;
+			if (id.includes('vite/dist/client/client.mjs')) {
+				return { code: `${code}\nimport('virtual:svelte-inspector-path:load-inspector.js')` };
 			}
-			return {
-				html,
-				tags: [
-					{
-						tag: 'script',
-						injectTo: 'body',
-						attrs: {
-							type: 'module',
-							// /@id/ is needed, otherwise the virtual: is seen as protocol by browser and cors error happens
-							src: '/@id/virtual:svelte-inspector-path:load-inspector.js'
-						}
-					}
-				]
-			};
 		}
 	};
 }

packages/vite-plugin-svelte/src/utils/options.ts

@@ -49,12 +49,7 @@ const allowedPluginOptions = new Set([
 
 const knownRootOptions = new Set(['extensions', 'compilerOptions', 'preprocess', 'onwarn']);
 
-const allowedInlineOptions = new Set([
-	'configFile',
-	'kit', // only for internal use by sveltekit
-	...allowedPluginOptions,
-	...knownRootOptions
-]);
+const allowedInlineOptions = new Set(['configFile', ...allowedPluginOptions, ...knownRootOptions]);
 
 export function validateInlineOptions(inlineOptions?: Partial<Options>) {
 	const invalidKeys = Object.keys(inlineOptions || {}).filter(
@@ -203,7 +198,6 @@ export function resolveOptions(
 
 	removeIgnoredOptions(merged);
 	handleDeprecatedOptions(merged);
-	addSvelteKitOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -291,15 +285,6 @@ function removeIgnoredOptions(options: ResolvedOptions) {
 	}
 }
 
-// some SvelteKit options need compilerOptions to work, so set them here.
-function addSvelteKitOptions(options: ResolvedOptions) {
-	// @ts-expect-error kit is not typed to avoid dependency on sveltekit
-	if (options?.kit != null && options.compilerOptions.hydratable == null) {
-		log.debug(`Setting compilerOptions.hydratable = true for SvelteKit`);
-		options.compilerOptions.hydratable = true;
-	}
-}
-
 function handleDeprecatedOptions(options: ResolvedOptions) {
 	if ((options.experimental as any)?.prebundleSvelteLibraries) {
 		options.prebundleSvelteLibraries = (options.experimental as any)?.prebundleSvelteLibraries;
@@ -791,15 +776,6 @@ export interface InspectorOptions {
 	 * inject custom styles when inspector is active
 	 */
 	customStyles?: boolean;
-
-	/**
-	 * append an import to the module id ending with `appendTo` instead of adding a script into body
-	 * useful for frameworks that do not support trannsformIndexHtml hook
-	 *
-	 * WARNING: only set this if you know exactly what it does.
-	 * Regular users of vite-plugin-svelte or SvelteKit do not need it
-	 */
-	appendTo?: string;
 }
 
 export interface PreResolvedOptions extends Options {