@astrojs/mdx 1.0.0-beta.2 → 1.0.0

package/test/mdx-namespace.test.js

@@ -1,83 +0,0 @@
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-
-describe('MDX Namespace', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-namespace/', import.meta.url),
-		});
-	});
-
-	describe('build', () => {
-		before(async () => {
-			await fixture.build();
-		});
-
-		it('works for object', async () => {
-			const html = await fixture.readFile('/object/index.html');
-			const { document } = parseHTML(html);
-
-			const island = document.querySelector('astro-island');
-			const component = document.querySelector('#component');
-
-			expect(island).not.undefined;
-			expect(component.textContent).equal('Hello world');
-		});
-
-		it('works for star', async () => {
-			const html = await fixture.readFile('/star/index.html');
-			const { document } = parseHTML(html);
-
-			const island = document.querySelector('astro-island');
-			const component = document.querySelector('#component');
-
-			expect(island).not.undefined;
-			expect(component.textContent).equal('Hello world');
-		});
-	});
-
-	describe('dev', () => {
-		let devServer;
-
-		before(async () => {
-			devServer = await fixture.startDevServer();
-		});
-
-		after(async () => {
-			await devServer.stop();
-		});
-
-		it('works for object', async () => {
-			const res = await fixture.fetch('/object');
-
-			expect(res.status).to.equal(200);
-
-			const html = await res.text();
-			const { document } = parseHTML(html);
-
-			const island = document.querySelector('astro-island');
-			const component = document.querySelector('#component');
-
-			expect(island).not.undefined;
-			expect(component.textContent).equal('Hello world');
-		});
-
-		it('works for star', async () => {
-			const res = await fixture.fetch('/star');
-
-			expect(res.status).to.equal(200);
-
-			const html = await res.text();
-			const { document } = parseHTML(html);
-
-			const island = document.querySelector('astro-island');
-			const component = document.querySelector('#component');
-
-			expect(island).not.undefined;
-			expect(component.textContent).equal('Hello world');
-		});
-	});
-});

package/test/mdx-page.test.js

@@ -1,64 +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 Page', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-page/', import.meta.url),
-		});
-	});
-
-	describe('build', () => {
-		before(async () => {
-			await fixture.build();
-		});
-
-		it('works', async () => {
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const h1 = document.querySelector('h1');
-
-			expect(h1.textContent).to.equal('Hello page!');
-		});
-
-		it('injects style imports when layout is not applied', async () => {
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const stylesheet = document.querySelector('link[rel="stylesheet"]');
-
-			expect(stylesheet).to.not.be.null;
-		});
-	});
-
-	describe('dev', () => {
-		let devServer;
-
-		before(async () => {
-			devServer = await fixture.startDevServer();
-		});
-
-		after(async () => {
-			await devServer.stop();
-		});
-
-		it('works', 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');
-
-			expect(h1.textContent).to.equal('Hello page!');
-		});
-	});
-});

package/test/mdx-plugins.test.js

@@ -1,250 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-import remarkToc from 'remark-toc';
-import { visit as estreeVisit } from 'estree-util-visit';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-plugins/', import.meta.url);
-const FILE = '/with-plugins/index.html';
-
-describe('MDX plugins', () => {
-	it('supports custom remark plugins - TOC', async () => {
-		const fixture = await buildFixture({
-			integrations: [
-				mdx({
-					remarkPlugins: [remarkToc],
-				}),
-			],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectTocLink(document)).to.not.be.null;
-	});
-
-	it('Applies GFM by default', async () => {
-		const fixture = await buildFixture({
-			integrations: [mdx()],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectGfmLink(document)).to.not.be.null;
-	});
-
-	it('Applies SmartyPants by default', async () => {
-		const fixture = await buildFixture({
-			integrations: [mdx()],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		const quote = selectSmartypantsQuote(document);
-		expect(quote).to.not.be.null;
-		expect(quote.textContent).to.contain('“Smartypants” is — awesome');
-	});
-
-	it('supports custom rehype plugins', async () => {
-		const fixture = await buildFixture({
-			integrations: [
-				mdx({
-					rehypePlugins: [rehypeExamplePlugin],
-				}),
-			],
-		});
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectRehypeExample(document)).to.not.be.null;
-	});
-
-	it('extends markdown config by default', async () => {
-		const fixture = await buildFixture({
-			markdown: {
-				remarkPlugins: [remarkExamplePlugin],
-				rehypePlugins: [rehypeExamplePlugin],
-			},
-			integrations: [mdx()],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectRemarkExample(document)).to.not.be.null;
-		expect(selectRehypeExample(document)).to.not.be.null;
-	});
-
-	it('ignores string-based plugins in markdown config', async () => {
-		const fixture = await buildFixture({
-			markdown: {
-				remarkPlugins: [['remark-toc']],
-			},
-			integrations: [mdx()],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectTocLink(document)).to.be.null;
-	});
-
-	for (const extendMarkdownConfig of [true, false]) {
-		describe(`extendMarkdownConfig = ${extendMarkdownConfig}`, () => {
-			let fixture;
-			before(async () => {
-				fixture = await buildFixture({
-					markdown: {
-						remarkPlugins: [remarkToc],
-						gfm: false,
-						smartypants: false,
-					},
-					integrations: [
-						mdx({
-							extendMarkdownConfig,
-							remarkPlugins: [remarkExamplePlugin],
-							rehypePlugins: [rehypeExamplePlugin],
-						}),
-					],
-				});
-			});
-
-			it('Handles MDX plugins', async () => {
-				const html = await fixture.readFile(FILE);
-				const { document } = parseHTML(html);
-
-				expect(selectRemarkExample(document, 'MDX remark plugins not applied.')).to.not.be.null;
-				expect(selectRehypeExample(document, 'MDX rehype plugins not applied.')).to.not.be.null;
-			});
-
-			it('Handles Markdown plugins', async () => {
-				const html = await fixture.readFile(FILE);
-				const { document } = parseHTML(html);
-
-				expect(
-					selectTocLink(
-						document,
-						'`remarkToc` plugin applied unexpectedly. Should override Markdown config.'
-					)
-				).to.be.null;
-			});
-
-			it('Handles gfm', async () => {
-				const html = await fixture.readFile(FILE);
-				const { document } = parseHTML(html);
-
-				if (extendMarkdownConfig === true) {
-					expect(selectGfmLink(document), 'Does not respect `markdown.gfm` option.').to.be.null;
-				} else {
-					expect(selectGfmLink(document), 'Respects `markdown.gfm` unexpectedly.').to.not.be.null;
-				}
-			});
-
-			it('Handles smartypants', async () => {
-				const html = await fixture.readFile(FILE);
-				const { document } = parseHTML(html);
-
-				const quote = selectSmartypantsQuote(document);
-
-				if (extendMarkdownConfig === true) {
-					expect(quote.textContent, 'Does not respect `markdown.smartypants` option.').to.contain(
-						'"Smartypants" is -- awesome'
-					);
-				} else {
-					expect(quote.textContent, 'Respects `markdown.smartypants` unexpectedly.').to.contain(
-						'“Smartypants” is — awesome'
-					);
-				}
-			});
-		});
-	}
-
-	it('supports custom recma plugins', async () => {
-		const fixture = await buildFixture({
-			integrations: [
-				mdx({
-					recmaPlugins: [recmaExamplePlugin],
-				}),
-			],
-		});
-
-		const html = await fixture.readFile(FILE);
-		const { document } = parseHTML(html);
-
-		expect(selectRecmaExample(document)).to.not.be.null;
-	});
-});
-
-async function buildFixture(config) {
-	const fixture = await loadFixture({
-		root: FIXTURE_ROOT,
-		...config,
-	});
-	await fixture.build();
-	return fixture;
-}
-
-function remarkExamplePlugin() {
-	return (tree) => {
-		tree.children.push({
-			type: 'html',
-			value: '<div data-remark-plugin-works="true"></div>',
-		});
-	};
-}
-
-function rehypeExamplePlugin() {
-	return (tree) => {
-		tree.children.push({
-			type: 'element',
-			tagName: 'div',
-			properties: { 'data-rehype-plugin-works': 'true' },
-		});
-	};
-}
-
-function recmaExamplePlugin() {
-	return (tree) => {
-		estreeVisit(tree, (node) => {
-			if (
-				node.type === 'VariableDeclarator' &&
-				node.id.name === 'recmaPluginWorking' &&
-				node.init?.type === 'Literal'
-			) {
-				node.init = {
-					...(node.init ?? {}),
-					value: true,
-					raw: 'true',
-				};
-			}
-		});
-	};
-}
-
-function selectTocLink(document) {
-	return document.querySelector('ul a[href="#section-1"]');
-}
-
-function selectGfmLink(document) {
-	return document.querySelector('a[href="https://handle-me-gfm.com"]');
-}
-
-function selectSmartypantsQuote(document) {
-	return document.querySelector('blockquote');
-}
-
-function selectRemarkExample(document) {
-	return document.querySelector('div[data-remark-plugin-works]');
-}
-
-function selectRehypeExample(document) {
-	return document.querySelector('div[data-rehype-plugin-works]');
-}
-
-function selectRecmaExample(document) {
-	return document.querySelector('div[data-recma-plugin-works]');
-}

package/test/mdx-plus-react.test.js

@@ -1,25 +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 and React', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-plus-react/', import.meta.url),
-		});
-		await fixture.build();
-	});
-
-	it('can be used in the same project', async () => {
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		const p = document.querySelector('p');
-
-		expect(p.textContent).to.equal('Hello world');
-	});
-});

package/test/mdx-slots.js

@@ -1,124 +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 slots', () => {
-	let fixture;
-
-	before(async () => {
-		fixture = await loadFixture({
-			root: new URL('./fixtures/mdx-slots/', 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 defaultSlot = document.querySelector('[data-default-slot]');
-			const namedSlot = document.querySelector('[data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-
-		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 defaultSlot = document.querySelector('[data-default-export] [data-default-slot]');
-			const namedSlot = document.querySelector('[data-default-export] [data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-
-		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 defaultSlot = document.querySelector('[data-content-export] [data-default-slot]');
-			const namedSlot = document.querySelector('[data-content-export] [data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-	});
-
-	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 defaultSlot = document.querySelector('[data-default-slot]');
-			const namedSlot = document.querySelector('[data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-
-		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 defaultSlot = document.querySelector('[data-default-export] [data-default-slot]');
-			const namedSlot = document.querySelector('[data-default-export] [data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-
-		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 defaultSlot = document.querySelector('[data-content-export] [data-default-slot]');
-			const namedSlot = document.querySelector('[data-content-export] [data-named-slot]');
-
-			expect(h1.textContent).to.equal('Hello slotted component!');
-			expect(defaultSlot.textContent).to.equal('Default content.');
-			expect(namedSlot.textContent).to.equal('Content for named slot.');
-		});
-	});
-});

package/test/mdx-syntax-highlighting.test.js

@@ -1,145 +0,0 @@
-import mdx from '@astrojs/mdx';
-
-import { expect } from 'chai';
-import { parseHTML } from 'linkedom';
-import { loadFixture } from '../../../astro/test/test-utils.js';
-import shikiTwoslash from 'remark-shiki-twoslash';
-import rehypePrettyCode from 'rehype-pretty-code';
-
-const FIXTURE_ROOT = new URL('./fixtures/mdx-syntax-hightlighting/', import.meta.url);
-
-describe('MDX syntax highlighting', () => {
-	describe('shiki', () => {
-		it('works', async () => {
-			const fixture = await loadFixture({
-				root: FIXTURE_ROOT,
-				markdown: {
-					syntaxHighlight: 'shiki',
-				},
-				integrations: [mdx()],
-			});
-			await fixture.build();
-
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const shikiCodeBlock = document.querySelector('pre.astro-code');
-			expect(shikiCodeBlock).to.not.be.null;
-			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#0d1117');
-		});
-
-		it('respects markdown.shikiConfig.theme', async () => {
-			const fixture = await loadFixture({
-				root: FIXTURE_ROOT,
-				markdown: {
-					syntaxHighlight: 'shiki',
-					shikiConfig: {
-						theme: 'dracula',
-					},
-				},
-				integrations: [mdx()],
-			});
-			await fixture.build();
-
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const shikiCodeBlock = document.querySelector('pre.astro-code');
-			expect(shikiCodeBlock).to.not.be.null;
-			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#282A36');
-		});
-	});
-
-	describe('prism', () => {
-		it('works', async () => {
-			const fixture = await loadFixture({
-				root: FIXTURE_ROOT,
-				markdown: {
-					syntaxHighlight: 'prism',
-				},
-				integrations: [mdx()],
-			});
-			await fixture.build();
-
-			const html = await fixture.readFile('/index.html');
-			const { document } = parseHTML(html);
-
-			const prismCodeBlock = document.querySelector('pre.language-astro');
-			expect(prismCodeBlock).to.not.be.null;
-		});
-
-		for (const extendMarkdownConfig of [true, false]) {
-			it(`respects syntaxHighlight when extendMarkdownConfig = ${extendMarkdownConfig}`, async () => {
-				const fixture = await loadFixture({
-					root: FIXTURE_ROOT,
-					markdown: {
-						syntaxHighlight: 'shiki',
-					},
-					integrations: [
-						mdx({
-							extendMarkdownConfig,
-							syntaxHighlight: 'prism',
-						}),
-					],
-				});
-				await fixture.build();
-
-				const html = await fixture.readFile('/index.html');
-				const { document } = parseHTML(html);
-
-				const shikiCodeBlock = document.querySelector('pre.astro-code');
-				expect(shikiCodeBlock, 'Markdown config syntaxHighlight used unexpectedly').to.be.null;
-				const prismCodeBlock = document.querySelector('pre.language-astro');
-				expect(prismCodeBlock).to.not.be.null;
-			});
-		}
-	});
-
-	it('supports custom highlighter - shiki-twoslash', async () => {
-		const fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-			markdown: {
-				syntaxHighlight: false,
-			},
-			integrations: [
-				mdx({
-					remarkPlugins: [shikiTwoslash.default ?? shikiTwoslash],
-				}),
-			],
-		});
-		await fixture.build();
-
-		const html = await fixture.readFile('/index.html');
-		const { document } = parseHTML(html);
-
-		const twoslashCodeBlock = document.querySelector('pre.shiki');
-		expect(twoslashCodeBlock).to.not.be.null;
-	});
-
-	it('supports custom highlighter - rehype-pretty-code', async () => {
-		const fixture = await loadFixture({
-			root: FIXTURE_ROOT,
-			markdown: {
-				syntaxHighlight: false,
-			},
-			integrations: [
-				mdx({
-					rehypePlugins: [
-						[
-							rehypePrettyCode,
-							{
-								onVisitHighlightedLine(node) {
-									node.properties.style = 'background-color:#000000';
-								},
-							},
-						],
-					],
-				}),
-			],
-		});
-		await fixture.build();
-
-		const html = await fixture.readFile('/index.html');
-		expect(html).to.include('style="background-color:#000000"');
-	});
-});