@astrojs/mdx 1.0.3 → 1.1.1

package/README.md

@@ -42,15 +42,16 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-```js ins={3} "mdx()"
-// astro.config.mjs
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-
-export default defineConfig({
-  // ...
-  integrations: [mdx()],
-});
+```diff lang="js" "mdx()"
+  // astro.config.mjs
+  import { defineConfig } from 'astro/config';
++ import mdx from '@astrojs/mdx';
+
+  export default defineConfig({
+    // ...
+    integrations: [mdx()],
+    //             ^^^^^
+  });
 ```
 
 ### Editor Integration

package/dist/index.js

@@ -1,13 +1,15 @@
-import { markdownConfigDefaults } from "@astrojs/markdown-remark";
-import { toRemarkInitializeAstroData } from "@astrojs/markdown-remark/dist/internal.js";
-import { compile as mdxCompile } from "@mdx-js/mdx";
+import { markdownConfigDefaults, setVfileFrontmatter } from "@astrojs/markdown-remark";
 import astroJSXRenderer from "astro/jsx/renderer.js";
 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 { 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";
 function mdx(partialMdxOptions = {}) {
   return {
@@ -50,20 +52,7 @@ function mdx(partialMdxOptions = {}) {
             extendMarkdownConfig ? config.markdown : markdownConfigDefaults
           )
         });
-        const mdxPluginOpts = {
-          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: []
-        };
-        let importMetaEnv = {
-          SITE: config.site
-        };
+        let processor;
         updateConfig({
           vite: {
             plugins: [
@@ -71,7 +60,10 @@ function mdx(partialMdxOptions = {}) {
                 name: "@mdx-js/rollup",
                 enforce: "pre",
                 configResolved(resolved) {
-                  importMetaEnv = { ...importMetaEnv, ...resolved.env };
+                  processor = createMdxProcessor(mdxOptions, {
+                    sourcemap: !!resolved.build.sourcemap,
+                    importMetaEnv: { SITE: config.site, ...resolved.env }
+                  });
                   const jsxPluginIndex = resolved.plugins.findIndex((p) => p.name === "astro:jsx");
                   if (jsxPluginIndex !== -1) {
                     const myPluginIndex = resolved.plugins.findIndex(
@@ -92,21 +84,10 @@ function mdx(partialMdxOptions = {}) {
                   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);
                   try {
-                    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
-                    });
+                    const compiled = await processor.process(vfile);
                     return {
                       code: escapeViteEnvReferences(String(compiled.value)),
                       map: compiled.map
@@ -145,11 +126,19 @@ 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 MDXContent;", "");
                     code += `
 export const Content = (props = {}) => MDXContent({
 											...props,
-											components: { Fragment${hasComponents ? ", ...components" : ""}, ...props.components },
+											components: ${componentsCode},
 										});
 										export default Content;`;
                   }

package/dist/plugins.d.ts

@@ -1,9 +1,8 @@
-import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import type { VFile } from 'vfile';
+import type { Processor } from 'unified';
 import type { MdxOptions } from './index.js';
-export declare function recmaInjectImportMetaEnvPlugin({ importMetaEnv, }: {
+interface MdxProcessorExtraOptions {
+    sourcemap: boolean;
     importMetaEnv: Record<string, any>;
-}): (tree: any) => void;
-export declare function rehypeApplyFrontmatterExport(): (tree: any, vfile: VFile) => void;
-export declare function getRemarkPlugins(mdxOptions: MdxOptions): Promise<PluggableList>;
-export declare function getRehypePlugins(mdxOptions: MdxOptions): PluggableList;
+}
+export declare function createMdxProcessor(mdxOptions: MdxOptions, extraOptions: MdxProcessorExtraOptions): Processor;
+export {};

package/dist/plugins.js

@@ -4,84 +4,34 @@ import {
   remarkPrism,
   remarkShiki
 } 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 { createProcessor, nodeTypes } from "@mdx-js/mdx";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
+import { SourceMapGenerator } from "source-map";
+import { recmaInjectImportMetaEnv } from "./recma-inject-import-meta-env.js";
+import { rehypeApplyFrontmatterExport } from "./rehype-apply-frontmatter-export.js";
 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 { jsToTreeNode } from "./utils.js";
 const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
-function recmaInjectImportMetaEnvPlugin({
-  importMetaEnv
-}) {
-  return (tree) => {
-    estreeVisit(tree, (node) => {
-      if (node.type === "MemberExpression") {
-        const envVarName = getImportMetaEnvVariableName(node);
-        if (typeof envVarName === "string") {
-          for (const key in node) {
-            delete node[key];
-          }
-          const envVarLiteral = {
-            type: "Literal",
-            value: importMetaEnv[envVarName],
-            raw: JSON.stringify(importMetaEnv[envVarName])
-          };
-          Object.assign(node, envVarLiteral);
-        }
-      }
-    });
-  };
-}
-function rehypeApplyFrontmatterExport() {
-  return function(tree, vfile) {
-    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;
-    const exportNodes = [
-      jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`)
-    ];
-    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 }) {
-					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,
-					});
-				};`
-        )
-      );
-    }
-    tree.children = exportNodes.concat(tree.children);
-  };
+function createMdxProcessor(mdxOptions, extraOptions) {
+  return createProcessor({
+    remarkPlugins: getRemarkPlugins(mdxOptions),
+    rehypePlugins: getRehypePlugins(mdxOptions),
+    recmaPlugins: getRecmaPlugins(mdxOptions, extraOptions.importMetaEnv),
+    remarkRehypeOptions: mdxOptions.remarkRehype,
+    jsx: true,
+    jsxImportSource: "astro",
+    // Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
+    format: "mdx",
+    mdExtensions: [],
+    elementAttributeNameCase: "html",
+    SourceMapGenerator: extraOptions.sourcemap ? SourceMapGenerator : void 0
+  });
 }
-async function getRemarkPlugins(mdxOptions) {
+function getRemarkPlugins(mdxOptions) {
   let remarkPlugins = [remarkCollectImages, remarkImageToComponent];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.gfm) {
@@ -124,29 +74,9 @@ function getRehypePlugins(mdxOptions) {
   }
   return rehypePlugins;
 }
-function getImportMetaEnvVariableName(node) {
-  try {
-    if (node.object.type !== "MemberExpression" || node.property.type !== "Identifier")
-      return new Error();
-    const nestedExpression = node.object;
-    if (nestedExpression.property.type !== "Identifier" || nestedExpression.property.name !== "env")
-      return new Error();
-    const envExpression = nestedExpression.object;
-    if (envExpression.type !== "MetaProperty" || envExpression.property.type !== "Identifier" || envExpression.property.name !== "meta")
-      return new Error();
-    if (envExpression.meta.name !== "import")
-      return new Error();
-    return node.property.name;
-  } catch (e) {
-    if (e instanceof Error) {
-      return e;
-    }
-    return new Error("Unknown parsing error");
-  }
+function getRecmaPlugins(mdxOptions, importMetaEnv) {
+  return [...mdxOptions.recmaPlugins ?? [], [recmaInjectImportMetaEnv, { importMetaEnv }]];
 }
 export {
-  getRehypePlugins,
-  getRemarkPlugins,
-  recmaInjectImportMetaEnvPlugin,
-  rehypeApplyFrontmatterExport
+  createMdxProcessor
 };

package/dist/recma-inject-import-meta-env.d.ts

@@ -0,0 +1,3 @@
+export declare function recmaInjectImportMetaEnv({ importMetaEnv, }: {
+    importMetaEnv: Record<string, any>;
+}): (tree: any) => void;

package/dist/recma-inject-import-meta-env.js

@@ -0,0 +1,46 @@
+import { visit as estreeVisit } from "estree-util-visit";
+function recmaInjectImportMetaEnv({
+  importMetaEnv
+}) {
+  return (tree) => {
+    estreeVisit(tree, (node) => {
+      if (node.type === "MemberExpression") {
+        const envVarName = getImportMetaEnvVariableName(node);
+        if (typeof envVarName === "string") {
+          for (const key in node) {
+            delete node[key];
+          }
+          const envVarLiteral = {
+            type: "Literal",
+            value: importMetaEnv[envVarName],
+            raw: JSON.stringify(importMetaEnv[envVarName])
+          };
+          Object.assign(node, envVarLiteral);
+        }
+      }
+    });
+  };
+}
+function getImportMetaEnvVariableName(node) {
+  try {
+    if (node.object.type !== "MemberExpression" || node.property.type !== "Identifier")
+      return new Error();
+    const nestedExpression = node.object;
+    if (nestedExpression.property.type !== "Identifier" || nestedExpression.property.name !== "env")
+      return new Error();
+    const envExpression = nestedExpression.object;
+    if (envExpression.type !== "MetaProperty" || envExpression.property.type !== "Identifier" || envExpression.property.name !== "meta")
+      return new Error();
+    if (envExpression.meta.name !== "import")
+      return new Error();
+    return node.property.name;
+  } catch (e) {
+    if (e instanceof Error) {
+      return e;
+    }
+    return new Error("Unknown parsing error");
+  }
+}
+export {
+  recmaInjectImportMetaEnv
+};

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

@@ -0,0 +1,2 @@
+import type { VFile } from 'vfile';
+export declare function rehypeApplyFrontmatterExport(): (tree: any, vfile: VFile) => void;

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

@@ -0,0 +1,46 @@
+import { InvalidAstroDataError } from "@astrojs/markdown-remark";
+import { safelyGetAstroData } from "@astrojs/markdown-remark/dist/internal.js";
+import { jsToTreeNode } from "./utils.js";
+function rehypeApplyFrontmatterExport() {
+  return function(tree, vfile) {
+    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;
+    const exportNodes = [
+      jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`)
+    ];
+    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 }) {
+					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,
+					});
+				};`
+        )
+      );
+    }
+    tree.children = exportNodes.concat(tree.children);
+  };
+}
+export {
+  rehypeApplyFrontmatterExport
+};

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

@@ -1,2 +1,5 @@
 import type { MarkdownVFile } from '@astrojs/markdown-remark';
+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;

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

@@ -1,5 +1,8 @@
 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)
@@ -36,7 +39,7 @@ function remarkImageToComponent() {
           importedImages.set(node.url, importName);
         }
         const componentElement = {
-          name: "__AstroImage__",
+          name: ASTRO_IMAGE_ELEMENT,
           type: "mdxJsxFlowElement",
           attributes: [
             {
@@ -75,9 +78,15 @@ function remarkImageToComponent() {
       }
     });
     tree.children.unshift(...importsStatements);
-    tree.children.unshift(jsToTreeNode(`import { Image as __AstroImage__ } from "astro:assets";`));
+    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
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "1.0.3",
+  "version": "1.1.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -41,10 +41,10 @@
     "source-map": "^0.7.4",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",
-    "@astrojs/markdown-remark": "3.1.0"
+    "@astrojs/markdown-remark": "3.2.1"
   },
   "peerDependencies": {
-    "astro": "^3.0.11"
+    "astro": "^3.2.3"
   },
   "devDependencies": {
     "@types/chai": "^4.3.5",
@@ -65,13 +65,17 @@
     "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^8.0.1",
+    "unified": "^10.1.2",
     "vite": "^4.4.9",
-    "astro": "3.0.11",
+    "astro": "3.2.3",
     "astro-scripts": "0.0.14"
   },
   "engines": {
     "node": ">=18.14.1"
   },
+  "publishConfig": {
+    "provenance": true
+  },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",
     "build:ci": "astro-scripts build \"src/**/*.ts\"",