fix: support shorthand attribute syntax on enhanced-img (#11884)

Co-authored-by: Willow (GHOST) <ghostdevbusiness@gmail.com>
Co-authored-by: Ben McCann <322311+benmccann@users.noreply.github.com>

.changeset/good-parrots-act.md

@@ -0,0 +1,5 @@
+---
+"@sveltejs/enhanced-img": patch
+---
+
+fix: support shorthand attribute syntax

packages/enhanced-img/src/preprocessor.js

@@ -53,6 +53,10 @@ export function image(opts) {
 						.trim();
 					s.update(node.start, node.end, dynamic_img_to_picture(content, node, src_var_name));
 					return;
+				} else if (src_attribute.type === 'AttributeShorthand') {
+					const src_var_name = content.substring(src_attribute.start, src_attribute.end).trim();
+					s.update(node.start, node.end, dynamic_img_to_picture(content, node, src_var_name));
+					return;
 				}
 
 				const original_url = src_attribute.raw.trim();

packages/enhanced-img/test/Input.svelte

@@ -2,6 +2,7 @@
 	import manual_image1 from './no.png';
 	import manual_image2 from './no.svg';
 
+	const src = manual_image1;
 	const images = [manual_image1, manual_image2];
 
 	let foo: string = 'bar';
@@ -31,6 +32,8 @@
 
 <enhanced:img src="/src/foo.png" alt="absolute path test" />
 
+<enhanced:img {src} alt="attribute shorthand test" />
+
 <enhanced:img src="./foo.svg" alt="svg test" />
 
 {#each images as image}

packages/enhanced-img/test/Output.svelte

@@ -5,6 +5,7 @@
 	
 	import manual_image2 from './no.svg';
 
+	const src = manual_image1;
 	const images = [manual_image1, manual_image2];
 
 	let foo: string = 'bar';
@@ -30,6 +31,17 @@
 
 <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>
 
+{#if typeof src === 'string'}
+	<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
+{:else}
+	<picture>
+		{#each Object.entries(src.sources) as [format, srcset]}
+			<source {srcset} type={'image/' + format} />
+		{/each}
+		<img src={src.img.src} alt="attribute shorthand test" width={src.img.w} height={src.img.h} />
+	</picture>
+{/if}
+
 <img src={___ASSET___0} alt="svg test" />
 
 {#each images as image}