npm - @astrojs/mdx - Versions diffs - 0.8.2 → 0.10.0 - Mend

@astrojs/mdx 0.8.2 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (80) hide show

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

@@ -0,0 +1,17 @@
+---
+const defaults = { title: 'Frontmatter not passed to layout!' }
+const { frontmatter = defaults, content = defaults } = 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">
+  <title>{frontmatter.title}</title>
+</head>
+<body>
+  <slot />
+</body>
+</html>

package/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx CHANGED Viewed

@@ -1,3 +1,7 @@
+---
+layout: '../layouts/Base.astro'
+---
 # Page 1
 Look at that!

package/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx CHANGED Viewed

@@ -1,3 +1,7 @@
+---
+layout: '../layouts/Base.astro'
+---
 # Page 2
 ## Table of contents

package/test/fixtures/mdx-namespace/astro.config.mjs ADDED Viewed

@@ -0,0 +1,6 @@
+import mdx from '@astrojs/mdx';
+import react from '@astrojs/react';
+export default {
+	integrations: [react(), mdx()]
+}

package/test/fixtures/mdx-namespace/node_modules/.bin/astro ADDED Viewed

@@ -0,0 +1,17 @@
+#!/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/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"
+else
+  exec node  "$basedir/../../../../../../../astro/astro.js" "$@"
+fi

package/test/fixtures/mdx-namespace/package.json ADDED Viewed

@@ -0,0 +1,8 @@
+{
+  "name": "@test/mdx-namespace",
+  "dependencies": {
+    "astro": "workspace:*",
+    "@astrojs/mdx": "workspace:*",
+    "@astrojs/react": "workspace:*"
+  }
+}

package/test/fixtures/mdx-namespace/src/components/Component.jsx ADDED Viewed

@@ -0,0 +1,6 @@
+const Component = () => {
+  return <p id="component">Hello world</p>;
+};
+export const ns = {
+	Component
+}

package/test/fixtures/mdx-namespace/src/pages/object.mdx ADDED Viewed

@@ -0,0 +1,3 @@
+import * as mod from '../components/Component.jsx';
+<mod.ns.Component client:load />

package/test/fixtures/mdx-namespace/src/pages/star.mdx ADDED Viewed

@@ -0,0 +1,3 @@
+import { ns } from '../components/Component.jsx';
+<ns.Component client:load />

package/test/fixtures/mdx-page/node_modules/.bin/astro CHANGED Viewed

@@ -6,9 +6,9 @@ case `uname` in
 esac
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/fixtures/mdx-plus-react/node_modules/.bin/astro CHANGED Viewed

@@ -6,9 +6,9 @@ case `uname` in
 esac
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="$NODE_PATH:/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
+  export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../../../../../../../astro/astro.js" "$@"

package/test/mdx-component.test.js CHANGED Viewed

@@ -19,7 +19,7 @@ describe('MDX Component', () => {
 			await fixture.build();
 		});
-		it('works', async () => {
+		it('supports top-level imports', async () => {
 			const html = await fixture.readFile('/index.html');
 			const { document } = parseHTML(html);
@@ -29,6 +29,28 @@ describe('MDX Component', () => {
 			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('dev', () => {
@@ -42,7 +64,7 @@ describe('MDX Component', () => {
 			await devServer.stop();
 		});
-		it('works', async () => {
+		it('supports top-level imports', async () => {
 			const res = await fixture.fetch('/');
 			expect(res.status).to.equal(200);
@@ -56,5 +78,35 @@ describe('MDX Component', () => {
 			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');
+		});
 	});
 });

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

@@ -1,4 +1,5 @@
 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);
@@ -41,4 +42,15 @@ describe('MDX frontmatter injection', () => {
 		expect(titles).to.contain('Overridden title');
 		expect(readingTimes).to.contain('1000 min read');
 	});
+	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 CHANGED Viewed

@@ -56,4 +56,18 @@ describe('MDX frontmatter', () => {
 		expect(headingSlugs).to.contain('section-1');
 		expect(headingSlugs).to.contain('section-2');
 	});
+	it('passes "file" and "url" to layout via frontmatter', 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;
+		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');
+	});
 });

package/test/mdx-namespace.test.js ADDED Viewed

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

@@ -3,6 +3,7 @@ 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);
@@ -21,8 +22,9 @@ describe('MDX syntax highlighting', () => {
 			const html = await fixture.readFile('/index.html');
 			const { document } = parseHTML(html);
-			const shikiCodeBlock = document.querySelector('pre.shiki');
+			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 () => {
@@ -41,8 +43,9 @@ describe('MDX syntax highlighting', () => {
 			const html = await fixture.readFile('/index.html');
 			const { document } = parseHTML(html);
-			const shikiCodeBlock = document.querySelector('pre.shiki.dracula');
+			const shikiCodeBlock = document.querySelector('pre.astro-code');
 			expect(shikiCodeBlock).to.not.be.null;
+			expect(shikiCodeBlock.getAttribute('style')).to.contain('background-color:#282A36');
 		});
 	});
@@ -64,4 +67,25 @@ describe('MDX syntax highlighting', () => {
 			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/fixtures/mdx-component/dist/index.html DELETED Viewed

@@ -1,3 +0,0 @@
-<!DOCTYPE html>
-<h1 id="hello-component">Hello component!</h1>
-<div id="foo">bar</div>

package/test/fixtures/mdx-component/node_modules/.vite/deps_temp/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"type":"module"}

package/test/fixtures/mdx-custom-frontmatter-name/dist/glob.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"titles":["Using YAML frontmatter"]}

package/test/fixtures/mdx-custom-frontmatter-name/dist/index.html DELETED Viewed

	@@ -1 +0,0 @@
1	- <!DOCTYPE html><h1 id="customfrontmatterillthrowifidontexist">Oh no, that's scary!</h1>

package/test/fixtures/mdx-custom-frontmatter-name/node_modules/.vite/deps_temp/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"type":"module"}

package/test/fixtures/mdx-frontmatter/dist/glob.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"titles":["Using YAML frontmatter",null]}

package/test/fixtures/mdx-frontmatter/dist/index.html DELETED Viewed

@@ -1,17 +0,0 @@
-<!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>Using YAML frontmatter</p>
-	<p data-frontmatter-title>Using YAML frontmatter</p>
-	<p data-layout-rendered>Layout rendered!</p>
-	<ul data-headings>
-	</ul>
-	Oh no, that&#39;s scary!
-</body></html>

package/test/fixtures/mdx-frontmatter/dist/with-headings/index.html DELETED Viewed

@@ -1,18 +0,0 @@
-<!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></p>
-	<p data-frontmatter-title></p>
-	<p data-layout-rendered>Layout rendered!</p>
-	<ul data-headings>
-		<li>section-1</li><li>section-2</li>
-	</ul>
-	<h2 id="section-1">Section 1</h2>
-<h2 id="section-2">Section 2</h2>
-</body></html>

package/test/fixtures/mdx-frontmatter/node_modules/.vite/deps_temp/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"type":"module"}

package/test/fixtures/mdx-get-headings/dist/pages.json DELETED Viewed

@@ -1 +0,0 @@

- {"headingsByPage":{"./test-with-jsx-expressions.mdx":[{"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"}],"./test.mdx":[{"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"}]}}

package/test/fixtures/mdx-get-headings/dist/test/index.html DELETED Viewed

@@ -1,5 +0,0 @@
-<!DOCTYPE html><h1 id="heading-test">Heading test</h1>
-<h2 id="section-1">Section 1</h2>
-<h3 id="subsection-1">Subsection 1</h3>
-<h3 id="subsection-2">Subsection 2</h3>
-<h2 id="section-2">Section 2</h2>

package/test/fixtures/mdx-get-headings/dist/test-with-jsx-expressions/index.html DELETED Viewed

@@ -1,3 +0,0 @@
-<!DOCTYPE html><h1 id="heading-test-with-jsx-expressions">Heading test with JSX expressions</h1>
-<h2 id="h2title">Section 1</h2>
-<h3 id="h3title">Subsection 1</h3>

package/test/fixtures/mdx-get-headings/node_modules/.vite/deps_temp/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"type":"module"}

package/test/fixtures/mdx-get-static-paths/dist/one/index.html DELETED Viewed

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html>
-	<head>
-		<title>Page</title>
-	</head>
-	<body>
-		<p>First mdx file</p>
-		<div id="one">hello</div>
-		<div id="url">/src/content/1.mdx</div>
-		<div id="file">/Users/matthew/dev/astro/packages/integrations/mdx/test/fixtures/mdx-get-static-paths/src/content/1.mdx</div>
-	</body>
-</html>

package/test/fixtures/mdx-page/dist/index.html DELETED Viewed

	@@ -1 +0,0 @@
1	- <!DOCTYPE html><h1 id="hello-page">Hello page!</h1>

package/test/fixtures/mdx-page/node_modules/.vite/deps_temp/package.json DELETED Viewed

	@@ -1 +0,0 @@
1	- {"type":"module"}