@sveltejs/vite-plugin-svelte 1.0.0-next.46 → 1.0.0-next.49

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.46",
+  "version": "1.0.0-next.49",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -59,18 +59,19 @@
     }
   },
   "devDependencies": {
+    "@sveltejs/kit": "^1.0.0-next.350",
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.14.39",
-    "rollup": "^2.74.1",
+    "esbuild": "^0.14.42",
+    "rollup": "^2.75.5",
     "svelte": "^3.48.0",
-    "tsup": "^5.12.8",
-    "vite": "^2.9.9"
+    "tsup": "^6.1.0",
+    "vite": "^2.9.10"
   },
   "scripts": {
     "dev": "pnpm build:ci --sourcemap --watch src",
-    "build:ci": "rimraf dist && tsup-node src/index.ts --format esm,cjs --no-splitting --target node14",
+    "build:ci": "rimraf dist && tsup-node src/index.ts --format esm,cjs --no-splitting --shims",
     "build": "pnpm build:ci --dts --sourcemap"
   }
 }

package/src/handle-hot-update.ts

@@ -15,19 +15,25 @@ export async function handleHotUpdate(
 	cache: VitePluginSvelteCache,
 	options: ResolvedOptions
 ): Promise<ModuleNode[] | void> {
-	const { read, server } = ctx;
-
-	const cachedJS = cache.getJS(svelteRequest);
-	if (!cachedJS) {
+	if (!cache.has(svelteRequest)) {
 		// file hasn't been requested yet (e.g. async component)
-		log.debug(`handleHotUpdate first call ${svelteRequest.id}`);
+		log.debug(`handleHotUpdate called before initial transform for ${svelteRequest.id}`);
 		return;
 	}
+	const { read, server } = ctx;
+
+	const cachedJS = cache.getJS(svelteRequest);
 	const cachedCss = cache.getCSS(svelteRequest);
 
 	const content = await read();
-	const compileData: CompileData = await compileSvelte(svelteRequest, content, options);
-	cache.update(compileData);
+	let compileData: CompileData;
+	try {
+		compileData = await compileSvelte(svelteRequest, content, options);
+		cache.update(compileData);
+	} catch (e) {
+		cache.setError(svelteRequest, e);
+		throw e;
+	}
 
 	const affectedModules = new Set<ModuleNode | undefined>();
 
@@ -35,19 +41,19 @@ export async function handleHotUpdate(
 	const mainModule = server.moduleGraph.getModuleById(svelteRequest.id);
 	const cssUpdated = cssModule && cssChanged(cachedCss, compileData.compiled.css);
 	if (cssUpdated) {
-		log.debug('handleHotUpdate css changed');
+		log.debug(`handleHotUpdate css changed for ${svelteRequest.cssId}`);
 		affectedModules.add(cssModule);
 	}
 	const jsUpdated =
 		mainModule && jsChanged(cachedJS, compileData.compiled.js, svelteRequest.filename);
 	if (jsUpdated) {
-		log.debug('handleHotUpdate js changed');
+		log.debug(`handleHotUpdate js changed for ${svelteRequest.id}`);
 		affectedModules.add(mainModule);
 	}
 
 	if (!jsUpdated) {
 		// transform won't be called, log warnings here
-		logCompilerWarnings(compileData.compiled.warnings, options);
+		logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
 	}
 
 	const result = [...affectedModules].filter(Boolean) as ModuleNode[];

package/src/index.ts

@@ -183,9 +183,10 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				try {
 					compileData = await compileSvelte(svelteRequest, code, options);
 				} catch (e) {
+					cache.setError(svelteRequest, e);
 					throw toRollupError(e, options);
 				}
-				logCompilerWarnings(compileData.compiled.warnings, options);
+				logCompilerWarnings(svelteRequest, compileData.compiled.warnings, options);
 				cache.update(compileData);
 				if (compileData.dependencies?.length && options.server) {
 					compileData.dependencies.forEach((d) => {
@@ -209,7 +210,11 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 				}
 				const svelteRequest = requestParser(ctx.file, false, ctx.timestamp);
 				if (svelteRequest) {
-					return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);
+					try {
+						return handleHotUpdate(compileSvelte, ctx, svelteRequest, cache, options);
+					} catch (e) {
+						throw toRollupError(e, options);
+					}
 				}
 			}
 		}
@@ -218,6 +223,8 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 	return plugins.filter(Boolean);
 }
 
+export { loadSvelteConfig } from './utils/load-svelte-config';
+
 export {
 	Options,
 	Preprocessor,
@@ -230,3 +237,5 @@ export {
 	Processed,
 	Warning
 } from './utils/options';
+
+export { SvelteWarningsMessage } from './utils/log';

package/src/utils/dependencies.ts

@@ -127,6 +127,7 @@ function isSvelteLib(pkg: Pkg) {
 
 const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
 	'@lukeed/uuid',
+	'@playwright/test',
 	'@sveltejs/vite-plugin-svelte',
 	'@sveltejs/kit',
 	'autoprefixer',
@@ -136,6 +137,7 @@ const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
 	'eslint',
 	'jest',
 	'mdsvex',
+	'playwright',
 	'postcss',
 	'prettier',
 	'svelte',
@@ -144,7 +146,9 @@ const COMMON_DEPENDENCIES_WITHOUT_SVELTE_FIELD = [
 	'svelte-preprocess',
 	'tslib',
 	'typescript',
-	'vite'
+	'vite',
+	'vitest',
+	'__vite-browser-external' // see https://github.com/sveltejs/vite-plugin-svelte/issues/362
 ];
 const COMMON_PREFIXES_WITHOUT_SVELTE_FIELD = [
 	'@fontsource/',

package/src/utils/load-svelte-config.ts

@@ -22,14 +22,15 @@ export const knownSvelteConfigNames = [
 // also use timestamp query to avoid caching on reload
 const dynamicImportDefault = new Function(
 	'path',
-	'return import(path + "?t=" + Date.now()).then(m => m.default)'
+	'timestamp',
+	'return import(path + "?t=" + timestamp).then(m => m.default)'
 );
 
 export async function loadSvelteConfig(
-	viteConfig: UserConfig,
-	inlineOptions: Partial<Options>
+	viteConfig?: UserConfig,
+	inlineOptions?: Partial<Options>
 ): Promise<Partial<Options> | undefined> {
-	if (inlineOptions.configFile === false) {
+	if (inlineOptions?.configFile === false) {
 		return;
 	}
 	const configFile = findConfigToLoad(viteConfig, inlineOptions);
@@ -38,7 +39,10 @@ export async function loadSvelteConfig(
 		// try to use dynamic import for svelte.config.js first
 		if (configFile.endsWith('.js') || configFile.endsWith('.mjs')) {
 			try {
-				const result = await dynamicImportDefault(pathToFileURL(configFile).href);
+				const result = await dynamicImportDefault(
+					pathToFileURL(configFile).href,
+					fs.statSync(configFile).mtimeMs
+				);
 				if (result != null) {
 					return {
 						...result,
@@ -83,9 +87,9 @@ export async function loadSvelteConfig(
 	}
 }
 
-function findConfigToLoad(viteConfig: UserConfig, inlineOptions: Partial<Options>) {
-	const root = viteConfig.root || process.cwd();
-	if (inlineOptions.configFile) {
+function findConfigToLoad(viteConfig?: UserConfig, inlineOptions?: Partial<Options>) {
+	const root = viteConfig?.root || process.cwd();
+	if (inlineOptions?.configFile) {
 		const abolutePath = path.isAbsolute(inlineOptions.configFile)
 			? inlineOptions.configFile
 			: path.resolve(root, inlineOptions.configFile);

package/src/utils/log.ts

@@ -2,6 +2,7 @@
 import { cyan, yellow, red } from 'kleur/colors';
 import debug from 'debug';
 import { ResolvedOptions, Warning } from './options';
+import { SvelteRequest } from './id';
 
 const levels: string[] = ['debug', 'info', 'warn', 'error', 'silent'];
 const prefix = 'vite-plugin-svelte';
@@ -99,18 +100,55 @@ export const log = {
 	setLevel
 };
 
-export function logCompilerWarnings(warnings: Warning[], options: ResolvedOptions) {
+export type SvelteWarningsMessage = {
+	id: string;
+	filename: string;
+	normalizedFilename: string;
+	timestamp: number;
+	warnings: Warning[]; // allWarnings filtered by warnings where onwarn did not call the default handler
+	allWarnings: Warning[]; // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+	rawWarnings: Warning[]; // raw compiler output
+};
+
+export function logCompilerWarnings(
+	svelteRequest: SvelteRequest,
+	warnings: Warning[],
+	options: ResolvedOptions
+) {
 	const { emitCss, onwarn, isBuild } = options;
-	const warn = isBuild ? warnBuild : warnDev;
-	const notIgnoredWarnings = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
-	const extraWarnings = buildExtraWarnings(warnings, isBuild);
-	[...notIgnoredWarnings, ...extraWarnings].forEach((warning) => {
+	const sendViaWS = !isBuild && options.experimental?.sendWarningsToBrowser;
+	let warn = isBuild ? warnBuild : warnDev;
+	const handledByDefaultWarn: Warning[] = [];
+	const notIgnored = warnings?.filter((w) => !ignoreCompilerWarning(w, isBuild, emitCss));
+	const extra = buildExtraWarnings(warnings, isBuild);
+	const allWarnings = [...notIgnored, ...extra];
+	if (sendViaWS) {
+		const _warn = warn;
+		warn = (w: Warning) => {
+			handledByDefaultWarn.push(w);
+			_warn(w);
+		};
+	}
+	allWarnings.forEach((warning) => {
 		if (onwarn) {
 			onwarn(warning, warn);
 		} else {
 			warn(warning);
 		}
 	});
+	if (sendViaWS) {
+		const message: SvelteWarningsMessage = {
+			id: svelteRequest.id,
+			filename: svelteRequest.filename,
+			normalizedFilename: svelteRequest.normalizedFilename,
+			timestamp: svelteRequest.timestamp,
+			warnings: handledByDefaultWarn, // allWarnings filtered by warnings where onwarn did not call the default handler
+			allWarnings, // includes warnings filtered by onwarn and our extra vite plugin svelte warnings
+			rawWarnings: warnings // raw compiler output
+		};
+		log.debug(`sending svelte:warnings message for ${svelteRequest.normalizedFilename}`);
+		options.server?.ws?.send('svelte:warnings', message);
+	}
 }
 
 function ignoreCompilerWarning(

package/src/utils/options.ts

@@ -11,14 +11,16 @@ import { log } from './log';
 import { loadSvelteConfig } from './load-svelte-config';
 import { SVELTE_HMR_IMPORTS, SVELTE_IMPORTS, SVELTE_RESOLVE_MAIN_FIELDS } from './constants';
 // eslint-disable-next-line node/no-missing-import
-import { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
-import {
+import type { CompileOptions, Warning } from 'svelte/types/compiler/interfaces';
+import type {
 	MarkupPreprocessor,
 	Preprocessor,
 	PreprocessorGroup,
 	Processed
 	// eslint-disable-next-line node/no-missing-import
 } from 'svelte/types/compiler/preprocess';
+// eslint-disable-next-line node/no-missing-import
+import type { KitConfig } from '@sveltejs/kit';
 import path from 'path';
 import { findRootSvelteDependencies, needsOptimization, SvelteDependency } from './dependencies';
 import { createRequire } from 'module';
@@ -76,7 +78,6 @@ export async function preResolveOptions(
 		inlineOptions,
 		extraOptions
 	);
-
 	// configFile of svelteConfig contains the absolute path it was loaded from,
 	// prefer it over the possibly relative inline path
 	if (svelteConfig?.configFile) {
@@ -116,6 +117,7 @@ export function resolveOptions(
 	const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions);
 
 	removeIgnoredOptions(merged);
+	addSvelteKitOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -195,6 +197,23 @@ function removeIgnoredOptions(options: ResolvedOptions) {
 	}
 }
 
+// some SvelteKit options need compilerOptions to work, so set them here.
+function addSvelteKitOptions(options: ResolvedOptions) {
+	if (options?.kit != null) {
+		const hydratable = options.kit.browser?.hydrate !== false;
+		if (
+			options.compilerOptions.hydratable != null &&
+			options.compilerOptions.hydratable !== hydratable
+		) {
+			log.warn(
+				`Conflicting values "compilerOptions.hydratable: ${options.compilerOptions.hydratable}" and "kit.browser.hydrate: ${options.kit.browser?.hydrate}" in your svelte config. You should remove "compilerOptions.hydratable".`
+			);
+		}
+		log.debug(`Setting compilerOptions.hydratable: ${hydratable} for SvelteKit`);
+		options.compilerOptions.hydratable = hydratable;
+	}
+}
+
 // vite passes unresolved `root`option to config hook but we need the resolved value, so do it here
 // https://github.com/sveltejs/vite-plugin-svelte/issues/113
 // https://github.com/vitejs/vite/blob/43c957de8a99bb326afd732c962f42127b0a4d1e/packages/vite/src/node/config.ts#L293
@@ -476,6 +495,11 @@ export interface Options {
 	 * These options are considered experimental and breaking changes to them can occur in any release
 	 */
 	experimental?: ExperimentalOptions;
+
+	/**
+	 * Options for SvelteKit
+	 */
+	kit?: KitConfig;
 }
 
 /**
@@ -536,6 +560,12 @@ export interface ExperimentalOptions {
 	 * enable svelte inspector
 	 */
 	inspector?: InspectorOptions | boolean;
+
+	/**
+	 * send a websocket message with svelte compiler warnings during dev
+	 *
+	 */
+	sendWarningsToBrowser?: boolean;
 }
 
 export interface InspectorOptions {
@@ -585,7 +615,7 @@ export interface InspectorOptions {
 export interface PreResolvedOptions extends Options {
 	// these options are non-nullable after resolve
 	compilerOptions: CompileOptions;
-	experimental: ExperimentalOptions;
+	experimental?: ExperimentalOptions;
 	// extra options
 	root: string;
 	isBuild: boolean;

package/src/utils/vite-plugin-svelte-cache.ts

@@ -7,13 +7,27 @@ export class VitePluginSvelteCache {
 	private _dependencies = new Map<string, string[]>();
 	private _dependants = new Map<string, Set<string>>();
 	private _resolvedSvelteFields = new Map<string, string>();
+	private _errors = new Map<string, any>();
 
 	public update(compileData: CompileData) {
+		this._errors.delete(compileData.normalizedFilename);
 		this.updateCSS(compileData);
 		this.updateJS(compileData);
 		this.updateDependencies(compileData);
 	}
 
+	public has(svelteRequest: SvelteRequest) {
+		const id = svelteRequest.normalizedFilename;
+		return this._errors.has(id) || this._js.has(id) || this._css.has(id);
+	}
+
+	public setError(svelteRequest: SvelteRequest, error: any) {
+		// keep dependency info, otherwise errors in dependants would not trigger an update after fixing
+		// because they are no longer watched
+		this.remove(svelteRequest, true);
+		this._errors.set(svelteRequest.normalizedFilename, error);
+	}
+
 	private updateCSS(compileData: CompileData) {
 		this._css.set(compileData.normalizedFilename, compileData.compiled.css);
 	}
@@ -43,26 +57,32 @@ export class VitePluginSvelteCache {
 		});
 	}
 
-	public remove(svelteRequest: SvelteRequest): boolean {
+	public remove(svelteRequest: SvelteRequest, keepDependencies: boolean = false): boolean {
 		const id = svelteRequest.normalizedFilename;
 		let removed = false;
+		if (this._errors.delete(id)) {
+			removed = true;
+		}
 		if (this._js.delete(id)) {
 			removed = true;
 		}
 		if (this._css.delete(id)) {
 			removed = true;
 		}
-		const dependencies = this._dependencies.get(id);
-		if (dependencies) {
-			removed = true;
-			dependencies.forEach((d) => {
-				const dependants = this._dependants.get(d);
-				if (dependants && dependants.has(svelteRequest.filename)) {
-					dependants.delete(svelteRequest.filename);
-				}
-			});
-			this._dependencies.delete(id);
+		if (!keepDependencies) {
+			const dependencies = this._dependencies.get(id);
+			if (dependencies) {
+				removed = true;
+				dependencies.forEach((d) => {
+					const dependants = this._dependants.get(d);
+					if (dependants && dependants.has(svelteRequest.filename)) {
+						dependants.delete(svelteRequest.filename);
+					}
+				});
+				this._dependencies.delete(id);
+			}
 		}
+
 		return removed;
 	}
 
@@ -77,6 +97,10 @@ export class VitePluginSvelteCache {
 		}
 	}
 
+	public getError(svelteRequest: SvelteRequest) {
+		return this._errors.get(svelteRequest.normalizedFilename);
+	}
+
 	public getDependants(path: string): string[] {
 		const dependants = this._dependants.get(path);
 		return dependants ? [...dependants] : [];