fix: normalize jsx img src attribute correctly

packages/core/package.json

@@ -99,11 +99,14 @@
     "memfs": "^4.17.0",
     "postcss": "8.5.3",
     "rehype-stringify": "^9.0.4",
+    "remark-mdx": "2.3.0",
     "remark-parse": "^10.0.2",
     "remark-rehype": "^10.1.0",
+    "remark-stringify": "^10.0.3",
     "rimraf": "^6.0.1",
     "tailwindcss": "^3.4.17",
-    "typescript": "^5.8.2"
+    "typescript": "^5.8.2",
+    "vfile": "^5.3.7"
   },
   "engines": {
     "node": ">=14.17.6"

packages/core/src/node/mdx/options.ts

@@ -41,7 +41,6 @@ export async function createMDXOptions(
     ),
     ...globalComponentsFromConfig,
   ];
-  const defaultLang = config?.lang || '';
   return {
     providerImportSource: '@mdx-js/react',
     format: path.extname(filepath).slice(1) as 'mdx' | 'md',
@@ -52,7 +51,6 @@ export async function createMDXOptions(
         remarkPluginNormalizeLink,
         {
           cleanUrls,
-          defaultLang,
           root: docDirectory,
         },
       ],

packages/core/src/node/mdx/remarkPlugins/normalizeLink.ts

@@ -127,21 +127,21 @@ export const remarkPluginNormalizeLink: Plugin<
         return;
       }
 
-      const src = getNodeAttribute(node, 'src');
+      const srcAttr = getNodeAttribute(node, 'src', true);
 
-      if (typeof src !== 'string') {
+      if (typeof srcAttr?.value !== 'string') {
         return;
       }
 
-      const imagePath = normalizeImageUrl(src);
+      const imagePath = normalizeImageUrl(srcAttr.value);
 
       if (!imagePath) {
         return;
       }
 
       const tempVariableName = `image${images.length}`;
 
-      Object.assign(src, getMdxSrcAttribute(tempVariableName));
+      Object.assign(srcAttr, getMdxSrcAttribute(tempVariableName));
 
       images.push(getASTNodeImport(tempVariableName, imagePath));
     });

packages/core/tests/__snapshots__/md.test.ts.snap

@@ -0,0 +1,18 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`Markdown compile cases > remarkPluginNormalizeLink > should just work 1`] = `
+"import image0 from "./test3.jpg"
+
+import image1 from "./test4.png"
+
+[link1](/test1.html)
+
+{/* jsx link will not be transformed */}
+
+<a href="./test2">link2</a>
+
+<img alt="alt1" src={image0} />
+
+<img src={image1} alt="alt2" />
+"
+`;

packages/core/tests/md.test.ts

@@ -1,8 +1,13 @@
+import path from 'node:path';
 import rehypeStringify from 'rehype-stringify';
+import remarkMdx from 'remark-mdx';
 import remarkParse from 'remark-parse';
 import remarkRehype from 'remark-rehype';
+import remarkStringify from 'remark-stringify';
 import { unified } from 'unified';
+import { VFile } from 'vfile';
 import { describe, expect, test } from 'vitest';
+import { remarkPluginNormalizeLink } from '../src/node/mdx/remarkPlugins/normalizeLink';
 
 describe('Markdown compile cases', () => {
   const processor = unified()
@@ -15,4 +20,35 @@ describe('Markdown compile cases', () => {
     const result = processor.processSync(mdContent);
     expect(result.value).toMatchInlineSnapshot('"<h1>123</h1>"');
   });
+
+  describe('remarkPluginNormalizeLink', () => {
+    it('should just work', () => {
+      const processor = unified()
+        .use(remarkParse)
+        .use(remarkMdx)
+        .use(remarkPluginNormalizeLink, {
+          root: process.cwd(),
+          cleanUrls: false,
+        })
+        .use(remarkStringify);
+
+      const result = processor.processSync(
+        new VFile({
+          value: `
+[link1](./test1.md)
+
+{/* jsx link will not be transformed */}
+
+<a href="./test2">link2</a>
+
+![alt1](./test3.jpg)
+
+<img src="./test4.png" alt="alt2" />
+          `.trim(),
+          path: path.resolve('test.mdx'),
+        }),
+      );
+      expect(result.value).matchSnapshot();
+    });
+  });
 });

packages/shared/src/node-utils/getNodeAttribute.ts

@@ -1,9 +1,28 @@
-import type { MdxJsxFlowElement, MdxJsxTextElement } from 'mdast-util-mdx-jsx';
+import type {
+  MdxJsxAttribute,
+  MdxJsxAttributeValueExpression,
+  MdxJsxExpressionAttribute,
+  MdxJsxFlowElement,
+  MdxJsxTextElement,
+} from 'mdast-util-mdx-jsx';
 
-export const getNodeAttribute = (
+export function getNodeAttribute(
   node: MdxJsxFlowElement | MdxJsxTextElement,
   attrName: string,
-) => {
-  return node.attributes.find(attr => 'name' in attr && attr.name === attrName)
-    ?.value;
-};
+  attribute?: false,
+): string | MdxJsxAttributeValueExpression | null | undefined;
+export function getNodeAttribute(
+  node: MdxJsxFlowElement | MdxJsxTextElement,
+  attrName: string,
+  attribute: true,
+): MdxJsxAttribute | MdxJsxExpressionAttribute | undefined;
+export function getNodeAttribute(
+  node: MdxJsxFlowElement | MdxJsxTextElement,
+  attrName: string,
+  attribute?: boolean,
+) {
+  const found = node.attributes.find(
+    attr => 'name' in attr && attr.name === attrName,
+  );
+  return attribute ? found : found?.value;
+}