@astrojs/mdx 4.0.0-alpha.1 → 4.0.0-alpha.2

package/dist/plugins.js

@@ -62,7 +62,7 @@ function getRehypePlugins(mdxOptions) {
     rehypePlugins.push(rehypeHeadingIds, rehypeInjectHeadingsExport);
   }
   rehypePlugins.push(
-    // Render info from `vfile.data.astro.data.frontmatter` as JS
+    // Render info from `vfile.data.astro.frontmatter` as JS
     rehypeApplyFrontmatterExport,
     // Analyze MDX nodes and attach to `vfile.data.__astroMetadata`
     rehypeAnalyzeAstroMetadata

package/dist/rehype-apply-frontmatter-export.js

@@ -1,40 +1,39 @@
-import { InvalidAstroDataError } from "@astrojs/markdown-remark";
-import { safelyGetAstroData } from "@astrojs/markdown-remark/dist/internal.js";
+import { isFrontmatterValid } from "@astrojs/markdown-remark";
 import { jsToTreeNode } from "./utils.js";
 function rehypeApplyFrontmatterExport() {
   return function(tree, vfile) {
-    const astroData = safelyGetAstroData(vfile.data);
-    if (astroData instanceof InvalidAstroDataError)
+    const frontmatter = vfile.data.astro?.frontmatter;
+    if (!frontmatter || !isFrontmatterValid(frontmatter))
       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;
     const exportNodes = [
       jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`)
     ];
     if (frontmatter.layout) {
       exportNodes.unshift(
         jsToTreeNode(
+          // NOTE: Use `__astro_*` import names to prevent conflicts with user code
           /** @see 'vite-plugin-markdown' for layout props reference */
-          `import { jsx as layoutJsx } from 'astro/jsx-runtime';
+          `import { jsx as __astro_layout_jsx__ } from 'astro/jsx-runtime';
+import __astro_layout_component__ from ${JSON.stringify(frontmatter.layout)};
 
-				export default async function ({ children }) {
-					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
-					const { layout, ...content } = frontmatter;
-					content.file = file;
-					content.url = url;
-					return layoutJsx(Layout, {
-						file,
-						url,
-						content,
-						frontmatter: content,
-						headings: getHeadings(),
-						'server:root': true,
-						children,
-					});
-				};`
+export default function ({ children }) {
+	const { layout, ...content } = frontmatter;
+	content.file = file;
+	content.url = url;
+	return __astro_layout_jsx__(__astro_layout_component__, {
+		file,
+		url,
+		content,
+		frontmatter: content,
+		headings: getHeadings(),
+		'server:root': true,
+		children,
+	});
+};`
         )
       );
     }

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

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

package/dist/rehype-collect-headings.js

@@ -1,7 +1,7 @@
 import { jsToTreeNode } from "./utils.js";
 function rehypeInjectHeadingsExport() {
   return function(tree, file) {
-    const headings = file.data.__astroHeadings || [];
+    const headings = file.data.astro?.headings ?? [];
     tree.children.unshift(
       jsToTreeNode(`export function getHeadings() { return ${JSON.stringify(headings)} }`)
     );

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

@@ -1,6 +1,6 @@
-import type { MarkdownVFile } from '@astrojs/markdown-remark';
 import type { Root } from 'hast';
+import type { VFile } from 'vfile';
 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 rehypeImageToComponent(): (tree: Root, file: MarkdownVFile) => void;
+export declare function rehypeImageToComponent(): (tree: Root, file: VFile) => void;

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

@@ -51,13 +51,13 @@ function getImageComponentAttributes(props) {
 }
 function rehypeImageToComponent() {
   return function(tree, file) {
-    if (!file.data.imagePaths) return;
+    if (!file.data.astro?.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;
+      if (!file.data.astro?.imagePaths || node.tagName !== "img" || !node.properties.src) return;
       const src = decodeURI(String(node.properties.src));
-      if (!file.data.imagePaths.has(src)) return;
+      if (!file.data.astro.imagePaths?.includes(src)) return;
       let importName = importedImages.get(src);
       if (!importName) {
         importName = `__${importedImages.size}_${src.replace(/\W/g, "_")}__`;

package/dist/vite-plugin-mdx.js

@@ -1,4 +1,3 @@
-import { setVfileFrontmatter } from "@astrojs/markdown-remark";
 import { getAstroMetadata } from "astro/jsx/rehype.js";
 import { VFile } from "vfile";
 import { createMdxProcessor } from "./plugins.js";
@@ -34,8 +33,15 @@ function vitePluginMdx(mdxOptions) {
       if (!id.endsWith(".mdx")) return;
       const { data: frontmatter, content: pageContent, matter } = parseFrontmatter(code, id);
       const frontmatterLines = matter ? matter.match(/\n/g)?.join("") + "\n\n" : "";
-      const vfile = new VFile({ value: frontmatterLines + pageContent, path: id });
-      setVfileFrontmatter(vfile, frontmatter);
+      const vfile = new VFile({
+        value: frontmatterLines + pageContent,
+        path: id,
+        data: {
+          astro: {
+            frontmatter
+          }
+        }
+      });
       if (!processor) {
         return this.error(
           "MDX processor is not initialized. This is an internal error. Please file an issue."

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "4.0.0-alpha.1",
+  "version": "4.0.0-alpha.2",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -33,15 +33,15 @@
     "es-module-lexer": "^1.5.4",
     "estree-util-visit": "^2.0.0",
     "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^9.0.1",
+    "hast-util-to-html": "^9.0.2",
     "kleur": "^4.1.5",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
     "remark-smartypants": "^3.0.2",
     "source-map": "^0.7.4",
     "unist-util-visit": "^5.0.0",
-    "vfile": "^6.0.2",
-    "@astrojs/markdown-remark": "6.0.0-alpha.0"
+    "vfile": "^6.0.3",
+    "@astrojs/markdown-remark": "6.0.0-alpha.1"
   },
   "peerDependencies": {
     "astro": "^5.0.0-alpha.0"
@@ -53,18 +53,18 @@
     "cheerio": "1.0.0",
     "linkedom": "^0.18.4",
     "mdast-util-mdx": "^3.0.0",
-    "mdast-util-mdx-jsx": "^3.1.2",
+    "mdast-util-mdx-jsx": "^3.1.3",
     "mdast-util-to-string": "^4.0.0",
     "rehype-mathjax": "^6.0.0",
-    "rehype-pretty-code": "^0.13.2",
+    "rehype-pretty-code": "^0.14.0",
     "remark-math": "^6.0.0",
     "remark-rehype": "^11.1.0",
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^9.0.0",
-    "shiki": "^1.14.1",
+    "shiki": "^1.16.1",
     "unified": "^11.0.5",
-    "vite": "^5.4.1",
-    "astro": "5.0.0-alpha.1",
+    "vite": "^5.4.2",
+    "astro": "5.0.0-alpha.3",
     "astro-scripts": "0.0.14"
   },
   "engines": {