fix: logic issues applying automatic enhancements

packages/process/src/renderer.ts

@@ -2,7 +2,11 @@ import { RenderableTreeNodes, Tag } from '@markdoc/markdoc';
 import { sanitize_for_svelte } from './transformer';
 import { escape } from 'html-escaper';
 import { IMAGE_PREFIX, IMPORT_PREFIX } from './constants';
-import { is_relative_path, parse_query_params_from_string } from './utils';
+import {
+    is_relative_path,
+    parse_query_params_from_string,
+    replace_query_params_from_string,
+} from './utils';
 import { Config } from './config';
 
 export function render_html(
@@ -56,16 +60,21 @@ export function render_html(
                  * Allow importing relative images and import them via vite.
                  */
                 const unique_name = `${IMAGE_PREFIX}${dependencies.size}`;
+                const params = parse_query_params_from_string(String(value));
                 const use_enhanced_img_tag =
                     enhanced_images?.mode === 'automatic' ||
                     (enhanced_images?.mode === 'manually' &&
-                        parse_query_params_from_string(String(value)).has(
-                            'enhanced',
-                        ));
+                        params.has('enhanced'));
                 if (use_enhanced_img_tag) {
                     output = output.replace('<img', '<img:enhanced');
+                    params.set('enhanced', 'true');
+                    dependencies.set(
+                        unique_name,
+                        replace_query_params_from_string(String(value), params),
+                    );
+                } else {
+                    dependencies.set(unique_name, String(value));
                 }
-                dependencies.set(unique_name, String(value));
                 output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
                     unique_name,
                     'import',

packages/process/src/utils.ts

@@ -58,3 +58,15 @@ export function parse_query_params_from_string(
 
     return new URLSearchParams(string);
 }
+
+export function replace_query_params_from_string(
+    string: string,
+    params: URLSearchParams,
+): string {
+    const index = string.indexOf('?');
+    if (index !== -1) {
+        string = string.slice(0, index);
+    }
+
+    return string + '?' + params.toString();
+}

packages/process/tests/processor/images - enhanced - automatic/compiled.txt

@@ -1 +1 @@
-<script>import IMAGE__0 from './image.jpeg';import IMAGE__1 from '../images/image.jpeg';</script><article><h1>relative</h1><p><img:enhanced src={IMAGE__0} alt=""> <img:enhanced src={IMAGE__1} alt=""></p><h1>others</h1><p><img src="image.jpeg" alt=""> <img src="/image.jpeg" alt=""> <img src="https://github.com/logo.jpeg" alt=""></p></article>
+<script>import IMAGE__0 from './image.jpeg?enhanced=true';import IMAGE__1 from '../images/image.jpeg?enhanced=true';</script><article><h1>relative</h1><p><img:enhanced src={IMAGE__0} alt=""> <img:enhanced src={IMAGE__1} alt=""></p><h1>others</h1><p><img src="image.jpeg" alt=""> <img src="/image.jpeg" alt=""> <img src="https://github.com/logo.jpeg" alt=""></p></article>

packages/process/tests/processor/images - enhanced - manually/compiled.txt

@@ -1 +1 @@
-<script>import IMAGE__0 from './image.jpeg';import IMAGE__1 from '../images/image.jpeg';import IMAGE__2 from './image.jpeg?enhanced';import IMAGE__3 from '../images/image.jpeg?enhanced';</script><article><h1>relative</h1><p><img src={IMAGE__0} alt=""> <img src={IMAGE__1} alt=""> <img:enhanced src={IMAGE__2} alt=""> <img:enhanced src={IMAGE__3} alt=""></p><h1>others</h1><p><img src="image.jpeg" alt=""> <img src="/image.jpeg" alt=""> <img src="https://github.com/logo.jpeg" alt=""></p></article>
+<script>import IMAGE__0 from './image.jpeg';import IMAGE__1 from '../images/image.jpeg';import IMAGE__2 from './image.jpeg?enhanced=true';import IMAGE__3 from '../images/image.jpeg?enhanced=true';</script><article><h1>relative</h1><p><img src={IMAGE__0} alt=""> <img src={IMAGE__1} alt=""> <img:enhanced src={IMAGE__2} alt=""> <img:enhanced src={IMAGE__3} alt=""></p><h1>others</h1><p><img src="image.jpeg" alt=""> <img src="/image.jpeg" alt=""> <img src="https://github.com/logo.jpeg" alt=""></p></article>

packages/process/tests/utils.test.mjs

@@ -6,9 +6,10 @@ import {
     get_all_files,
     path_exists,
     write_to_file,
+    replace_query_params_from_string,
 } from '../dist/utils.js';
 
-test('relative_posix_path', async () => {
+test('relative_posix_path', () => {
     assert.equal(
         relative_posix_path('/test/a/b/c', '/test/file.js'),
         '../../file.js',
@@ -69,3 +70,22 @@ test('write_to_file', async (context) => {
         );
     });
 });
+
+test('replace_query_params_from_string', async (context) => {
+    await context.test('appending', () => {
+        const params = new URLSearchParams();
+        params.append('enhanced', 'true');
+        assert.equal(
+            replace_query_params_from_string('test', params),
+            'test?enhanced=true',
+        );
+    });
+    await context.test('replacing', () => {
+        const params = new URLSearchParams();
+        params.append('enhanced', 'true');
+        assert.equal(
+            replace_query_params_from_string('test?param1=1&param2=2', params),
+            'test?enhanced=true',
+        );
+    });
+});