fix: pass imported images to node as src when relative

TorstenDittmann · Jan 4, 2024 · b63bbaa · b63bbaa
1 parent 8ef4c23
commit b63bbaa
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 33 deletions.
diff --git a/packages/process/src/renderer.ts b/packages/process/src/renderer.ts
@@ -1,7 +1,7 @@
 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 { IMAGE_PREFIX, IMPORT_PREFIX, NODES_IMPORT } from './constants';
 import {
     is_relative_path,
     parse_query_params_from_string,
@@ -50,40 +50,66 @@ export function render_html(
      */
     let output = `<${name}`;
     for (const [key, value] of Object.entries(attributes ?? {})) {
+        const is_imported_image = key === 'src' && is_relative_path(value);
         if (is_svelte) {
-            output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
-                value,
-            )}`;
+            switch (name.toLowerCase()) {
+                case `${NODES_IMPORT}.image`.toLowerCase():
+                    if (is_imported_image) {
+                        const unique_name = `${IMAGE_PREFIX}${dependencies.size}`;
+                        dependencies.set(unique_name, String(value));
+                        output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
+                            unique_name,
+                            'import',
+                        )}`;
+                        break;
+                    }
+
+                default:
+                    output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
+                        value,
+                    )}`;
+                    break;
+            }
         } else {
-            if (name === 'img' && key === 'src' && is_relative_path(value)) {
-                /**
-                 * 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' &&
-                        params.has('enhanced'));
-                if (use_enhanced_img_tag) {
-                    output = output.replace('<img', '<enhanced:img');
-                    name = 'enhanced:img';
-                    params.set('enhanced', 'true');
-                    dependencies.set(
-                        unique_name,
-                        replace_query_params_from_string(String(value), params),
-                    );
-                } else {
-                    dependencies.set(unique_name, String(value));
-                }
-                output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
-                    unique_name,
-                    'import',
-                )}`;
-            } else {
-                output += ` ${key.toLowerCase()}="${sanitize_for_svelte(
-                    escape(String(value)),
-                )}"`;
+            switch (name.toLowerCase()) {
+                case 'img':
+                    if (is_imported_image) {
+                        /**
+                         * 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' &&
+                                params.has('enhanced'));
+                        if (use_enhanced_img_tag) {
+                            output = output.replace('<img', '<enhanced:img');
+                            name = 'enhanced:img';
+                            params.set('enhanced', 'true');
+                            dependencies.set(
+                                unique_name,
+                                replace_query_params_from_string(
+                                    String(value),
+                                    params,
+                                ),
+                            );
+                        } else {
+                            dependencies.set(unique_name, String(value));
+                        }
+                        output += ` ${key.toLowerCase()}=${generate_svelte_attribute_value(
+                            unique_name,
+                            'import',
+                        )}`;
+                        break;
+                    }
+                default:
+                    output += ` ${key.toLowerCase()}="${sanitize_for_svelte(
+                        escape(String(value)),
+                    )}"`;
+                    break;
             }
         }
     }

diff --git a/packages/process/tests/nodes/module.svelte b/packages/process/tests/nodes/module.svelte
@@ -1,3 +1,4 @@
 <script context="module">
     export { default as Heading } from './mock.svelte';
+    export { default as Image } from './mock.svelte';
 </script>
diff --git a/packages/process/tests/processor/images - enhanced - automatic/image.jpeg b/packages/process/tests/processor/images - enhanced - automatic/image.jpeg
diff --git a/packages/process/tests/processor/images - enhanced - manually/image.jpeg b/packages/process/tests/processor/images - enhanced - manually/image.jpeg
diff --git a/packages/process/tests/processor/images - enhanced - node/compiled.txt b/packages/process/tests/processor/images - enhanced - node/compiled.txt
@@ -0,0 +1 @@
+<script>import * as INTERNAL__NODES from 'tests/nodes/module.svelte';import IMAGE__1 from './image.jpeg';import IMAGE__2 from '../images/image.jpeg';</script><article><p><INTERNAL__NODES.Image src={IMAGE__1} alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src={IMAGE__2} alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="image.jpeg" alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="/image.jpeg" alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="https://github.com/logo.jpeg" alt=""></INTERNAL__NODES.Image></p></article>
diff --git a/packages/process/tests/processor/images - enhanced - node/config.mjs b/packages/process/tests/processor/images - enhanced - node/config.mjs
@@ -0,0 +1,9 @@
+import { markdoc } from '../../../dist/module.js';
+import { absoulute } from '../../utils.mjs';
+
+export default markdoc({
+    nodes: absoulute(import.meta.url, '../../nodes/module.svelte'),
+    enhancedImages: {
+        mode: 'automatic',
+    },
+});
diff --git a/packages/process/tests/processor/images - enhanced - node/source.markdoc b/packages/process/tests/processor/images - enhanced - node/source.markdoc
@@ -0,0 +1,5 @@
+![](./image.jpeg)
+![](../images/image.jpeg)
+![](image.jpeg)
+![](/image.jpeg)
+![](https://github.com/logo.jpeg)
diff --git a/packages/process/tests/processor/images/image.jpeg b/packages/process/tests/processor/images/image.jpeg
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<script>import * as INTERNAL__NODES from 'tests/nodes/module.svelte';import IMAGE__1 from './image.jpeg';import IMAGE__2 from '../images/image.jpeg';</script><article><p><INTERNAL__NODES.Image src={IMAGE__1} alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src={IMAGE__2} alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="image.jpeg" alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="/image.jpeg" alt=""></INTERNAL__NODES.Image> <INTERNAL__NODES.Image src="https://github.com/logo.jpeg" alt=""></INTERNAL__NODES.Image></p></article>