@sveltejs/enhanced-img - npm Package Compare versions

Comparing version 0.3.4 to 0.3.5

package.json

 {
   "name": "@sveltejs/enhanced-img",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "description": "Image optimization for your Svelte apps",
@@ -39,3 +39,3 @@ "repository": {
     "@types/estree": "^1.0.5",
-    "@types/node": "^18.19.3",
+    "@types/node": "^18.19.48",
     "estree-walker": "^3.0.3",
@@ -42,0 +42,0 @@ "rollup": "^4.14.2",

src/preprocessor.js

@@ -8,4 +8,2 @@ import { existsSync } from 'node:fs';
 
-const ASSET_PREFIX = '___ASSET___';
-
 // TODO: expose this in vite-imagetools rather than duplicating it
@@ -39,8 +37,17 @@ const OPTIMIZABLE = /^[^?]+\.(avif|heif|gif|jpeg|jpg|png|tiff|webp)(\?.*)?$/;
 
-			// Import path to import name
-			// e.g. ./foo.png => ___ASSET___0
-			/** @type {Map<string, string>} */
+			/**
+			 * Import path to import name
+			 * e.g. ./foo.png => __IMPORTED_ASSET_0__
+			 * @type {Map<string, string>}
+			 */
 			const imports = new Map();
 
 			/**
+			 * Vite name to declaration name
+			 * e.g. __VITE_ASSET_0__ => __DECLARED_ASSET_0__
+			 * @type {Map<string, string>}
+			 */
+			const consts = new Map();
+
+			/**
 			 * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
@@ -99,6 +106,6 @@ * @param {{ type: string, start: number, end: number, raw: string }} src_attribute
 					}
-					s.update(node.start, node.end, img_to_picture(content, node, image));
+					s.update(node.start, node.end, img_to_picture(consts, content, node, image));
 				} else {
-					// e.g. <img src="./foo.svg" /> => <img src={___ASSET___0} />
-					const name = ASSET_PREFIX + imports.size;
+					// e.g. <img src="./foo.svg" /> => <img src={__IMPORTED_ASSET_0__} />
+					const name = '__IMPORTED_ASSET_' + imports.size + '__';
 					const { start, end } = src_attribute;
@@ -137,14 +144,27 @@ // update src with reference to imported asset
 			if (imports.size) {
-				let import_text = '';
+				let text = '';
 				for (const [path, import_name] of imports.entries()) {
-					import_text += `import ${import_name} from "${path}";`;
+					text += `import ${import_name} from "${path}";`;
 				}
 				if (ast.instance) {
 					// @ts-ignore
-					s.appendLeft(ast.instance.content.start, import_text);
+					s.appendLeft(ast.instance.content.start, text);
 				} else {
-					s.append(`<script>${import_text}</script>`);
+					s.prepend(`<script>${text}</script>`);
 				}
 			}
 
+			if (consts.size) {
+				let text = '';
+				for (const [vite_name, declaration_name] of consts.entries()) {
+					text += `\tconst ${declaration_name} = "${vite_name}";\n`;
+				}
+				if (ast.module) {
+					// @ts-ignore
+					s.appendLeft(ast.module.content.start, text);
+				} else {
+					s.prepend(`<script context="module">\n${text}</script>\n`);
+				}
+			}
+
 			return {
@@ -271,2 +291,3 @@ code: s.toString(),
 /**
+ * @param {Map<string,string>} consts
  * @param {string} content
@@ -276,3 +297,3 @@ * @param {import('svelte/types/compiler/interfaces').TemplateNode} node
  */
-function img_to_picture(content, node, image) {
+function img_to_picture(consts, content, node, image) {
 	/** @type {Array<import('svelte/types/compiler/interfaces').BaseDirective | import('svelte/types/compiler/interfaces').Attribute | import('svelte/types/compiler/interfaces').SpreadAttribute>} attributes */
@@ -290,7 +311,7 @@ const attributes = node.attributes;
 	for (const [format, srcset] of Object.entries(image.sources)) {
-		res += `<source srcset=${to_value(srcset)}${sizes_string} type="image/${format}" />`;
+		res += `<source srcset=${to_value(consts, srcset)}${sizes_string} type="image/${format}" />`;
 	}
 
 	res += `<img ${serialize_img_attributes(content, attributes, {
-		src: to_value(image.img.src),
+		src: to_value(consts, image.img.src),
 		width: image.img.w,
@@ -304,6 +325,15 @@ height: image.img.h
 /**
+ * @param {Map<string, string>} consts
  * @param {string} src
  */
-function to_value(src) {
-	return src.startsWith('__VITE_ASSET__') ? `{"${src}"}` : `"${src}"`;
+function to_value(consts, src) {
+	if (src.startsWith('__VITE_ASSET__')) {
+		let var_name = consts.get(src);
+		if (!var_name) {
+			var_name = '__DECLARED_ASSET_' + consts.size + '__';
+			consts.set(src, var_name);
+		}
+		return `{${var_name}}`;
+	}
+	return `"${src}"`;
 }
@@ -310,0 +340,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

19878

increased by4.11%

Lines of code

465

increased by6.65%

No dependency changes