@astrojs/mdx 2.3.1 → 3.0.0

package/dist/index.js

@@ -1,17 +1,12 @@
 import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
-import { markdownConfigDefaults, setVfileFrontmatter } from "@astrojs/markdown-remark";
+import { markdownConfigDefaults } from "@astrojs/markdown-remark";
 import astroJSXRenderer from "astro/jsx/renderer.js";
-import { parse as parseESM } from "es-module-lexer";
-import { VFile } from "vfile";
-import { createMdxProcessor } from "./plugins.js";
-import {
-  ASTRO_IMAGE_ELEMENT,
-  ASTRO_IMAGE_IMPORT,
-  USES_ASTRO_IMAGE_FLAG
-} from "./remark-images-to-component.js";
-import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from "./utils.js";
+import { ignoreStringPlugins, parseFrontmatter } from "./utils.js";
+import { vitePluginMdxPostprocess } from "./vite-plugin-mdx-postprocess.js";
+import { vitePluginMdx } from "./vite-plugin-mdx.js";
 function mdx(partialMdxOptions = {}) {
+  let mdxOptions = {};
   return {
     name: "@astrojs/mdx",
     hooks: {
@@ -38,140 +33,30 @@ function mdx(partialMdxOptions = {}) {
           // so wrap all MDX files with script / style propagation checks
           handlePropagation: true
         });
+        updateConfig({
+          vite: {
+            plugins: [vitePluginMdx(mdxOptions), vitePluginMdxPostprocess(config)]
+          }
+        });
+      },
+      "astro:config:done": ({ config }) => {
         const extendMarkdownConfig = partialMdxOptions.extendMarkdownConfig ?? defaultMdxOptions.extendMarkdownConfig;
-        const mdxOptions = applyDefaultOptions({
+        const resolvedMdxOptions = applyDefaultOptions({
           options: partialMdxOptions,
           defaults: markdownConfigToMdxOptions(
             extendMarkdownConfig ? config.markdown : markdownConfigDefaults
           )
         });
-        let processor;
-        updateConfig({
-          vite: {
-            plugins: [
-              {
-                name: "@mdx-js/rollup",
-                enforce: "pre",
-                buildEnd() {
-                  processor = void 0;
-                },
-                configResolved(resolved) {
-                  processor = createMdxProcessor(mdxOptions, {
-                    sourcemap: !!resolved.build.sourcemap
-                  });
-                  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);
-                    }
-                  }
-                },
-                async resolveId(source, importer, options) {
-                  if (importer?.endsWith(".mdx") && source[0] !== "/") {
-                    let resolved = await this.resolve(source, importer, options);
-                    if (!resolved)
-                      resolved = await this.resolve("./" + source, importer, options);
-                    return resolved;
-                  }
-                },
-                // Override transform to alter code before MDX compilation
-                // ex. inject layouts
-                async transform(_, id) {
-                  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 vfile = new VFile({ value: pageContent, path: id });
-                  setVfileFrontmatter(vfile, frontmatter);
-                  if (!processor) {
-                    return this.error(
-                      "MDX processor is not initialized. This is an internal error. Please file an issue."
-                    );
-                  }
-                  try {
-                    const compiled = await processor.process(vfile);
-                    return {
-                      code: String(compiled.value),
-                      map: compiled.map
-                    };
-                  } catch (e) {
-                    const err = e;
-                    err.name = "MDXError";
-                    err.loc = { file: fileId, line: e.line, column: e.column };
-                    Error.captureStackTrace(err);
-                    throw err;
-                  }
-                }
-              },
-              {
-                name: "@astrojs/mdx-postprocess",
-                // These transforms must happen *after* JSX runtime transformations
-                transform(code, id) {
-                  if (!id.endsWith(".mdx"))
-                    return;
-                  const [moduleImports, moduleExports] = parseESM(code);
-                  const importsFromJSXRuntime = moduleImports.filter(({ n }) => n === "astro/jsx-runtime").map(({ ss, se }) => code.substring(ss, se));
-                  const hasFragmentImport = importsFromJSXRuntime.some(
-                    (statement) => /[\s,{](?:Fragment,|Fragment\s*\})/.test(statement)
-                  );
-                  if (!hasFragmentImport) {
-                    code = 'import { Fragment } from "astro/jsx-runtime"\n' + code;
-                  }
-                  const { fileUrl, fileId } = getFileInfo(id, config);
-                  if (!moduleExports.find(({ n }) => n === "url")) {
-                    code += `
-export const url = ${JSON.stringify(fileUrl)};`;
-                  }
-                  if (!moduleExports.find(({ n }) => n === "file")) {
-                    code += `
-export const file = ${JSON.stringify(fileId)};`;
-                  }
-                  if (!moduleExports.find(({ n }) => n === "Content")) {
-                    const hasComponents = moduleExports.find(({ n }) => n === "components");
-                    const usesAstroImage = moduleExports.find(
-                      ({ n }) => n === USES_ASTRO_IMAGE_FLAG
-                    );
-                    let componentsCode = `{ Fragment${hasComponents ? ", ...components" : ""}, ...props.components,`;
-                    if (usesAstroImage) {
-                      componentsCode += ` ${JSON.stringify(ASTRO_IMAGE_ELEMENT)}: ${hasComponents ? "components.img ?? " : ""} props.components?.img ?? ${ASTRO_IMAGE_IMPORT}`;
-                    }
-                    componentsCode += " }";
-                    code = code.replace(
-                      "export default function MDXContent",
-                      "function MDXContent"
-                    );
-                    code += `
-export const Content = (props = {}) => MDXContent({
-											...props,
-											components: ${componentsCode},
-										});
-										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)};`;
-                  return { code, map: null };
-                }
-              }
-            ]
-          }
-        });
+        Object.assign(mdxOptions, resolvedMdxOptions);
+        mdxOptions = {};
       }
     }
   };
 }
 const defaultMdxOptions = {
   extendMarkdownConfig: true,
-  recmaPlugins: []
+  recmaPlugins: [],
+  optimize: false
 };
 function markdownConfigToMdxOptions(markdownConfig) {
   return {
@@ -179,8 +64,7 @@ function markdownConfigToMdxOptions(markdownConfig) {
     ...markdownConfig,
     remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins),
     rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins),
-    remarkRehype: markdownConfig.remarkRehype ?? {},
-    optimize: false
+    remarkRehype: markdownConfig.remarkRehype ?? {}
   };
 }
 function applyDefaultOptions({

package/dist/plugins.js

@@ -5,15 +5,16 @@ import {
   remarkCollectImages
 } from "@astrojs/markdown-remark";
 import { createProcessor, nodeTypes } from "@mdx-js/mdx";
+import { rehypeAnalyzeAstroMetadata } from "astro/jsx/rehype.js";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 import { SourceMapGenerator } from "source-map";
 import { rehypeApplyFrontmatterExport } from "./rehype-apply-frontmatter-export.js";
 import { rehypeInjectHeadingsExport } from "./rehype-collect-headings.js";
+import { rehypeImageToComponent } from "./rehype-images-to-component.js";
 import rehypeMetaString from "./rehype-meta-string.js";
 import { rehypeOptimizeStatic } from "./rehype-optimize-static.js";
-import { remarkImageToComponent } from "./remark-images-to-component.js";
 const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
 function createMdxProcessor(mdxOptions, extraOptions) {
   return createProcessor({
@@ -21,7 +22,6 @@ function createMdxProcessor(mdxOptions, extraOptions) {
     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",
@@ -40,7 +40,7 @@ function getRemarkPlugins(mdxOptions) {
       remarkPlugins.push(remarkSmartypants);
     }
   }
-  remarkPlugins.push(...mdxOptions.remarkPlugins, remarkCollectImages, remarkImageToComponent);
+  remarkPlugins.push(...mdxOptions.remarkPlugins, remarkCollectImages);
   return remarkPlugins;
 }
 function getRehypePlugins(mdxOptions) {
@@ -57,11 +57,16 @@ function getRehypePlugins(mdxOptions) {
       rehypePlugins.push(rehypePrism);
     }
   }
-  rehypePlugins.push(...mdxOptions.rehypePlugins);
+  rehypePlugins.push(...mdxOptions.rehypePlugins, rehypeImageToComponent);
   if (!isPerformanceBenchmark) {
     rehypePlugins.push(rehypeHeadingIds, rehypeInjectHeadingsExport);
   }
-  rehypePlugins.push(rehypeApplyFrontmatterExport);
+  rehypePlugins.push(
+    // Render info from `vfile.data.astro.data.frontmatter` as JS
+    rehypeApplyFrontmatterExport,
+    // Analyze MDX nodes and attach to `vfile.data.__astroMetadata`
+    rehypeAnalyzeAstroMetadata
+  );
   if (mdxOptions.optimize) {
     const options = mdxOptions.optimize === true ? void 0 : mdxOptions.optimize;
     rehypePlugins.push([rehypeOptimizeStatic, options]);

package/dist/{remark-images-to-component.d.ts → rehype-images-to-component.d.ts}

@@ -1,5 +1,6 @@
 import type { MarkdownVFile } from '@astrojs/markdown-remark';
+import type { Root } from 'hast';
 export declare const ASTRO_IMAGE_ELEMENT = "astro-image";
 export declare const ASTRO_IMAGE_IMPORT = "__AstroImage__";
 export declare const USES_ASTRO_IMAGE_FLAG = "__usesAstroImage";
-export declare function remarkImageToComponent(): (tree: any, file: MarkdownVFile) => void;
+export declare function rehypeImageToComponent(): (tree: Root, file: MarkdownVFile) => void;

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

@@ -0,0 +1,135 @@
+import { visit } from "unist-util-visit";
+import { jsToTreeNode } from "./utils.js";
+const ASTRO_IMAGE_ELEMENT = "astro-image";
+const ASTRO_IMAGE_IMPORT = "__AstroImage__";
+const USES_ASTRO_IMAGE_FLAG = "__usesAstroImage";
+function createArrayAttribute(name, values) {
+  return {
+    type: "mdxJsxAttribute",
+    name,
+    value: {
+      type: "mdxJsxAttributeValueExpression",
+      value: name,
+      data: {
+        estree: {
+          type: "Program",
+          body: [
+            {
+              type: "ExpressionStatement",
+              expression: {
+                type: "ArrayExpression",
+                elements: values.map((value) => ({
+                  type: "Literal",
+                  value,
+                  raw: String(value)
+                }))
+              }
+            }
+          ],
+          sourceType: "module",
+          comments: []
+        }
+      }
+    }
+  };
+}
+function getImageComponentAttributes(props) {
+  const attrs = [];
+  for (const [prop, value] of Object.entries(props)) {
+    if (prop === "src") continue;
+    if (prop === "widths" || prop === "densities") {
+      attrs.push(createArrayAttribute(prop, String(value).split(" ")));
+    } else {
+      attrs.push({
+        name: prop,
+        type: "mdxJsxAttribute",
+        value: String(value)
+      });
+    }
+  }
+  return attrs;
+}
+function rehypeImageToComponent() {
+  return function(tree, file) {
+    if (!file.data.imagePaths) return;
+    const importsStatements = [];
+    const importedImages = /* @__PURE__ */ new Map();
+    visit(tree, "element", (node, index, parent) => {
+      if (!file.data.imagePaths || node.tagName !== "img" || !node.properties.src) return;
+      const src = decodeURI(String(node.properties.src));
+      if (!file.data.imagePaths.has(src)) return;
+      let importName = importedImages.get(src);
+      if (!importName) {
+        importName = `__${importedImages.size}_${src.replace(/\W/g, "_")}__`;
+        importsStatements.push({
+          type: "mdxjsEsm",
+          value: "",
+          data: {
+            estree: {
+              type: "Program",
+              sourceType: "module",
+              body: [
+                {
+                  type: "ImportDeclaration",
+                  source: {
+                    type: "Literal",
+                    value: src,
+                    raw: JSON.stringify(src)
+                  },
+                  specifiers: [
+                    {
+                      type: "ImportDefaultSpecifier",
+                      local: { type: "Identifier", name: importName }
+                    }
+                  ]
+                }
+              ]
+            }
+          }
+        });
+        importedImages.set(src, importName);
+      }
+      const componentElement = {
+        name: ASTRO_IMAGE_ELEMENT,
+        type: "mdxJsxFlowElement",
+        attributes: [
+          ...getImageComponentAttributes(node.properties),
+          {
+            name: "src",
+            type: "mdxJsxAttribute",
+            value: {
+              type: "mdxJsxAttributeValueExpression",
+              value: importName,
+              data: {
+                estree: {
+                  type: "Program",
+                  sourceType: "module",
+                  comments: [],
+                  body: [
+                    {
+                      type: "ExpressionStatement",
+                      expression: { type: "Identifier", name: importName }
+                    }
+                  ]
+                }
+              }
+            }
+          }
+        ],
+        children: []
+      };
+      parent.children.splice(index, 1, componentElement);
+    });
+    tree.children.unshift(...importsStatements);
+    tree.children.unshift(
+      jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`)
+    );
+    tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));
+  };
+}
+export {
+  ASTRO_IMAGE_ELEMENT,
+  ASTRO_IMAGE_IMPORT,
+  USES_ASTRO_IMAGE_FLAG,
+  rehypeImageToComponent
+};

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

@@ -1,5 +1,6 @@
+import type { RehypePlugin } from '@astrojs/markdown-remark';
 export interface OptimizeOptions {
-    customComponentNames?: string[];
+    ignoreElementNames?: string[];
 }
 /**
  * For MDX only, collapse static subtrees of the hast into `set:html`. Subtrees
@@ -8,4 +9,4 @@ export interface OptimizeOptions {
  * 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;
+export declare const rehypeOptimizeStatic: RehypePlugin<[OptimizeOptions?]>;

package/dist/rehype-optimize-static.js

@@ -1,40 +1,49 @@
-import { visit } from "estree-util-visit";
+import { SKIP, visit } from "estree-util-visit";
 import { toHtml } from "hast-util-to-html";
 const exportConstComponentsRe = /export\s+const\s+components\s*=/;
-function rehypeOptimizeStatic(options) {
+const rehypeOptimizeStatic = (options) => {
   return (tree) => {
-    const customComponentNames = new Set(options?.customComponentNames);
+    const ignoreElementNames = new Set(options?.ignoreElementNames);
     for (const child of tree.children) {
       if (child.type === "mdxjsEsm" && exportConstComponentsRe.test(child.value)) {
-        const objectPropertyNodes = child.data.estree.body[0]?.declarations?.[0]?.init?.properties;
-        if (objectPropertyNodes) {
-          for (const objectPropertyNode of objectPropertyNodes) {
-            const componentName = objectPropertyNode.key?.name ?? objectPropertyNode.key?.value;
-            if (componentName) {
-              customComponentNames.add(componentName);
-            }
+        const keys = getExportConstComponentObjectKeys(child);
+        if (keys) {
+          for (const key of keys) {
+            ignoreElementNames.add(key);
           }
         }
+        break;
       }
     }
     const allPossibleElements = /* @__PURE__ */ new Set();
     const elementStack = [];
+    const elementMetadatas = /* @__PURE__ */ new WeakMap();
+    const isNodeNonStatic = (node) => {
+      return node.type.startsWith("mdx") || ignoreElementNames.has(node.tagName);
+    };
     visit(tree, {
-      enter(node) {
-        const isCustomComponent = node.tagName && customComponentNames.has(node.tagName);
-        if (node.type.startsWith("mdx") || isCustomComponent) {
+      // @ts-expect-error Force coerce node as hast node
+      enter(node, key, index, parents) {
+        if (key != null && key !== "children") return SKIP;
+        simplifyPlainMdxComponentNode(node, ignoreElementNames);
+        if (isNodeNonStatic(node)) {
           for (const el of elementStack) {
             allPossibleElements.delete(el);
           }
           elementStack.length = 0;
         }
-        if (node.type === "element" || node.type === "mdxJsxFlowElement") {
+        if (node.type === "element" || isMdxComponentNode(node)) {
           elementStack.push(node);
           allPossibleElements.add(node);
+          if (index != null && node.type === "element") {
+            elementMetadatas.set(node, { parent: parents[parents.length - 1], index });
+          }
         }
       },
-      leave(node, _, __, parents) {
-        if (node.type === "element" || node.type === "mdxJsxFlowElement") {
+      // @ts-expect-error Force coerce node as hast node
+      leave(node, key, _, parents) {
+        if (key != null && key !== "children") return SKIP;
+        if (node.type === "element" || isMdxComponentNode(node)) {
           elementStack.pop();
           const parent = parents[parents.length - 1];
           if (allPossibleElements.has(parent)) {
@@ -43,8 +52,10 @@ function rehypeOptimizeStatic(options) {
         }
       }
     });
+    const elementGroups = findElementGroups(allPossibleElements, elementMetadatas, isNodeNonStatic);
     for (const el of allPossibleElements) {
-      if (el.type === "mdxJsxFlowElement") {
+      if (el.children.length === 0) continue;
+      if (isMdxComponentNode(el)) {
         el.attributes.push({
           type: "mdxJsxAttribute",
           name: "set:html",
@@ -55,7 +66,87 @@ function rehypeOptimizeStatic(options) {
       }
       el.children = [];
     }
+    for (let i = elementGroups.length - 1; i >= 0; i--) {
+      const group = elementGroups[i];
+      const fragmentNode = {
+        type: "mdxJsxFlowElement",
+        name: "Fragment",
+        attributes: [
+          {
+            type: "mdxJsxAttribute",
+            name: "set:html",
+            value: toHtml(group.children)
+          }
+        ],
+        children: []
+      };
+      group.parent.children.splice(group.startIndex, group.children.length, fragmentNode);
+    }
   };
+};
+function findElementGroups(allPossibleElements, elementMetadatas, isNodeNonStatic) {
+  const elementGroups = [];
+  for (const el of allPossibleElements) {
+    if (isNodeNonStatic(el)) continue;
+    const metadata = elementMetadatas.get(el);
+    if (!metadata) {
+      throw new Error(
+        "Internal MDX error: rehype-optimize-static should have metadata for element node"
+      );
+    }
+    const groupableElements = [el];
+    for (let i = metadata.index + 1; i < metadata.parent.children.length; i++) {
+      const node = metadata.parent.children[i];
+      if (isNodeNonStatic(node)) break;
+      if (node.type === "element") {
+        const existed = allPossibleElements.delete(node);
+        if (!existed) break;
+      }
+      groupableElements.push(node);
+    }
+    if (groupableElements.length > 1) {
+      elementGroups.push({
+        parent: metadata.parent,
+        startIndex: metadata.index,
+        children: groupableElements
+      });
+      allPossibleElements.delete(el);
+    }
+  }
+  return elementGroups;
+}
+function isMdxComponentNode(node) {
+  return node.type === "mdxJsxFlowElement" || node.type === "mdxJsxTextElement";
+}
+function getExportConstComponentObjectKeys(node) {
+  const exportNamedDeclaration = node.data?.estree?.body[0];
+  if (exportNamedDeclaration?.type !== "ExportNamedDeclaration") return;
+  const variableDeclaration = exportNamedDeclaration.declaration;
+  if (variableDeclaration?.type !== "VariableDeclaration") return;
+  const variableInit = variableDeclaration.declarations[0]?.init;
+  if (variableInit?.type !== "ObjectExpression") return;
+  const keys = [];
+  for (const propertyNode of variableInit.properties) {
+    if (propertyNode.type === "Property" && propertyNode.key.type === "Identifier") {
+      keys.push(propertyNode.key.name);
+    }
+  }
+  return keys;
+}
+function simplifyPlainMdxComponentNode(node, ignoreElementNames) {
+  if (!isMdxComponentNode(node) || // Attributes could be dynamic, so bail if so.
+  node.attributes.length > 0 || // Fragments are also dynamic
+  !node.name || // Ignore if the node name is in the ignore list
+  ignoreElementNames.has(node.name) || // If the node name has uppercase characters, it's likely an actual MDX component
+  node.name.toLowerCase() !== node.name) {
+    return;
+  }
+  const newNode = node;
+  newNode.type = "element";
+  newNode.tagName = node.name;
+  newNode.properties = {};
+  node.attributes = void 0;
+  node.data = void 0;
 }
 export {
   rehypeOptimizeStatic

package/dist/utils.d.ts

@@ -3,7 +3,7 @@ import type { AstroConfig } from 'astro';
 import matter from 'gray-matter';
 import type { MdxjsEsm } from 'mdast-util-mdx';
 import type { PluggableList } from 'unified';
-interface FileInfo {
+export interface FileInfo {
     fileId: string;
     fileUrl: string;
 }
@@ -16,4 +16,3 @@ export declare function getFileInfo(id: string, config: AstroConfig): FileInfo;
 export declare function parseFrontmatter(code: string, id: string): matter.GrayMatterFile<string>;
 export declare function jsToTreeNode(jsString: string, acornOpts?: AcornOpts): MdxjsEsm;
 export declare function ignoreStringPlugins(plugins: any[]): PluggableList;
-export {};

package/dist/vite-plugin-mdx-postprocess.d.ts

@@ -0,0 +1,3 @@
+import type { AstroConfig } from 'astro';
+import type { Plugin } from 'vite';
+export declare function vitePluginMdxPostprocess(astroConfig: AstroConfig): Plugin;

package/dist/vite-plugin-mdx-postprocess.js

@@ -0,0 +1,93 @@
+import { parse } from "es-module-lexer";
+import {
+  ASTRO_IMAGE_ELEMENT,
+  ASTRO_IMAGE_IMPORT,
+  USES_ASTRO_IMAGE_FLAG
+} from "./rehype-images-to-component.js";
+import { getFileInfo } from "./utils.js";
+const underscoreFragmentImportRegex = /[\s,{]_Fragment[\s,}]/;
+const astroTagComponentImportRegex = /[\s,{]__astro_tag_component__[\s,}]/;
+function vitePluginMdxPostprocess(astroConfig) {
+  return {
+    name: "@astrojs/mdx-postprocess",
+    transform(code, id, opts) {
+      if (!id.endsWith(".mdx")) return;
+      const fileInfo = getFileInfo(id, astroConfig);
+      const [imports, exports] = parse(code);
+      code = injectUnderscoreFragmentImport(code, imports);
+      code = injectMetadataExports(code, exports, fileInfo);
+      code = transformContentExport(code, exports);
+      code = annotateContentExport(code, id, !!opts?.ssr, imports);
+      return { code, map: null };
+    }
+  };
+}
+function injectUnderscoreFragmentImport(code, imports) {
+  if (!isSpecifierImported(code, imports, underscoreFragmentImportRegex, "astro/jsx-runtime")) {
+    code += `
+import { Fragment as _Fragment } from 'astro/jsx-runtime';`;
+  }
+  return code;
+}
+function injectMetadataExports(code, exports, fileInfo) {
+  if (!exports.some(({ n }) => n === "url")) {
+    code += `
+export const url = ${JSON.stringify(fileInfo.fileUrl)};`;
+  }
+  if (!exports.some(({ n }) => n === "file")) {
+    code += `
+export const file = ${JSON.stringify(fileInfo.fileId)};`;
+  }
+  return code;
+}
+function transformContentExport(code, exports) {
+  if (exports.find(({ n }) => n === "Content")) return code;
+  const hasComponents = exports.find(({ n }) => n === "components");
+  const usesAstroImage = exports.find(({ n }) => n === USES_ASTRO_IMAGE_FLAG);
+  let componentsCode = `{ Fragment: _Fragment${hasComponents ? ", ...components" : ""}, ...props.components,`;
+  if (usesAstroImage) {
+    componentsCode += ` ${JSON.stringify(ASTRO_IMAGE_ELEMENT)}: ${hasComponents ? "components.img ?? " : ""} props.components?.img ?? ${ASTRO_IMAGE_IMPORT}`;
+  }
+  componentsCode += " }";
+  code = code.replace("export default function MDXContent", "function MDXContent");
+  code += `
+export const Content = (props = {}) => MDXContent({
+  ...props,
+  components: ${componentsCode},
+});
+export default Content;`;
+  return code;
+}
+function annotateContentExport(code, id, ssr, imports) {
+  code += `
+Content[Symbol.for('mdx-component')] = true`;
+  code += `
+Content[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+  code += `
+Content.moduleId = ${JSON.stringify(id)};`;
+  if (ssr) {
+    if (!isSpecifierImported(
+      code,
+      imports,
+      astroTagComponentImportRegex,
+      "astro/runtime/server/index.js"
+    )) {
+      code += `
+import { __astro_tag_component__ } from 'astro/runtime/server/index.js';`;
+    }
+    code += `
+__astro_tag_component__(Content, 'astro:jsx');`;
+  }
+  return code;
+}
+function isSpecifierImported(code, imports, specifierRegex, source) {
+  for (const imp of imports) {
+    if (imp.n !== source) continue;
+    const importStatement = code.slice(imp.ss, imp.se);
+    if (specifierRegex.test(importStatement)) return true;
+  }
+  return false;
+}
+export {
+  vitePluginMdxPostprocess
+};

package/dist/vite-plugin-mdx.d.ts

@@ -0,0 +1,3 @@
+import type { Plugin } from 'vite';
+import type { MdxOptions } from './index.js';
+export declare function vitePluginMdx(mdxOptions: MdxOptions): Plugin;

package/dist/vite-plugin-mdx.js

@@ -0,0 +1,78 @@
+import { setVfileFrontmatter } from "@astrojs/markdown-remark";
+import { getAstroMetadata } from "astro/jsx/rehype.js";
+import { VFile } from "vfile";
+import { createMdxProcessor } from "./plugins.js";
+import { parseFrontmatter } from "./utils.js";
+function vitePluginMdx(mdxOptions) {
+  let processor;
+  return {
+    name: "@mdx-js/rollup",
+    enforce: "pre",
+    buildEnd() {
+      processor = void 0;
+    },
+    configResolved(resolved) {
+      if (Object.keys(mdxOptions).length === 0) return;
+      processor = createMdxProcessor(mdxOptions, {
+        sourcemap: !!resolved.build.sourcemap
+      });
+      const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === "astro:jsx");
+      if (jsxPluginIndex !== -1) {
+        resolved.plugins.splice(jsxPluginIndex, 1);
+      }
+    },
+    async resolveId(source, importer, options) {
+      if (importer?.endsWith(".mdx") && source[0] !== "/") {
+        let resolved = await this.resolve(source, importer, options);
+        if (!resolved) resolved = await this.resolve("./" + source, importer, options);
+        return resolved;
+      }
+    },
+    // Override transform to alter code before MDX compilation
+    // ex. inject layouts
+    async transform(code, id) {
+      if (!id.endsWith(".mdx")) return;
+      const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
+      const vfile = new VFile({ value: pageContent, path: id });
+      setVfileFrontmatter(vfile, frontmatter);
+      if (!processor) {
+        return this.error(
+          "MDX processor is not initialized. This is an internal error. Please file an issue."
+        );
+      }
+      try {
+        const compiled = await processor.process(vfile);
+        return {
+          code: String(compiled.value),
+          map: compiled.map,
+          meta: getMdxMeta(vfile)
+        };
+      } catch (e) {
+        const err = e;
+        err.name = "MDXError";
+        err.loc = { file: id, line: e.line, column: e.column };
+        Error.captureStackTrace(err);
+        throw err;
+      }
+    }
+  };
+}
+function getMdxMeta(vfile) {
+  const astroMetadata = getAstroMetadata(vfile);
+  if (!astroMetadata) {
+    throw new Error(
+      "Internal MDX error: Astro metadata is not set by rehype-analyze-astro-metadata"
+    );
+  }
+  return {
+    astro: astroMetadata,
+    vite: {
+      // Setting this vite metadata to `ts` causes Vite to resolve .js
+      // extensions to .ts files.
+      lang: "ts"
+    }
+  };
+}
+export {
+  vitePluginMdx
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "2.3.1",
+  "version": "3.0.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -27,45 +27,45 @@
     "template"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^3.0.0",
-    "acorn": "^8.11.2",
-    "es-module-lexer": "^1.4.1",
+    "@mdx-js/mdx": "^3.0.1",
+    "acorn": "^8.11.3",
+    "es-module-lexer": "^1.5.2",
     "estree-util-visit": "^2.0.0",
     "github-slugger": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^9.0.0",
-    "kleur": "^4.1.4",
+    "hast-util-to-html": "^9.0.1",
+    "kleur": "^4.1.5",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
-    "remark-smartypants": "^2.0.0",
+    "remark-smartypants": "^3.0.1",
     "source-map": "^0.7.4",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.1",
     "@astrojs/markdown-remark": "5.1.0"
   },
   "peerDependencies": {
-    "astro": "^4.0.0"
+    "astro": "^4.8.0"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.10",
     "@types/estree": "^1.0.5",
+    "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.3",
-    "@types/mocha": "^10.0.4",
     "@types/yargs-parser": "^21.0.3",
     "cheerio": "1.0.0-rc.12",
-    "linkedom": "^0.16.4",
+    "linkedom": "^0.16.11",
     "mdast-util-mdx": "^3.0.0",
+    "mdast-util-mdx-jsx": "^3.1.2",
     "mdast-util-to-string": "^4.0.0",
     "reading-time": "^1.5.0",
-    "rehype-mathjax": "^5.0.0",
-    "rehype-pretty-code": "^0.13.0",
+    "rehype-mathjax": "^6.0.0",
+    "rehype-pretty-code": "^0.13.1",
     "remark-math": "^6.0.0",
-    "remark-rehype": "^11.0.0",
+    "remark-rehype": "^11.1.0",
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^9.0.0",
     "unified": "^11.0.4",
-    "vite": "^5.1.4",
-    "astro": "4.6.2",
+    "vite": "^5.2.11",
+    "astro": "4.8.0",
     "astro-scripts": "0.0.14"
   },
   "engines": {

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

@@ -1,141 +0,0 @@
-import { visit } from "unist-util-visit";
-import { jsToTreeNode } from "./utils.js";
-const ASTRO_IMAGE_ELEMENT = "astro-image";
-const ASTRO_IMAGE_IMPORT = "__AstroImage__";
-const USES_ASTRO_IMAGE_FLAG = "__usesAstroImage";
-function remarkImageToComponent() {
-  return function(tree, file) {
-    if (!file.data.imagePaths)
-      return;
-    const importsStatements = [];
-    const importedImages = /* @__PURE__ */ new Map();
-    visit(tree, "image", (node, index, parent) => {
-      if (file.data.imagePaths?.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: ASTRO_IMAGE_ELEMENT,
-          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
-          });
-        }
-        if (node.data && node.data.hProperties) {
-          const createArrayAttribute = (name, values) => {
-            return {
-              type: "mdxJsxAttribute",
-              name,
-              value: {
-                type: "mdxJsxAttributeValueExpression",
-                value: name,
-                data: {
-                  estree: {
-                    type: "Program",
-                    body: [
-                      {
-                        type: "ExpressionStatement",
-                        expression: {
-                          type: "ArrayExpression",
-                          elements: values.map((value) => ({
-                            type: "Literal",
-                            value,
-                            raw: String(value)
-                          }))
-                        }
-                      }
-                    ],
-                    sourceType: "module",
-                    comments: []
-                  }
-                }
-              }
-            };
-          };
-          Object.entries(node.data.hProperties).forEach(
-            ([key, value]) => {
-              if (Array.isArray(value)) {
-                componentElement.attributes.push(createArrayAttribute(key, value));
-              } else {
-                componentElement.attributes.push({
-                  name: key,
-                  type: "mdxJsxAttribute",
-                  value: String(value)
-                });
-              }
-            }
-          );
-        }
-        parent.children.splice(index, 1, componentElement);
-      }
-    });
-    tree.children.unshift(...importsStatements);
-    tree.children.unshift(
-      jsToTreeNode(`import { Image as ${ASTRO_IMAGE_IMPORT} } from "astro:assets";`)
-    );
-    tree.children.push(jsToTreeNode(`export const ${USES_ASTRO_IMAGE_FLAG} = true`));
-  };
-}
-export {
-  ASTRO_IMAGE_ELEMENT,
-  ASTRO_IMAGE_IMPORT,
-  USES_ASTRO_IMAGE_FLAG,
-  remarkImageToComponent
-};