Merge pull request #8188 from withastro/next

Astro 3.0

4 files changed, 33 insertions, 33 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';
diff --git a/packages/integrations/mdx/src/remark-shiki.ts b/packages/integrations/mdx/src/remark-shiki.ts
index 83625051e..a241aaa4e 100644
--- a/packages/integrations/mdx/src/remark-shiki.ts
+++ b/packages/integrations/mdx/src/remark-shiki.ts
@@ -10,27 +10,7 @@ import { visit } from 'unist-util-visit';
  */
 const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
 
-// Map of old theme names to new names to preserve compatibility when we upgrade shiki
-const compatThemes: Record<string, string> = {
-	'material-darker': 'material-theme-darker',
-	'material-default': 'material-theme',
-	'material-lighter': 'material-theme-lighter',
-	'material-ocean': 'material-theme-ocean',
-	'material-palenight': 'material-theme-palenight',
-};
-
-const normalizeTheme = (theme: string | shiki.IShikiTheme) => {
-	if (typeof theme === 'string') {
-		return compatThemes[theme] || theme;
-	} else if (compatThemes[theme.name]) {
-		return { ...theme, name: compatThemes[theme.name] };
-	} else {
-		return theme;
-	}
-};
-
 const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
-	theme = normalizeTheme(theme);
 	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
 	let highlighterAsync = highlighterCacheAsync.get(cacheID);
 	if (!highlighterAsync) {