@astrojs/mdx 0.8.2 → 0.10.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 3036c715efc9fce9
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.8.2 build /Users/matthew/dev/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 9de770958d53d2f8
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.10.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @astrojs/mdx
 
+## 0.10.0
+
+### Minor Changes
+
+- [#4292](https://github.com/withastro/astro/pull/4292) [`f1a52c18a`](https://github.com/withastro/astro/commit/f1a52c18afe66e6d310743ae6884be76f69be265) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Switch from Shiki Twoslash to Astro's Shiki Markdown highlighter
+
+## 0.9.0
+
+### Minor Changes
+
+- [#4268](https://github.com/withastro/astro/pull/4268) [`f7afdb889`](https://github.com/withastro/astro/commit/f7afdb889fe4e97177958c8ec92f80c5f6e5cb51) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Align MD with MDX on layout props and "glob" import results:
+  - Add `Content` to MDX
+  - Add `file` and `url` to MDX frontmatter (layout import only)
+  - Update glob types to reflect differences (lack of `rawContent` and `compiledContent`)
+
+### Patch Changes
+
+- [#4272](https://github.com/withastro/astro/pull/4272) [`24d2f7a6e`](https://github.com/withastro/astro/commit/24d2f7a6e6700c10c863f826f37bb653d70e3a83) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Properly handle hydration for namespaced components
+
+## 0.8.3
+
+### Patch Changes
+
+- [#4248](https://github.com/withastro/astro/pull/4248) [`869d00935`](https://github.com/withastro/astro/commit/869d0093596b709cfcc1a1a95ee631b48d6d1c26) Thanks [@svemat01](https://github.com/svemat01)! - Load builtin rehype plugins before user plugins instead of after
+
+* [#4255](https://github.com/withastro/astro/pull/4255) [`411612808`](https://github.com/withastro/astro/commit/4116128082121ee276d51cb245bf8095be4728a1) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Pass injected frontmatter from remark and rehype plugins to layouts
+
+* Updated dependencies [[`1f0dd31d9`](https://github.com/withastro/astro/commit/1f0dd31d9239b5e3dca99c88d021e7a9a3e2054d)]:
+  - @astrojs/prism@1.0.1
+
 ## 0.8.2
 
 ### Patch Changes

package/README.md

@@ -26,11 +26,11 @@ The `astro add` command-line tool automates the installation for you. Run one of
 
 ```sh
 # Using NPM
-npx astro add mdx
+npm run astro add mdx
 # Using Yarn
 yarn astro add mdx
 # Using PNPM
-pnpx astro add mdx
+pnpm astro add mdx
 ```
 
 Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
@@ -253,7 +253,7 @@ const { title, fancyJsHelper } = Astro.props;
 
 The MDX integration respects [your project's `markdown.syntaxHighlight` configuration](https://docs.astro.build/en/guides/markdown-content/#syntax-highlighting).
 
-We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default [using Shiki twoslash](https://shikijs.github.io/twoslash/). You can customize [this remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash) using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
+We will highlight your code blocks with [Shiki](https://github.com/shikijs/shiki) by default. You can customize this highlighter using the `markdown.shikiConfig` option in your `astro.config`. For example, you can apply a different built-in theme like so:
 
 ```js
 // astro.config.mjs
@@ -285,6 +285,23 @@ export default {
 
 This applies a minimal Prism renderer with added support for `astro` code blocks. Visit [our "Prism configuration" docs](https://docs.astro.build/en/guides/markdown-content/#prism-configuration) for more on using Prism with Astro.
 
+#### Switch to a custom syntax highlighter
+
+You may want to apply your own syntax highlighter too. If your highlighter offers a remark or rehype plugin, you can flip off our syntax highlighting by setting `markdown.syntaxHighlight: false` and wiring up your plugin. For example, say you want to apply [Shiki Twoslash's remark plugin](https://www.npmjs.com/package/remark-shiki-twoslash):
+
+```js
+// astro.config.mjs
+import shikiTwoslash from 'remark-shiki-twoslash';
+
+export default {
+  markdown: {
+  syntaxHighlight: false,
+  },
+  integrations: [mdx({
+    remarkPlugins: [shikiTwoslash, { /* Shiki Twoslash config */ }],
+  })],
+```
+
 ## Configuration
 
 ### remarkPlugins

package/dist/astro-data-utils.js

@@ -14,6 +14,43 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
     const exportNodes = [
       jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
     ];
+    if (frontmatter.layout) {
+      exportNodes.unshift(
+        jsToTreeNode(
+          `import { jsx as layoutJsx } from 'astro/jsx-runtime';
+				import Layout from ${JSON.stringify(frontmatter.layout)};
+				
+				export default function ({ children }) {
+					const { layout, ...content } = frontmatter;
+					content.file = file;
+					content.url = url;
+					content.astro = {};
+					Object.defineProperty(content.astro, 'headings', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
+						}
+					});
+					Object.defineProperty(content.astro, 'html', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
+						}
+					});
+					Object.defineProperty(content.astro, 'source', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
+						}
+					});
+					return layoutJsx(Layout, {
+						content,
+						frontmatter: content,
+						headings: getHeadings(),
+						'server:root': true,
+						children,
+					});
+				};`
+        )
+      );
+    }
     tree.children = exportNodes.concat(tree.children);
   };
 }

package/dist/index.js

@@ -3,31 +3,32 @@ import mdxPlugin from "@mdx-js/rollup";
 import { parse as parseESM } from "es-module-lexer";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
-import remarkShikiTwoslash from "remark-shiki-twoslash";
 import remarkSmartypants from "remark-smartypants";
 import { VFile } from "vfile";
 import { rehypeApplyFrontmatterExport, remarkInitializeAstroData } from "./astro-data-utils.js";
 import rehypeCollectHeadings from "./rehype-collect-headings.js";
 import remarkPrism from "./remark-prism.js";
+import remarkShiki from "./remark-shiki.js";
 import { getFileInfo, parseFrontmatter } from "./utils.js";
 const DEFAULT_REMARK_PLUGINS = [
   remarkGfm,
   remarkSmartypants
 ];
 const DEFAULT_REHYPE_PLUGINS = [];
+const RAW_CONTENT_ERROR = "MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
+const COMPILED_CONTENT_ERROR = "MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
 function handleExtends(config, defaults = []) {
   if (Array.isArray(config))
     return config;
   return [...defaults, ...(config == null ? void 0 : config.extends) ?? []];
 }
-function getRemarkPlugins(mdxOptions, config) {
+async function getRemarkPlugins(mdxOptions, config) {
   let remarkPlugins = [
     remarkInitializeAstroData,
     ...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS)
   ];
   if (config.markdown.syntaxHighlight === "shiki") {
-    const shikiTwoslash = remarkShikiTwoslash.default ?? remarkShikiTwoslash;
-    remarkPlugins.push([shikiTwoslash, config.markdown.shikiConfig]);
+    remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]);
   }
   if (config.markdown.syntaxHighlight === "prism") {
     remarkPlugins.push(remarkPrism);
@@ -35,10 +36,10 @@ function getRemarkPlugins(mdxOptions, config) {
   return remarkPlugins;
 }
 function getRehypePlugins(mdxOptions, config) {
-  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
-  if (config.markdown.syntaxHighlight === "shiki" || config.markdown.syntaxHighlight === "prism") {
-    rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
-  }
+  let rehypePlugins = [
+    [rehypeRaw, { passThrough: nodeTypes }],
+    ...handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS)
+  ];
   rehypePlugins.unshift(rehypeCollectHeadings);
   return rehypePlugins;
 }
@@ -46,10 +47,10 @@ function mdx(mdxOptions = {}) {
   return {
     name: "@astrojs/mdx",
     hooks: {
-      "astro:config:setup": ({ updateConfig, config, addPageExtension, command }) => {
+      "astro:config:setup": async ({ updateConfig, config, addPageExtension, command }) => {
         addPageExtension(".mdx");
         const mdxPluginOpts = {
-          remarkPlugins: getRemarkPlugins(mdxOptions, config),
+          remarkPlugins: await getRemarkPlugins(mdxOptions, config),
           rehypePlugins: getRehypePlugins(mdxOptions, config),
           jsx: true,
           jsxImportSource: "astro",
@@ -65,20 +66,7 @@ function mdx(mdxOptions = {}) {
                 async transform(code, id) {
                   if (!id.endsWith("mdx"))
                     return;
-                  let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
-                  if (frontmatter.layout) {
-                    const { layout, ...contentProp } = frontmatter;
-                    pageContent += `
-
-export default async function({ children }) {
-const Layout = (await import(${JSON.stringify(
-                      frontmatter.layout
-                    )})).default;
-const frontmatter=${JSON.stringify(
-                      contentProp
-                    )};
-return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
-                  }
+                  const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
                   const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
                     ...mdxPluginOpts,
                     rehypePlugins: [
@@ -106,6 +94,22 @@ export const url = ${JSON.stringify(fileUrl)};`;
                   if (!moduleExports.includes("file")) {
                     code += `
 export const file = ${JSON.stringify(fileId)};`;
+                  }
+                  if (!moduleExports.includes("rawContent")) {
+                    code += `
+export function rawContent() { throw new Error(${JSON.stringify(
+                      RAW_CONTENT_ERROR
+                    )}) };`;
+                  }
+                  if (!moduleExports.includes("compiledContent")) {
+                    code += `
+export function compiledContent() { throw new Error(${JSON.stringify(
+                      COMPILED_CONTENT_ERROR
+                    )}) };`;
+                  }
+                  if (!moduleExports.includes("Content")) {
+                    code += `
+export const Content = MDXContent;`;
                   }
                   if (command === "dev") {
                     code += `

package/dist/remark-shiki.d.ts

@@ -0,0 +1,3 @@
+import type { ShikiConfig } from 'astro';
+declare const remarkShiki: ({ langs, theme, wrap }: ShikiConfig) => Promise<() => (tree: any) => void>;
+export default remarkShiki;

package/dist/remark-shiki.js

@@ -0,0 +1,58 @@
+import { getHighlighter } from "shiki";
+import { visit } from "unist-util-visit";
+const highlighterCacheAsync = /* @__PURE__ */ new Map();
+const remarkShiki = async ({ langs = [], theme = "github-dark", wrap = false }) => {
+  const cacheID = typeof theme === "string" ? theme : theme.name;
+  let highlighterAsync = highlighterCacheAsync.get(cacheID);
+  if (!highlighterAsync) {
+    highlighterAsync = getHighlighter({ theme });
+    highlighterCacheAsync.set(cacheID, highlighterAsync);
+  }
+  const highlighter = await highlighterAsync;
+  for (const lang of langs) {
+    await highlighter.loadLanguage(lang);
+  }
+  return () => (tree) => {
+    visit(tree, "code", (node) => {
+      let lang;
+      if (typeof node.lang === "string") {
+        const langExists = highlighter.getLoadedLanguages().includes(node.lang);
+        if (langExists) {
+          lang = node.lang;
+        } else {
+          console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
+          lang = "plaintext";
+        }
+      } else {
+        lang = "plaintext";
+      }
+      let html = highlighter.codeToHtml(node.value, { lang });
+      html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+      html = html.replace(
+        /style="(background-)?color: var\(--shiki-/g,
+        'style="$1color: var(--astro-code-'
+      );
+      if (node.lang === "diff") {
+        html = html.replace(
+          /<span class="line"><span style="(.*?)">([\+|\-])/g,
+          '<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+        );
+      }
+      if (wrap === false) {
+        html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
+      } else if (wrap === true) {
+        html = html.replace(
+          /style="(.*?)"/,
+          'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
+        );
+      }
+      node.type = "html";
+      node.value = html;
+      node.children = [];
+    });
+  };
+};
+var remark_shiki_default = remarkShiki;
+export {
+  remark_shiki_default as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.8.2",
+  "version": "0.10.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/prism": "^1.0.0",
+    "@astrojs/prism": "^1.0.1",
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/rollup": "^2.1.1",
     "acorn": "^8.8.0",
@@ -33,7 +33,6 @@
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
     "unist-util-visit": "^4.1.0",
@@ -43,13 +42,14 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.2",
+    "astro": "1.0.6",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",
     "mdast-util-to-string": "^3.1.0",
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
+    "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1"
   },
   "engines": {

package/src/astro-data-utils.ts

@@ -19,6 +19,44 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 		const exportNodes = [
 			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
 		];
+		if (frontmatter.layout) {
+			exportNodes.unshift(
+				jsToTreeNode(
+					/** @see 'vite-plugin-markdown' for layout props reference */
+					`import { jsx as layoutJsx } from 'astro/jsx-runtime';
+				import Layout from ${JSON.stringify(frontmatter.layout)};
+				
+				export default function ({ children }) {
+					const { layout, ...content } = frontmatter;
+					content.file = file;
+					content.url = url;
+					content.astro = {};
+					Object.defineProperty(content.astro, 'headings', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
+						}
+					});
+					Object.defineProperty(content.astro, 'html', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
+						}
+					});
+					Object.defineProperty(content.astro, 'source', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
+						}
+					});
+					return layoutJsx(Layout, {
+						content,
+						frontmatter: content,
+						headings: getHeadings(),
+						'server:root': true,
+						children,
+					});
+				};`
+				)
+			);
+		}
 		tree.children = exportNodes.concat(tree.children);
 	};
 }

package/src/index.ts

@@ -4,13 +4,13 @@ import type { AstroConfig, AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
-import remarkShikiTwoslash from 'remark-shiki-twoslash';
 import remarkSmartypants from 'remark-smartypants';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import { rehypeApplyFrontmatterExport, remarkInitializeAstroData } from './astro-data-utils.js';
 import rehypeCollectHeadings from './rehype-collect-headings.js';
 import remarkPrism from './remark-prism.js';
+import remarkShiki from './remark-shiki.js';
 import { getFileInfo, parseFrontmatter } from './utils.js';
 
 type WithExtends<T> = T | { extends: T };
@@ -26,28 +26,29 @@ const DEFAULT_REMARK_PLUGINS: MdxRollupPluginOptions['remarkPlugins'] = [
 ];
 const DEFAULT_REHYPE_PLUGINS: MdxRollupPluginOptions['rehypePlugins'] = [];
 
+const RAW_CONTENT_ERROR =
+	'MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
+
+const COMPILED_CONTENT_ERROR =
+	'MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
+
 function handleExtends<T>(config: WithExtends<T[] | undefined>, defaults: T[] = []): T[] {
 	if (Array.isArray(config)) return config;
 
 	return [...defaults, ...(config?.extends ?? [])];
 }
 
-function getRemarkPlugins(
+async function getRemarkPlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
-): MdxRollupPluginOptions['remarkPlugins'] {
+): Promise<MdxRollupPluginOptions['remarkPlugins']> {
 	let remarkPlugins = [
 		// Initialize vfile.data.astroExports before all plugins are run
 		remarkInitializeAstroData,
 		...handleExtends(mdxOptions.remarkPlugins, DEFAULT_REMARK_PLUGINS),
 	];
 	if (config.markdown.syntaxHighlight === 'shiki') {
-		// Default export still requires ".default" chaining for some reason
-		// Workarounds tried:
-		// - "import * as remarkShikiTwoslash"
-		// - "import { default as remarkShikiTwoslash }"
-		const shikiTwoslash = (remarkShikiTwoslash as any).default ?? remarkShikiTwoslash;
-		remarkPlugins.push([shikiTwoslash, config.markdown.shikiConfig]);
+		remarkPlugins.push([await remarkShiki(config.markdown.shikiConfig)]);
 	}
 	if (config.markdown.syntaxHighlight === 'prism') {
 		remarkPlugins.push(remarkPrism);
@@ -59,11 +60,11 @@ function getRehypePlugins(
 	mdxOptions: MdxOptions,
 	config: AstroConfig
 ): MdxRollupPluginOptions['rehypePlugins'] {
-	let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
+	let rehypePlugins = [
+		[rehypeRaw, { passThrough: nodeTypes }] as any,
+		...handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS),
+	];
 
-	if (config.markdown.syntaxHighlight === 'shiki' || config.markdown.syntaxHighlight === 'prism') {
-		rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
-	}
 	// getHeadings() is guaranteed by TS, so we can't allow user to override
 	rehypePlugins.unshift(rehypeCollectHeadings);
 
@@ -74,11 +75,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 	return {
 		name: '@astrojs/mdx',
 		hooks: {
-			'astro:config:setup': ({ updateConfig, config, addPageExtension, command }: any) => {
+			'astro:config:setup': async ({ updateConfig, config, addPageExtension, command }: any) => {
 				addPageExtension('.mdx');
 
 				const mdxPluginOpts: MdxRollupPluginOptions = {
-					remarkPlugins: getRemarkPlugins(mdxOptions, config),
+					remarkPlugins: await getRemarkPlugins(mdxOptions, config),
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
 					jsx: true,
 					jsxImportSource: 'astro',
@@ -98,16 +99,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								async transform(code, id) {
 									if (!id.endsWith('mdx')) return;
 
-									let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
-									if (frontmatter.layout) {
-										const { layout, ...contentProp } = frontmatter;
-										pageContent += `\n\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
-											frontmatter.layout
-										)})).default;\nconst frontmatter=${JSON.stringify(
-											contentProp
-										)};\nreturn <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
-									}
-
+									const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
 									const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
 										...mdxPluginOpts,
 										rehypePlugins: [
@@ -136,6 +128,19 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 									if (!moduleExports.includes('file')) {
 										code += `\nexport const file = ${JSON.stringify(fileId)};`;
 									}
+									if (!moduleExports.includes('rawContent')) {
+										code += `\nexport function rawContent() { throw new Error(${JSON.stringify(
+											RAW_CONTENT_ERROR
+										)}) };`;
+									}
+									if (!moduleExports.includes('compiledContent')) {
+										code += `\nexport function compiledContent() { throw new Error(${JSON.stringify(
+											COMPILED_CONTENT_ERROR
+										)}) };`;
+									}
+									if (!moduleExports.includes('Content')) {
+										code += `\nexport const Content = MDXContent;`;
+									}
 
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach

package/src/remark-shiki.ts

@@ -0,0 +1,85 @@
+import type { ShikiConfig } from 'astro';
+import type * as shiki from 'shiki';
+import { getHighlighter } from 'shiki';
+import { visit } from 'unist-util-visit';
+
+/**
+ * getHighlighter() is the most expensive step of Shiki. Instead of calling it on every page,
+ * cache it here as much as possible. Make sure that your highlighters can be cached, state-free.
+ * We make this async, so that multiple calls to parse markdown still share the same highlighter.
+ */
+const highlighterCacheAsync = new Map<string, Promise<shiki.Highlighter>>();
+
+const remarkShiki = async ({ langs = [], theme = 'github-dark', wrap = false }: ShikiConfig) => {
+	const cacheID: string = typeof theme === 'string' ? theme : theme.name;
+	let highlighterAsync = highlighterCacheAsync.get(cacheID);
+	if (!highlighterAsync) {
+		highlighterAsync = getHighlighter({ theme });
+		highlighterCacheAsync.set(cacheID, highlighterAsync);
+	}
+	const highlighter = await highlighterAsync;
+
+	// NOTE: There may be a performance issue here for large sites that use `lang`.
+	// Since this will be called on every page load. Unclear how to fix this.
+	for (const lang of langs) {
+		await highlighter.loadLanguage(lang);
+	}
+
+	return () => (tree: any) => {
+		visit(tree, 'code', (node) => {
+			let lang: string;
+
+			if (typeof node.lang === 'string') {
+				const langExists = highlighter.getLoadedLanguages().includes(node.lang);
+				if (langExists) {
+					lang = node.lang;
+				} else {
+					// eslint-disable-next-line no-console
+					console.warn(`The language "${node.lang}" doesn't exist, falling back to plaintext.`);
+					lang = 'plaintext';
+				}
+			} else {
+				lang = 'plaintext';
+			}
+
+			let html = highlighter!.codeToHtml(node.value, { lang });
+
+			// Q: Couldn't these regexes match on a user's inputted code blocks?
+			// A: Nope! All rendered HTML is properly escaped.
+			// Ex. If a user typed `<span class="line"` into a code block,
+			// It would become this before hitting our regexes:
+			// &lt;span class=&quot;line&quot;
+
+			// Replace "shiki" class naming with "astro".
+			html = html.replace('<pre class="shiki"', `<pre class="astro-code"`);
+			// Replace "shiki" css variable naming with "astro".
+			html = html.replace(
+				/style="(background-)?color: var\(--shiki-/g,
+				'style="$1color: var(--astro-code-'
+			);
+			// Add "user-select: none;" for "+"/"-" diff symbols
+			if (node.lang === 'diff') {
+				html = html.replace(
+					/<span class="line"><span style="(.*?)">([\+|\-])/g,
+					'<span class="line"><span style="$1"><span style="user-select: none;">$2</span>'
+				);
+			}
+			// Handle code wrapping
+			// if wrap=null, do nothing.
+			if (wrap === false) {
+				html = html.replace(/style="(.*?)"/, 'style="$1; overflow-x: auto;"');
+			} else if (wrap === true) {
+				html = html.replace(
+					/style="(.*?)"/,
+					'style="$1; overflow-x: auto; white-space: pre-wrap; word-wrap: break-word;"'
+				);
+			}
+
+			node.type = 'html';
+			node.value = html;
+			node.children = [];
+		});
+	};
+};
+
+export default remarkShiki;

package/test/fixtures/mdx-component/src/pages/glob.astro

@@ -0,0 +1,11 @@
+---
+const components = await Astro.glob('../components/*.mdx');
+---
+
+<div data-default-export>
+	{components.map(Component => <Component.default />)}
+</div>
+
+<div data-content-export>
+	{components.map(({ Content }) => <Content />)}
+</div>

package/test/fixtures/mdx-frontmatter/src/layouts/Base.astro

@@ -1,7 +1,11 @@
 ---
 const {
 	content = { title: "content didn't work" },
-	frontmatter = { title: "frontmatter didn't work" },
+	frontmatter = {
+		title: "frontmatter didn't work",
+		file: "file didn't work",
+		url: "url didn't work",
+	},
 	headings = [],
 } = Astro.props;
 ---
@@ -18,6 +22,8 @@ const {
 <body>
 	<p data-content-title>{content.title}</p>
 	<p data-frontmatter-title>{frontmatter.title}</p>
+	<p data-frontmatter-file>{frontmatter.file}</p>
+	<p data-frontmatter-url>{frontmatter.url}</p>
 	<p data-layout-rendered>Layout rendered!</p>
 	<ul data-headings>
 		{headings.map(heading => <li>{heading.slug}</li>)}

package/test/fixtures/mdx-frontmatter-injection/node_modules/.bin/astro

@@ -6,9 +6,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"