@astrojs/mdx 0.19.1 → 0.19.3

package/src/utils.ts

@@ -1,108 +0,0 @@
-import type { PluggableList } from '@mdx-js/mdx/lib/core.js';
-import type { Options as AcornOpts } from 'acorn';
-import { parse } from 'acorn';
-import type { AstroConfig, SSRError } from 'astro';
-import matter from 'gray-matter';
-import { bold, yellow } from 'kleur/colors';
-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',
-			},
-		},
-	};
-}
-
-export function ignoreStringPlugins(plugins: any[]): PluggableList {
-	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;
-}

package/test/css-head-mdx.test.js

@@ -1,98 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-import * as cheerio from 'cheerio';
-
-describe('Head injection w/ MDX', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/css-head-mdx/', import.meta.url),
-			integrations: [mdx()],
-		});
-	});
-
-	describe('build', () => {
-		before(async () => {
-			await fixture.build();
-		});
-
-		it('only injects contents into head', async () => {
-			const html = await fixture.readFile('/indexThree/index.html');
-			const { document } = parseHTML(html);
-
-			const links = document.querySelectorAll('head link[rel=stylesheet]');
-			expect(links).to.have.a.lengthOf(1);
-
-			const scripts = document.querySelectorAll('head script[type=module]');
-			expect(scripts).to.have.a.lengthOf(1);
-		});
-
-		it('injects into the head for content collections', async () => {
-			const html = await fixture.readFile('/posts/test/index.html');
-			const { document } = parseHTML(html);
-
-			const links = document.querySelectorAll('head link[rel=stylesheet]');
-			expect(links).to.have.a.lengthOf(1);
-		});
-
-		it('injects content from a component using Content#render()', async () => {
-			const html = await fixture.readFile('/DirectContentUsage/index.html');
-			const { document } = parseHTML(html);
-
-			const links = document.querySelectorAll('head link[rel=stylesheet]');
-			expect(links).to.have.a.lengthOf(1);
-
-			const scripts = document.querySelectorAll('head script[type=module]');
-			expect(scripts).to.have.a.lengthOf(2);
-		});
-
-		it('Using component using slots.render() API', async () => {
-			const html = await fixture.readFile('/remote/index.html');
-			const { document } = parseHTML(html);
-
-			const links = document.querySelectorAll('head link[rel=stylesheet]');
-			expect(links).to.have.a.lengthOf(1);
-		});
-
-		it('Using component but no layout', async () => {
-			const html = await fixture.readFile('/noLayoutWithComponent/index.html');
-			// Using cheerio here because linkedom doesn't support head tag injection
-			const $ = cheerio.load(html);
-
-			const headLinks = $('head link[rel=stylesheet]');
-			expect(headLinks).to.have.a.lengthOf(1);
-
-			const bodyLinks = $('body link[rel=stylesheet]');
-			expect(bodyLinks).to.have.a.lengthOf(0);
-		});
-
-		it('JSX component rendering Astro children within head buffering phase', async () => {
-			const html = await fixture.readFile('/posts/using-component/index.html');
-			// Using cheerio here because linkedom doesn't support head tag injection
-			const $ = cheerio.load(html);
-
-			const headLinks = $('head link[rel=stylesheet]');
-			expect(headLinks).to.have.a.lengthOf(1);
-
-			const bodyLinks = $('body link[rel=stylesheet]');
-			expect(bodyLinks).to.have.a.lengthOf(0);
-		});
-
-		it('Injection caused by delayed slots', async () => {
-			const html = await fixture.readFile('/componentwithtext/index.html');
-
-			// Using cheerio here because linkedom doesn't support head tag injection
-			const $ = cheerio.load(html);
-
-			const headLinks = $('head link[rel=stylesheet]');
-			expect(headLinks).to.have.a.lengthOf(1);
-
-			const bodyLinks = $('body link[rel=stylesheet]');
-			expect(bodyLinks).to.have.a.lengthOf(0);
-		});
-	});
-});

package/test/fixtures/css-head-mdx/node_modules/.bin/astro

@@ -1,17 +0,0 @@
-#!/bin/sh
-basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
-
-case `uname` in
-    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-esac
-
-if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
-else
-  export NODE_PATH="/home/runner/work/astro/astro/packages/astro/node_modules:/home/runner/work/astro/astro/packages/node_modules:/home/runner/work/astro/astro/node_modules:/home/runner/work/astro/node_modules:/home/runner/work/node_modules:/home/runner/node_modules:/home/node_modules:/node_modules:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules:$NODE_PATH"
-fi
-if [ -x "$basedir/node" ]; then
-  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
-else
-  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
-fi

package/test/fixtures/css-head-mdx/package.json

@@ -1,10 +0,0 @@
-{
-  "name": "@test/mdx-css-head-mdx",
-  "version": "0.0.0",
-  "private": true,
-  "dependencies": {
-    "astro": "workspace:*",
-    "@astrojs/mdx": "workspace:*",
-    "astro-remote": "0.2.3"
-  }
-}

package/test/fixtures/css-head-mdx/src/components/BaseHead.astro

@@ -1,11 +0,0 @@
----
-const { title } = Astro.props;
----
-<meta charset="UTF-8" />
-<meta name="viewport" content="width=device-width" />
-<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-<meta name="generator" content={Astro.generator} />
-<title>{title}</title>
-<style is:global>
-	@import "../styles/global.css";
-</style>

package/test/fixtures/css-head-mdx/src/components/BasicBlock.astro

@@ -1,14 +0,0 @@
----
-const { inlineStyle, title, display = 'horizontal' } = Astro.props;
-const lineEnding = display === 'horizontal' ? ', ' : '<br>';
----
-
-{title && <h2 set:html={title} />}
-<address style={inlineStyle}>
-	<span class="name">some name</span><Fragment set:html={lineEnding} />
-	line 1<Fragment set:html={lineEnding} />
-	line 2<Fragment set:html={lineEnding} />
-	line 3<Fragment set:html={lineEnding} />
-	line 4<Fragment set:html={lineEnding} />
-	line 5
-</address>

package/test/fixtures/css-head-mdx/src/components/GenericComponent.astro

@@ -1 +0,0 @@
-<span>just a generic component</span>

package/test/fixtures/css-head-mdx/src/components/HelloWorld.astro

@@ -1,11 +0,0 @@
----
----
-
-<h3>Hello world!!</h3>
-<slot />
-
-<style>h3 { color: red }</style>
-
-<script>
-console.log('hellooooo')
-</script>

package/test/fixtures/css-head-mdx/src/components/MDXWrapper.astro

@@ -1,9 +0,0 @@
----
-import Component from "./GenericComponent.astro";
----
-
-<div>
-	<slot name="title" />
-	<slot name="intro" class="inline" />
-  <Component />
-</div>

package/test/fixtures/css-head-mdx/src/components/P.astro

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

package/test/fixtures/css-head-mdx/src/components/SmallCaps.astro

@@ -1,3 +0,0 @@
----
----
-<span style={{fontVariant: "small-caps"}}><slot /></span>

package/test/fixtures/css-head-mdx/src/components/UsingMdx.astro

@@ -1,8 +0,0 @@
----
-import { getEntryBySlug } from 'astro:content';
-
-const launchWeek = await getEntryBySlug('blog', 'using-mdx');
-const { Content } = await launchWeek.render();
----
-
-<Content />

package/test/fixtures/css-head-mdx/src/components/WithHoistedScripts.astro

@@ -1,6 +0,0 @@
----
----
-
-<script>
-	console.log('hoisted')
-	</script>

package/test/fixtures/css-head-mdx/src/content/blog/_styles.css

@@ -1,3 +0,0 @@
-body {
-  color: red !important;
-}

package/test/fixtures/css-head-mdx/src/content/blog/using-mdx.mdx

@@ -1,6 +0,0 @@
-import './_styles.css';
-import WithHoistedScripts from '../../components/WithHoistedScripts.astro';
-
-# Using mdx
-
-<WithHoistedScripts />

package/test/fixtures/css-head-mdx/src/content/posts/test.mdx

@@ -1,5 +0,0 @@
----
-title: Testing
----
-
-<SmallCaps>A test file</SmallCaps>

package/test/fixtures/css-head-mdx/src/content/posts/using-component.mdx

@@ -1,13 +0,0 @@
----
-title: testing
----
-import MDXWrapper from "../../components/MDXWrapper.astro";
-
-<MDXWrapper>
-  <h1 slot="title">
-    testing
-  </h1>
-  <div slot="intro">
-    Intro
-  </div>
-</MDXWrapper>

package/test/fixtures/css-head-mdx/src/layouts/ContentLayout.astro

@@ -1,18 +0,0 @@
----
-import BaseHead from "../components/BaseHead.astro";
-export interface Props {
-	title: string;
-}
-
-const { title } = Astro.props;
----
-
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<BaseHead title={title} />
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>

package/test/fixtures/css-head-mdx/src/layouts/DocumentLayout.astro

@@ -1,15 +0,0 @@
----
-// Extend the BaseLayout, adding space for a banner at the top of the page
-// after the main heading, then the detail for the actual page
-import ContentLayout from './ContentLayout.astro';
-const { frontmatter } = Astro.props;
----
-
-<ContentLayout>
-	<div class="content-container">
-		<article id="main-content" class="pad-z5 flow">
-			<h1 set:html={frontmatter.pageHeading ? frontmatter.pageHeading : frontmatter.title} />
-			<slot />
-		</article>
-	</div>
-</ContentLayout>

package/test/fixtures/css-head-mdx/src/layouts/One.astro

@@ -1,15 +0,0 @@
----
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<slot />
-	</body>
-</html>

package/test/fixtures/css-head-mdx/src/layouts/Three.astro

@@ -1,6 +0,0 @@
----
-import Two from './Two.astro'
----
-<Two>
-<slot />
-</Two>

package/test/fixtures/css-head-mdx/src/layouts/Two.astro

@@ -1,6 +0,0 @@
----
-import One from './One.astro'
----
-<One>
-<slot />
-</One>

package/test/fixtures/css-head-mdx/src/pages/DirectContentUsage.astro

@@ -1,17 +0,0 @@
----
-import UsingMdx from '../components/UsingMdx.astro'
----
-
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-		<meta name="viewport" content="width=device-width" />
-		<meta name="generator" content={Astro.generator} />
-		<title>Astro</title>
-	</head>
-	<body>
-		<h1>Astro</h1>
-		<UsingMdx />
-	</body>
-</html>

package/test/fixtures/css-head-mdx/src/pages/componentwithtext.mdx

@@ -1,12 +0,0 @@
----
-layout: ../layouts/DocumentLayout.astro
-title: blah blah
----
-
-import BasicBlock from '../components/BasicBlock.astro';
-
-Some text for a paragraph.
-
-<BasicBlock title="This causes css in wrong place." />
-
-Some other text.

package/test/fixtures/css-head-mdx/src/pages/indexOne.astro

@@ -1,10 +0,0 @@
----
-import One from '../layouts/One.astro'
-
-import { Content } from '../test.mdx'
----
-
-<One>
-	<h1>Astro</h1>
-	<Content />
-</One>

package/test/fixtures/css-head-mdx/src/pages/indexThree.astro

@@ -1,10 +0,0 @@
----
-import Three from '../layouts/Three.astro'
-
-import { Content } from '../test.mdx'
----
-
-<Three>
-	<h1>Astro</h1>
-	<Content />
-</Three>

package/test/fixtures/css-head-mdx/src/pages/indexTwo.astro

@@ -1,10 +0,0 @@
----
-import Two from '../layouts/Two.astro'
-
-import { Content } from '../test.mdx'
----
-
-<Two>
-	<h1>Astro</h1>
-	<Content />
-</Two>

package/test/fixtures/css-head-mdx/src/pages/noLayoutWithComponent.mdx

@@ -1,22 +0,0 @@
----
-title: 'Lorem'
-description: 'Lorem ipsum dolor sit amet'
-pubDate: 'Jul 02 2022'
----
-
-import MyComponent from '../components/HelloWorld.astro';
-
-
-## Lorem
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-## Lorem 2
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-
-<MyComponent />
-
-## Lorem 3
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

package/test/fixtures/css-head-mdx/src/pages/posts/[post].astro

@@ -1,18 +0,0 @@
----
-import { getCollection } from 'astro:content';
-import Layout from '../../layouts/ContentLayout.astro';
-import SmallCaps from '../../components/SmallCaps.astro';
-
-export async function getStaticPaths() {
-  const entries = await getCollection('posts');
-  return entries.map(entry => {
-    return {params: { post: entry.slug }, props: { entry },
-  }});
-}
-
-const { entry } = Astro.props;
-const { Content } = await entry.render();
----
-<Layout title="">
-  <Content components={{ SmallCaps }} />
-</Layout>

package/test/fixtures/css-head-mdx/src/pages/remote.astro

@@ -1,17 +0,0 @@
----
-import '../styles/global.css'
-import Layout from '../layouts/One.astro';
-import Paragraph from '../components/P.astro';
-import { Markdown } from 'astro-remote'
----
-
-<Layout title="Welcome to Astro.">
-	<main>
-		<Markdown
-      components={{
-				p: Paragraph,
-      }}>
-			**Removing p component fixes the problem**
-			</Markdown>
-	</main>
-</Layout>

package/test/fixtures/css-head-mdx/src/pages/testOne.mdx

@@ -1,15 +0,0 @@
----
-layout: '../layouts/One.astro'
-title: "hello world"
-publishDate: "2023-01-01"
----
-
-import HelloWorld from '../components/HelloWorld.astro';
-
-# Test
-
-123
-
-<HelloWorld />
-
-456

package/test/fixtures/css-head-mdx/src/pages/testThree.mdx

@@ -1,15 +0,0 @@
----
-layout: '../layouts/Three.astro'
-title: "hello world"
-publishDate: "2023-01-01"
----
-
-import HelloWorld from '../components/HelloWorld.astro';
-
-# Test
-
-123
-
-<HelloWorld />
-
-456

package/test/fixtures/css-head-mdx/src/pages/testTwo.mdx

@@ -1,15 +0,0 @@
----
-layout: '../layouts/Two.astro'
-title: "hello world"
-publishDate: "2023-01-01"
----
-
-import HelloWorld from '../components/HelloWorld.astro';
-
-# Test
-
-123
-
-<HelloWorld />
-
-456

package/test/fixtures/css-head-mdx/src/styles/global.css

@@ -1,3 +0,0 @@
-html {
-	font-weight: bolder;
-}

package/test/fixtures/css-head-mdx/src/test.mdx

@@ -1,14 +0,0 @@
----
-title: "hello world"
-publishDate: "2023-01-01"
----
-
-import HelloWorld from './components/HelloWorld.astro';
-
-# Test
-
-123
-
-<HelloWorld />
-
-456

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>