@astrojs/mdx 4.0.0-beta.1 → 4.0.0-beta.3

package/dist/index.js

@@ -1,7 +1,7 @@
 import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
 import { markdownConfigDefaults } from "@astrojs/markdown-remark";
-import { ignoreStringPlugins, parseFrontmatter } from "./utils.js";
+import { ignoreStringPlugins, safeParseFrontmatter } from "./utils.js";
 import { vitePluginMdxPostprocess } from "./vite-plugin-mdx-postprocess.js";
 import { vitePluginMdx } from "./vite-plugin-mdx.js";
 function getContainerRenderer() {
@@ -11,7 +11,7 @@ function getContainerRenderer() {
   };
 }
 function mdx(partialMdxOptions = {}) {
-  let mdxOptions = {};
+  let vitePluginMdxOptions = {};
   return {
     name: "@astrojs/mdx",
     hooks: {
@@ -25,12 +25,12 @@ function mdx(partialMdxOptions = {}) {
         addContentEntryType({
           extensions: [".mdx"],
           async getEntryInfo({ fileUrl, contents }) {
-            const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
+            const parsed = safeParseFrontmatter(contents, fileURLToPath(fileUrl));
             return {
-              data: parsed.data,
-              body: parsed.content,
-              slug: parsed.data.slug,
-              rawData: parsed.matter
+              data: parsed.frontmatter,
+              body: parsed.content.trim(),
+              slug: parsed.frontmatter.slug,
+              rawData: parsed.rawFrontmatter
             };
           },
           contentModuleTypes: await fs.readFile(
@@ -43,7 +43,7 @@ function mdx(partialMdxOptions = {}) {
         });
         updateConfig({
           vite: {
-            plugins: [vitePluginMdx(mdxOptions), vitePluginMdxPostprocess(config)]
+            plugins: [vitePluginMdx(vitePluginMdxOptions), vitePluginMdxPostprocess(config)]
           }
         });
       },
@@ -56,8 +56,11 @@ function mdx(partialMdxOptions = {}) {
             logger
           )
         });
-        Object.assign(mdxOptions, resolvedMdxOptions);
-        mdxOptions = {};
+        Object.assign(vitePluginMdxOptions, {
+          mdxOptions: resolvedMdxOptions,
+          srcDir: config.srcDir
+        });
+        vitePluginMdxOptions = {};
       }
     }
   };

package/dist/rehype-apply-frontmatter-export.d.ts

@@ -1,2 +1,10 @@
+import type { Root } from 'hast';
 import type { VFile } from 'vfile';
-export declare function rehypeApplyFrontmatterExport(): (tree: any, vfile: VFile) => void;
+declare module 'vfile' {
+    interface DataMap {
+        applyFrontmatterExport?: {
+            srcDir?: URL;
+        };
+    }
+}
+export declare function rehypeApplyFrontmatterExport(): (tree: Root, vfile: VFile) => void;

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

@@ -1,5 +1,8 @@
+import path from "node:path";
+import { fileURLToPath } from "node:url";
 import { isFrontmatterValid } from "@astrojs/markdown-remark";
 import { jsToTreeNode } from "./utils.js";
+const exportConstPartialTrueRe = /export\s+const\s+partial\s*=\s*true/;
 function rehypeApplyFrontmatterExport() {
   return function(tree, vfile) {
     const frontmatter = vfile.data.astro?.frontmatter;
@@ -9,11 +12,11 @@ function rehypeApplyFrontmatterExport() {
         // 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 exportNodes = [
+    const extraChildren = [
       jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`)
     ];
     if (frontmatter.layout) {
-      exportNodes.unshift(
+      extraChildren.unshift(
         jsToTreeNode(
           // NOTE: Use `__astro_*` import names to prevent conflicts with user code
           /** @see 'vite-plugin-markdown' for layout props reference */
@@ -36,10 +39,45 @@ export default function ({ children }) {
 };`
         )
       );
+    } else if (shouldAddCharset(tree, vfile)) {
+      extraChildren.unshift({
+        type: "mdxJsxFlowElement",
+        name: "meta",
+        attributes: [
+          {
+            type: "mdxJsxAttribute",
+            name: "charset",
+            value: "utf-8"
+          }
+        ],
+        children: []
+      });
     }
-    tree.children = exportNodes.concat(tree.children);
+    tree.children = extraChildren.concat(tree.children);
   };
 }
+function shouldAddCharset(tree, vfile) {
+  const srcDirUrl = vfile.data.applyFrontmatterExport?.srcDir;
+  if (!srcDirUrl) return false;
+  const hasConstPartialTrue = tree.children.some(
+    (node) => node.type === "mdxjsEsm" && exportConstPartialTrueRe.test(node.value)
+  );
+  if (hasConstPartialTrue) return false;
+  const pagesDir = path.join(fileURLToPath(srcDirUrl), "pages").replace(/\\/g, "/");
+  const filePath = vfile.path;
+  if (!filePath.startsWith(pagesDir)) return false;
+  const hasLeadingUnderscoreInPath = filePath.slice(pagesDir.length).replace(/\\/g, "/").split("/").some((part) => part.startsWith("_"));
+  if (hasLeadingUnderscoreInPath) return false;
+  for (const child of tree.children) {
+    if (child.type === "element") break;
+    if (child.type === "mdxJsxFlowElement") {
+      if (child.name == null) break;
+      if (child.name[0] === child.name[0].toLowerCase()) break;
+      return false;
+    }
+  }
+  return true;
+}
 export {
   rehypeApplyFrontmatterExport
 };

package/dist/utils.d.ts

@@ -1,6 +1,5 @@
 import type { Options as AcornOpts } from 'acorn';
 import type { AstroConfig, AstroIntegrationLogger } from 'astro';
-import matter from 'gray-matter';
 import type { MdxjsEsm } from 'mdast-util-mdx';
 import type { PluggableList } from 'unified';
 export interface FileInfo {
@@ -13,6 +12,6 @@ export declare function getFileInfo(id: string, config: AstroConfig): FileInfo;
  * Match YAML exception handling from Astro core errors
  * @see 'astro/src/core/errors.ts'
  */
-export declare function parseFrontmatter(code: string, id: string): matter.GrayMatterFile<string>;
+export declare function safeParseFrontmatter(code: string, id: string): import("@astrojs/markdown-remark").ParseFrontmatterResult;
 export declare function jsToTreeNode(jsString: string, acornOpts?: AcornOpts): MdxjsEsm;
 export declare function ignoreStringPlugins(plugins: any[], logger: AstroIntegrationLogger): PluggableList;

package/dist/utils.js

@@ -1,5 +1,5 @@
+import { parseFrontmatter } from "@astrojs/markdown-remark";
 import { parse } from "acorn";
-import matter from "gray-matter";
 import { bold } from "kleur/colors";
 function appendForwardSlash(path) {
   return path.endsWith("/") ? path : path + "/";
@@ -28,9 +28,9 @@ function getFileInfo(id, config) {
   }
   return { fileId, fileUrl };
 }
-function parseFrontmatter(code, id) {
+function safeParseFrontmatter(code, id) {
   try {
-    return matter(code);
+    return parseFrontmatter(code, { frontmatter: "empty-with-spaces" });
   } catch (e) {
     if (e.name === "YAMLException") {
       const err = e;
@@ -85,5 +85,5 @@ export {
   getFileInfo,
   ignoreStringPlugins,
   jsToTreeNode,
-  parseFrontmatter
+  safeParseFrontmatter
 };

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

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

package/dist/vite-plugin-mdx.js

@@ -1,9 +1,10 @@
 import { getAstroMetadata } from "astro/jsx/rehype.js";
 import { VFile } from "vfile";
 import { createMdxProcessor } from "./plugins.js";
-import { parseFrontmatter } from "./utils.js";
-function vitePluginMdx(mdxOptions) {
+import { safeParseFrontmatter } from "./utils.js";
+function vitePluginMdx(opts) {
   let processor;
+  let sourcemapEnabled;
   return {
     name: "@mdx-js/rollup",
     enforce: "pre",
@@ -11,10 +12,7 @@ function vitePluginMdx(mdxOptions) {
       processor = void 0;
     },
     configResolved(resolved) {
-      if (Object.keys(mdxOptions).length === 0) return;
-      processor = createMdxProcessor(mdxOptions, {
-        sourcemap: !!resolved.build.sourcemap
-      });
+      sourcemapEnabled = !!resolved.build.sourcemap;
       const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === "astro:jsx");
       if (jsxPluginIndex !== -1) {
         resolved.plugins.splice(jsxPluginIndex, 1);
@@ -31,21 +29,21 @@ function vitePluginMdx(mdxOptions) {
     // ex. inject layouts
     async transform(code, id) {
       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 { frontmatter, content } = safeParseFrontmatter(code, id);
       const vfile = new VFile({
-        value: frontmatterLines + pageContent,
+        value: content,
         path: id,
         data: {
           astro: {
             frontmatter
+          },
+          applyFrontmatterExport: {
+            srcDir: opts.srcDir
           }
         }
       });
       if (!processor) {
-        return this.error(
-          "MDX processor is not initialized. This is an internal error. Please file an issue."
-        );
+        processor = createMdxProcessor(opts.mdxOptions, { sourcemap: sourcemapEnabled });
       }
       try {
         const compiled = await processor.process(vfile);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "4.0.0-beta.1",
+  "version": "4.0.0-beta.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -28,12 +28,11 @@
     "template"
   ],
   "dependencies": {
-    "@mdx-js/mdx": "^3.0.1",
-    "acorn": "^8.12.1",
+    "@mdx-js/mdx": "^3.1.0",
+    "acorn": "^8.14.0",
     "es-module-lexer": "^1.5.4",
     "estree-util-visit": "^2.0.0",
-    "gray-matter": "^4.0.3",
-    "hast-util-to-html": "^9.0.2",
+    "hast-util-to-html": "^9.0.3",
     "kleur": "^4.1.5",
     "rehype-raw": "^7.0.0",
     "remark-gfm": "^4.0.0",
@@ -41,30 +40,30 @@
     "source-map": "^0.7.4",
     "unist-util-visit": "^5.0.0",
     "vfile": "^6.0.3",
-    "@astrojs/markdown-remark": "6.0.0-beta.1"
+    "@astrojs/markdown-remark": "6.0.0-beta.2"
   },
   "peerDependencies": {
     "astro": "^5.0.0-alpha.0"
   },
   "devDependencies": {
-    "@types/estree": "^1.0.5",
+    "@types/estree": "^1.0.6",
     "@types/hast": "^3.0.4",
     "@types/mdast": "^4.0.4",
     "cheerio": "1.0.0",
-    "linkedom": "^0.18.4",
+    "linkedom": "^0.18.5",
     "mdast-util-mdx": "^3.0.0",
     "mdast-util-mdx-jsx": "^3.1.3",
     "mdast-util-to-string": "^4.0.0",
     "rehype-mathjax": "^6.0.0",
     "rehype-pretty-code": "^0.14.0",
     "remark-math": "^6.0.0",
-    "remark-rehype": "^11.1.0",
+    "remark-rehype": "^11.1.1",
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^9.0.0",
-    "shiki": "^1.16.2",
+    "shiki": "^1.22.2",
     "unified": "^11.0.5",
-    "vite": "^5.4.3",
-    "astro": "5.0.0-beta.1",
+    "vite": "6.0.0-beta.2",
+    "astro": "5.0.0-beta.6",
     "astro-scripts": "0.0.14"
   },
   "engines": {

package/template/content-module-types.d.ts

@@ -4,6 +4,7 @@ declare module 'astro:content' {
 			Content: import('astro').MarkdownInstance<{}>['Content'];
 			headings: import('astro').MarkdownHeading[];
 			remarkPluginFrontmatter: Record<string, any>;
+			components: import('astro').MDXInstance<{}>['components'];
 		}>;
 	}
 }