@mintlify/common 1.0.1111 → 1.0.1113

package/dist/mdx/getMDXOptions.d.ts

@@ -12,11 +12,16 @@ type MDXOptionsData = {
     tailwindSelectors?: string[];
     path?: string;
 };
-export declare const getMDXOptions: ({ data, remarkPlugins, rehypePlugins, mdxExtracts, allowedComponents, }: {
+export declare const getMDXOptions: ({ data, remarkPlugins, rehypePlugins, mdxExtracts, allowedComponents, fragmentPlugins, }: {
     data: MDXOptionsData;
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
     mdxExtracts?: MdxExtracts;
     allowedComponents?: string[];
+    /** See `getSerializeExtras` — plugins fragments compiled by `remarkMdxExpandExpressions` also need. */
+    fragmentPlugins?: {
+        remarkPlugins: PluggableList;
+        rehypePlugins: PluggableList;
+    };
 }) => SerializeOptions["mdxOptions"];
 export {};

package/dist/mdx/getMDXOptions.js

@@ -1,4 +1,5 @@
 import { rehypeCodeBlocks, rehypeDynamicTailwindCss, rehypeKeyboardSymbols, rehypeListItemText, rehypeMdxExtractEndpoint, rehypeMdxExtractExamples, rehypeParamFieldIds, rehypeRawComponents, rehypeTable, rehypeUnicodeIds, rehypeZoomImages, remarkExtractChangelogFilters, remarkExtractTableOfContents, remarkFileTree, remarkFrames, remarkComponentIds, remarkMdxInjectSnippets, remarkMdxStyleStringToObject, remarkMdxRemoveUnusedVariables, remarkRemoveImports, remarkMdxExtractPanel, remarkResolveRelativeLinks, remarkVideo, remarkMdxClientComponentBoundaries, remarkExtractMultiView, remarkPrompt, remarkUnwrapInlineJsx, remarkUnwrapJsxHeadings, remarkMapExplicitAnchors, } from './plugins/index.js';
+import { remarkMdxExpandExpressions, } from './plugins/remark/remarkMdxExpandExpressions.js';
 import { remarkMdxRemoveUnknownJsx } from './plugins/remark/remarkMdxRemoveUnknownJsx/index.js';
 import { remarkMermaid } from './plugins/remark/remarkMermaid.js';
 import { remarkNoCopyLanguage } from './plugins/remark/remarkNoCopyLanguage.js';
@@ -11,20 +12,32 @@ const rehypeExtractors = (mdxExtracts, data) => {
         [rehypeMdxExtractEndpoint, data.pageMetadata, data.config, mdxExtracts],
     ];
 };
-export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], mdxExtracts, allowedComponents = [], }) => {
-    return {
+export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], mdxExtracts, allowedComponents = [], fragmentPlugins, }) => {
+    // `fragment`: the list is compiling the body of an `<MDX>` inside an expression. Page-level
+    // extractors that hoist an element out of the tree (`<Panel>`, `<RequestExample>`,
+    // `<ResponseExample>`) are skipped there so the element stays in its branch and renders inline
+    // through the registered component instead of disappearing into fragment-scoped extracts.
+    // `knownComponents`: components the page defines (`export const X = …`, including snippet
+    // imports resolved at prebuild). A fragment tree has no exports of its own, so without this the
+    // unknown-JSX filter would strip `<X />` inside the fragment.
+    const buildPlugins = (extracts, { fragment = false, knownComponents = [], depth = 0, budget = undefined, } = {}) => ({
         remarkPlugins: [
+            // first, so `<Snippet file>` is injected on the page and inside every `<MDX>` fragment
             [remarkMdxInjectSnippets, data.snippetTreeMap],
+            [
+                remarkMdxExpandExpressions,
+                { buildPlugins, extraPlugins: fragmentPlugins, knownComponents, depth, budget },
+            ],
             remarkMdxStyleStringToObject,
             [remarkResolveRelativeLinks, { path: data.path }],
             remarkPrompt,
             [remarkComponentIds, data.pageMetadata],
             remarkUnwrapJsxHeadings,
             remarkUnwrapInlineJsx,
-            [remarkExtractTableOfContents, mdxExtracts, data.pageMetadata], // modifies tree so cannot be excluded
-            [remarkExtractChangelogFilters, mdxExtracts],
-            [remarkMdxExtractPanel, mdxExtracts],
-            [remarkExtractMultiView, mdxExtracts],
+            [remarkExtractTableOfContents, extracts, data.pageMetadata], // modifies tree so cannot be excluded
+            [remarkExtractChangelogFilters, extracts],
+            ...(fragment ? [] : [[remarkMdxExtractPanel, extracts]]),
+            [remarkExtractMultiView, extracts],
             remarkMdxRemoveUnusedVariables,
             remarkFrames,
             remarkFileTree,
@@ -34,14 +47,14 @@ export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], md
             remarkVideo,
             ...remarkPlugins,
             remarkMapExplicitAnchors,
-            [remarkMdxRemoveUnknownJsx, { allowlist: allowedComponents }],
-            remarkMdxClientComponentBoundaries,
+            [remarkMdxRemoveUnknownJsx, { allowlist: [...allowedComponents, ...knownComponents] }],
+            [remarkMdxClientComponentBoundaries, { allowlist: knownComponents }],
         ],
         rehypePlugins: [
             rehypeCodeBlocks,
             rehypeKeyboardSymbols,
             rehypeParamFieldIds,
-            ...rehypeExtractors(mdxExtracts, data),
+            ...(fragment ? [] : rehypeExtractors(extracts, data)),
             rehypeTable,
             rehypeRawComponents,
             rehypeListItemText,
@@ -50,6 +63,11 @@ export const getMDXOptions = ({ data, remarkPlugins = [], rehypePlugins = [], md
             [rehypeDynamicTailwindCss, data.tailwindSelectors],
             ...rehypePlugins,
         ],
+    });
+    const plugins = buildPlugins(mdxExtracts);
+    return {
+        remarkPlugins: plugins.remarkPlugins,
+        rehypePlugins: plugins.rehypePlugins,
         format: 'mdx',
     };
 };

package/dist/mdx/plugins/remark/index.d.ts

@@ -6,6 +6,7 @@ export * from './remarkRemoveImports.js';
 export * from './remarkExtractTableOfContents.js';
 export * from './remarkMdxRemoveUnusedVariables.js';
 export * from './remarkMdxRemoveUnknownJsx/index.js';
+export * from './remarkMdxExpandExpressions.js';
 export * from './remarkMdxClientComponentBoundaries.js';
 export * from './remarkMermaid.js';
 export * from './remarkNoCopyLanguage.js';

package/dist/mdx/plugins/remark/index.js

@@ -6,6 +6,7 @@ export * from './remarkRemoveImports.js';
 export * from './remarkExtractTableOfContents.js';
 export * from './remarkMdxRemoveUnusedVariables.js';
 export * from './remarkMdxRemoveUnknownJsx/index.js';
+export * from './remarkMdxExpandExpressions.js';
 export * from './remarkMdxClientComponentBoundaries.js';
 export * from './remarkMermaid.js';
 export * from './remarkNoCopyLanguage.js';

package/dist/mdx/plugins/remark/remarkMdxExpandExpressions.d.ts

@@ -0,0 +1,94 @@
+import type { Root } from 'mdast';
+import { type PluggableList } from 'unified';
+import type { MdxExtracts } from '../../../types/index.js';
+export type RemarkMdxExpandExpressionsOptions = {
+    /**
+     * Builds the remark/rehype plugin lists a fragment is compiled with. Called with a
+     * fragment-scoped `MdxExtracts` so extractors in the list never overwrite the page's
+     * extracts; the table of contents is merged back explicitly (see below).
+     */
+    buildPlugins: (mdxExtracts: MdxExtracts, options: {
+        fragment: true;
+        knownComponents: string[];
+        depth: number;
+        budget: FragmentBudget;
+    }) => {
+        remarkPlugins: PluggableList;
+        rehypePlugins: PluggableList;
+    };
+    /**
+     * Component names defined by an enclosing document (page exports, incl. snippet imports
+     * resolved at prebuild). Set on the fragment pipeline's own instance of this plugin so nested
+     * fragments still know them; the page-level instance derives them from the tree.
+     */
+    knownComponents?: string[];
+    /** Nesting depth of the document being compiled: 0 for the page, +1 per enclosing fragment. */
+    depth?: number;
+    /** Expansion budget shared by a page compile and every fragment compiled for it. */
+    budget?: FragmentBudget;
+    /**
+     * Plugins `serialize` from `@mintlify/mdx/server` adds around `getMDXOptions` (smartypants,
+     * KaTeX, syntax highlighting). Supplied by server-only code (`getSerializeExtras`) so this
+     * module stays free of server-only imports and `getMDXOptions` remains client-bundleable.
+     */
+    extraPlugins?: {
+        remarkPlugins: PluggableList;
+        rehypePlugins: PluggableList;
+    };
+};
+export type FragmentBudget = {
+    remaining: number;
+};
+/**
+ * Bounds on the work a single page compile may spend expanding `<MDX>` fragments. Every fragment
+ * re-runs the remark/rehype pipeline on its source and text nested `d` levels deep is compiled
+ * `d` times, so both are capped and the compile fails closed with a clear error instead of
+ * spending unbounded time on a pathological page.
+ */
+export declare const MAX_MDX_FRAGMENT_DEPTH = 8;
+export declare const MAX_MDX_FRAGMENTS_PER_PAGE = 500;
+/**
+ * Compile-time expansion of `<MDX>` inside `{…}` expressions.
+ *
+ * Block-level `<MDX>` children are parsed by the MDX compiler already. Inside an expression such
+ * as `{variant === "fos" ? <MDX>…</MDX> : null}` the children are plain JSX text and would render
+ * literally. This plugin recovers the raw source between the `<MDX>` tags, dedents it, parses it as
+ * MDX and runs the page pipeline (remark + rehype) on the fragment, then splices the resulting JSX
+ * back in as the `<MDX>` element's children. The `<MDX>` element itself is kept so the registered
+ * component still wraps the output.
+ *
+ * Must run first in the remark list (right after snippet injection) so the fragment sees the same
+ * plugins as page content. The fragment pipeline also prepends the plugins `serialize` from
+ * `@mintlify/mdx/server` adds around `getMDXOptions` (smartypants, KaTeX, syntax highlighting).
+ * Nested `<MDX>` expressions inside a fragment are expanded recursively because the fragment
+ * pipeline includes this plugin again.
+ *
+ * The expression text is re-parsed with acorn instead of reusing `data.estree` offsets, because
+ * expressions injected from snippets have a regenerated estree whose positions no longer index
+ * into `value`. `remarkMarkAndUnravel` is a local copy of the @mdx-js/mdx plugin (not exported)
+ * that the page pipeline runs before any remark plugin. `mdxjsEsm` statements in a fragment
+ * cannot live inside an expression and are dropped. In an inline (`mdxTextExpression`) a lone
+ * `<p>` wrapper is unwrapped so it does not nest in the surrounding paragraph.
+ *
+ * Escaping: the fragment source is JSX text, so a literal brace must be written the JSX way,
+ * e.g. `{'{'}` / `{'}'}`; that expression is then evaluated by MDX and renders the brace. For the
+ * same reason a custom heading anchor cannot use `## Title {#id}` inside an expression fragment;
+ * write `<h2 id="id">Title</h2>` instead. Nothing beyond dedenting is done to the recovered text.
+ *
+ * Components defined on the page (`export const Local = () => …`, and named snippet imports,
+ * which prebuild rewrites into page exports) are passed into the fragment pipeline as known
+ * names so the unknown-JSX filter keeps `<Local />` inside a fragment, as it does on the page.
+ *
+ * Page-level elements: `<Panel>`, `<RequestExample>` and `<ResponseExample>` are hoisted out of a
+ * page into extracts by dedicated plugins. A fragment is compiled with those plugins omitted
+ * (`buildPlugins(…, { fragment: true })`), so such an element inside an `<MDX>` fragment stays in
+ * its branch and renders inline through the registered component. Only the page-level occurrence
+ * feeds the side panel / sticky examples.
+ *
+ * Table of contents: the fragment pipeline runs `remarkExtractTableOfContents` (it also rewrites
+ * headings to `<Heading>`, so it cannot be skipped) into a fragment-scoped extracts object that is
+ * discarded, so headings inside an expression fragment get ids but are not listed in the page's
+ * table of contents yet — that merge is a follow-up PR.
+ */
+export declare const remarkMdxExpandExpressions: (options: RemarkMdxExpandExpressionsOptions) => (tree: Root) => Promise<void>;
+export declare const dedent: (text: string) => string;

package/dist/mdx/plugins/remark/remarkMdxExpandExpressions.js

@@ -0,0 +1,262 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { Parser } from 'acorn';
+import jsx from 'acorn-jsx';
+import { jsx as jsxHandlers, toJs } from 'estree-util-to-js';
+import { walk } from 'estree-walker';
+import { toEstree } from 'hast-util-to-estree';
+import remarkRehype from 'remark-rehype';
+import { unified } from 'unified';
+import { visit } from 'unist-util-visit';
+import { visitParents } from 'unist-util-visit-parents';
+import { getAST } from '../../remark.js';
+import { getExportedFunctionNames } from './remarkMdxClientComponentBoundaries.js';
+const REMARK_REHYPE_OPTIONS = {
+    allowDangerousHtml: true,
+    passThrough: [
+        'mdxFlowExpression',
+        'mdxJsxFlowElement',
+        'mdxJsxTextElement',
+        'mdxTextExpression',
+        'mdxjsEsm',
+    ],
+};
+const JSXParser = Parser.extend(jsx());
+/**
+ * Bounds on the work a single page compile may spend expanding `<MDX>` fragments. Every fragment
+ * re-runs the remark/rehype pipeline on its source and text nested `d` levels deep is compiled
+ * `d` times, so both are capped and the compile fails closed with a clear error instead of
+ * spending unbounded time on a pathological page.
+ */
+export const MAX_MDX_FRAGMENT_DEPTH = 8;
+export const MAX_MDX_FRAGMENTS_PER_PAGE = 500;
+/**
+ * Compile-time expansion of `<MDX>` inside `{…}` expressions.
+ *
+ * Block-level `<MDX>` children are parsed by the MDX compiler already. Inside an expression such
+ * as `{variant === "fos" ? <MDX>…</MDX> : null}` the children are plain JSX text and would render
+ * literally. This plugin recovers the raw source between the `<MDX>` tags, dedents it, parses it as
+ * MDX and runs the page pipeline (remark + rehype) on the fragment, then splices the resulting JSX
+ * back in as the `<MDX>` element's children. The `<MDX>` element itself is kept so the registered
+ * component still wraps the output.
+ *
+ * Must run first in the remark list (right after snippet injection) so the fragment sees the same
+ * plugins as page content. The fragment pipeline also prepends the plugins `serialize` from
+ * `@mintlify/mdx/server` adds around `getMDXOptions` (smartypants, KaTeX, syntax highlighting).
+ * Nested `<MDX>` expressions inside a fragment are expanded recursively because the fragment
+ * pipeline includes this plugin again.
+ *
+ * The expression text is re-parsed with acorn instead of reusing `data.estree` offsets, because
+ * expressions injected from snippets have a regenerated estree whose positions no longer index
+ * into `value`. `remarkMarkAndUnravel` is a local copy of the @mdx-js/mdx plugin (not exported)
+ * that the page pipeline runs before any remark plugin. `mdxjsEsm` statements in a fragment
+ * cannot live inside an expression and are dropped. In an inline (`mdxTextExpression`) a lone
+ * `<p>` wrapper is unwrapped so it does not nest in the surrounding paragraph.
+ *
+ * Escaping: the fragment source is JSX text, so a literal brace must be written the JSX way,
+ * e.g. `{'{'}` / `{'}'}`; that expression is then evaluated by MDX and renders the brace. For the
+ * same reason a custom heading anchor cannot use `## Title {#id}` inside an expression fragment;
+ * write `<h2 id="id">Title</h2>` instead. Nothing beyond dedenting is done to the recovered text.
+ *
+ * Components defined on the page (`export const Local = () => …`, and named snippet imports,
+ * which prebuild rewrites into page exports) are passed into the fragment pipeline as known
+ * names so the unknown-JSX filter keeps `<Local />` inside a fragment, as it does on the page.
+ *
+ * Page-level elements: `<Panel>`, `<RequestExample>` and `<ResponseExample>` are hoisted out of a
+ * page into extracts by dedicated plugins. A fragment is compiled with those plugins omitted
+ * (`buildPlugins(…, { fragment: true })`), so such an element inside an `<MDX>` fragment stays in
+ * its branch and renders inline through the registered component. Only the page-level occurrence
+ * feeds the side panel / sticky examples.
+ *
+ * Table of contents: the fragment pipeline runs `remarkExtractTableOfContents` (it also rewrites
+ * headings to `<Heading>`, so it cannot be skipped) into a fragment-scoped extracts object that is
+ * discarded, so headings inside an expression fragment get ids but are not listed in the page's
+ * table of contents yet — that merge is a follow-up PR.
+ */
+export const remarkMdxExpandExpressions = (options) => (tree) => __awaiter(void 0, void 0, void 0, function* () {
+    var _a, _b, _c;
+    const depth = (_a = options.depth) !== null && _a !== void 0 ? _a : 0;
+    const expressions = [];
+    visitParents(tree, (node, ancestors) => {
+        if (node.type !== 'mdxFlowExpression' && node.type !== 'mdxTextExpression')
+            return;
+        // A page-level <Panel> is stringified back to MDX source by remarkMdxExtractPanel and
+        // compiled again on its own (getMdx). Leave its expressions as the author wrote them so
+        // that second compile expands them; expanding here would bake generated JSX (<em>, <h5>,
+        // …) into the panel source, which the second pass strips as unknown components.
+        if (depth === 0 &&
+            ancestors.some((a) => a.type === 'mdxJsxFlowElement' && 'name' in a && a.name === 'Panel')) {
+            return;
+        }
+        expressions.push(node);
+    });
+    if (expressions.length === 0)
+        return;
+    const knownComponents = [
+        ...new Set([...((_b = options.knownComponents) !== null && _b !== void 0 ? _b : []), ...getExportedFunctionNames(tree)]),
+    ];
+    const budget = (_c = options.budget) !== null && _c !== void 0 ? _c : { remaining: MAX_MDX_FRAGMENTS_PER_PAGE };
+    for (const node of expressions) {
+        yield expandExpression(node, options, { knownComponents, depth, budget });
+    }
+});
+const expandExpression = (node_1, options_1, _a) => __awaiter(void 0, [node_1, options_1, _a], void 0, function* (node, options, { knownComponents, depth, budget }) {
+    var _b, _c, _d, _e;
+    if (!node.value.includes('<MDX'))
+        return;
+    let expression;
+    try {
+        expression = JSXParser.parseExpressionAt(node.value, 0, {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+        });
+    }
+    catch (_f) {
+        return;
+    }
+    const elements = collectMdxElements(expression);
+    if (elements.length === 0)
+        return;
+    let changed = false;
+    for (const element of elements) {
+        const opening = element.openingElement;
+        const closing = element.closingElement;
+        if (!closing || element.children.length === 0)
+            continue;
+        const raw = dedent(node.value.slice(opening.end, closing.start));
+        if (raw.trim() === '')
+            continue;
+        if (depth >= MAX_MDX_FRAGMENT_DEPTH) {
+            throw new Error(`<MDX> fragments are nested more than ${MAX_MDX_FRAGMENT_DEPTH} levels deep; flatten the nesting.`);
+        }
+        if (budget.remaining <= 0) {
+            throw new Error(`This page expands more than ${MAX_MDX_FRAGMENTS_PER_PAGE} <MDX> fragments; split the page or move content into block-level <MDX>.`);
+        }
+        budget.remaining -= 1;
+        const fragmentExtracts = {};
+        const { remarkPlugins, rehypePlugins } = options.buildPlugins(fragmentExtracts, {
+            fragment: true,
+            knownComponents,
+            depth: depth + 1,
+            budget,
+        });
+        const processor = unified()
+            .use(remarkMarkAndUnravel)
+            .use((_c = (_b = options.extraPlugins) === null || _b === void 0 ? void 0 : _b.remarkPlugins) !== null && _c !== void 0 ? _c : [])
+            .use(remarkPlugins)
+            .use(remarkRehype, REMARK_REHYPE_OPTIONS)
+            .use((_e = (_d = options.extraPlugins) === null || _d === void 0 ? void 0 : _d.rehypePlugins) !== null && _e !== void 0 ? _e : [])
+            .use(rehypePlugins);
+        const hast = (yield processor.run(getAST(raw)));
+        if (node.type === 'mdxTextExpression')
+            unwrapSingleParagraph(hast);
+        const program = toEstree(hast, {
+            elementAttributeNameCase: 'react',
+            stylePropertyNameCase: 'dom',
+        });
+        const statement = [...program.body]
+            .reverse()
+            .find((statement) => statement.type === 'ExpressionStatement');
+        if (!statement || statement.type !== 'ExpressionStatement')
+            continue;
+        const compiled = statement.expression;
+        element.children =
+            compiled.type === 'JSXFragment'
+                ? compiled.children
+                : [compiled];
+        changed = true;
+    }
+    if (!changed)
+        return;
+    const program = {
+        type: 'Program',
+        sourceType: 'module',
+        body: [{ type: 'ExpressionStatement', expression }],
+        comments: [],
+    };
+    node.value = toJs(program, { handlers: jsxHandlers }).value.replace(/;\s*$/, '');
+    node.data = Object.assign(Object.assign({}, node.data), { estree: program });
+});
+const collectMdxElements = (expression) => {
+    const elements = [];
+    walk(expression, {
+        enter(jsNode) {
+            if (isMdxElement(jsNode)) {
+                elements.push(jsNode);
+                this.skip();
+            }
+        },
+    });
+    return elements;
+};
+const isMdxElement = (node) => node.type === 'JSXElement' &&
+    node.openingElement.name.type === 'JSXIdentifier' &&
+    node.openingElement.name.name === 'MDX';
+export const dedent = (text) => {
+    var _a, _b;
+    const lines = text.split('\n');
+    let indent = Infinity;
+    for (const line of lines) {
+        if (line.trim() === '')
+            continue;
+        const leading = (_b = (_a = line.match(/^[ \t]*/)) === null || _a === void 0 ? void 0 : _a[0].length) !== null && _b !== void 0 ? _b : 0;
+        if (leading < indent)
+            indent = leading;
+    }
+    if (!Number.isFinite(indent) || indent === 0)
+        return text;
+    return lines.map((line) => (line.trim() === '' ? '' : line.slice(indent))).join('\n');
+};
+const unwrapSingleParagraph = (hast) => {
+    const children = hast.children.filter((child) => !(child.type === 'text' && /^[\t\n\f\r ]*$/.test(child.value)));
+    const only = children[0];
+    if (children.length === 1 && (only === null || only === void 0 ? void 0 : only.type) === 'element' && only.tagName === 'p') {
+        hast.children = only.children;
+    }
+};
+const remarkMarkAndUnravel = () => (tree) => {
+    visit(tree, (node, index, parent) => {
+        if (parent && typeof index === 'number' && node.type === 'paragraph') {
+            let all = true;
+            let oneOrMore = false;
+            for (const child of node.children) {
+                if (child.type === 'mdxJsxTextElement' || child.type === 'mdxTextExpression') {
+                    oneOrMore = true;
+                }
+                else if (child.type === 'text' && /^[\t\n\f\r ]*$/.test(child.value)) {
+                }
+                else {
+                    all = false;
+                    break;
+                }
+            }
+            if (all && oneOrMore) {
+                const newChildren = [];
+                for (const child of node.children) {
+                    if (child.type === 'mdxJsxTextElement') {
+                        child.type = 'mdxJsxFlowElement';
+                    }
+                    if (child.type === 'mdxTextExpression') {
+                        child.type = 'mdxFlowExpression';
+                    }
+                    if (child.type === 'text' && /^[\t\r\n ]+$/.test(child.value))
+                        continue;
+                    newChildren.push(child);
+                }
+                parent.children.splice(index, 1, ...newChildren);
+                return index;
+            }
+        }
+        if (node.type === 'mdxJsxFlowElement' || node.type === 'mdxJsxTextElement') {
+            node.data = Object.assign(Object.assign({}, node.data), { _mdxExplicitJsx: true });
+        }
+        return undefined;
+    });
+};

package/dist/mdx/server-only/getMdx.js

@@ -14,6 +14,7 @@ import { codeStylingToThemeOrThemes } from '../getCodeStyling.js';
 import { preprocessCustomHeadingIds } from '../preprocessCustomHeadingIds.js';
 import { replaceVariables } from '../replaceVariables.js';
 import { createSnippetTreeMap } from './getMdx/snippets.js';
+import { getSerializeExtras } from './getSerializeExtras.js';
 export function getMdx(_a) {
     return __awaiter(this, arguments, void 0, function* ({ path, content, metadata, snippets, subdomain, codeStyling, config, tailwindSelectors = undefined, pageType = 'default', trace = undefined, customLanguages = [], variables = undefined, rehypePlugins = [], remarkPlugins = [], allowedComponents = [], }) {
         const traceFn = trace !== null && trace !== void 0 ? trace : ((_name, fn) => fn());
@@ -43,18 +44,21 @@ export function getMdx(_a) {
         if (pageType === 'pdf') {
             plugins = [...plugins, remarkExpandContent, remarkSplitCodeGroup, remarkSplitTabs];
         }
+        const syntaxHighlightingOptions = Object.assign(Object.assign({}, codeStylingToThemeOrThemes(codeStyling)), { customLanguages });
         const mdxOptions = getMDXOptions({
             data: mdxOptionsData,
             remarkPlugins: plugins,
             rehypePlugins,
             mdxExtracts,
             allowedComponents,
+            fragmentPlugins: getSerializeExtras(syntaxHighlightingOptions),
         });
         const mdxOptionsNoJs = getMDXOptions({
             data: mdxOptionsData,
             remarkPlugins: [remarkMdxRemoveJs, ...plugins],
             rehypePlugins,
             allowedComponents,
+            fragmentPlugins: getSerializeExtras(syntaxHighlightingOptions),
         });
         const scope = {
             codeStyling,

package/dist/mdx/server-only/getSerializeExtras.d.ts

@@ -0,0 +1,12 @@
+import { type RehypeSyntaxHighlightingOptions } from '@mintlify/mdx/plugins';
+import type { PluggableList } from 'unified';
+/**
+ * The plugins `serialize` from `@mintlify/mdx/server` wraps around `getMDXOptions`' lists.
+ * `remarkMdxExpandExpressions` needs the same set so `<MDX>` fragments compile like page content;
+ * it lives here because `rehypeSyntaxHighlighting` is server-only and `getMDXOptions` is bundled
+ * for the client.
+ */
+export declare const getSerializeExtras: (syntaxHighlightingOptions?: RehypeSyntaxHighlightingOptions) => {
+    remarkPlugins: PluggableList;
+    rehypePlugins: PluggableList;
+};

package/dist/mdx/server-only/getSerializeExtras.js

@@ -0,0 +1,13 @@
+import { rehypeSyntaxHighlighting, } from '@mintlify/mdx/plugins';
+import rehypeKatex from 'rehype-katex';
+import remarkSmartypants from 'remark-smartypants';
+/**
+ * The plugins `serialize` from `@mintlify/mdx/server` wraps around `getMDXOptions`' lists.
+ * `remarkMdxExpandExpressions` needs the same set so `<MDX>` fragments compile like page content;
+ * it lives here because `rehypeSyntaxHighlighting` is server-only and `getMDXOptions` is bundled
+ * for the client.
+ */
+export const getSerializeExtras = (syntaxHighlightingOptions) => ({
+    remarkPlugins: [remarkSmartypants],
+    rehypePlugins: [rehypeKatex, [rehypeSyntaxHighlighting, syntaxHighlightingOptions]],
+});

package/dist/mdx/server-only/index.d.ts

@@ -1 +1,2 @@
 export { createSnippetTreeMap, getMdx, type GetMdxType, type Snippet } from './getMdx.js';
+export { getSerializeExtras } from './getSerializeExtras.js';

package/dist/mdx/server-only/index.js

@@ -1 +1,2 @@
 export { createSnippetTreeMap, getMdx } from './getMdx.js';
+export { getSerializeExtras } from './getSerializeExtras.js';