@astrojs/mdx 0.0.0-10745-20240410180016

package/LICENSE

@@ -0,0 +1,59 @@
+MIT License
+
+Copyright (c) 2021 Fred K. Schott
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+
+"""
+This license applies to parts of the `packages/create-astro` and `packages/astro` subdirectories originating from the https://github.com/sveltejs/kit repository:
+
+Copyright (c) 2020 [these people](https://github.com/sveltejs/kit/graphs/contributors)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+"""
+
+"""
+This license applies to parts of the `packages/create-astro` and `packages/astro` subdirectories originating from the https://github.com/vitejs/vite repository:
+
+MIT License
+
+Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+"""

package/README.md

@@ -0,0 +1,38 @@
+# @astrojs/mdx 📝
+
+This **[Astro integration][astro-integration]** enables the usage of [MDX](https://mdxjs.com/) components and allows you to create pages as `.mdx` files.
+
+## Documentation
+
+Read the [`@astrojs/mdx` docs][docs]
+
+## Support
+
+- Get help in the [Astro Discord][discord]. Post questions in our `#support` forum, or visit our dedicated `#dev` channel to discuss current development and more!
+
+- Check our [Astro Integration Documentation][astro-integration] for more on integrations.
+
+- Submit bug reports and feature requests as [GitHub issues][issues].
+
+## Contributing
+
+This package is maintained by Astro's Core team. You're welcome to submit an issue or PR! These links will help you get started:
+
+- [Contributor Manual][contributing]
+- [Code of Conduct][coc]
+- [Community Guide][community]
+
+## License
+
+MIT
+
+Copyright (c) 2023–present [Astro][astro]
+
+[astro]: https://astro.build/
+[docs]: https://docs.astro.build/en/guides/integrations-guide/mdx/
+[contributing]: https://github.com/withastro/astro/blob/main/CONTRIBUTING.md
+[coc]: https://github.com/withastro/.github/blob/main/CODE_OF_CONDUCT.md
+[community]: https://github.com/withastro/.github/blob/main/COMMUNITY_GUIDE.md
+[discord]: https://astro.build/chat/
+[issues]: https://github.com/withastro/astro/issues
+[astro-integration]: https://docs.astro.build/en/guides/integrations-guide/

package/dist/index.d.ts

@@ -0,0 +1,14 @@
+import { markdownConfigDefaults } from '@astrojs/markdown-remark';
+import type { AstroIntegration } from 'astro';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
+import type { PluggableList } from 'unified';
+import type { OptimizeOptions } from './rehype-optimize-static.js';
+export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & {
+    extendMarkdownConfig: boolean;
+    recmaPlugins: PluggableList;
+    remarkPlugins: PluggableList;
+    rehypePlugins: PluggableList;
+    remarkRehype: RemarkRehypeOptions;
+    optimize: boolean | OptimizeOptions;
+};
+export default function mdx(partialMdxOptions?: Partial<MdxOptions>): AstroIntegration;

package/dist/index.js

@@ -0,0 +1,189 @@
+import fs from "node:fs/promises";
+import { fileURLToPath } from "node:url";
+import { markdownConfigDefaults, setVfileFrontmatter } 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";
+function mdx(partialMdxOptions = {}) {
+  return {
+    name: "@astrojs/mdx",
+    hooks: {
+      "astro:config:setup": async (params) => {
+        const { updateConfig, config, addPageExtension, addContentEntryType, addRenderer } = params;
+        addRenderer(astroJSXRenderer);
+        addPageExtension(".mdx");
+        addContentEntryType({
+          extensions: [".mdx"],
+          async getEntryInfo({ fileUrl, contents }) {
+            const parsed = parseFrontmatter(contents, fileURLToPath(fileUrl));
+            return {
+              data: parsed.data,
+              body: parsed.content,
+              slug: parsed.data.slug,
+              rawData: parsed.matter
+            };
+          },
+          contentModuleTypes: await fs.readFile(
+            new URL("../template/content-module-types.d.ts", import.meta.url),
+            "utf-8"
+          ),
+          // MDX can import scripts and styles,
+          // so wrap all MDX files with script / style propagation checks
+          handlePropagation: true
+        });
+        const extendMarkdownConfig = partialMdxOptions.extendMarkdownConfig ?? defaultMdxOptions.extendMarkdownConfig;
+        const mdxOptions = applyDefaultOptions({
+          options: partialMdxOptions,
+          defaults: markdownConfigToMdxOptions(
+            extendMarkdownConfig ? config.markdown : markdownConfigDefaults
+          )
+        });
+        let processor;
+        updateConfig({
+          vite: {
+            plugins: [
+              {
+                name: "@mdx-js/rollup",
+                enforce: "pre",
+                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);
+                    }
+                  }
+                },
+                // 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);
+                  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 };
+                }
+              }
+            ]
+          }
+        });
+      }
+    }
+  };
+}
+const defaultMdxOptions = {
+  extendMarkdownConfig: true,
+  recmaPlugins: []
+};
+function markdownConfigToMdxOptions(markdownConfig) {
+  return {
+    ...defaultMdxOptions,
+    ...markdownConfig,
+    remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins),
+    rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins),
+    remarkRehype: markdownConfig.remarkRehype ?? {},
+    optimize: false
+  };
+}
+function applyDefaultOptions({
+  options,
+  defaults
+}) {
+  return {
+    syntaxHighlight: options.syntaxHighlight ?? defaults.syntaxHighlight,
+    extendMarkdownConfig: options.extendMarkdownConfig ?? defaults.extendMarkdownConfig,
+    recmaPlugins: options.recmaPlugins ?? defaults.recmaPlugins,
+    remarkRehype: options.remarkRehype ?? defaults.remarkRehype,
+    gfm: options.gfm ?? defaults.gfm,
+    smartypants: options.smartypants ?? defaults.smartypants,
+    remarkPlugins: options.remarkPlugins ?? defaults.remarkPlugins,
+    rehypePlugins: options.rehypePlugins ?? defaults.rehypePlugins,
+    shikiConfig: options.shikiConfig ?? defaults.shikiConfig,
+    optimize: options.optimize ?? defaults.optimize
+  };
+}
+export {
+  mdx as default
+};

package/dist/plugins.d.ts

@@ -0,0 +1,6 @@
+import type { MdxOptions } from './index.js';
+interface MdxProcessorExtraOptions {
+    sourcemap: boolean;
+}
+export declare function createMdxProcessor(mdxOptions: MdxOptions, extraOptions: MdxProcessorExtraOptions): import("unified").Processor<import("mdast").Root, import("estree").Program, import("estree").Program, import("estree").Program, string>;
+export {};

package/dist/plugins.js

@@ -0,0 +1,73 @@
+import {
+  rehypeHeadingIds,
+  rehypePrism,
+  rehypeShiki,
+  remarkCollectImages
+} 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 { 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";
+const isPerformanceBenchmark = Boolean(process.env.ASTRO_PERFORMANCE_BENCHMARK);
+function createMdxProcessor(mdxOptions, extraOptions) {
+  return createProcessor({
+    remarkPlugins: 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: [],
+    elementAttributeNameCase: "html",
+    SourceMapGenerator: extraOptions.sourcemap ? SourceMapGenerator : void 0
+  });
+}
+function getRemarkPlugins(mdxOptions) {
+  let remarkPlugins = [];
+  if (!isPerformanceBenchmark) {
+    if (mdxOptions.gfm) {
+      remarkPlugins.push(remarkGfm);
+    }
+    if (mdxOptions.smartypants) {
+      remarkPlugins.push(remarkSmartypants);
+    }
+  }
+  remarkPlugins.push(...mdxOptions.remarkPlugins, remarkCollectImages, remarkImageToComponent);
+  return remarkPlugins;
+}
+function getRehypePlugins(mdxOptions) {
+  let rehypePlugins = [
+    // ensure `data.meta` is preserved in `properties.metastring` for rehype syntax highlighters
+    rehypeMetaString,
+    // rehypeRaw allows custom syntax highlighters to work without added config
+    [rehypeRaw, { passThrough: nodeTypes }]
+  ];
+  if (!isPerformanceBenchmark) {
+    if (mdxOptions.syntaxHighlight === "shiki") {
+      rehypePlugins.push([rehypeShiki, mdxOptions.shikiConfig]);
+    } else if (mdxOptions.syntaxHighlight === "prism") {
+      rehypePlugins.push(rehypePrism);
+    }
+  }
+  rehypePlugins.push(...mdxOptions.rehypePlugins);
+  if (!isPerformanceBenchmark) {
+    rehypePlugins.push(rehypeHeadingIds, rehypeInjectHeadingsExport);
+  }
+  rehypePlugins.push(rehypeApplyFrontmatterExport);
+  if (mdxOptions.optimize) {
+    const options = mdxOptions.optimize === true ? void 0 : mdxOptions.optimize;
+    rehypePlugins.push([rehypeOptimizeStatic, options]);
+  }
+  return rehypePlugins;
+}
+export {
+  createMdxProcessor
+};

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/rehype-collect-headings.d.ts

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

package/dist/rehype-collect-headings.js

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

package/dist/rehype-meta-string.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Moves `data.meta` to `properties.metastring` for the `code` element node
+ * as `rehype-raw` strips `data` from all nodes, which may contain useful information.
+ * e.g. ```js {1:3} => metastring: "{1:3}"
+ */
+export default function rehypeMetaString(): (tree: any) => void;

package/dist/rehype-meta-string.js

@@ -0,0 +1,14 @@
+import { visit } from "unist-util-visit";
+function rehypeMetaString() {
+  return function(tree) {
+    visit(tree, (node) => {
+      if (node.type === "element" && node.tagName === "code" && node.data?.meta) {
+        node.properties ??= {};
+        node.properties.metastring = node.data.meta;
+      }
+    });
+  };
+}
+export {
+  rehypeMetaString as default
+};

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

@@ -0,0 +1,11 @@
+export interface OptimizeOptions {
+    customComponentNames?: string[];
+}
+/**
+ * For MDX only, collapse static subtrees of the hast into `set:html`. Subtrees
+ * do not include any MDX elements.
+ *
+ * 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;

package/dist/rehype-optimize-static.js

@@ -0,0 +1,62 @@
+import { visit } from "estree-util-visit";
+import { toHtml } from "hast-util-to-html";
+const exportConstComponentsRe = /export\s+const\s+components\s*=/;
+function rehypeOptimizeStatic(options) {
+  return (tree) => {
+    const customComponentNames = new Set(options?.customComponentNames);
+    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 allPossibleElements = /* @__PURE__ */ new Set();
+    const elementStack = [];
+    visit(tree, {
+      enter(node) {
+        const isCustomComponent = node.tagName && customComponentNames.has(node.tagName);
+        if (node.type.startsWith("mdx") || isCustomComponent) {
+          for (const el of elementStack) {
+            allPossibleElements.delete(el);
+          }
+          elementStack.length = 0;
+        }
+        if (node.type === "element" || node.type === "mdxJsxFlowElement") {
+          elementStack.push(node);
+          allPossibleElements.add(node);
+        }
+      },
+      leave(node, _, __, parents) {
+        if (node.type === "element" || node.type === "mdxJsxFlowElement") {
+          elementStack.pop();
+          const parent = parents[parents.length - 1];
+          if (allPossibleElements.has(parent)) {
+            allPossibleElements.delete(node);
+          }
+        }
+      }
+    });
+    for (const el of allPossibleElements) {
+      if (el.type === "mdxJsxFlowElement") {
+        el.attributes.push({
+          type: "mdxJsxAttribute",
+          name: "set:html",
+          value: toHtml(el.children)
+        });
+      } else {
+        el.properties["set:html"] = toHtml(el.children);
+      }
+      el.children = [];
+    }
+  };
+}
+export {
+  rehypeOptimizeStatic
+};

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

@@ -0,0 +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

@@ -0,0 +1,137 @@
+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
+};

package/dist/utils.d.ts

@@ -0,0 +1,19 @@
+import type { Options as AcornOpts } from 'acorn';
+import type { AstroConfig } from 'astro';
+import matter from 'gray-matter';
+import type { MdxjsEsm } from 'mdast-util-mdx';
+import type { PluggableList } from 'unified';
+interface FileInfo {
+    fileId: string;
+    fileUrl: string;
+}
+/** @see 'vite-plugin-utils' for source */
+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 jsToTreeNode(jsString: string, acornOpts?: AcornOpts): MdxjsEsm;
+export declare function ignoreStringPlugins(plugins: any[]): PluggableList;
+export {};

package/dist/utils.js

@@ -0,0 +1,89 @@
+import { parse } from "acorn";
+import matter from "gray-matter";
+import { bold, yellow } from "kleur/colors";
+function appendForwardSlash(path) {
+  return path.endsWith("/") ? path : path + "/";
+}
+function getFileInfo(id, config) {
+  const sitePathname = appendForwardSlash(
+    config.site ? new URL(config.base, config.site).pathname : config.base
+  );
+  let url = void 0;
+  try {
+    url = new URL(`file://${id}`);
+  } catch {
+  }
+  const fileId = id.split("?")[0];
+  let fileUrl;
+  const isPage = fileId.includes("/pages/");
+  if (isPage) {
+    fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(?:\/index)?\.mdx$/, "");
+  } else if (url?.pathname.startsWith(config.root.pathname)) {
+    fileUrl = url.pathname.slice(config.root.pathname.length);
+  } else {
+    fileUrl = fileId;
+  }
+  if (fileUrl && config.trailingSlash === "always") {
+    fileUrl = appendForwardSlash(fileUrl);
+  }
+  return { fileId, fileUrl };
+}
+function parseFrontmatter(code, id) {
+  try {
+    return matter(code);
+  } catch (e) {
+    if (e.name === "YAMLException") {
+      const err = e;
+      err.id = id;
+      err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
+      err.message = e.reason;
+      throw err;
+    } else {
+      throw e;
+    }
+  }
+}
+function jsToTreeNode(jsString, acornOpts = {
+  ecmaVersion: "latest",
+  sourceType: "module"
+}) {
+  return {
+    type: "mdxjsEsm",
+    value: "",
+    data: {
+      // @ts-expect-error `parse` return types is incompatible but it should work in runtime
+      estree: {
+        ...parse(jsString, acornOpts),
+        type: "Program",
+        sourceType: "module"
+      }
+    }
+  };
+}
+function ignoreStringPlugins(plugins) {
+  let validPlugins = [];
+  let hasInvalidPlugin = false;
+  for (const plugin of plugins) {
+    if (typeof plugin === "string") {
+      console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`));
+      hasInvalidPlugin = true;
+    } else if (Array.isArray(plugin) && typeof plugin[0] === "string") {
+      console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`));
+      hasInvalidPlugin = true;
+    } else {
+      validPlugins.push(plugin);
+    }
+  }
+  if (hasInvalidPlugin) {
+    console.warn(
+      `To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins`
+    );
+  }
+  return validPlugins;
+}
+export {
+  getFileInfo,
+  ignoreStringPlugins,
+  jsToTreeNode,
+  parseFrontmatter
+};

package/package.json

@@ -0,0 +1,83 @@
+{
+  "name": "@astrojs/mdx",
+  "description": "Add support for MDX pages in your Astro site",
+  "version": "0.0.0-10745-20240410180016",
+  "type": "module",
+  "types": "./dist/index.d.ts",
+  "author": "withastro",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/withastro/astro.git",
+    "directory": "packages/integrations/mdx"
+  },
+  "keywords": [
+    "astro-integration",
+    "astro-component",
+    "mdx"
+  ],
+  "bugs": "https://github.com/withastro/astro/issues",
+  "homepage": "https://docs.astro.build/en/guides/integrations-guide/mdx/",
+  "exports": {
+    ".": "./dist/index.js",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "template"
+  ],
+  "dependencies": {
+    "@mdx-js/mdx": "^3.0.0",
+    "acorn": "^8.11.2",
+    "es-module-lexer": "^1.4.1",
+    "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",
+    "rehype-raw": "^7.0.0",
+    "remark-gfm": "^4.0.0",
+    "remark-smartypants": "^2.0.0",
+    "source-map": "^0.7.4",
+    "unist-util-visit": "^5.0.0",
+    "vfile": "^6.0.1",
+    "@astrojs/markdown-remark": "0.0.0-10745-20240410180016"
+  },
+  "peerDependencies": {
+    "astro": "0.0.0-10745-20240410180016"
+  },
+  "devDependencies": {
+    "@types/chai": "^4.3.10",
+    "@types/estree": "^1.0.5",
+    "@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",
+    "mdast-util-mdx": "^3.0.0",
+    "mdast-util-to-string": "^4.0.0",
+    "reading-time": "^1.5.0",
+    "rehype-mathjax": "^5.0.0",
+    "rehype-pretty-code": "^0.13.0",
+    "remark-math": "^6.0.0",
+    "remark-rehype": "^11.0.0",
+    "remark-shiki-twoslash": "^3.1.3",
+    "remark-toc": "^9.0.0",
+    "unified": "^11.0.4",
+    "vite": "^5.1.4",
+    "astro": "0.0.0-10745-20240410180016",
+    "astro-scripts": "0.0.14"
+  },
+  "engines": {
+    "node": "^18.17.1 || ^20.3.0 || >=21.0.0"
+  },
+  "publishConfig": {
+    "provenance": true
+  },
+  "scripts": {
+    "build": "astro-scripts build \"src/**/*.ts\" && tsc",
+    "build:ci": "astro-scripts build \"src/**/*.ts\"",
+    "dev": "astro-scripts dev \"src/**/*.ts\"",
+    "test": "astro-scripts test --timeout 70000 \"test/**/*.test.js\""
+  }
+}

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

@@ -0,0 +1,9 @@
+declare module 'astro:content' {
+	interface Render {
+		'.mdx': Promise<{
+			Content: import('astro').MarkdownInstance<{}>['Content'];
+			headings: import('astro').MarkdownHeading[];
+			remarkPluginFrontmatter: Record<string, any>;
+		}>;
+	}
+}