@astrojs/mdx 1.0.0-beta.2 → 1.0.0

package/test/mdx-astro-markdown-remarkRehype.test.js

@@ -1,85 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-describe('MDX with Astro Markdown remark-rehype config', () => {
-	it('Renders footnotes with values from the default configuration', async () => {
-		const fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
-			integrations: [mdx()],
-			markdown: {
-				remarkRehype: {
-					footnoteLabel: 'Catatan kaki',
-					footnoteBackLabel: 'Kembali ke konten',
-				},
-			},
-		});
-
-		await fixture.build();
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
-		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
-			'Kembali ke konten'
-		);
-	});
-
-	it('Renders footnotes with values from custom configuration extending the default', async () => {
-		const fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
-			integrations: [
-				mdx({
-					remarkRehype: {
-						footnoteLabel: 'Catatan kaki',
-						footnoteBackLabel: 'Kembali ke konten',
-					},
-				}),
-			],
-			markdown: {
-				remarkRehype: {
-					footnoteBackLabel: 'Replace me',
-				},
-			},
-		});
-
-		await fixture.build();
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
-		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
-			'Kembali ke konten'
-		);
-	});
-
-	it('Renders footnotes with values from custom configuration without extending the default', async () => {
-		const fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-astro-markdown-remarkRehype/', import.meta.url),
-			integrations: [
-				mdx({
-					extendPlugins: 'astroDefaults',
-					remarkRehype: {
-						footnoteLabel: 'Catatan kaki',
-					},
-				}),
-			],
-			markdown: {
-				remarkRehype: {
-					footnoteBackLabel: 'Kembali ke konten',
-				},
-			},
-		});
-
-		await fixture.build();
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		expect(document.querySelector('#footnote-label').textContent).to.equal('Catatan kaki');
-		expect(document.querySelector('.data-footnote-backref').getAttribute('aria-label')).to.equal(
-			'Back to content'
-		);
-	});
-});

package/test/mdx-component.test.js

@@ -1,191 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-describe('MDX Component', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-component/', import.meta.url),
-			integrations: [mdx()],
-		});
-	});
-
-	describe('build', () => {
-		before(async () => {
-			await fixture.build();
-		});
-
-		it('supports top-level imports', async () => {
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('h1');
-			const foo = document.querySelector('#foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		it('supports glob imports - <Component.default />', async () => {
-			const html = await fixture.readFile('/glob/index.html');
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('[data-default-export] h1');
-			const foo = document.querySelector('[data-default-export] #foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		it('supports glob imports - <Content />', async () => {
-			const html = await fixture.readFile('/glob/index.html');
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('[data-content-export] h1');
-			const foo = document.querySelector('[data-content-export] #foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		describe('with <Fragment>', () => {
-			it('supports top-level imports', async () => {
-				const html = await fixture.readFile('/w-fragment/index.html');
-				const { document } = parseHTML(html);
-
-				const h1 = document.querySelector('h1');
-				const p = document.querySelector('p');
-
-				expect(h1.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-
-			it('supports glob imports - <Component.default />', async () => {
-				const html = await fixture.readFile('/glob/index.html');
-				const { document } = parseHTML(html);
-
-				const h = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] h1');
-				const p = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] p');
-
-				expect(h.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-
-			it('supports glob imports - <Content />', async () => {
-				const html = await fixture.readFile('/glob/index.html');
-				const { document } = parseHTML(html);
-
-				const h = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] h1');
-				const p = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] p');
-
-				expect(h.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-		});
-	});
-
-	describe('dev', () => {
-		let devServer;
-
-		before(async () => {
-			devServer = await fixture.startDevServer();
-		});
-
-		after(async () => {
-			await devServer.stop();
-		});
-
-		it('supports top-level imports', async () => {
-			const res = await fixture.fetch('/');
-
-			expect(res.status).to.equal(200);
-
-			const html = await res.text();
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('h1');
-			const foo = document.querySelector('#foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		it('supports glob imports - <Component.default />', async () => {
-			const res = await fixture.fetch('/glob');
-
-			expect(res.status).to.equal(200);
-
-			const html = await res.text();
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('[data-default-export] h1');
-			const foo = document.querySelector('[data-default-export] #foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		it('supports glob imports - <Content />', async () => {
-			const res = await fixture.fetch('/glob');
-
-			expect(res.status).to.equal(200);
-
-			const html = await res.text();
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('[data-content-export] h1');
-			const foo = document.querySelector('[data-content-export] #foo');
-
-			expect(h1.textContent).to.equal('Hello component!');
-			expect(foo.textContent).to.equal('bar');
-		});
-
-		describe('with <Fragment>', () => {
-			it('supports top-level imports', async () => {
-				const res = await fixture.fetch('/w-fragment');
-				expect(res.status).to.equal(200);
-
-				const html = await res.text();
-				const { document } = parseHTML(html);
-
-				const h1 = document.querySelector('h1');
-				const p = document.querySelector('p');
-
-				expect(h1.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-
-			it('supports glob imports - <Component.default />', async () => {
-				const res = await fixture.fetch('/glob');
-				expect(res.status).to.equal(200);
-
-				const html = await res.text();
-				const { document } = parseHTML(html);
-
-				const h = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] h1');
-				const p = document.querySelector('[data-default-export] [data-file="WithFragment.mdx"] p');
-
-				expect(h.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-
-			it('supports glob imports - <Content />', async () => {
-				const res = await fixture.fetch('/glob');
-				expect(res.status).to.equal(200);
-
-				const html = await res.text();
-				const { document } = parseHTML(html);
-
-				const h = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] h1');
-				const p = document.querySelector('[data-content-export] [data-file="WithFragment.mdx"] p');
-
-				expect(h.textContent).to.equal('MDX containing <Fragment />');
-				expect(p.textContent).to.equal('bar');
-			});
-		});
-	});
-});

package/test/mdx-escape.test.js

@@ -1,32 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-escape/', import.meta.url);
-
-describe('MDX frontmatter', () => {
-	let fixture;
-	before(async () => {
-		fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-			integrations: [mdx()],
-		});
-		await fixture.build();
-	});
-
-	it('does not have unescaped HTML at top-level', async () => {
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		expect(document.body.textContent).to.not.include('<em');
-	});
-
-	it('does not have unescaped HTML inside html tags', async () => {
-		const html = await fixture.readFile('/html-tag/index.html');
-		const { document } = parseHTML(html);
-
-		expect(document.body.textContent).to.not.include('<em');
-	});
-});

package/test/mdx-frontmatter-injection.test.js

@@ -1,53 +0,0 @@
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter-injection/', import.meta.url);
-
-describe('MDX frontmatter injection', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-		});
-		await fixture.build();
-	});
-
-	it('remark supports custom vfile data - get title', async () => {
-		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
-		const titles = frontmatterByPage.map((frontmatter = {}) => frontmatter.title);
-		expect(titles).to.contain('Page 1');
-		expect(titles).to.contain('Page 2');
-	});
-
-	it('rehype supports custom vfile data - reading time', async () => {
-		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
-		const readingTimes = frontmatterByPage.map(
-			(frontmatter = {}) => frontmatter.injectedReadingTime
-		);
-		expect(readingTimes.length).to.be.greaterThan(0);
-		for (let readingTime of readingTimes) {
-			expect(readingTime).to.not.be.null;
-			expect(readingTime.text).match(/^\d+ min read/);
-		}
-	});
-
-	it('allow user frontmatter mutation', async () => {
-		const frontmatterByPage = JSON.parse(await fixture.readFile('/glob.json'));
-		const descriptions = frontmatterByPage.map((frontmatter = {}) => frontmatter.description);
-		expect(descriptions).to.contain('Processed by remarkDescription plugin: Page 1 description');
-		expect(descriptions).to.contain('Processed by remarkDescription plugin: Page 2 description');
-	});
-
-	it('passes injected frontmatter to layouts', async () => {
-		const html1 = await fixture.readFile('/page-1/index.html');
-		const html2 = await fixture.readFile('/page-2/index.html');
-
-		const title1 = parseHTML(html1).document.querySelector('title');
-		const title2 = parseHTML(html2).document.querySelector('title');
-
-		expect(title1.innerHTML).to.equal('Page 1');
-		expect(title2.innerHTML).to.equal('Page 2');
-	});
-});

package/test/mdx-frontmatter.test.js

@@ -1,77 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter/', import.meta.url);
-
-describe('MDX frontmatter', () => {
-	let fixture;
-	before(async () => {
-		fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-			integrations: [mdx()],
-		});
-		await fixture.build();
-	});
-	it('builds when "frontmatter.property" is in JSX expression', async () => {
-		expect(true).to.equal(true);
-	});
-
-	it('extracts frontmatter to "frontmatter" export', async () => {
-		const { titles } = JSON.parse(await fixture.readFile('/glob.json'));
-		expect(titles).to.include('Using YAML frontmatter');
-	});
-
-	it('renders layout from "layout" frontmatter property', async () => {
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		const layoutParagraph = document.querySelector('[data-layout-rendered]');
-
-		expect(layoutParagraph).to.not.be.null;
-	});
-
-	it('passes frontmatter to layout via "content" and "frontmatter" props', async () => {
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		const contentTitle = document.querySelector('[data-content-title]');
-		const frontmatterTitle = document.querySelector('[data-frontmatter-title]');
-
-		expect(contentTitle.textContent).to.equal('Using YAML frontmatter');
-		expect(frontmatterTitle.textContent).to.equal('Using YAML frontmatter');
-	});
-
-	it('passes headings to layout via "headings" prop', async () => {
-		const html = await fixture.readFile('/with-headings/index.html');
-		const { document } = parseHTML(html);
-
-		const headingSlugs = [...document.querySelectorAll('[data-headings] > li')].map(
-			(el) => el.textContent
-		);
-
-		expect(headingSlugs.length).to.be.greaterThan(0);
-		expect(headingSlugs).to.contain('section-1');
-		expect(headingSlugs).to.contain('section-2');
-	});
-
-	it('passes "file" and "url" to layout', async () => {
-		const html = await fixture.readFile('/with-headings/index.html');
-		const { document } = parseHTML(html);
-
-		const frontmatterFile = document.querySelector('[data-frontmatter-file]')?.textContent;
-		const frontmatterUrl = document.querySelector('[data-frontmatter-url]')?.textContent;
-		const file = document.querySelector('[data-file]')?.textContent;
-		const url = document.querySelector('[data-url]')?.textContent;
-
-		expect(frontmatterFile?.endsWith('with-headings.mdx')).to.equal(
-			true,
-			'"file" prop does not end with correct path or is undefined'
-		);
-		expect(frontmatterUrl).to.equal('/with-headings');
-		expect(file).to.equal(frontmatterFile);
-		expect(url).to.equal(frontmatterUrl);
-	});
-});

package/test/mdx-get-headings.test.js

@@ -1,151 +0,0 @@
-import { rehypeHeadingIds } from '@astrojs/markdown-remark';
-import mdx from '@astrojs/mdx';
-import { visit } from 'unist-util-visit';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-describe('MDX getHeadings', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
-			integrations: [mdx()],
-		});
-
-		await fixture.build();
-	});
-
-	it('adds anchor IDs to headings', async () => {
-		const html = await fixture.readFile('/test/index.html');
-		const { document } = parseHTML(html);
-
-		const h2Ids = document.querySelectorAll('h2').map((el) => el?.id);
-		const h3Ids = document.querySelectorAll('h3').map((el) => el?.id);
-		expect(document.querySelector('h1').id).to.equal('heading-test');
-		expect(h2Ids).to.contain('section-1');
-		expect(h2Ids).to.contain('section-2');
-		expect(h3Ids).to.contain('subsection-1');
-		expect(h3Ids).to.contain('subsection-2');
-	});
-
-	it('generates correct getHeadings() export', async () => {
-		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
-		// TODO: make this a snapshot test :)
-		expect(JSON.stringify(headingsByPage['./test.mdx'])).to.equal(
-			JSON.stringify([
-				{ depth: 1, slug: 'heading-test', text: 'Heading test' },
-				{ depth: 2, slug: 'section-1', text: 'Section 1' },
-				{ depth: 3, slug: 'subsection-1', text: 'Subsection 1' },
-				{ depth: 3, slug: 'subsection-2', text: 'Subsection 2' },
-				{ depth: 2, slug: 'section-2', text: 'Section 2' },
-			])
-		);
-	});
-
-	it('generates correct getHeadings() export for JSX expressions', async () => {
-		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
-		expect(JSON.stringify(headingsByPage['./test-with-jsx-expressions.mdx'])).to.equal(
-			JSON.stringify([
-				{
-					depth: 1,
-					slug: 'heading-test-with-jsx-expressions',
-					text: 'Heading test with JSX expressions',
-				},
-				{ depth: 2, slug: 'h2title', text: 'h2Title' },
-				{ depth: 3, slug: 'h3title', text: 'h3Title' },
-			])
-		);
-	});
-});
-
-describe('MDX heading IDs can be customized by user plugins', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
-			integrations: [mdx()],
-			markdown: {
-				rehypePlugins: [
-					() => (tree) => {
-						let count = 0;
-						visit(tree, 'element', (node, index, parent) => {
-							if (!/^h\d$/.test(node.tagName)) return;
-							if (!node.properties?.id) {
-								node.properties = { ...node.properties, id: String(count++) };
-							}
-						});
-					},
-				],
-			},
-		});
-
-		await fixture.build();
-	});
-
-	it('adds user-specified IDs to HTML output', async () => {
-		const html = await fixture.readFile('/test/index.html');
-		const { document } = parseHTML(html);
-
-		const h1 = document.querySelector('h1');
-		expect(h1?.textContent).to.equal('Heading test');
-		expect(h1?.getAttribute('id')).to.equal('0');
-
-		const headingIDs = document.querySelectorAll('h1,h2,h3').map((el) => el.id);
-		expect(JSON.stringify(headingIDs)).to.equal(
-			JSON.stringify(Array.from({ length: headingIDs.length }, (_, idx) => String(idx)))
-		);
-	});
-
-	it('generates correct getHeadings() export', async () => {
-		const { headingsByPage } = JSON.parse(await fixture.readFile('/pages.json'));
-		expect(JSON.stringify(headingsByPage['./test.mdx'])).to.equal(
-			JSON.stringify([
-				{ depth: 1, slug: '0', text: 'Heading test' },
-				{ depth: 2, slug: '1', text: 'Section 1' },
-				{ depth: 3, slug: '2', text: 'Subsection 1' },
-				{ depth: 3, slug: '3', text: 'Subsection 2' },
-				{ depth: 2, slug: '4', text: 'Section 2' },
-			])
-		);
-	});
-});
-
-describe('MDX heading IDs can be injected before user plugins', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-get-headings/', import.meta.url),
-			integrations: [
-				mdx({
-					rehypePlugins: [
-						rehypeHeadingIds,
-						() => (tree) => {
-							visit(tree, 'element', (node, index, parent) => {
-								if (!/^h\d$/.test(node.tagName)) return;
-								if (node.properties?.id) {
-									node.children.push({ type: 'text', value: ' ' + node.properties.id });
-								}
-							});
-						},
-					],
-				}),
-			],
-		});
-
-		await fixture.build();
-	});
-
-	it('adds user-specified IDs to HTML output', async () => {
-		const html = await fixture.readFile('/test/index.html');
-		const { document } = parseHTML(html);
-
-		const h1 = document.querySelector('h1');
-		expect(h1?.textContent).to.equal('Heading test heading-test');
-		expect(h1?.id).to.equal('heading-test');
-	});
-});

package/test/mdx-get-static-paths.test.js

@@ -1,32 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-import * as cheerio from 'cheerio';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-get-static-paths', import.meta.url);
-
-describe('getStaticPaths', () => {
-	/** @type {import('astro/test/test-utils').Fixture} */
-	let fixture;
-	before(async () => {
-		fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-			integrations: [mdx()],
-		});
-		await fixture.build();
-	});
-
-	it('Provides file and url', async () => {
-		const html = await fixture.readFile('/one/index.html');
-
-		const $ = cheerio.load(html);
-		expect($('p').text()).to.equal('First mdx file');
-		expect($('#one').text()).to.equal('hello', 'Frontmatter included');
-		expect($('#url').text()).to.equal('/src/content/1.mdx', 'url is included');
-		expect($('#file').text()).to.contain(
-			'fixtures/mdx-get-static-paths/src/content/1.mdx',
-			'file is included'
-		);
-	});
-});

package/test/mdx-infinite-loop.test.js

@@ -1,30 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-describe('MDX Infinite Loop', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-infinite-loop/', import.meta.url),
-			integrations: [mdx()],
-		});
-	});
-
-	describe('build', () => {
-		let err;
-		before(async () => {
-			try {
-				await fixture.build();
-			} catch (e) {
-				err = e;
-			}
-		});
-
-		it('does not hang forever if an error is thrown', async () => {
-			expect(!!err).to.be.true;
-		});
-	});
-});