@astrojs/mdx 1.0.0-beta.2 → 1.0.0

package/src/plugins.ts

@@ -1,246 +0,0 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
-import {
-	InvalidAstroDataError,
-	safelyGetAstroData,
-} 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 { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
-import type { AstroConfig } from 'astro';
-import type { Literal, MemberExpression } from 'estree';
-import { visit as estreeVisit } from 'estree-util-visit';
-import { bold, yellow } from 'kleur/colors';
-import type { Image } from 'mdast';
-import { pathToFileURL } from 'node:url';
-import rehypeRaw from 'rehype-raw';
-import remarkGfm from 'remark-gfm';
-import remarkSmartypants from 'remark-smartypants';
-import { visit } from 'unist-util-visit';
-import type { VFile } from 'vfile';
-import { MdxOptions } from './index.js';
-import { rehypeInjectHeadingsExport } from './rehype-collect-headings.js';
-import rehypeMetaString from './rehype-meta-string.js';
-import remarkPrism from './remark-prism.js';
-import remarkShiki from './remark-shiki.js';
-import { isRelativePath, jsToTreeNode } from './utils.js';
-
-export function recmaInjectImportMetaEnvPlugin({
-	importMetaEnv,
-}: {
-	importMetaEnv: Record<string, any>;
-}) {
-	return (tree: any) => {
-		estreeVisit(tree, (node) => {
-			if (node.type === 'MemberExpression') {
-				// attempt to get "import.meta.env" variable name
-				const envVarName = getImportMetaEnvVariableName(node as MemberExpression);
-				if (typeof envVarName === 'string') {
-					// clear object keys to replace with envVarLiteral
-					for (const key in node) {
-						delete (node as any)[key];
-					}
-					const envVarLiteral: Literal = {
-						type: 'Literal',
-						value: importMetaEnv[envVarName],
-						raw: JSON.stringify(importMetaEnv[envVarName]),
-					};
-					Object.assign(node, envVarLiteral);
-				}
-			}
-		});
-	};
-}
-
-export function rehypeApplyFrontmatterExport() {
-	return function (tree: any, vfile: VFile) {
-		const astroData = safelyGetAstroData(vfile.data);
-		if (astroData instanceof InvalidAstroDataError)
-			throw new Error(
-				// Copied from Astro core `errors-data`
-				// TODO: find way to import error data from core
-				'[MDX] A remark or rehype plugin attempted to inject invalid frontmatter. Ensure "astro.frontmatter" is set to a valid JSON object that is not `null` or `undefined`.'
-			);
-		const { frontmatter } = astroData;
-		const exportNodes = [
-			jsToTreeNode(`export const frontmatter = ${JSON.stringify(frontmatter)};`),
-		];
-		if (frontmatter.layout) {
-			// NOTE(bholmesdev) 08-22-2022
-			// Using an async layout import (i.e. `const Layout = (await import...)`)
-			// Preserves the dev server import cache when globbing a large set of MDX files
-			// Full explanation: 'https://github.com/withastro/astro/pull/4428'
-			exportNodes.unshift(
-				jsToTreeNode(
-					/** @see 'vite-plugin-markdown' for layout props reference */
-					`import { jsx as layoutJsx } from 'astro/jsx-runtime';
-
-				export default async function ({ children }) {
-					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
-					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, {
-						file,
-						url,
-						content,
-						frontmatter: content,
-						headings: getHeadings(),
-						'server:root': true,
-						children,
-					});
-				};`
-				)
-			);
-		}
-		tree.children = exportNodes.concat(tree.children);
-	};
-}
-
-/**
- * `src/content/` does not support relative image paths.
- * This plugin throws an error if any are found
- */
-function toRemarkContentRelImageError({ srcDir }: { srcDir: URL }) {
-	const contentDir = new URL('content/', srcDir);
-	return function remarkContentRelImageError() {
-		return (tree: any, vfile: VFile) => {
-			const isContentFile = pathToFileURL(vfile.path).href.startsWith(contentDir.href);
-			if (!isContentFile) return;
-
-			const relImagePaths = new Set<string>();
-			visit(tree, 'image', function raiseError(node: Image) {
-				if (isRelativePath(node.url)) {
-					relImagePaths.add(node.url);
-				}
-			});
-			if (relImagePaths.size === 0) return;
-
-			const errorMessage =
-				`Relative image paths are not supported in the content/ directory. Place local images in the public/ directory and use absolute paths (see https://docs.astro.build/en/guides/images/#in-markdown-files):\n` +
-				[...relImagePaths].map((path) => JSON.stringify(path)).join(',\n');
-
-			throw new Error(errorMessage);
-		};
-	};
-}
-
-export async function getRemarkPlugins(
-	mdxOptions: MdxOptions,
-	config: AstroConfig
-): Promise<MdxRollupPluginOptions['remarkPlugins']> {
-	let remarkPlugins: PluggableList = [];
-	if (mdxOptions.syntaxHighlight === 'shiki') {
-		remarkPlugins.push([await remarkShiki(mdxOptions.shikiConfig)]);
-	}
-	if (mdxOptions.syntaxHighlight === 'prism') {
-		remarkPlugins.push(remarkPrism);
-	}
-	if (mdxOptions.gfm) {
-		remarkPlugins.push(remarkGfm);
-	}
-	if (mdxOptions.smartypants) {
-		remarkPlugins.push(remarkSmartypants);
-	}
-
-	remarkPlugins = [...remarkPlugins, ...ignoreStringPlugins(mdxOptions.remarkPlugins)];
-
-	// Apply last in case user plugins resolve relative image paths
-	remarkPlugins.push(toRemarkContentRelImageError(config));
-
-	return remarkPlugins;
-}
-
-export function getRehypePlugins(mdxOptions: MdxOptions): MdxRollupPluginOptions['rehypePlugins'] {
-	let rehypePlugins: PluggableList = [
-		// ensure `data.meta` is preserved in `properties.metastring` for rehype syntax highlighters
-		rehypeMetaString,
-		// rehypeRaw allows custom syntax highlighters to work without added config
-		[rehypeRaw, { passThrough: nodeTypes }] as any,
-	];
-
-	rehypePlugins = [
-		...rehypePlugins,
-		...ignoreStringPlugins(mdxOptions.rehypePlugins),
-		// getHeadings() is guaranteed by TS, so this must be included.
-		// We run `rehypeHeadingIds` _last_ to respect any custom IDs set by user plugins.
-		rehypeHeadingIds,
-		rehypeInjectHeadingsExport,
-		// computed from `astro.data.frontmatter` in VFile data
-		rehypeApplyFrontmatterExport,
-	];
-	return rehypePlugins;
-}
-
-function ignoreStringPlugins(plugins: any[]) {
-	let validPlugins: PluggableList = [];
-	let hasInvalidPlugin = false;
-	for (const plugin of plugins) {
-		if (typeof plugin === 'string') {
-			console.warn(yellow(`[MDX] ${bold(plugin)} not applied.`));
-			hasInvalidPlugin = true;
-		} else if (Array.isArray(plugin) && typeof plugin[0] === 'string') {
-			console.warn(yellow(`[MDX] ${bold(plugin[0])} not applied.`));
-			hasInvalidPlugin = true;
-		} else {
-			validPlugins.push(plugin);
-		}
-	}
-	if (hasInvalidPlugin) {
-		console.warn(
-			`To inherit Markdown plugins in MDX, please use explicit imports in your config instead of "strings." See Markdown docs: https://docs.astro.build/en/guides/markdown-content/#markdown-plugins`
-		);
-	}
-	return validPlugins;
-}
-
-/**
- * Check if estree entry is "import.meta.env.VARIABLE"
- * If it is, return the variable name (i.e. "VARIABLE")
- */
-function getImportMetaEnvVariableName(node: MemberExpression): string | Error {
-	try {
-		// check for ".[ANYTHING]"
-		if (node.object.type !== 'MemberExpression' || node.property.type !== 'Identifier')
-			return new Error();
-
-		const nestedExpression = node.object;
-		// check for ".env"
-		if (nestedExpression.property.type !== 'Identifier' || nestedExpression.property.name !== 'env')
-			return new Error();
-
-		const envExpression = nestedExpression.object;
-		// check for ".meta"
-		if (
-			envExpression.type !== 'MetaProperty' ||
-			envExpression.property.type !== 'Identifier' ||
-			envExpression.property.name !== 'meta'
-		)
-			return new Error();
-
-		// check for "import"
-		if (envExpression.meta.name !== 'import') return new Error();
-
-		return node.property.name;
-	} catch (e) {
-		if (e instanceof Error) {
-			return e;
-		}
-		return new Error('Unknown parsing error');
-	}
-}

package/src/rehype-collect-headings.ts

@@ -1,11 +0,0 @@
-import { MarkdownHeading, MarkdownVFile } from '@astrojs/markdown-remark';
-import { jsToTreeNode } from './utils.js';
-
-export function rehypeInjectHeadingsExport() {
-	return function (tree: any, file: MarkdownVFile) {
-		const headings: MarkdownHeading[] = file.data.__astroHeadings || [];
-		tree.children.unshift(
-			jsToTreeNode(`export function getHeadings() { return ${JSON.stringify(headings)} }`)
-		);
-	};
-}

package/src/rehype-meta-string.ts

@@ -1,17 +0,0 @@
-import { visit } from 'unist-util-visit';
-
-/**
- * Moves `data.meta` to `properties.metastring` for the `code` element node
- * as `rehype-raw` strips `data` from all nodes, which may contain useful information.
- * e.g. ```js {1:3} => metastring: "{1:3}"
- */
-export default function rehypeMetaString() {
-	return function (tree: any) {
-		visit(tree, (node) => {
-			if (node.type === 'element' && node.tagName === 'code' && node.data?.meta) {
-				node.properties ??= {};
-				node.properties.metastring = node.data.meta;
-			}
-		});
-	};
-}

package/src/remark-prism.ts

@@ -1,18 +0,0 @@
-import { runHighlighterWithAstro } from '@astrojs/prism/dist/highlighter';
-import { visit } from 'unist-util-visit';
-
-/**  */
-export default function remarkPrism() {
-	return (tree: any) =>
-		visit(tree, 'code', (node: any) => {
-			let { lang, value } = node;
-			node.type = 'html';
-
-			let { html, classLanguage } = runHighlighterWithAstro(lang, value);
-			let classes = [classLanguage];
-			node.value = `<pre class="${classes.join(
-				' '
-			)}"><code class="${classLanguage}">${html}</code></pre>`;
-			return node;
-		});
-}

package/src/remark-shiki.ts

@@ -1,95 +0,0 @@
-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 }).then((hl) => {
-			hl.setColorReplacements({
-				'#000001': 'var(--astro-code-color-text)',
-				'#000002': 'var(--astro-code-color-background)',
-				'#000004': 'var(--astro-code-token-constant)',
-				'#000005': 'var(--astro-code-token-string)',
-				'#000006': 'var(--astro-code-token-comment)',
-				'#000007': 'var(--astro-code-token-keyword)',
-				'#000008': 'var(--astro-code-token-parameter)',
-				'#000009': 'var(--astro-code-token-function)',
-				'#000010': 'var(--astro-code-token-string-expression)',
-				'#000011': 'var(--astro-code-token-punctuation)',
-				'#000012': 'var(--astro-code-token-link)',
-			});
-			return hl;
-		});
-		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="$1astro-code$2"`);
-			// 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/src/utils.ts

@@ -1,102 +0,0 @@
-import type { Options as AcornOpts } from 'acorn';
-import { parse } from 'acorn';
-import type { AstroConfig, SSRError } from 'astro';
-import matter from 'gray-matter';
-import type { MdxjsEsm } from 'mdast-util-mdx';
-
-function appendForwardSlash(path: string) {
-	return path.endsWith('/') ? path : path + '/';
-}
-
-interface FileInfo {
-	fileId: string;
-	fileUrl: string;
-}
-
-/** @see 'vite-plugin-utils' for source */
-export function getFileInfo(id: string, config: AstroConfig): FileInfo {
-	const sitePathname = appendForwardSlash(
-		config.site ? new URL(config.base, config.site).pathname : config.base
-	);
-
-	// Try to grab the file's actual URL
-	let url: URL | undefined = undefined;
-	try {
-		url = new URL(`file://${id}`);
-	} catch {}
-
-	const fileId = id.split('?')[0];
-	let fileUrl: string;
-	const isPage = fileId.includes('/pages/');
-	if (isPage) {
-		fileUrl = fileId.replace(/^.*?\/pages\//, sitePathname).replace(/(\/index)?\.mdx$/, '');
-	} else if (url && url.pathname.startsWith(config.root.pathname)) {
-		fileUrl = url.pathname.slice(config.root.pathname.length);
-	} else {
-		fileUrl = fileId;
-	}
-
-	if (fileUrl && config.trailingSlash === 'always') {
-		fileUrl = appendForwardSlash(fileUrl);
-	}
-	return { fileId, fileUrl };
-}
-
-/**
- * Match YAML exception handling from Astro core errors
- * @see 'astro/src/core/errors.ts'
- */
-export function parseFrontmatter(code: string, id: string) {
-	try {
-		return matter(code);
-	} catch (e: any) {
-		if (e.name === 'YAMLException') {
-			const err: SSRError = e;
-			err.id = id;
-			err.loc = { file: e.id, line: e.mark.line + 1, column: e.mark.column };
-			err.message = e.reason;
-			throw err;
-		} else {
-			throw e;
-		}
-	}
-}
-
-export function jsToTreeNode(
-	jsString: string,
-	acornOpts: AcornOpts = {
-		ecmaVersion: 'latest',
-		sourceType: 'module',
-	}
-): MdxjsEsm {
-	return {
-		type: 'mdxjsEsm',
-		value: '',
-		data: {
-			estree: {
-				body: [],
-				...parse(jsString, acornOpts),
-				type: 'Program',
-				sourceType: 'module',
-			},
-		},
-	};
-}
-
-// Following utils taken from `packages/astro/src/core/path.ts`:
-export function isRelativePath(path: string) {
-	return startsWithDotDotSlash(path) || startsWithDotSlash(path);
-}
-
-function startsWithDotDotSlash(path: string) {
-	const c1 = path[0];
-	const c2 = path[1];
-	const c3 = path[2];
-	return c1 === '.' && c2 === '.' && c3 === '/';
-}
-
-function startsWithDotSlash(path: string) {
-	const c1 = path[0];
-	const c2 = path[1];
-	return c1 === '.' && c2 === '/';
-}

package/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx

@@ -1,5 +0,0 @@
-# Hello world
-
-This[^1] should be visible.
-
-[^1]: And there would be a footnote.

package/test/fixtures/mdx-component/src/components/Test.mdx

@@ -1,3 +0,0 @@
-# Hello component!
-
-<div id="foo">bar</div>

package/test/fixtures/mdx-component/src/components/WithFragment.mdx

@@ -1,3 +0,0 @@
-# MDX containing `<Fragment />`
-
-<p><Fragment>bar</Fragment></p>

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

@@ -1,20 +0,0 @@
----
-import { parse } from 'node:path';
-const components = await Astro.glob('../components/*.mdx');
----
-
-<div data-default-export>
-	{components.map(Component => (
-		<div data-file={parse(Component.file).base}>
-			<Component.default />
-		</div>
-	))}
-</div>
-
-<div data-content-export>
-	{components.map(({ Content, file }) => (
-		<div data-file={parse(file).base}>
-			<Content />
-		</div>
-	))}
-</div>

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

@@ -1,5 +0,0 @@
----
-import Test from '../components/Test.mdx';
----
-
-<Test />

package/test/fixtures/mdx-component/src/pages/w-fragment.astro

@@ -1,5 +0,0 @@
----
-import WithFragment from '../components/WithFragment.mdx';
----
-
-<WithFragment />

package/test/fixtures/mdx-escape/src/components/Em.astro

@@ -1,7 +0,0 @@
-<em><slot/></em>
-
-<style>
-  em {
-    color: red;
-  }
-</style>

package/test/fixtures/mdx-escape/src/components/P.astro

@@ -1 +0,0 @@
-<p><slot /></p>

package/test/fixtures/mdx-escape/src/components/Title.astro

@@ -1 +0,0 @@
-<h1><slot/></h1>

package/test/fixtures/mdx-escape/src/pages/html-tag.mdx

@@ -1,5 +0,0 @@
-import P from '../components/P.astro';
-import Em from '../components/Em.astro';
-
-<P>Render <Em>Me</Em></P>
-<P><Em>Me</Em></P>

package/test/fixtures/mdx-escape/src/pages/index.mdx

@@ -1,13 +0,0 @@
-import P from '../components/P.astro';
-import Em from '../components/Em.astro';
-import Title from '../components/Title.astro';
-
-export const components = { p: P, em: Em, h1: Title };
-
-# Hello _there_
-
-# _there_
-
-Hello _there_
-
-_there_

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

@@ -1,38 +0,0 @@
----
-const {
-	content = { title: "content didn't work" },
-	file = "file didn't work",
-	url = "url didn't work",
-	frontmatter = {
-		title: "frontmatter didn't work",
-		file: "file didn't work",
-		url: "url didn't work",
-	},
-	headings = [],
-} = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="UTF-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-</head>
-
-<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-file>{frontmatter.file}</p>
-	<p data-url>{frontmatter.url}</p>
-	<p data-layout-rendered>Layout rendered!</p>
-	<ul data-headings>
-		{headings.map(heading => <li>{heading.slug}</li>)}
-	</ul>
-	<slot />
-</body>
-
-</html>

package/test/fixtures/mdx-frontmatter/src/pages/glob.json.js

@@ -1,9 +0,0 @@
-export async function get() {
-	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
-
-	return {
-		body: JSON.stringify({
-			titles: Object.values(mdxPages ?? {}).map(v => v?.frontmatter?.title),
-		})
-	}
-}

package/test/fixtures/mdx-frontmatter/src/pages/index.mdx

@@ -1,10 +0,0 @@
----
-title: 'Using YAML frontmatter'
-layout: '../layouts/Base.astro'
-illThrowIfIDontExist: "Oh no, that's scary!"
----
-
-{frontmatter.illThrowIfIDontExist}
-
-> Note: newline intentionally missing from the end of this file.
-> Useful since that can be the source of bugs in our compile step.

package/test/fixtures/mdx-frontmatter/src/pages/with-headings.mdx

@@ -1,7 +0,0 @@
----
-layout: '../layouts/Base.astro'
----
-
-## Section 1
-
-## Section 2

package/test/fixtures/mdx-frontmatter-injection/astro.config.mjs

@@ -1,12 +0,0 @@
-import { defineConfig } from 'astro/config';
-import mdx from '@astrojs/mdx';
-import { rehypeReadingTime, remarkDescription, remarkTitle } from './src/markdown-plugins.mjs';
-
-// https://astro.build/config
-export default defineConfig({
-  site: 'https://astro.build/',
-	integrations: [mdx({
-		remarkPlugins: [remarkTitle, remarkDescription],
-		rehypePlugins: [rehypeReadingTime],
-	})],
-});