@astrojs/mdx 0.0.0-imgcache-20220929145446

package/test/mdx-plugins.test.js

@@ -0,0 +1,211 @@
+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';
+
+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('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;
+	});
+
+	it('respects "extendDefaultPlugins" when extending markdown', async () => {
+		const fixture = await buildFixture({
+			markdown: {
+				remarkPlugins: [remarkExamplePlugin],
+				rehypePlugins: [rehypeExamplePlugin],
+				extendDefaultPlugins: true,
+			},
+			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;
+		expect(selectGfmLink(document)).to.not.be.null;
+	});
+
+	it('extends markdown config with extendPlugins: "markdown"', async () => {
+		const fixture = await buildFixture({
+			markdown: {
+				remarkPlugins: [remarkExamplePlugin],
+				rehypePlugins: [rehypeExamplePlugin],
+			},
+			integrations: [
+				mdx({
+					extendPlugins: 'markdown',
+					remarkPlugins: [remarkToc],
+				}),
+			],
+		});
+
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectRemarkExample(document)).to.not.be.null;
+		expect(selectRehypeExample(document)).to.not.be.null;
+		expect(selectTocLink(document)).to.not.be.null;
+	});
+
+	it('extends default plugins with extendPlugins: "astroDefaults"', async () => {
+		const fixture = await buildFixture({
+			markdown: {
+				// should NOT be applied to MDX
+				remarkPlugins: [remarkToc],
+			},
+			integrations: [
+				mdx({
+					remarkPlugins: [remarkExamplePlugin],
+					rehypePlugins: [rehypeExamplePlugin],
+					extendPlugins: 'astroDefaults',
+				}),
+			],
+		});
+
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectGfmLink(document)).to.not.be.null;
+		// remark and rehype plugins still respected
+		expect(selectRemarkExample(document)).to.not.be.null;
+		expect(selectRehypeExample(document)).to.not.be.null;
+		// Does NOT inherit TOC from markdown config
+		expect(selectTocLink(document)).to.be.null;
+	});
+
+	it('does not extend default plugins with extendPlugins: false', async () => {
+		const fixture = await buildFixture({
+			markdown: {
+				remarkPlugins: [remarkExamplePlugin],
+			},
+			integrations: [
+				mdx({
+					remarkPlugins: [],
+					extendPlugins: false,
+				}),
+			],
+		});
+
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectGfmLink(document)).to.be.null;
+		expect(selectRemarkExample(document)).to.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 selectTocLink(document) {
+	return document.querySelector('ul a[href="#section-1"]');
+}
+
+function selectGfmLink(document) {
+	return document.querySelector('a[href="https://handle-me-gfm.com"]');
+}
+
+function selectRemarkExample(document) {
+	return document.querySelector('div[data-remark-plugin-works]');
+}
+
+function selectRehypeExample(document) {
+	return document.querySelector('div[data-rehype-plugin-works]');
+}

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

@@ -0,0 +1,25 @@
+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-syntax-highlighting.test.js

@@ -0,0 +1,91 @@
+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';
+
+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;
+		});
+	});
+
+	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;
+	});
+});

package/test/mdx-url-export.test.js

@@ -0,0 +1,28 @@
+import mdx from '@astrojs/mdx';
+
+import { expect } from 'chai';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX url export', () => {
+	let fixture;
+
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-url-export/', import.meta.url),
+			integrations: [mdx()],
+		});
+
+		await fixture.build();
+	});
+
+	it('generates correct urls in glob result', async () => {
+		const { urls } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(urls).to.include('/test-1');
+		expect(urls).to.include('/test-2');
+	});
+
+	it('respects "export url" overrides in glob result', async () => {
+		const { urls } = JSON.parse(await fixture.readFile('/pages.json'));
+		expect(urls).to.include('/AH!');
+	});
+});

package/test/mdx-vite-env-vars.test.js

@@ -0,0 +1,54 @@
+import { expect } from 'chai';
+import { parseHTML } from 'linkedom';
+import { loadFixture } from '../../../astro/test/test-utils.js';
+
+describe('MDX - Vite env vars', () => {
+	let fixture;
+	before(async () => {
+		fixture = await loadFixture({
+			root: new URL('./fixtures/mdx-vite-env-vars/', import.meta.url),
+		});
+		await fixture.build();
+	});
+
+	it('Avoids transforming `import.meta.env` outside JSX expressions', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('h1')?.innerHTML).to.contain('import.meta.env.SITE');
+		expect(document.querySelector('code')?.innerHTML).to.contain('import.meta.env.SITE');
+		expect(document.querySelector('pre')?.innerHTML).to.contain('import.meta.env.SITE');
+	});
+	it('Allows referencing `import.meta.env` in frontmatter', async () => {
+		const { title = '' } = JSON.parse(await fixture.readFile('/frontmatter.json'));
+		expect(title).to.contain('import.meta.env.SITE');
+	});
+	it('Transforms `import.meta.env` in {JSX expressions}', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('[data-env-site]')?.innerHTML).to.contain(
+			'https://mdx-is-neat.com/blog/cool-post'
+		);
+	});
+	it('Transforms `import.meta.env` in variable exports', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const { document } = parseHTML(html);
+
+		expect(document.querySelector('[data-env-variable-exports]')?.innerHTML).to.contain(
+			'MODE works'
+		);
+	});
+	it('Transforms `import.meta.env` in HTML attributes', async () => {
+		const html = await fixture.readFile('/vite-env-vars/index.html');
+		const { document } = parseHTML(html);
+
+		const dataAttrDump = document.querySelector('[data-env-dump]');
+		expect(dataAttrDump).to.not.be.null;
+
+		expect(dataAttrDump.getAttribute('data-env-prod')).to.not.be.null;
+		expect(dataAttrDump.getAttribute('data-env-dev')).to.be.null;
+		expect(dataAttrDump.getAttribute('data-env-base-url')).to.equal('/');
+		expect(dataAttrDump.getAttribute('data-env-mode')).to.equal('production');
+	});
+});

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "../../../tsconfig.base.json",
+  "include": ["src"],
+  "compilerOptions": {
+    "allowJs": true,
+    "module": "ES2020",
+    "outDir": "./dist",
+    "target": "ES2020"
+  }
+}