fix: warn rather than crash when non-enhanced image dynamically passed to enhanced:img

Author: benmccann

.changeset/poor-heads-fix.md

@@ -0,0 +1,5 @@
+---
+'@sveltejs/enhanced-img': patch
+---
+
+fix: warn rather than crash when non-enhanced image dynamically passed to `enhanced:img`

documentation/docs/40-best-practices/07-images.md

@@ -84,7 +84,7 @@ You can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.h
 ```svelte
 <script>
 	const imageModules = import.meta.glob(
-		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp,svg}',
+		'/path/to/assets/*.{avif,gif,heif,jpeg,jpg,png,tiff,webp}',
 		{
 			eager: true,
 			query: {
@@ -99,6 +99,8 @@ You can also use [Vite's `import.meta.glob`](https://vitejs.dev/guide/features.h
 {/each}
 ```
 
+> [!NOTE] svg images are currently only supported statically
+
 ### Intrinsic Dimensions
 
 `width` and `height` are optional as they can be inferred from the source image and will be automatically added when the `<enhanced:img>` tag is preprocessed. With these attributes, the browser can reserve the correct amount of space, preventing [layout shift](https://web.dev/articles/cls). If you'd like to use a different `width` and `height` you can style the image with CSS. Because the preprocessor adds a `width` and `height` for you, if you'd like one of the dimensions to be automatically calculated then you will need to specify that:

packages/enhanced-img/src/vite-plugin.js

@@ -130,8 +130,8 @@ export function image_plugin(imagetools_plugin) {
 						const name = imports.get(original_url) || '__IMPORTED_ASSET_' + imports.size + '__';
 						const new_markup = `<img ${serialize_img_attributes(content, node.attributes, {
 							src: `{${name}}`,
-							width: metadata.width || 0,
-							height: metadata.height || 0
+							width: metadata.width,
+							height: metadata.height
 						})} />`;
 						s.update(node.start, node.end, new_markup);
 						imports.set(original_url, name);
@@ -258,8 +258,8 @@ function get_attr_value(node, attr) {
  * @param {import('../types/internal.js').Attribute[]} attributes
  * @param {{
  *   src: string,
- *   width: string | number,
- *   height: string | number
+ *   width?: string | number,
+ *   height?: string | number
  * }} details
  */
 function serialize_img_attributes(content, attributes, details) {
@@ -283,21 +283,27 @@ function serialize_img_attributes(content, attributes, details) {
 			}
 		}
 	}
-	if (!user_width && !user_height) {
-		attribute_strings.push(`width=${details.width}`);
-		attribute_strings.push(`height=${details.height}`);
-	} else if (!user_width && user_height) {
-		attribute_strings.push(
-			`width=${Math.round(
-				(stringToNumber(details.width) * user_height) / stringToNumber(details.height)
-			)}`
-		);
-	} else if (!user_height && user_width) {
-		attribute_strings.push(
-			`height=${Math.round(
-				(stringToNumber(details.height) * user_width) / stringToNumber(details.width)
-			)}`
-		);
+	if (details.width && details.height) {
+		if (!user_width && !user_height) {
+			attribute_strings.push(`width=${details.width}`);
+			attribute_strings.push(`height=${details.height}`);
+		} else if (!user_width && user_height) {
+			attribute_strings.push(
+				`width=${Math.round(
+					(stringToNumber(details.width) * user_height) / stringToNumber(details.height)
+				)}`
+			);
+		} else if (!user_height && user_width) {
+			attribute_strings.push(
+				`height=${Math.round(
+					(stringToNumber(details.height) * user_width) / stringToNumber(details.width)
+				)}`
+			);
+		}
+	} else {
+		if (!user_width || !user_height) {
+			console.warn(`Could not determine dimensions for ${content}. Was it enhanced?`);
+		}
 	}
 
 	return attribute_strings.join(' ');
@@ -367,20 +373,20 @@ function dynamic_img_to_picture(content, node, src_var_name) {
 		attributes.splice(index, 1);
 	}
 
-	const details = {
-		src: `{${src_var_name}.img.src}`,
-		width: `{${src_var_name}.img.w}`,
-		height: `{${src_var_name}.img.h}`
-	};
-
 	return `{#if typeof ${src_var_name} === 'string'}
-	<img ${serialize_img_attributes(content, attributes, details)} />
+		<img ${serialize_img_attributes(content, attributes, {
+			src: `{${src_var_name}}`
+		})} />
 {:else}
 	<picture>
 		{#each Object.entries(${src_var_name}.sources) as [format, srcset]}
 			<source {srcset}${sizes_string} type={'image/' + format} />
 		{/each}
-		<img ${serialize_img_attributes(content, attributes, details)} />
+		<img ${serialize_img_attributes(content, attributes, {
+			src: `{${src_var_name}.img.src}`,
+			width: `{${src_var_name}.img.w}`,
+			height: `{${src_var_name}.img.h}`
+		})} />
 	</picture>
 {/if}`;
 }

packages/enhanced-img/test/apps/basics/src/routes/+page.svelte

@@ -2,6 +2,11 @@
 	import logo from './logo.png?enhanced';
 </script>
 
-<enhanced:img id="playwright" src="./playwright-logo.svg" alt="Playwright logo" />
+<!-- standard image -->
 <enhanced:img id="birds" src="./birds.jpg" alt="birds" />
+
+<!-- svg over inline size -->
+<enhanced:img id="playwright" src="./playwright-logo.svg" alt="Playwright logo" />
+
+<!-- dynamic image -->
 <enhanced:img id="logo" src={logo} alt="Svelte logo" />