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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.43",
+  "version": "1.0.0-next.46",
   "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,16 +62,15 @@
     "@types/debug": "^4.1.7",
     "@types/diff-match-patch": "^1.0.32",
     "diff-match-patch": "^1.0.5",
-    "esbuild": "^0.14.36",
-    "rollup": "^2.70.2",
-    "svelte": "^3.47.0",
-    "tsup": "^5.12.5",
-    "vite": "^2.9.8"
+    "esbuild": "^0.14.39",
+    "rollup": "^2.74.1",
+    "svelte": "^3.48.0",
+    "tsup": "^5.12.8",
+    "vite": "^2.9.9"
   },
   "scripts": {
-    "dev": "pnpm run build:ci -- --sourcemap --watch src",
+    "dev": "pnpm build:ci --sourcemap --watch src",
     "build:ci": "rimraf dist && tsup-node src/index.ts --format esm,cjs --no-splitting --target node14",
-    "build": "pnpm run build:ci -- --dts --sourcemap"
-  },
-  "readme": "# @sveltejs/vite-plugin-svelte\n\nThe official [Svelte](https://svelte.dev) plugin for [Vite](https://vitejs.dev).\n\n## Usage\n\n```js\n// vite.config.js\nimport { defineConfig } from 'vite';\nimport { svelte } from '@sveltejs/vite-plugin-svelte';\n\nexport default defineConfig({\n  plugins: [\n    svelte({\n      /* plugin options */\n    })\n  ]\n});\n```\n\n## Documentation\n\n- [Plugin options](../../docs/config.md)\n- [FAQ](../../docs/faq.md)\n\n## License\n\n[MIT](./LICENSE)\n"
+    "build": "pnpm build:ci --dts --sourcemap"
+  }
 }

package/src/ui/inspector/Inspector.svelte

@@ -1,16 +1,24 @@
 <script>
 	// do not use TS here so that this component works in non-ts projects too
 	import { onMount } from 'svelte';
-	// @ts-expect-error virtual import is resolved by vite-plugin-svelte-inspector
-	// eslint-disable-next-line node/no-missing-import
-	import icon from 'virtual:svelte-inspector:icon.svg';
-	// @ts-expect-error virtual import is resolved by vite-plugin-svelte-inspector
 	// eslint-disable-next-line node/no-missing-import
 	import options from 'virtual:svelte-inspector-options';
 	const toggle_combo = options.toggleKeyCombo?.toLowerCase().split('-');
 
 	let enabled = false;
 
+	const icon = `data:image/svg+xml;base64,${btoa(
+		`
+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" viewBox="0 0 107 128">
+  <title>svelte-inspector-logo</title>
+  <path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/>
+  <polygon points="0,0 15,40 40,20" stroke="#ff3e00" fill="#ff3e00"></polygon>
+</svg>
+`
+			.replace(/[\n\r\t\s]+/g, ' ')
+			.trim()
+	)}`;
+
 	// location of code in file
 	let file_loc;
 	// cursor pos and width for file_loc overlay positioning
@@ -91,7 +99,7 @@
 	}
 
 	function keydown(event) {
-		if (event.repeat) {
+		if (event.repeat || event.key === undefined) {
 			return;
 		}
 
@@ -131,7 +139,6 @@
 		const b = document.body;
 		if (options.customStyles) {
 			b.classList.add('svelte-inspector-enabled');
-			b.style.setProperty('--svelte-inspector-cursor', `url(${JSON.stringify(icon)})`);
 		}
 		listeners(b, enabled);
 	}
@@ -143,12 +150,17 @@
 		listeners(b, enabled);
 		if (options.customStyles) {
 			b.classList.remove('svelte-inspector-enabled');
-			b.style.removeProperty('--svelte-inspector-cursor');
 			active_el?.classList.remove('svelte-inspector-active-target');
 		}
+		active_el = null;
 	}
 
 	onMount(() => {
+		const s = document.createElement('style');
+		s.setAttribute('type', 'text/css');
+		s.setAttribute('id', 'svelte-inspector-style');
+		s.textContent = `:root { --svelte-inspector-icon: url(${icon})};`;
+		document.head.append(s);
 		if (toggle_combo) {
 			document.body.addEventListener('keydown', keydown);
 			if (options.holdMode) {
@@ -158,6 +170,10 @@
 		return () => {
 			// make sure we get rid of everything
 			disable();
+			const s = document.head.querySelector('#svelte-inspector-style');
+			if (s) {
+				document.head.removeChild(s);
+			}
 			if (toggle_combo) {
 				document.body.removeEventListener('keydown', keydown);
 				if (options.holdMode) {
@@ -172,7 +188,7 @@
 	<div
 		class="svelte-inspector-toggle"
 		class:enabled
-		style={`background-image:url(${icon});${options.toggleButtonPos
+		style={`background-image: var(--svelte-inspector-icon);${options.toggleButtonPos
 			.split('-')
 			.map((p) => `${p}: 8px;`)
 			.join('')}`}
@@ -193,7 +209,7 @@
 
 <style>
 	:global(body.svelte-inspector-enabled *) {
-		cursor: var(--svelte-inspector-cursor), crosshair !important;
+		cursor: var(--svelte-inspector-icon), crosshair !important;
 	}
 	:global(.svelte-inspector-active-target) {
 		outline: 2px dashed #ff3e00 !important;

package/src/ui/inspector/{load-inspector.ts → load-inspector.js}

@@ -1,6 +1,5 @@
-// @ts-expect-error virtual import is resolved by vite-plugin-svelte-inspector
 // eslint-disable-next-line node/no-missing-import
-import Inspector from 'virtual:svelte-inspector:Inspector.svelte';
+import Inspector from 'virtual:svelte-inspector-path:Inspector.svelte';
 
 function create_inspector_host() {
 	const id = 'svelte-inspector-host';

package/src/ui/inspector/plugin.ts

@@ -1,7 +1,9 @@
-import { createRequire } from 'module';
-import { Plugin } from 'vite';
+import { Plugin, normalizePath } from 'vite';
 import { log } from '../../utils/log';
 import { InspectorOptions } from '../../utils/options';
+import path from 'path';
+import { fileURLToPath } from 'url';
+import fs from 'fs';
 
 const defaultInspectorOptions: InspectorOptions = {
 	toggleKeyCombo: process.platform === 'win32' ? 'control-shift' : 'meta-shift',
@@ -11,11 +13,17 @@ const defaultInspectorOptions: InspectorOptions = {
 	customStyles: true
 };
 
+function getInspectorPath() {
+	const pluginPath = normalizePath(path.dirname(fileURLToPath(import.meta.url)));
+	return pluginPath.replace(/\/vite-plugin-svelte\/dist$/, '/vite-plugin-svelte/src/ui/inspector/');
+}
+
 export function svelteInspector(): Plugin {
-	let root: string;
-	let rootRequire: NodeRequire;
+	const inspectorPath = getInspectorPath();
+	log.debug.enabled && log.debug(`svelte inspector path: ${inspectorPath}`);
 	let inspectorOptions: InspectorOptions;
-	let append_to: string | undefined;
+	let appendTo: string | undefined;
+	let disabled = false;
 
 	return {
 		name: 'vite-plugin-svelte:inspector',
@@ -31,55 +39,52 @@ export function svelteInspector(): Plugin {
 				};
 			}
 			if (!vps || !inspectorOptions) {
-				// disabled, turn all hooks into noops
-				this.resolveId = this.load = this.transformIndexHtml = this.transform = () => {};
+				log.debug('inspector disabled, could not find config');
+				disabled = true;
 			} else {
-				root = config.root || process.cwd();
-				rootRequire = createRequire(root);
 				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`;
 				}
-				append_to = inspectorOptions.appendTo;
+				appendTo = inspectorOptions.appendTo;
 			}
 		},
 
 		async resolveId(importee: string, importer, options) {
-			if (options?.ssr) {
+			if (options?.ssr || disabled) {
 				return;
 			}
-			if (importee === 'virtual:svelte-inspector-options') {
+			if (importee.startsWith('virtual:svelte-inspector-options')) {
 				return importee;
-			}
-			if (importee.startsWith('virtual:svelte-inspector:')) {
-				// this is needed because the plugin itself is not a dependency of the app so regular resolve may not find it
-				const file = importee.replace(
-					'virtual:svelte-inspector:',
-					'@sveltejs/vite-plugin-svelte/src/ui/inspector/'
-				);
-				const path = rootRequire.resolve(file);
-				if (path) {
-					return path;
-				} else {
-					log.error.once(`failed to resolve ${file} for ${importee} from ${root}`);
-				}
+			} else if (importee.startsWith('virtual:svelte-inspector-path:')) {
+				const resolved = importee.replace('virtual:svelte-inspector-path:', inspectorPath);
+				log.debug.enabled && log.debug(`resolved ${importee} with ${resolved}`);
+				return resolved;
 			}
 		},
-		load(id) {
+
+		async load(id, options) {
+			if (options?.ssr || disabled) {
+				return;
+			}
 			if (id === 'virtual:svelte-inspector-options') {
 				return `export default ${JSON.stringify(inspectorOptions ?? {})}`;
+			} else if (id.startsWith(inspectorPath)) {
+				// read file ourselves to avoid getting shut out by vites fs.allow check
+				return await fs.promises.readFile(id, 'utf-8');
 			}
 		},
+
 		transform(code: string, id: string, options?: { ssr?: boolean }) {
-			if (options?.ssr || !append_to) {
+			if (options?.ssr || disabled || !appendTo) {
 				return;
 			}
-			if (id.endsWith(append_to)) {
-				return { code: `${code}\nimport 'virtual:svelte-inspector:load-inspector.ts'` };
+			if (id.endsWith(appendTo)) {
+				return { code: `${code}\nimport 'virtual:svelte-inspector-path:load-inspector.js'` };
 			}
 		},
 		transformIndexHtml(html) {
-			if (append_to) {
+			if (disabled || appendTo) {
 				return;
 			}
 			return {
@@ -91,7 +96,7 @@ export function svelteInspector(): Plugin {
 						attrs: {
 							type: 'module',
 							// /@id/ is needed, otherwise the virtual: is seen as protocol by browser and cors error happens
-							src: '/@id/virtual:svelte-inspector:load-inspector.ts'
+							src: '/@id/virtual:svelte-inspector-path:load-inspector.js'
 						}
 					}
 				]

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/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

package/src/ui/inspector/icon.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="21" height="25" viewBox="0 0 107 128">
-	<title>svelte-inspector-logo</title>
-	<path d="M94.1566,22.8189c-10.4-14.8851-30.94-19.2971-45.7914-9.8348L22.2825,29.6078A29.9234,29.9234,0,0,0,8.7639,49.6506a31.5136,31.5136,0,0,0,3.1076,20.2318A30.0061,30.0061,0,0,0,7.3953,81.0653a31.8886,31.8886,0,0,0,5.4473,24.1157c10.4022,14.8865,30.9423,19.2966,45.7914,9.8348L84.7167,98.3921A29.9177,29.9177,0,0,0,98.2353,78.3493,31.5263,31.5263,0,0,0,95.13,58.117a30,30,0,0,0,4.4743-11.1824,31.88,31.88,0,0,0-5.4473-24.1157" style="fill:#ff3e00"/><path d="M45.8171,106.5815A20.7182,20.7182,0,0,1,23.58,98.3389a19.1739,19.1739,0,0,1-3.2766-14.5025,18.1886,18.1886,0,0,1,.6233-2.4357l.4912-1.4978,1.3363.9815a33.6443,33.6443,0,0,0,10.203,5.0978l.9694.2941-.0893.9675a5.8474,5.8474,0,0,0,1.052,3.8781,6.2389,6.2389,0,0,0,6.6952,2.485,5.7449,5.7449,0,0,0,1.6021-.7041L69.27,76.281a5.4306,5.4306,0,0,0,2.4506-3.631,5.7948,5.7948,0,0,0-.9875-4.3712,6.2436,6.2436,0,0,0-6.6978-2.4864,5.7427,5.7427,0,0,0-1.6.7036l-9.9532,6.3449a19.0329,19.0329,0,0,1-5.2965,2.3259,20.7181,20.7181,0,0,1-22.2368-8.2427,19.1725,19.1725,0,0,1-3.2766-14.5024,17.9885,17.9885,0,0,1,8.13-12.0513L55.8833,23.7472a19.0038,19.0038,0,0,1,5.3-2.3287A20.7182,20.7182,0,0,1,83.42,29.6611a19.1739,19.1739,0,0,1,3.2766,14.5025,18.4,18.4,0,0,1-.6233,2.4357l-.4912,1.4978-1.3356-.98a33.6175,33.6175,0,0,0-10.2037-5.1l-.9694-.2942.0893-.9675a5.8588,5.8588,0,0,0-1.052-3.878,6.2389,6.2389,0,0,0-6.6952-2.485,5.7449,5.7449,0,0,0-1.6021.7041L37.73,51.719a5.4218,5.4218,0,0,0-2.4487,3.63,5.7862,5.7862,0,0,0,.9856,4.3717,6.2437,6.2437,0,0,0,6.6978,2.4864,5.7652,5.7652,0,0,0,1.602-.7041l9.9519-6.3425a18.978,18.978,0,0,1,5.2959-2.3278,20.7181,20.7181,0,0,1,22.2368,8.2427,19.1725,19.1725,0,0,1,3.2766,14.5024,17.9977,17.9977,0,0,1-8.13,12.0532L51.1167,104.2528a19.0038,19.0038,0,0,1-5.3,2.3287" style="fill:#fff"/>
-	<polygon points="0,0 15,40 40,20" stroke="#ff3e00" fill="#ff3e00"></polygon>
-</svg>