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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltejs/vite-plugin-svelte",
-  "version": "1.0.0-next.43",
+  "version": "1.0.0-next.44",
   "license": "MIT",
   "author": "dominikg",
   "files": [
@@ -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",
+    "esbuild": "^0.14.38",
+    "rollup": "^2.72.1",
+    "svelte": "^3.48.0",
+    "tsup": "^5.12.7",
     "vite": "^2.9.8"
   },
   "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
@@ -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';
 					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/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>