@astrojs/mdx 0.19.4 → 0.19.5

package/README.md

@@ -83,6 +83,7 @@ You can configure how your MDX is rendered with the following options:
 - [Options inherited from Markdown config](#options-inherited-from-markdown-config)
 - [`extendMarkdownConfig`](#extendmarkdownconfig)
 - [`recmaPlugins`](#recmaplugins)
+- [`optimize`](#optimize)
 
 ### Options inherited from Markdown config
 
@@ -183,6 +184,71 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
+### `optimize`
+
+- **Type:** `boolean | { customComponentNames?: string[] }`
+
+This is an optional configuration setting to optimize the MDX output for faster builds and rendering via an internal rehype plugin. This may be useful if you have many MDX files and notice slow builds. However, this option may generate some unescaped HTML, so make sure your site's interactive parts still work correctly after enabling it.
+
+This is disabled by default. To enable MDX optimization, add the following to your MDX integration configuration:
+
+__`astro.config.mjs`__
+
+```js
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [
+    mdx({
+      optimize: true,
+    })
+  ]
+});
+```
+
+#### `customComponentNames`
+
+- **Type:** `string[]`
+
+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. 
+
+For example, the intended MDX output of the following is `<Heading>...</Heading>` in place of every `"<h1>...</h1>"`:
+
+```astro
+---
+import { Content, components } from '../content.mdx';
+import Heading from '../Heading.astro';
+---
+
+<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
+import { defineConfig } from 'astro/config';
+import mdx from '@astrojs/mdx';
+
+export default defineConfig({
+  integrations: [
+    mdx({
+      optimize: {
+        // Prevent the optimizer from handling `h1` elements
+        // These will be treated as custom components
+        customComponentNames: ['h1'],
+      },
+    })
+  ]
+});
+```
+
+Note that if your MDX file [configures custom components using `export const components = { ... }`](https://docs.astro.build/en/guides/markdown-content/#assigning-custom-components-to-html-elements), then you do not need to manually configure this option. The optimizer will automatically detect them.
+
 ## 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.

package/dist/index.d.ts

@@ -2,11 +2,13 @@ import { markdownConfigDefaults } from '@astrojs/markdown-remark';
 import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { AstroIntegration } from 'astro';
 import type { Options as RemarkRehypeOptions } from 'remark-rehype';
+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

@@ -1,7 +1,6 @@
 import { markdownConfigDefaults } from "@astrojs/markdown-remark";
 import { toRemarkInitializeAstroData } from "@astrojs/markdown-remark/dist/internal.js";
 import { compile as mdxCompile } from "@mdx-js/mdx";
-import mdxPlugin from "@mdx-js/rollup";
 import { parse as parseESM } from "es-module-lexer";
 import fs from "node:fs/promises";
 import { fileURLToPath } from "node:url";
@@ -57,8 +56,8 @@ function mdx(partialMdxOptions = {}) {
           vite: {
             plugins: [
               {
+                name: "@mdx-js/rollup",
                 enforce: "pre",
-                ...mdxPlugin(mdxPluginOpts),
                 configResolved(resolved) {
                   importMetaEnv = { ...importMetaEnv, ...resolved.env };
                 },
@@ -66,7 +65,7 @@ function mdx(partialMdxOptions = {}) {
                 // ex. inject layouts
                 async transform(_, id) {
                   var _a;
-                  if (!id.endsWith("mdx"))
+                  if (!id.endsWith(".mdx"))
                     return;
                   const { fileId } = getFileInfo(id, config);
                   const code = await fs.readFile(fileId, "utf-8");
@@ -153,7 +152,8 @@ function markdownConfigToMdxOptions(markdownConfig) {
     ...markdownConfig,
     remarkPlugins: ignoreStringPlugins(markdownConfig.remarkPlugins),
     rehypePlugins: ignoreStringPlugins(markdownConfig.rehypePlugins),
-    remarkRehype: markdownConfig.remarkRehype ?? {}
+    remarkRehype: markdownConfig.remarkRehype ?? {},
+    optimize: false
   };
 }
 function applyDefaultOptions({
@@ -169,7 +169,8 @@ function applyDefaultOptions({
     smartypants: options.smartypants ?? defaults.smartypants,
     remarkPlugins: options.remarkPlugins ?? defaults.remarkPlugins,
     rehypePlugins: options.rehypePlugins ?? defaults.rehypePlugins,
-    shikiConfig: options.shikiConfig ?? defaults.shikiConfig
+    shikiConfig: options.shikiConfig ?? defaults.shikiConfig,
+    optimize: options.optimize ?? defaults.optimize
   };
 }
 function escapeViteEnvReferences(code) {

package/dist/plugins.d.ts

@@ -1,4 +1,4 @@
-import type { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
+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';
@@ -6,5 +6,5 @@ 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<MdxRollupPluginOptions['remarkPlugins']>;
-export declare function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions['rehypePlugins'];
+export declare function getRemarkPlugins(mdxOptions: MdxOptions, config: AstroConfig): Promise<PluggableList>;
+export declare function getRehypePlugins(mdxOptions: MdxOptions): PluggableList;

package/dist/plugins.js

@@ -10,6 +10,7 @@ import remarkGfm from "remark-gfm";
 import remarkSmartypants from "remark-smartypants";
 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";
@@ -116,6 +117,10 @@ function getRehypePlugins(mdxOptions) {
     // computed from `astro.data.frontmatter` in VFile data
     rehypeApplyFrontmatterExport
   ];
+  if (mdxOptions.optimize) {
+    const options = mdxOptions.optimize === true ? void 0 : mdxOptions.optimize;
+    rehypePlugins.push([rehypeOptimizeStatic, options]);
+  }
   return rehypePlugins;
 }
 function getImportMetaEnvVariableName(node) {

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,63 @@
+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) => {
+    var _a, _b, _c, _d, _e, _f;
+    const customComponentNames = new Set(options == null ? void 0 : 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;
+        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);
+            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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Add support for MDX pages in your Astro site",
-  "version": "0.19.4",
+  "version": "0.19.5",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -30,12 +30,12 @@
     "@astrojs/markdown-remark": "^2.2.1",
     "@astrojs/prism": "^2.1.2",
     "@mdx-js/mdx": "^2.3.0",
-    "@mdx-js/rollup": "^2.3.0",
     "acorn": "^8.8.0",
     "es-module-lexer": "^1.1.1",
     "estree-util-visit": "^1.2.0",
     "github-slugger": "^1.4.0",
     "gray-matter": "^4.0.3",
+    "hast-util-to-html": "^8.0.4",
     "kleur": "^4.1.4",
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
@@ -67,7 +67,7 @@
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
     "vite": "^4.3.1",
-    "astro": "2.5.5",
+    "astro": "2.5.6",
     "astro-scripts": "0.0.14"
   },
   "engines": {