@astrojs/mdx 0.19.7 → 1.0.0-beta.1

package/README.md

@@ -42,9 +42,8 @@ npm install @astrojs/mdx
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
-__`astro.config.mjs`__
-
-```js ins={2} "mdx()"
+```js ins={3} "mdx()"
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -59,14 +58,16 @@ export default defineConfig({
 [VS Code](https://code.visualstudio.com/) supports Markdown by default. However, for MDX editor support, you may wish to add the following setting in your VSCode config. This ensures authoring MDX files provides a Markdown-like editor experience.
 
 ```json title=".vscode/settings.json"
-"files.associations": {
+{
+  "files.associations": {
     "*.mdx": "markdown"
+  }
 }
 ```
 
 ## Usage
 
-With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files. 
+With the Astro MDX integration, you can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. You can also [import `.mdx` files](https://docs.astro.build/en/guides/markdown-content/#importing-markdown) into `.astro` files.
 
 Astro's MDX integration adds extra features to standard MDX, including Markdown-style frontmatter. This allows you to use most of Astro's built-in Markdown features like a [special frontmatter `layout` property](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout) and a [property for marking a page as a draft](https://docs.astro.build/en/guides/markdown-content/#draft-pages).
 
@@ -93,9 +94,8 @@ All [`markdown` configuration options](https://docs.astro.build/en/reference/con
 There is no separate MDX configuration for [including pages marked as draft in the build](https://docs.astro.build/en/reference/configuration-reference/#markdowndrafts). This Markdown setting will be respected by both Markdown and MDX files and cannot be overridden for MDX files specifically.
 :::
 
-__`astro.config.mjs`__
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
@@ -110,9 +110,9 @@ export default defineConfig({
       rehypePlugins: [rehypeMinifyHtml],
       remarkRehype: { footnoteLabel: 'Footnotes' },
       gfm: false,
-    })
-  ]
-})
+    }),
+  ],
+});
 ```
 
 :::caution
@@ -130,9 +130,8 @@ MDX will extend [your project's existing Markdown configuration](https://docs.as
 
 For example, say you need to disable GitHub-Flavored Markdown and apply a different set of remark plugins for MDX files. You can apply these options like so, with `extendMarkdownConfig` enabled by default:
 
-__`astro.config.mjs`__
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -151,16 +150,15 @@ export default defineConfig({
       remarkPlugins: [remarkPlugin2],
       // `gfm` overridden to `false`
       gfm: false,
-    })
-  ]
+    }),
+  ],
 });
 ```
 
 You may also need to disable `markdown` config extension in MDX. For this, set `extendMarkdownConfig` to `false`:
 
-__`astro.config.mjs`__
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -173,8 +171,8 @@ export default defineConfig({
       // Markdown config now ignored
       extendMarkdownConfig: false,
       // No `remarkPlugins` applied
-    })
-  ]
+    }),
+  ],
 });
 ```
 
@@ -192,9 +190,8 @@ This is an optional configuration setting to optimize the MDX output for faster
 
 This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
 
-__`astro.config.mjs`__
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -202,8 +199,8 @@ export default defineConfig({
   integrations: [
     mdx({
       optimize: true,
-    })
-  ]
+    }),
+  ],
 });
 ```
 
@@ -213,7 +210,7 @@ export default defineConfig({
 
 An optional property of `optimize` to prevent the MDX optimizer from handling any [custom components passed to imported MDX content via the components prop](https://docs.astro.build/en/guides/markdown-content/#custom-components-with-imported-mdx).
 
-You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered. 
+You will need to exclude these components from optimization as the optimizer eagerly converts content into a static string, which will break custom components that needs to be dynamically rendered.
 
 For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:
 
@@ -223,14 +220,13 @@ import { Content, components } from '../content.mdx';
 import Heading from '../Heading.astro';
 ---
 
-<Content components={{...components, h1: Heading }} />
+<Content components={{ ...components, h1: Heading }} />
 ```
 
 To configure optimization for this using the `customComponentNames` property, specify an array of HTML element names that should be treated as custom components:
 
-__`astro.config.mjs`__
-
 ```js
+// astro.config.mjs
 import { defineConfig } from 'astro/config';
 import mdx from '@astrojs/mdx';
 
@@ -242,8 +238,8 @@ export default defineConfig({
         // These will be treated as custom components
         customComponentNames: ['h1'],
       },
-    })
-  ]
+    }),
+  ],
 });
 ```
 
@@ -251,7 +247,7 @@ Note that if your MDX file [configures custom components using `export const com
 
 ## Examples
 
-*   The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
+- The [Astro MDX starter template](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.
 
 ## Troubleshooting
 
@@ -268,5 +264,4 @@ This package is maintained by Astro's Core team. You're welcome to submit an iss
 See [CHANGELOG.md](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/CHANGELOG.md) for a history of changes to this integration.
 
 [astro-integration]: https://docs.astro.build/en/guides/integrations-guide/
-
 [astro-ui-frameworks]: https://docs.astro.build/en/core-concepts/framework-components/#using-framework-components

package/dist/index.js

@@ -8,12 +8,21 @@ import { SourceMapGenerator } from "source-map";
 import { VFile } from "vfile";
 import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from "./plugins.js";
 import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from "./utils.js";
+import astroJSXRenderer from "astro/jsx/renderer.js";
 function mdx(partialMdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
       "astro:config:setup": async (params) => {
-        const { updateConfig, config, addPageExtension, addContentEntryType, command } = params;
+        const {
+          updateConfig,
+          config,
+          addPageExtension,
+          addContentEntryType,
+          command,
+          addRenderer
+        } = params;
+        addRenderer(astroJSXRenderer);
         addPageExtension(".mdx");
         addContentEntryType({
           extensions: [".mdx"],
@@ -42,7 +51,7 @@ function mdx(partialMdxOptions = {}) {
           )
         });
         const mdxPluginOpts = {
-          remarkPlugins: await getRemarkPlugins(mdxOptions, config),
+          remarkPlugins: await getRemarkPlugins(mdxOptions),
           rehypePlugins: getRehypePlugins(mdxOptions),
           recmaPlugins: mdxOptions.recmaPlugins,
           remarkRehypeOptions: mdxOptions.remarkRehype,
@@ -63,11 +72,21 @@ function mdx(partialMdxOptions = {}) {
                 enforce: "pre",
                 configResolved(resolved) {
                   importMetaEnv = { ...importMetaEnv, ...resolved.env };
+                  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) {
-                  var _a;
                   if (!id.endsWith(".mdx"))
                     return;
                   const { fileId } = getFileInfo(id, config);
@@ -85,7 +104,7 @@ function mdx(partialMdxOptions = {}) {
                       ...mdxPluginOpts.recmaPlugins ?? [],
                       () => recmaInjectImportMetaEnvPlugin({ importMetaEnv })
                     ],
-                    SourceMapGenerator: ((_a = config.vite.build) == null ? void 0 : _a.sourcemap) ? SourceMapGenerator : void 0
+                    SourceMapGenerator: config.vite.build?.sourcemap ? SourceMapGenerator : void 0
                   });
                   return {
                     code: escapeViteEnvReferences(String(compiled.value)),
@@ -117,15 +136,18 @@ export const url = ${JSON.stringify(fileUrl)};`;
 export const file = ${JSON.stringify(fileId)};`;
                   }
                   if (!moduleExports.find(({ n }) => n === "Content")) {
+                    const hasComponents = moduleExports.find(({ n }) => n === "components");
                     code = code.replace("export default MDXContent;", "");
                     code += `
 export const Content = (props = {}) => MDXContent({
 											...props,
-											components: { Fragment, ...props.components },
+											components: { Fragment${hasComponents ? ", ...components" : ""}, ...props.components },
 										});
 										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)};`;

package/dist/plugins.d.ts

@@ -1,10 +1,9 @@
 import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import type { AstroConfig } from 'astro';
 import type { VFile } from 'vfile';
 import type { MdxOptions } from './index.js';
 export declare function recmaInjectImportMetaEnvPlugin({ importMetaEnv, }: {
     importMetaEnv: Record<string, any>;
 }): (tree: any) => void;
 export declare function rehypeApplyFrontmatterExport(): (tree: any, vfile: VFile) => void;
-export declare function getRemarkPlugins(mdxOptions: MdxOptions, config: AstroConfig): Promise<PluggableList>;
+export declare function getRemarkPlugins(mdxOptions: MdxOptions): Promise<PluggableList>;
 export declare function getRehypePlugins(mdxOptions: MdxOptions): PluggableList;

package/dist/plugins.js

@@ -78,10 +78,8 @@ function rehypeApplyFrontmatterExport() {
     tree.children = exportNodes.concat(tree.children);
   };
 }
-async function getRemarkPlugins(mdxOptions, config) {
-  let remarkPlugins = [
-    ...config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []
-  ];
+async function getRemarkPlugins(mdxOptions) {
+  let remarkPlugins = [remarkCollectImages, remarkImageToComponent];
   if (!isPerformanceBenchmark) {
     if (mdxOptions.gfm) {
       remarkPlugins.push(remarkGfm);

package/dist/rehype-meta-string.js

@@ -2,8 +2,7 @@ import { visit } from "unist-util-visit";
 function rehypeMetaString() {
   return function(tree) {
     visit(tree, (node) => {
-      var _a;
-      if (node.type === "element" && node.tagName === "code" && ((_a = node.data) == null ? void 0 : _a.meta)) {
+      if (node.type === "element" && node.tagName === "code" && node.data?.meta) {
         node.properties ??= {};
         node.properties.metastring = node.data.meta;
       }

package/dist/rehype-optimize-static.js

@@ -3,14 +3,13 @@ import { toHtml } from "hast-util-to-html";
 const exportConstComponentsRe = /export\s+const\s+components\s*=/;
 function rehypeOptimizeStatic(options) {
   return (tree) => {
-    var _a, _b, _c, _d, _e, _f;
-    const customComponentNames = new Set(options == null ? void 0 : options.customComponentNames);
+    const customComponentNames = new Set(options?.customComponentNames);
     for (const child of tree.children) {
       if (child.type === "mdxjsEsm" && exportConstComponentsRe.test(child.value)) {
-        const objectPropertyNodes = (_d = (_c = (_b = (_a = child.data.estree.body[0]) == null ? void 0 : _a.declarations) == null ? void 0 : _b[0]) == null ? void 0 : _c.init) == null ? void 0 : _d.properties;
+        const objectPropertyNodes = child.data.estree.body[0]?.declarations?.[0]?.init?.properties;
         if (objectPropertyNodes) {
           for (const objectPropertyNode of objectPropertyNodes) {
-            const componentName = ((_e = objectPropertyNode.key) == null ? void 0 : _e.name) ?? ((_f = objectPropertyNode.key) == null ? void 0 : _f.value);
+            const componentName = objectPropertyNode.key?.name ?? objectPropertyNode.key?.value;
             if (componentName) {
               customComponentNames.add(componentName);
             }

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

@@ -7,8 +7,7 @@ function remarkImageToComponent() {
     const importsStatements = [];
     const importedImages = /* @__PURE__ */ new Map();
     visit(tree, "image", (node, index, parent) => {
-      var _a;
-      if ((_a = file.data.imagePaths) == null ? void 0 : _a.has(node.url)) {
+      if (file.data.imagePaths?.has(node.url)) {
         let importName = importedImages.get(node.url);
         if (!importName) {
           importName = `__${importedImages.size}_${node.url.replace(/\W/g, "_")}__`;

package/dist/utils.js

@@ -18,7 +18,7 @@ function getFileInfo(id, config) {
   const isPage = fileId.includes("/pages/");
   if (isPage) {
     fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, "");
-  } else if (url && url.pathname.startsWith(config.root.pathname)) {
+  } else if (url?.pathname.startsWith(config.root.pathname)) {
     fileUrl = url.pathname.slice(config.root.pathname.length);
   } else {
     fileUrl = fileId;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "0.19.7",
+  "version": "1.0.0-beta.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -27,13 +27,11 @@
     "template"
   ],
   "dependencies": {
-    "@astrojs/markdown-remark": "^2.2.1",
-    "@astrojs/prism": "^2.1.2",
     "@mdx-js/mdx": "^2.3.0",
-    "acorn": "^8.8.0",
-    "es-module-lexer": "^1.1.1",
-    "estree-util-visit": "^1.2.0",
-    "github-slugger": "^1.4.0",
+    "acorn": "^8.9.0",
+    "es-module-lexer": "^1.3.0",
+    "estree-util-visit": "^1.2.1",
+    "github-slugger": "^1.5.0",
     "gray-matter": "^4.0.3",
     "hast-util-to-html": "^8.0.4",
     "kleur": "^4.1.4",
@@ -43,35 +41,40 @@
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.14.1",
     "source-map": "^0.7.4",
-    "unist-util-visit": "^4.1.0",
-    "vfile": "^5.3.2"
+    "unist-util-visit": "^4.1.2",
+    "vfile": "^5.3.7",
+    "@astrojs/markdown-remark": "3.0.0-beta.0",
+    "@astrojs/prism": "3.0.0-beta.0"
+  },
+  "peerDependencies": {
+    "astro": "^3.0.0-beta.3"
   },
   "devDependencies": {
-    "@types/chai": "^4.3.1",
-    "@types/estree": "^1.0.0",
+    "@types/chai": "^4.3.5",
+    "@types/estree": "^1.0.1",
     "@types/github-slugger": "^1.3.0",
-    "@types/mdast": "^3.0.10",
+    "@types/mdast": "^3.0.11",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "chai": "^4.3.6",
-    "cheerio": "^1.0.0-rc.11",
-    "linkedom": "^0.14.12",
-    "mdast-util-mdx": "^2.0.0",
-    "mdast-util-to-string": "^3.1.0",
+    "chai": "^4.3.7",
+    "cheerio": "1.0.0-rc.12",
+    "linkedom": "^0.14.26",
+    "mdast-util-mdx": "^2.0.1",
+    "mdast-util-to-string": "^3.2.0",
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
     "rehype-mathjax": "^4.0.2",
     "rehype-pretty-code": "^0.4.0",
     "remark-math": "^5.1.1",
     "remark-rehype": "^10.1.0",
-    "remark-shiki-twoslash": "^3.1.0",
+    "remark-shiki-twoslash": "^3.1.3",
     "remark-toc": "^8.0.1",
-    "vite": "^4.3.1",
-    "astro": "2.6.1",
+    "vite": "^4.4.6",
+    "astro": "3.0.0-beta.3",
     "astro-scripts": "0.0.14"
   },
   "engines": {
-    "node": ">=16.12.0"
+    "node": ">=18.14.1"
   },
   "scripts": {
     "build": "astro-scripts build \"src/**/*.ts\" && tsc",