@astrojs/mdx 1.0.2 → 1.1.0

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

@@ -1,84 +1,37 @@
-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";
+  rehypeHeadingIds,
+  remarkCollectImages,
+  remarkPrism,
+  remarkShiki
+} from "@astrojs/markdown-remark";
+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 remarkPrism from "./remark-prism.js";
-import remarkShiki from "./remark-shiki.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 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
+  });
 }
-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);
-  };
-}
-async function getRemarkPlugins(mdxOptions) {
+function getRemarkPlugins(mdxOptions) {
   let remarkPlugins = [remarkCollectImages, remarkImageToComponent];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.gfm) {
@@ -91,7 +44,7 @@ async function getRemarkPlugins(mdxOptions) {
   remarkPlugins = [...remarkPlugins, ...mdxOptions.remarkPlugins];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.syntaxHighlight === "shiki") {
-      remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
+      remarkPlugins.push([remarkShiki, mdxOptions.shikiConfig]);
     }
     if (mdxOptions.syntaxHighlight === "prism") {
       remarkPlugins.push(remarkPrism);
@@ -121,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.2",
+  "version": "1.1.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -36,18 +36,15 @@
     "hast-util-to-html": "^8.0.4",
     "kleur": "^4.1.4",
     "rehype-raw": "^6.1.1",
-    "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
     "remark-smartypants": "^2.0.0",
-    "shiki": "^0.14.3",
     "source-map": "^0.7.4",
     "unist-util-visit": "^4.1.2",
     "vfile": "^5.3.7",
-    "@astrojs/markdown-remark": "3.0.0",
-    "@astrojs/prism": "3.0.0"
+    "@astrojs/markdown-remark": "3.2.0"
   },
   "peerDependencies": {
-    "astro": "^3.0.10"
+    "astro": "^3.1.0"
   },
   "devDependencies": {
     "@types/chai": "^4.3.5",
@@ -68,8 +65,9 @@
     "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.10",
+    "astro": "3.1.0",
     "astro-scripts": "0.0.14"
   },
   "engines": {

package/dist/remark-prism.d.ts

@@ -1,2 +0,0 @@
-/**  */
-export default function remarkPrism(): (tree: any) => void;

package/dist/remark-prism.js

@@ -1,17 +0,0 @@
-import { runHighlighterWithAstro } from "@astrojs/prism/dist/highlighter";
-import { visit } from "unist-util-visit";
-function remarkPrism() {
-  return (tree) => visit(tree, "code", (node) => {
-    let { lang, value } = node;
-    node.type = "html";
-    let { html, classLanguage } = runHighlighterWithAstro(lang, value);
-    let classes = [classLanguage];
-    node.value = `<pre class="${classes.join(
-      " "
-    )}"><code class="${classLanguage}">${html}</code></pre>`;
-    return node;
-  });
-}
-export {
-  remarkPrism as default
-};

package/dist/remark-shiki.d.ts

@@ -1,3 +0,0 @@
-import type { ShikiConfig } from 'astro';
-declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig) => Promise<() => (tree: any) => void>;
-export default remarkShiki;

package/dist/remark-shiki.js

@@ -1,69 +0,0 @@
-import { getHighlighter } from "shiki";
-import { visit } from "unist-util-visit";
-const highlighterCacheAsync = /* @__PURE__ */ new Map();
-const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
-  const cacheID = typeof theme === "string" ? theme : theme.name;
-  let highlighterAsync = highlighterCacheAsync.get(cacheID);
-  if (!highlighterAsync) {
-    highlighterAsync = getHighlighter({ theme }).then((hl) => {
-      hl.setColorReplacements({
-        "#000001": "var(--astro-code-color-text)",
-        "#000002": "var(--astro-code-color-background)",
-        "#000004": "var(--astro-code-token-constant)",
-        "#000005": "var(--astro-code-token-string)",
-        "#000006": "var(--astro-code-token-comment)",
-        "#000007": "var(--astro-code-token-keyword)",
-        "#000008": "var(--astro-code-token-parameter)",
-        "#000009": "var(--astro-code-token-function)",
-        "#000010": "var(--astro-code-token-string-expression)",
-        "#000011": "var(--astro-code-token-punctuation)",
-        "#000012": "var(--astro-code-token-link)"
-      });
-      return hl;
-    });
-    highlighterCacheAsync.set(cacheID, highlighterAsync);
-  }
-  const highlighter = await highlighterAsync;
-  for (const lang of langs) {
-    await highlighter.loadLanguage(lang);
-  }
-  return () => (tree) => {
-    visit(tree, "code", (node) => {
-      let lang;
-      if (typeof node.lang === "string") {
-        const langExists = highlighter.getLoadedLanguages().includes(node.lang);
-        if (langExists) {
-          lang = node.lang;
-        } else {
-          console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
-          lang = "plaintext";
-        }
-      } else {
-        lang = "plaintext";
-      }
-      let html = highlighter.codeToHtml(node.value, { lang });
-      html = html.replace(/<pre class="(.*?)shiki(.*?)"/, `<pre class="$1astro-code$2"`);
-      if (node.lang === "diff") {
-        html = html.replace(
-          /<span class="line"><span style="(.*?)">([\+|\-])/g,
-          '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
-        );
-      }
-      if (wrap === false) {
-        html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
-      } else if (wrap === true) {
-        html = html.replace(
-          /style="(.*?)"/,
-          'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
-        );
-      }
-      node.type = "html";
-      node.value = html;
-      node.children = [];
-    });
-  };
-};
-var remark_shiki_default = remarkShiki;
-export {
-  remark_shiki_default as default
-};