fix: auto-import of svg images (#11035)

Author: benmccann

packages/enhanced-img/src/preprocessor.js

@@ -31,6 +31,11 @@ export function image(opts) {
 			const s = new MagicString(content);
 			const ast = parse(content, { filename });
 
+			// Import path to import name
+			// e.g. ./foo.png => ___ASSET___0
+			/** @type {Map<string, string>} */
+			const imports = new Map();
+
 			/**
 			 * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
 			 * @param {{ type: string, start: number, end: number, raw: string }} src_attribute
@@ -46,7 +51,8 @@ export function image(opts) {
 					return;
 				}
 
-				let url = src_attribute.raw.trim();
+				const original_url = src_attribute.raw.trim();
+				let url = original_url;
 
 				const sizes = get_attr_value(node, 'sizes');
 				const width = get_attr_value(node, 'width');
@@ -74,8 +80,17 @@ export function image(opts) {
 				if (OPTIMIZABLE.test(url)) {
 					s.update(node.start, node.end, img_to_picture(content, node, details));
 				} else {
-					// e.g. <img src="./foo.svg" /> => <img src="{___ASSET___0}" />
-					s.update(src_attribute.start, src_attribute.end, `{${details}}`);
+					// e.g. <img src="./foo.svg" /> => <img src={___ASSET___0} />
+					const { start, end } = src_attribute;
+					// update src with reference to imported asset
+					s.update(
+						is_quote(content, start - 1) ? start - 1 : start,
+						is_quote(content, end) ? end + 1 : end,
+						`{${details.name}}`
+					);
+					// update `enhanced:img` to `img`
+					s.update(node.start + 1, node.start + 1 + 'enhanced:img'.length, 'img');
+					imports.set(original_url, details.name);
 				}
 			}
 
@@ -97,6 +112,20 @@ export function image(opts) {
 				}
 			});
 
+			// add imports
+			if (imports.size) {
+				let import_text = '';
+				for (const [path, import_name] of imports.entries()) {
+					import_text += `import ${import_name} from "${path}";`;
+				}
+				if (ast.instance) {
+					// @ts-ignore
+					s.appendLeft(ast.instance.content.start, import_text);
+				} else {
+					s.append(`<script>${import_text}</script>`);
+				}
+			}
+
 			return {
 				code: s.toString(),
 				map: s.generateMap()
@@ -105,6 +134,15 @@ export function image(opts) {
 	};
 }
 
+/**
+ * @param {string} content
+ * @param {number} index
+ * @returns {boolean}
+ */
+function is_quote(content, index) {
+	return content.charAt(index) === '"' || content.charAt(index) === "'";
+}
+
 /**
  * @param {{
  *   plugin_context: import('rollup').PluginContext

packages/enhanced-img/test/Input.svelte

@@ -31,6 +31,8 @@
 
 <enhanced:img src="/src/foo.png" alt="absolute path test" />
 
+<enhanced:img src="./foo.svg" alt="svg test" />
+
 {#each images as image}
 	<enhanced:img src={image} alt="opt-in test" />
 {/each}

packages/enhanced-img/test/Output.svelte

@@ -1,5 +1,8 @@
 <script lang="ts">
+	import ___ASSET___6 from "./foo.svg";
+	
 	import manual_image1 from './no.png';
+	
 	import manual_image2 from './no.svg';
 
 	const images = [manual_image1, manual_image2];
@@ -27,6 +30,8 @@
 
 <picture><source srcset="/1 1440w, /2 960w" type="image/avif" /><source srcset="/3 1440w, /4 960w" type="image/webp" /><source srcset="5 1440w, /6 960w" type="image/png" /><img src=/7 alt="absolute path test" width=1440 height=1440 /></picture>
 
+<img src={___ASSET___6} alt="svg test" />
+
 {#each images as image}
 	{#if typeof image === 'string'}
 	<img src={image.img.src} alt="opt-in test" width={image.img.w} height={image.img.h} />

packages/enhanced-img/test/preprocessor.spec.js

@@ -29,7 +29,10 @@ it('Image preprocess snapshot test', async () => {
 		{ filename }
 	);
 
-	expect(processed.code).toMatchFileSnapshot('./Output.svelte');
+	// Make imports readable
+	const ouput = processed.code.replace(/import/g, '\n\timport');
+
+	expect(ouput).toMatchFileSnapshot('./Output.svelte');
 });
 
 it('parses a minimized object', () => {