diff options
Diffstat (limited to 'packages/integrations/mdx/src')
| -rw-r--r-- | packages/integrations/mdx/src/index.ts | 20 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/remark-images-to-component.ts | 2 |
2 files changed, 20 insertions, 2 deletions
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 1d0320213..ecf2a9a95 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -95,6 +95,21 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI enforce: 'pre', configResolved(resolved) { importMetaEnv = { ...importMetaEnv, ...resolved.env }; + + // HACK: move ourselves before Astro's JSX plugin to transform things in the right order + 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]; + // @ts-ignore-error ignore readonly annotation + resolved.plugins.splice(myPluginIndex, 1); + // @ts-ignore-error ignore readonly annotation + resolved.plugins.splice(jsxPluginIndex, 0, myPlugin); + } + } }, // Override transform to alter code before MDX compilation // ex. inject layouts @@ -156,11 +171,14 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI code += `\nexport const file = ${JSON.stringify(fileId)};`; } if (!moduleExports.find(({ n }) => n === 'Content')) { + // If have `export const components`, pass that as props to `Content` as fallback + const hasComponents = moduleExports.find(({ n }) => n === 'components'); + // Make `Content` the default export so we can wrap `MDXContent` and pass in `Fragment` code = code.replace('export default MDXContent;', ''); code += `\nexport const Content = (props = {}) => MDXContent({ ...props, - components: { Fragment, ...props.components }, + components: { Fragment${hasComponents ? ', ...components' : ''}, ...props.components }, }); export default Content;`; } diff --git a/packages/integrations/mdx/src/remark-images-to-component.ts b/packages/integrations/mdx/src/remark-images-to-component.ts index 8a3166f49..bb9657f42 100644 --- a/packages/integrations/mdx/src/remark-images-to-component.ts +++ b/packages/integrations/mdx/src/remark-images-to-component.ts @@ -1,5 +1,5 @@ import type { MarkdownVFile } from '@astrojs/markdown-remark'; -import { type Image, type Parent } from 'mdast'; +import type { Image, Parent } from 'mdast'; import type { MdxJsxFlowElement, MdxjsEsm } from 'mdast-util-mdx'; import { visit } from 'unist-util-visit'; import { jsToTreeNode } from './utils.js'; |