@astrojs/mdx 0.18.3 → 0.19.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 603ca93f0d424089
+@astrojs/mdx:build: cache hit, replaying output 8f7758540a171891
 @astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.18.3 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > @astrojs/mdx@0.19.0 build /home/runner/work/astro/astro/packages/integrations/mdx
 @astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
 @astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @astrojs/mdx
 
+## 0.19.0
+
+### Minor Changes
+
+- [#6824](https://github.com/withastro/astro/pull/6824) [`2511d58d5`](https://github.com/withastro/astro/commit/2511d58d586af080a78e5ef8a63020b3e17770db) Thanks [@Princesseuh](https://github.com/Princesseuh)! - Add support for using optimized and relative images in MDX files with `experimental.assets`
+
+### Patch Changes
+
+- Updated dependencies [[`2511d58d5`](https://github.com/withastro/astro/commit/2511d58d586af080a78e5ef8a63020b3e17770db)]:
+  - @astrojs/markdown-remark@2.1.4
+
+## 0.18.4
+
+### Patch Changes
+
+- [#6817](https://github.com/withastro/astro/pull/6817) [`f882bc163`](https://github.com/withastro/astro/commit/f882bc1636d5ce1c3b8faae47df36b4dc758045a) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix sourcemap warnings when using Content Collections and MDX with the `vite.build.sourcemap` option
+
 ## 0.18.3
 
 ### Patch Changes

package/dist/index.js

@@ -5,6 +5,7 @@ import mdxPlugin from "@mdx-js/rollup";
 import { parse as parseESM } from "es-module-lexer";
 import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
+import { SourceMapGenerator } from "source-map";
 import { VFile } from "vfile";
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from "./plugins.js";
 import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from "./utils.js";
@@ -64,6 +65,7 @@ function mdx(partialMdxOptions = {}) {
                 // Override transform to alter code before MDX compilation
                 // ex. inject layouts
                 async transform(_, id) {
+                  var _a;
                   if (!id.endsWith("mdx"))
                     return;
                   const { fileId } = getFileInfo(id, config);
@@ -80,7 +82,8 @@ function mdx(partialMdxOptions = {}) {
                     recmaPlugins: [
                       ...mdxPluginOpts.recmaPlugins ?? [],
                       () => recmaInjectImportMetaEnvPlugin({ importMetaEnv })
-                    ]
+                    ],
+                    SourceMapGenerator: ((_a = config.vite.build) == null ? void 0 : _a.sourcemap) ? SourceMapGenerator : void 0
                   });
                   return {
                     code: escapeViteEnvReferences(String(compiled.value)),
@@ -130,7 +133,7 @@ if (import.meta.hot) {
 											import.meta.hot.decline();
 										}`;
                   }
-                  return escapeViteEnvReferences(code);
+                  return { code: escapeViteEnvReferences(code), map: null };
                 }
               }
             ]

package/dist/plugins.js

@@ -1,4 +1,4 @@
-import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import { rehypeHeadingIds, remarkCollectImages } from "@astrojs/markdown-remark";
 import {
   InvalidAstroDataError,
   safelyGetAstroData
@@ -10,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 import { rehypeInjectHeadingsExport } from "./rehype-collect-headings.js";
 import rehypeMetaString from "./rehype-meta-string.js";
+import { remarkImageToComponent } from "./remark-images-to-component.js";
 import remarkPrism from "./remark-prism.js";
 import remarkShiki from "./remark-shiki.js";
 import { jsToTreeNode } from "./utils.js";
@@ -77,7 +78,9 @@ function rehypeApplyFrontmatterExport() {
   };
 }
 async function getRemarkPlugins(mdxOptions, config) {
-  let remarkPlugins = [];
+  let remarkPlugins = [
+    ...config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []
+  ];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.gfm) {
       remarkPlugins.push(remarkGfm);

package/dist/remark-images-to-component.d.ts

@@ -0,0 +1,2 @@
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
+export declare function remarkImageToComponent(): (tree: any, file: MarkdownVFile) => void;

package/dist/remark-images-to-component.js

@@ -0,0 +1,84 @@
+import { visit } from "unist-util-visit";
+import { jsToTreeNode } from "./utils.js";
+function remarkImageToComponent() {
+  return function(tree, file) {
+    if (!file.data.imagePaths)
+      return;
+    const importsStatements = [];
+    const importedImages = /* @__PURE__ */ new Map();
+    visit(tree, "image", (node, index, parent) => {
+      var _a;
+      if ((_a = file.data.imagePaths) == null ? void 0 : _a.has(node.url)) {
+        let importName = importedImages.get(node.url);
+        if (!importName) {
+          importName = `__${importedImages.size}_${node.url.replace(/\W/g, "_")}__`;
+          importsStatements.push({
+            type: "mdxjsEsm",
+            value: "",
+            data: {
+              estree: {
+                type: "Program",
+                sourceType: "module",
+                body: [
+                  {
+                    type: "ImportDeclaration",
+                    source: { type: "Literal", value: node.url, raw: JSON.stringify(node.url) },
+                    specifiers: [
+                      {
+                        type: "ImportDefaultSpecifier",
+                        local: { type: "Identifier", name: importName }
+                      }
+                    ]
+                  }
+                ]
+              }
+            }
+          });
+          importedImages.set(node.url, importName);
+        }
+        const componentElement = {
+          name: "__AstroImage__",
+          type: "mdxJsxFlowElement",
+          attributes: [
+            {
+              name: "src",
+              type: "mdxJsxAttribute",
+              value: {
+                type: "mdxJsxAttributeValueExpression",
+                value: importName,
+                data: {
+                  estree: {
+                    type: "Program",
+                    sourceType: "module",
+                    comments: [],
+                    body: [
+                      {
+                        type: "ExpressionStatement",
+                        expression: { type: "Identifier", name: importName }
+                      }
+                    ]
+                  }
+                }
+              }
+            },
+            { name: "alt", type: "mdxJsxAttribute", value: node.alt || "" }
+          ],
+          children: []
+        };
+        if (node.title) {
+          componentElement.attributes.push({
+            type: "mdxJsxAttribute",
+            name: "title",
+            value: node.title
+          });
+        }
+        parent.children.splice(index, 1, componentElement);
+      }
+    });
+    tree.children.unshift(...importsStatements);
+    tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+  };
+}
+export {
+  remarkImageToComponent
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "0.18.3",
+  "version": "0.19.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.1.3",
+    "@astrojs/markdown-remark": "^2.1.4",
     "@astrojs/prism": "^2.1.1",
     "@mdx-js/mdx": "^2.3.0",
     "@mdx-js/rollup": "^2.3.0",
@@ -38,6 +38,7 @@
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.11.1",
+    "source-map": "^0.7.4",
     "unist-util-visit": "^4.1.0",
     "vfile": "^5.3.2"
   },
@@ -48,8 +49,6 @@
     "@types/mdast": "^3.0.10",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "2.2.1",
-    "astro-scripts": "0.0.14",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
     "linkedom": "^0.14.12",
@@ -63,7 +62,9 @@
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
-    "vite": "^4.2.1"
+    "vite": "^4.2.1",
+    "astro": "2.3.0",
+    "astro-scripts": "0.0.14"
   },
   "engines": {
     "node": ">=16.12.0"

package/src/index.ts

@@ -8,6 +8,7 @@ import { parse as parseESM } from 'es-module-lexer';
 import fs from 'node:fs/promises';
 import { fileURLToPath } from 'node:url';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
+import { SourceMapGenerator } from 'source-map';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js';
@@ -113,6 +114,9 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 											...(mdxPluginOpts.recmaPlugins ?? []),
 											() => recmaInjectImportMetaEnvPlugin({ importMetaEnv }),
 										],
+										SourceMapGenerator: config.vite.build?.sourcemap
+											? SourceMapGenerator
+											: undefined,
 									});
 
 									return {
@@ -168,7 +172,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI
 											import.meta.hot.decline();
 										}`;
 									}
-									return escapeViteEnvReferences(code);
+									return { code: escapeViteEnvReferences(code), map: null };
 								},
 							},
 						] as VitePlugin[],

package/src/plugins.ts

@@ -1,4 +1,4 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
+import { rehypeHeadingIds, remarkCollectImages } from '@astrojs/markdown-remark';
 import {
 	InvalidAstroDataError,
 	safelyGetAstroData,
@@ -16,6 +16,7 @@ import type { VFile } from 'vfile';
 import type { MdxOptions } from './index.js';
 import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
 import rehypeMetaString from './rehype-meta-string.js';
+import { remarkImageToComponent } from './remark-images-to-component.js';
 import remarkPrism from './remark-prism.js';
 import remarkShiki from './remark-shiki.js';
 import { jsToTreeNode } from './utils.js';
@@ -99,7 +100,9 @@ export async function getRemarkPlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
 ): Promise<MdxRollupPluginOptions['remarkPlugins']> {
-	let remarkPlugins: PluggableList = [];
+	let remarkPlugins: PluggableList = [
+		...(config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []),
+	];
 
 	if (!isPerformanceBenchmark) {
 		if (mdxOptions.gfm) {

package/src/remark-images-to-component.ts

@@ -0,0 +1,98 @@
+import type { MarkdownVFile } from '@astrojs/markdown-remark';
+import { type Image, type Parent } from 'mdast';
+import type { MdxjsEsm, MdxJsxFlowElement } from 'mdast-util-mdx';
+import { visit } from 'unist-util-visit';
+import { jsToTreeNode } from './utils.js';
+
+export function remarkImageToComponent() {
+	return function (tree: any, file: MarkdownVFile) {
+		if (!file.data.imagePaths) return;
+
+		const importsStatements: MdxjsEsm[] = [];
+		const importedImages = new Map<string, string>();
+
+		visit(tree, 'image', (node: Image, index: number | null, parent: Parent | null) => {
+			// Use the imagePaths set from the remark-collect-images so we don't have to duplicate the logic for
+			// checking if an image should be imported or not
+			if (file.data.imagePaths?.has(node.url)) {
+				let importName = importedImages.get(node.url);
+
+				// If we haven't already imported this image, add an import statement
+				if (!importName) {
+					importName = `__${importedImages.size}_${node.url.replace(/\W/g, '_')}__`;
+
+					importsStatements.push({
+						type: 'mdxjsEsm',
+						value: '',
+						data: {
+							estree: {
+								type: 'Program',
+								sourceType: 'module',
+								body: [
+									{
+										type: 'ImportDeclaration',
+										source: { type: 'Literal', value: node.url, raw: JSON.stringify(node.url) },
+										specifiers: [
+											{
+												type: 'ImportDefaultSpecifier',
+												local: { type: 'Identifier', name: importName },
+											},
+										],
+									},
+								],
+							},
+						},
+					});
+					importedImages.set(node.url, importName);
+				}
+
+				// Build a component that's equivalent to <Image src={importName} alt={node.alt} title={node.title} />
+				const componentElement: MdxJsxFlowElement = {
+					name: '__AstroImage__',
+					type: 'mdxJsxFlowElement',
+					attributes: [
+						{
+							name: 'src',
+							type: 'mdxJsxAttribute',
+							value: {
+								type: 'mdxJsxAttributeValueExpression',
+								value: importName,
+								data: {
+									estree: {
+										type: 'Program',
+										sourceType: 'module',
+										comments: [],
+										body: [
+											{
+												type: 'ExpressionStatement',
+												expression: { type: 'Identifier', name: importName },
+											},
+										],
+									},
+								},
+							},
+						},
+						{ name: 'alt', type: 'mdxJsxAttribute', value: node.alt || '' },
+					],
+					children: [],
+				};
+
+				if (node.title) {
+					componentElement.attributes.push({
+						type: 'mdxJsxAttribute',
+						name: 'title',
+						value: node.title,
+					});
+				}
+
+				parent!.children.splice(index!, 1, componentElement);
+			}
+		});
+
+		// Add all the import statements to the top of the file for the images
+		tree.children.unshift(...importsStatements);
+
+		// Add an import statement for the Astro Image component, we rename it to avoid conflicts
+		tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+	};
+}

package/test/fixtures/css-head-mdx/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-frontmatter-injection/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-images/astro.config.ts

@@ -0,0 +1,8 @@
+import mdx from '@astrojs/mdx';
+
+export default {
+	integrations: [mdx()],
+	experimental: {
+		assets: true
+	}
+}

package/test/fixtures/mdx-images/node_modules/.bin/astro

@@ -0,0 +1,17 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/mdx-images/package.json

@@ -0,0 +1,9 @@
+{
+  "name": "@test/mdx-page",
+  "dependencies": {
+    "@astrojs/mdx": "workspace:*",
+    "astro": "workspace:*",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}

package/test/fixtures/mdx-images/src/pages/index.mdx

@@ -0,0 +1,11 @@
+Image using a relative path:
+![Houston](../assets/houston.webp)
+
+Image using an aliased path:
+![Houston](~/assets/houston.webp)
+
+Image with a title:
+![Houston](~/assets/houston.webp "Houston title")
+
+Image with spaces in the path:
+![Houston](<~/assets/houston in space.webp>)

package/test/fixtures/mdx-infinite-loop/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-namespace/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-page/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-plus-react/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-vite-env-vars/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/mdx-images.test.js

@@ -0,0 +1,40 @@
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX Page', () => {
+	let devServer;
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-images/', import.meta.url),
+		});
+		devServer = await fixture.startDevServer();
+	});
+
+	after(async () => {
+		await devServer.stop();
+	});
+
+	describe('Optimized images in MDX', () => {
+		it('works', async () => {
+			const res = await fixture.fetch('/');
+			expect(res.status).to.equal(200);
+
+			const html = await res.text();
+			const { document } = parseHTML(html);
+
+			const imgs = document.getElementsByTagName('img');
+			expect(imgs.length).to.equal(4);
+			// Image using a relative path
+			expect(imgs.item(0).src.startsWith('/_image')).to.be.true;
+			// Image using an aliased path
+			expect(imgs.item(1).src.startsWith('/_image')).to.be.true;
+			// Image with title
+			expect(imgs.item(2).title).to.equal('Houston title');
+			// Image with spaces in the path
+			expect(imgs.item(3).src.startsWith('/_image')).to.be.true;
+		});
+	});
+});