diff options
Diffstat (limited to 'packages/integrations/mdx/src')
| -rw-r--r-- | packages/integrations/mdx/src/index.ts | 34 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/plugins.ts | 10 | ||||
| -rw-r--r-- | packages/integrations/mdx/src/remark-images-to-component.ts | 2 |
3 files changed, 33 insertions, 13 deletions
diff --git a/packages/integrations/mdx/src/index.ts b/packages/integrations/mdx/src/index.ts index 1d0320213..e9c6924c6 100644 --- a/packages/integrations/mdx/src/index.ts +++ b/packages/integrations/mdx/src/index.ts @@ -13,6 +13,7 @@ import type { Plugin as VitePlugin } from 'vite'; import { getRehypePlugins, getRemarkPlugins, recmaInjectImportMetaEnvPlugin } from './plugins.js'; import type { OptimizeOptions } from './rehype-optimize-static.js'; import { getFileInfo, ignoreStringPlugins, parseFrontmatter } from './utils.js'; +import astroJSXRenderer from 'astro/jsx/renderer.js'; export type MdxOptions = Omit<typeof markdownConfigDefaults, 'remarkPlugins' | 'rehypePlugins'> & { extendMarkdownConfig: boolean; @@ -37,9 +38,16 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI name: '@astrojs/mdx', hooks: { 'astro:config:setup': async (params) => { - const { updateConfig, config, addPageExtension, addContentEntryType, command } = - params as SetupHookParams; + const { + updateConfig, + config, + addPageExtension, + addContentEntryType, + command, + addRenderer, + } = params as SetupHookParams; + addRenderer(astroJSXRenderer); addPageExtension('.mdx'); addContentEntryType({ extensions: ['.mdx'], @@ -72,7 +80,7 @@ export default function mdx(partialMdxOptions: Partial<MdxOptions> = {}): AstroI }); const mdxPluginOpts: CompileOptions = { - remarkPlugins: await getRemarkPlugins(mdxOptions, config), + remarkPlugins: await getRemarkPlugins(mdxOptions), rehypePlugins: getRehypePlugins(mdxOptions), recmaPlugins: mdxOptions.recmaPlugins, remarkRehypeOptions: mdxOptions.remarkRehype, @@ -95,6 +103,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 +179,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/plugins.ts b/packages/integrations/mdx/src/plugins.ts index ed03f4b2b..5d7b9b58c 100644 --- a/packages/integrations/mdx/src/plugins.ts +++ b/packages/integrations/mdx/src/plugins.ts @@ -5,7 +5,6 @@ import { } from '@astrojs/markdown-remark/dist/internal.js'; import { nodeTypes } from '@mdx-js/mdx'; import type { PluggableList } from '@mdx-js/mdx/lib/core.js'; -import type { AstroConfig } from 'astro'; import type { Literal, MemberExpression } from 'estree'; import { visit as estreeVisit } from 'estree-util-visit'; import rehypeRaw from 'rehype-raw'; @@ -96,13 +95,8 @@ export function rehypeApplyFrontmatterExport() { }; } -export async function getRemarkPlugins( - mdxOptions: MdxOptions, - config: AstroConfig -): Promise<PluggableList> { - let remarkPlugins: PluggableList = [ - ...(config.experimental.assets ? [remarkCollectImages, remarkImageToComponent] : []), - ]; +export async function getRemarkPlugins(mdxOptions: MdxOptions): Promise<PluggableList> { + let remarkPlugins: PluggableList = [remarkCollectImages, remarkImageToComponent]; if (!isPerformanceBenchmark) { if (mdxOptions.gfm) { 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'; |