@sveltejs/vite-plugin-svelte 1.0.0-next.44 → 1.0.0-next.47

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.44",
+  "version": "1.0.0-next.47",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -45,8 +45,8 @@
     "debug": "^4.3.4",
     "deepmerge": "^4.2.2",
     "kleur": "^4.1.4",
-    "magic-string": "^0.26.1",
-    "svelte-hmr": "^0.14.11"
+    "magic-string": "^0.26.2",
+    "svelte-hmr": "^0.14.12"
   },
   "peerDependencies": {
     "diff-match-patch": "^1.0.5",
@@ -62,15 +62,15 @@
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.14.38",
-    "rollup": "^2.72.1",
+    "esbuild": "^0.14.42",
+    "rollup": "^2.75.4",
     "svelte": "^3.48.0",
-    "tsup": "^5.12.7",
-    "vite": "^2.9.8"
+    "tsup": "^6.0.1",
+    "vite": "^2.9.9"
   },
   "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/index.ts

@@ -218,6 +218,8 @@ export function svelte(inlineOptions?: Partial<Options>): Plugin[] {
 	return plugins.filter(Boolean);
 }
 
+export { loadSvelteConfig } from './utils/load-svelte-config';
+
 export {
 	Options,
 	Preprocessor,

package/src/ui/inspector/Inspector.svelte

@@ -99,7 +99,7 @@
 	}
 
 	function keydown(event) {
-		if (event.repeat) {
+		if (event.repeat || event.key === undefined) {
 			return;
 		}
 

package/src/ui/inspector/plugin.ts

@@ -43,7 +43,7 @@ export function svelteInspector(): Plugin {
 				disabled = true;
 			} else {
 				if (vps.api.options.kit && !inspectorOptions.appendTo) {
-					const out_dir = vps.api.options.kit.outDir || '.svelte-kit';
+					const out_dir = path.basename(vps.api.options.kit.outDir || '.svelte-kit');
 					inspectorOptions.appendTo = `${out_dir}/runtime/client/start.js`;
 				}
 				appendTo = inspectorOptions.appendTo;

package/src/utils/__tests__/dependencies.spec.ts

@@ -1,6 +1,10 @@
+import { describe, it, expect } from 'vitest';
 import { findRootSvelteDependencies, needsOptimization } from '../dependencies';
 import * as path from 'path';
 import { createRequire } from 'module';
+import { fileURLToPath } from 'url';
+const __dir = path.dirname(fileURLToPath(import.meta.url));
+const e2eTestRoot = path.resolve(__dir, '../../../../../packages/e2e-tests');
 
 describe('dependencies', () => {
 	describe('findRootSvelteDependencies', () => {
@@ -11,9 +15,7 @@ describe('dependencies', () => {
 			expect(deps[0].path).toEqual([]);
 		});
 		it('should find nested svelte dependencies in packages/e2e-test/package-json-svelte-field', () => {
-			const deps = findRootSvelteDependencies(
-				path.resolve('packages/e2e-tests/package-json-svelte-field')
-			);
+			const deps = findRootSvelteDependencies(path.join(e2eTestRoot, 'package-json-svelte-field'));
 			expect(deps).toHaveLength(3);
 			const hybrid = deps.find((dep) => dep.name === 'e2e-test-dep-svelte-hybrid');
 			expect(hybrid).toBeTruthy();
@@ -29,7 +31,8 @@ describe('dependencies', () => {
 	});
 	describe('needsOptimization', () => {
 		it('should optimize cjs deps only', () => {
-			const localRequire = createRequire(path.resolve('packages/e2e-tests/dependencies'));
+			const testDepsPath = path.join(e2eTestRoot, 'dependencies/package.json');
+			const localRequire = createRequire(testDepsPath);
 			expect(needsOptimization('e2e-test-dep-cjs-and-esm', localRequire)).toBe(false);
 			expect(needsOptimization('e2e-test-dep-cjs-only', localRequire)).toBe(true);
 			expect(needsOptimization('e2e-test-dep-esm-only', localRequire)).toBe(false);

package/src/utils/__tests__/sourcemap.spec.ts

@@ -1,3 +1,4 @@
+import { describe, it, expect } from 'vitest';
 import { buildMagicString, buildSourceMap } from '../sourcemap';
 
 describe('sourcemap', () => {

package/src/utils/compile.ts

@@ -21,7 +21,8 @@ const _createCompileSvelte = (makeHot: Function) =>
 		const compileOptions: CompileOptions = {
 			...options.compilerOptions,
 			filename,
-			generate: ssr ? 'ssr' : 'dom'
+			generate: ssr ? 'ssr' : 'dom',
+			format: 'esm'
 		};
 		if (options.hot && options.emitCss) {
 			const hash = `s-${safeBase64Hash(normalizedFilename)}`;

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/options.ts

@@ -61,10 +61,7 @@ export async function preResolveOptions(
 	};
 	const defaultOptions: Partial<Options> = {
 		extensions: ['.svelte'],
-		emitCss: true,
-		compilerOptions: {
-			format: 'esm'
-		}
+		emitCss: true
 	};
 	const svelteConfig = await loadSvelteConfig(viteConfigWithResolvedRoot, inlineOptions);
 	const extraOptions: Partial<PreResolvedOptions> = {
@@ -118,6 +115,7 @@ export function resolveOptions(
 	};
 	const merged: ResolvedOptions = mergeConfigs(defaultOptions, preResolveOptions, extraOptions);
 
+	removeIgnoredOptions(merged);
 	addExtraPreprocessors(merged, viteConfig);
 	enforceOptionsForHmr(merged);
 	enforceOptionsForProduction(merged);
@@ -177,6 +175,26 @@ function enforceOptionsForProduction(options: ResolvedOptions) {
 	}
 }
 
+function removeIgnoredOptions(options: ResolvedOptions) {
+	const ignoredCompilerOptions = ['generate', 'format', 'filename'];
+	if (options.hot && options.emitCss) {
+		ignoredCompilerOptions.push('cssHash');
+	}
+	const passedCompilerOptions = Object.keys(options.compilerOptions || {});
+	const passedIgnored = passedCompilerOptions.filter((o) => ignoredCompilerOptions.includes(o));
+	if (passedIgnored.length) {
+		log.warn(
+			`The following Svelte compilerOptions are controlled by vite-plugin-svelte and essential to its functionality. User-specified values are ignored. Please remove them from your configuration: ${passedIgnored.join(
+				', '
+			)}`
+		);
+		passedIgnored.forEach((ignored) => {
+			// @ts-expect-error string access
+			delete options.compilerOptions[ignored];
+		});
+	}
+}
+
 // 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
@@ -401,11 +419,13 @@ export interface Options {
 	emitCss?: boolean;
 
 	/**
-	 * The options to be passed to the Svelte compiler
+	 * The options to be passed to the Svelte compiler. A few options are set by default,
+	 * including `dev` and `css`. However, some options are non-configurable, like
+	 * `filename`, `format`, `generate`, and `cssHash` (in dev).
 	 *
 	 * @see https://svelte.dev/docs#svelte_compile
 	 */
-	compilerOptions?: CompileOptions;
+	compilerOptions?: Omit<CompileOptions, 'filename' | 'format' | 'generate'>;
 
 	/**
 	 * Handles warning emitted from the Svelte compiler