@astrojs/mdx 1.0.0-beta.2 → 1.0.0-rc.2

package/README.md

@@ -42,9 +42,8 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-**`astro.config.mjs`**
-
-```js
+```js ins={3} "mdx()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -59,14 +58,16 @@ export default defineConfig({
 [VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for MDX editor support, you may wish to add the following setting in your VSCode config. This ensures authoring MDX files provides a Markdown-like editor experience.
 
 ```json title=".vscode/settings.json"
-"files.associations": {
+{
+  "files.associations": {
     "*.mdx": "markdown"
+  }
 }
 ```
 
 ## Usage
 
-With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files. 
+With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files.
 
 Astro's MDX integration adds extra features to standard MDX, including Markdown-style frontmatter. This allows you to use most of Astro's built-in Markdown features like a [special frontmatter `layout` property](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout) and a [property for marking a page as a draft](https://docs.astro.build/en/guides/markdown-content/#draft-pages).
 
@@ -83,16 +84,17 @@ You can configure how your MDX is rendered with the following options:
 - [Options inherited from Markdown config](#options-inherited-from-markdown-config)
 - [`extendMarkdownConfig`](#extendmarkdownconfig)
 - [`recmaPlugins`](#recmaplugins)
+- [`optimize`](#optimize)
 
 ### Options inherited from Markdown config
 
 All [`markdown` configuration options](https://docs.astro.build/en/reference/configuration-reference/#markdown-options) except `drafts` can be configured separately in the MDX integration. This includes remark and rehype plugins, syntax highlighting, and more. Options will default to those in your Markdown config ([see the `extendMarkdownConfig` option](#extendmarkdownconfig) to modify this).
 
 :::note
-There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overriden for MDX files specifically.
+There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-```ts
+```js
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
@@ -108,9 +110,9 @@ export default defineConfig({
       rehypePlugins: [rehypeMinifyHtml],
       remarkRehype: { footnoteLabel: 'Footnotes' },
       gfm: false,
-    })
-  ]
-})
+    }),
+  ],
+});
 ```
 
 :::caution
@@ -128,7 +130,7 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-```ts
+```js
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
@@ -148,14 +150,14 @@ export default defineConfig({
       remarkPlugins: [remarkPlugin2],
       // `gfm` overridden to `false`
       gfm: false,
-    })
-  ]
+    }),
+  ],
 });
 ```
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-```ts
+```js
 // astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
@@ -169,8 +171,8 @@ export default defineConfig({
       // Markdown config now ignored
       extendMarkdownConfig: false,
       // No `remarkPlugins` applied
-    })
-  ]
+    }),
+  ],
 });
 ```
 
@@ -180,9 +182,72 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
+### `optimize`
+
+- **Type:** `boolean | { customComponentNames?: string[] }`
+
+This is an optional configuration setting to optimize the MDX output for faster builds and rendering via an internal rehype plugin. This may be useful if you have many MDX files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your site's interactive parts still work correctly after enabling it.
+
+This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [
+    mdx({
+      optimize: true,
+    }),
+  ],
+});
+```
+
+#### `customComponentNames`
+
+- **Type:** `string[]`
+
+An optional property of `optimize` to prevent the MDX optimizer from handling any [custom components passed to imported MDX content via the components prop](https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx).
+
+You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.
+
+For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:
+
+```astro
+---
+import { Content, components } from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+<Content components={{ ...components, h1: Heading }} />
+```
+
+To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
+
+```js
+// astro.config.mjs
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [
+    mdx({
+      optimize: {
+        // Prevent the optimizer from handling `h1` elements
+        // These will be treated as custom components
+        customComponentNames: ['h1'],
+      },
+    }),
+  ],
+});
+```
+
+Note that if your MDX file [configures custom components using `export const components = { ... }`](https://docs.astro.build/en/guides/markdown-content/#assigning-custom-components-to-html-elements), then you do not need to manually configure this option. The optimizer will automatically detect them.
+
 ## Examples
 
-*   The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
+- The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
 
 ## Troubleshooting
 
@@ -199,5 +264,4 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
 See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md) for a history of changes to this integration.
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-
 [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

package/dist/index.d.ts

@@ -1,12 +1,14 @@
 import { markdownConfigDefaults } from '@astrojs/markdown-remark';
-import { PluggableList } from '@mdx-js/mdx/lib/core.js';
+import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { AstroIntegration } from 'astro';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
-export declare type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
+import type { OptimizeOptions } from './rehype-optimize-static.js';
+export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
     extendMarkdownConfig: boolean;
     recmaPlugins: PluggableList;
     remarkPlugins: PluggableList;
     rehypePlugins: PluggableList;
     remarkRehype: RemarkRehypeOptions;
+    optimize: boolean | OptimizeOptions;
 };
 export default function mdx(partialMdxOptions?: Partial<MdxOptions>): AstroIntegration;

package/dist/index.js

@@ -1,32 +1,63 @@
 import { markdownConfigDefaults } from "@astrojs/markdown-remark";
 import { toRemarkInitializeAstroData } from "@astrojs/markdown-remark/dist/internal.js";
 import { compile as mdxCompile } from "@mdx-js/mdx";
-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, parseFrontmatter } from "./utils.js";
-const RAW_CONTENT_ERROR = "MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
-const COMPILED_CONTENT_ERROR = "MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
+import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from "./utils.js";
+import astroJSXRenderer from "astro/jsx/renderer.js";
 function mdx(partialMdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
-      "astro:config:setup": async ({ updateConfig, config, addPageExtension, command }) => {
+      "astro:config:setup": async (params) => {
+        const {
+          updateConfig,
+          config,
+          addPageExtension,
+          addContentEntryType,
+          command,
+          addRenderer
+        } = params;
+        addRenderer(astroJSXRenderer);
         addPageExtension(".mdx");
-        const extendMarkdownConfig = partialMdxOptions.extendMarkdownConfig ?? defaultOptions.extendMarkdownConfig;
+        addContentEntryType({
+          extensions: [".mdx"],
+          async getEntryInfo({ fileUrl, contents }) {
+            const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
+            return {
+              data: parsed.data,
+              body: parsed.content,
+              slug: parsed.data.slug,
+              rawData: parsed.matter
+            };
+          },
+          contentModuleTypes: await fs.readFile(
+            new URL("../template/content-module-types.d.ts", import.meta.url),
+            "utf-8"
+          ),
+          // MDX can import scripts and styles,
+          // so wrap all MDX files with script / style propagation checks
+          handlePropagation: true
+        });
+        const extendMarkdownConfig = partialMdxOptions.extendMarkdownConfig ?? defaultMdxOptions.extendMarkdownConfig;
         const mdxOptions = applyDefaultOptions({
           options: partialMdxOptions,
-          defaults: extendMarkdownConfig ? config.markdown : defaultOptions
+          defaults: markdownConfigToMdxOptions(
+            extendMarkdownConfig ? config.markdown : markdownConfigDefaults
+          )
         });
         const mdxPluginOpts = {
-          remarkPlugins: await getRemarkPlugins(mdxOptions, config),
+          remarkPlugins: await getRemarkPlugins(mdxOptions),
           rehypePlugins: getRehypePlugins(mdxOptions),
           recmaPlugins: mdxOptions.recmaPlugins,
           remarkRehypeOptions: mdxOptions.remarkRehype,
           jsx: true,
           jsxImportSource: "astro",
+          // Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
           format: "mdx",
           mdExtensions: []
         };
@@ -37,27 +68,43 @@ function mdx(partialMdxOptions = {}) {
           vite: {
             plugins: [
               {
+                name: "@mdx-js/rollup",
                 enforce: "pre",
-                ...mdxPlugin(mdxPluginOpts),
                 configResolved(resolved) {
                   importMetaEnv = { ...importMetaEnv, ...resolved.env };
+                  const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === "astro:jsx");
+                  if (jsxPluginIndex !== -1) {
+                    const myPluginIndex = resolved.plugins.findIndex(
+                      (p) => p.name === "@mdx-js/rollup"
+                    );
+                    if (myPluginIndex !== -1) {
+                      const myPlugin = resolved.plugins[myPluginIndex];
+                      resolved.plugins.splice(myPluginIndex, 1);
+                      resolved.plugins.splice(jsxPluginIndex, 0, myPlugin);
+                    }
+                  }
                 },
+                // Override transform to alter code before MDX compilation
+                // ex. inject layouts
                 async transform(_, id) {
-                  if (!id.endsWith("mdx"))
+                  if (!id.endsWith(".mdx"))
                     return;
                   const { fileId } = getFileInfo(id, config);
                   const code = await fs.readFile(fileId, "utf-8");
                   const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
                   const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
                     ...mdxPluginOpts,
+                    elementAttributeNameCase: "html",
                     remarkPlugins: [
+                      // Ensure `data.astro` is available to all remark plugins
                       toRemarkInitializeAstroData({ userFrontmatter: frontmatter }),
                       ...mdxPluginOpts.remarkPlugins ?? []
                     ],
                     recmaPlugins: [
                       ...mdxPluginOpts.recmaPlugins ?? [],
                       () => recmaInjectImportMetaEnvPlugin({ importMetaEnv })
-                    ]
+                    ],
+                    SourceMapGenerator: config.vite.build?.sourcemap ? SourceMapGenerator : void 0
                   });
                   return {
                     code: escapeViteEnvReferences(String(compiled.value)),
@@ -67,6 +114,7 @@ function mdx(partialMdxOptions = {}) {
               },
               {
                 name: "@astrojs/mdx-postprocess",
+                // These transforms must happen *after* JSX runtime transformations
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;
@@ -79,44 +127,37 @@ function mdx(partialMdxOptions = {}) {
                     code = 'import { Fragment } from "astro/jsx-runtime"\n' + code;
                   }
                   const { fileUrl, fileId } = getFileInfo(id, config);
-                  if (!moduleExports.includes("url")) {
+                  if (!moduleExports.find(({ n }) => n === "url")) {
                     code += `
 export const url = ${JSON.stringify(fileUrl)};`;
                   }
-                  if (!moduleExports.includes("file")) {
+                  if (!moduleExports.find(({ n }) => n === "file")) {
                     code += `
 export const file = ${JSON.stringify(fileId)};`;
                   }
-                  if (!moduleExports.includes("rawContent")) {
-                    code += `
-export function rawContent() { throw new Error(${JSON.stringify(
-                      RAW_CONTENT_ERROR
-                    )}) };`;
-                  }
-                  if (!moduleExports.includes("compiledContent")) {
-                    code += `
-export function compiledContent() { throw new Error(${JSON.stringify(
-                      COMPILED_CONTENT_ERROR
-                    )}) };`;
-                  }
-                  if (!moduleExports.includes("Content")) {
+                  if (!moduleExports.find(({ n }) => n === "Content")) {
+                    const hasComponents = moduleExports.find(({ n }) => n === "components");
                     code = code.replace("export default MDXContent;", "");
                     code += `
 export const Content = (props = {}) => MDXContent({
 											...props,
-											components: { Fragment, ...props.components },
+											components: { Fragment${hasComponents ? ", ...components" : ""}, ...props.components },
 										});
 										export default Content;`;
                   }
                   code += `
+Content[Symbol.for('mdx-component')] = true`;
+                  code += `
 Content[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+                  code += `
+Content.moduleId = ${JSON.stringify(id)};`;
                   if (command === "dev") {
                     code += `
 if (import.meta.hot) {
 											import.meta.hot.decline();
 										}`;
                   }
-                  return escapeViteEnvReferences(code);
+                  return { code: escapeViteEnvReferences(code), map: null };
                 }
               }
             ]
@@ -126,14 +167,20 @@ if (import.meta.hot) {
     }
   };
 }
-const defaultOptions = {
-  ...markdownConfigDefaults,
+const defaultMdxOptions = {
   extendMarkdownConfig: true,
-  recmaPlugins: [],
-  remarkPlugins: [],
-  rehypePlugins: [],
-  remarkRehype: {}
+  recmaPlugins: []
 };
+function markdownConfigToMdxOptions(markdownConfig) {
+  return {
+    ...defaultMdxOptions,
+    ...markdownConfig,
+    remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins),
+    rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins),
+    remarkRehype: markdownConfig.remarkRehype ?? {},
+    optimize: false
+  };
+}
 function applyDefaultOptions({
   options,
   defaults
@@ -147,7 +194,8 @@ function applyDefaultOptions({
     smartypants: options.smartypants ?? defaults.smartypants,
     remarkPlugins: options.remarkPlugins ?? defaults.remarkPlugins,
     rehypePlugins: options.rehypePlugins ?? defaults.rehypePlugins,
-    shikiConfig: options.shikiConfig ?? defaults.shikiConfig
+    shikiConfig: options.shikiConfig ?? defaults.shikiConfig,
+    optimize: options.optimize ?? defaults.optimize
   };
 }
 function escapeViteEnvReferences(code) {

package/dist/plugins.d.ts

@@ -1,10 +1,9 @@
-import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
-import type { AstroConfig } from 'astro';
+import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { VFile } from 'vfile';
-import { MdxOptions } from './index.js';
+import type { MdxOptions } from './index.js';
 export declare function recmaInjectImportMetaEnvPlugin({ importMetaEnv, }: {
     importMetaEnv: Record<string, any>;
 }): (tree: any) => void;
 export declare function rehypeApplyFrontmatterExport(): (tree: any, vfile: VFile) => void;
-export declare function getRemarkPlugins(mdxOptions: MdxOptions, config: AstroConfig): Promise<MdxRollupPluginOptions['remarkPlugins']>;
-export declare function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions['rehypePlugins'];
+export declare function getRemarkPlugins(mdxOptions: MdxOptions): Promise<PluggableList>;
+export declare function getRehypePlugins(mdxOptions: MdxOptions): PluggableList;

package/dist/plugins.js

@@ -1,21 +1,21 @@
-import { rehypeHeadingIds } from "@astrojs/markdown-remark";
+import { rehypeHeadingIds, remarkCollectImages } from "@astrojs/markdown-remark";
 import {
   InvalidAstroDataError,
   safelyGetAstroData
 } from "@astrojs/markdown-remark/dist/internal.js";
 import { nodeTypes } from "@mdx-js/mdx";
 import { visit as estreeVisit } from "estree-util-visit";
-import { bold, yellow } from "kleur/colors";
-import { pathToFileURL } from "node:url";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
-import { visit } from "unist-util-visit";
 import { rehypeInjectHeadingsExport } from "./rehype-collect-headings.js";
 import rehypeMetaString from "./rehype-meta-string.js";
+import { rehypeOptimizeStatic } from "./rehype-optimize-static.js";
+import { remarkImageToComponent } from "./remark-images-to-component.js";
 import remarkPrism from "./remark-prism.js";
 import remarkShiki from "./remark-shiki.js";
-import { isRelativePath, jsToTreeNode } from "./utils.js";
+import { jsToTreeNode } from "./utils.js";
+const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
 function recmaInjectImportMetaEnvPlugin({
   importMetaEnv
 }) {
@@ -43,6 +43,8 @@ function rehypeApplyFrontmatterExport() {
     const astroData = safelyGetAstroData(vfile.data);
     if (astroData instanceof InvalidAstroDataError)
       throw new Error(
+        // Copied from Astro core `errors-data`
+        // TODO: find way to import error data from core
         '[MDX] A remark or rehype plugin attempted to inject invalid frontmatter. Ensure "astro.frontmatter" is set to a valid JSON object that is not `null` or `undefined`.'
       );
     const { frontmatter } = astroData;
@@ -52,6 +54,7 @@ function rehypeApplyFrontmatterExport() {
     if (frontmatter.layout) {
       exportNodes.unshift(
         jsToTreeNode(
+          /** @see 'vite-plugin-markdown' for layout props reference */
           `import { jsx as layoutJsx } from 'astro/jsx-runtime';
 
 				export default async function ({ children }) {
@@ -59,22 +62,6 @@ function rehypeApplyFrontmatterExport() {
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
-					content.astro = {};
-					Object.defineProperty(content.astro, 'headings', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
-						}
-					});
-					Object.defineProperty(content.astro, 'html', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
-						}
-					});
-					Object.defineProperty(content.astro, 'source', {
-						get() {
-							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
-						}
-					});
 					return layoutJsx(Layout, {
 						file,
 						url,
@@ -91,79 +78,48 @@ function rehypeApplyFrontmatterExport() {
     tree.children = exportNodes.concat(tree.children);
   };
 }
-function toRemarkContentRelImageError({ srcDir }) {
-  const contentDir = new URL("content/", srcDir);
-  return function remarkContentRelImageError() {
-    return (tree, vfile) => {
-      const isContentFile = pathToFileURL(vfile.path).href.startsWith(contentDir.href);
-      if (!isContentFile)
-        return;
-      const relImagePaths = /* @__PURE__ */ new Set();
-      visit(tree, "image", function raiseError(node) {
-        if (isRelativePath(node.url)) {
-          relImagePaths.add(node.url);
-        }
-      });
-      if (relImagePaths.size === 0)
-        return;
-      const errorMessage = `Relative image paths are not supported in the content/ directory. Place local images in the public/ directory and use absolute paths (see https://docs.astro.build/en/guides/images/#in-markdown-files):
-` + [...relImagePaths].map((path) => JSON.stringify(path)).join(",\n");
-      throw new Error(errorMessage);
-    };
-  };
-}
-async function getRemarkPlugins(mdxOptions, config) {
-  let remarkPlugins = [];
-  if (mdxOptions.syntaxHighlight === "shiki") {
-    remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
-  }
-  if (mdxOptions.syntaxHighlight === "prism") {
-    remarkPlugins.push(remarkPrism);
-  }
-  if (mdxOptions.gfm) {
-    remarkPlugins.push(remarkGfm);
+async function getRemarkPlugins(mdxOptions) {
+  let remarkPlugins = [remarkCollectImages, remarkImageToComponent];
+  if (!isPerformanceBenchmark) {
+    if (mdxOptions.gfm) {
+      remarkPlugins.push(remarkGfm);
+    }
+    if (mdxOptions.smartypants) {
+      remarkPlugins.push(remarkSmartypants);
+    }
   }
-  if (mdxOptions.smartypants) {
-    remarkPlugins.push(remarkSmartypants);
+  remarkPlugins = [...remarkPlugins, ...mdxOptions.remarkPlugins];
+  if (!isPerformanceBenchmark) {
+    if (mdxOptions.syntaxHighlight === "shiki") {
+      remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
+    }
+    if (mdxOptions.syntaxHighlight === "prism") {
+      remarkPlugins.push(remarkPrism);
+    }
   }
-  remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
-  remarkPlugins.push(toRemarkContentRelImageError(config));
   return remarkPlugins;
 }
 function getRehypePlugins(mdxOptions) {
   let rehypePlugins = [
+    // ensure `data.meta` is preserved in `properties.metastring` for rehype syntax highlighters
     rehypeMetaString,
+    // rehypeRaw allows custom syntax highlighters to work without added config
     [rehypeRaw, { passThrough: nodeTypes }]
   ];
   rehypePlugins = [
     ...rehypePlugins,
-    ...ignoreStringPlugins(mdxOptions.rehypePlugins),
-    rehypeHeadingIds,
-    rehypeInjectHeadingsExport,
+    ...mdxOptions.rehypePlugins,
+    // getHeadings() is guaranteed by TS, so this must be included.
+    // We run `rehypeHeadingIds` _last_ to respect any custom IDs set by user plugins.
+    ...isPerformanceBenchmark ? [] : [rehypeHeadingIds, rehypeInjectHeadingsExport],
+    // computed from `astro.data.frontmatter` in VFile data
     rehypeApplyFrontmatterExport
   ];
-  return rehypePlugins;
-}
-function ignoreStringPlugins(plugins) {
-  let validPlugins = [];
-  let hasInvalidPlugin = false;
-  for (const plugin of plugins) {
-    if (typeof plugin === "string") {
-      console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`));
-      hasInvalidPlugin = true;
-    } else if (Array.isArray(plugin) && typeof plugin[0] === "string") {
-      console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`));
-      hasInvalidPlugin = true;
-    } else {
-      validPlugins.push(plugin);
-    }
+  if (mdxOptions.optimize) {
+    const options = mdxOptions.optimize === true ? void 0 : mdxOptions.optimize;
+    rehypePlugins.push([rehypeOptimizeStatic, options]);
   }
-  if (hasInvalidPlugin) {
-    console.warn(
-      `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins`
-    );
-  }
-  return validPlugins;
+  return rehypePlugins;
 }
 function getImportMetaEnvVariableName(node) {
   try {

package/dist/rehype-collect-headings.d.ts

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

package/dist/rehype-meta-string.js

@@ -2,9 +2,8 @@ import { visit } from "unist-util-visit";
 function rehypeMetaString() {
   return function(tree) {
     visit(tree, (node) => {
-      var _a;
-      if (node.type === "element" && node.tagName === "code" && ((_a = node.data) == null ? void 0 : _a.meta)) {
-        node.properties ?? (node.properties = {});
+      if (node.type === "element" && node.tagName === "code" && node.data?.meta) {
+        node.properties ??= {};
         node.properties.metastring = node.data.meta;
       }
     });

package/dist/rehype-optimize-static.d.ts

@@ -0,0 +1,11 @@
+export interface OptimizeOptions {
+    customComponentNames?: string[];
+}
+/**
+ * For MDX only, collapse static subtrees of the hast into `set:html`. Subtrees
+ * do not include any MDX elements.
+ *
+ * This optimization reduces the JS output as more content are represented as a
+ * string instead, which also reduces the AST size that Rollup holds in memory.
+ */
+export declare function rehypeOptimizeStatic(options?: OptimizeOptions): (tree: any) => void;