@astrojs/mdx 0.11.6 → 0.12.1

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 788a04a94f8adf80
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.11.6 build /home/runner/work/astro/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@astrojs/mdx:build: cache hit, replaying output 55f97c81b614ef9c
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.12.1 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
+@astrojs/mdx:build: 

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @astrojs/mdx
 
+## 0.12.1
+
+### Patch Changes
+
+- [#5522](https://github.com/withastro/astro/pull/5522) [`efc4363e0`](https://github.com/withastro/astro/commit/efc4363e0baf7f92900e20af339811bb3df42b0e) Thanks [@delucis](https://github.com/delucis)! - Support use of `<Fragment>` in MDX files rendered with `<Content />` component
+
+## 0.12.0
+
+### Minor Changes
+
+- [#5427](https://github.com/withastro/astro/pull/5427) [`2a1c085b1`](https://github.com/withastro/astro/commit/2a1c085b199f24e34424ec8c19041c03602c53c5) Thanks [@backflip](https://github.com/backflip)! - Uses remark-rehype options from astro.config.mjs
+
+### Patch Changes
+
+- [#5448](https://github.com/withastro/astro/pull/5448) [`ef2ffc7ae`](https://github.com/withastro/astro/commit/ef2ffc7ae9ff554860238ecd2fb3bf6d82b5801b) Thanks [@delucis](https://github.com/delucis)! - Fix broken link in README
+
 ## 0.11.6
 
 ### Patch Changes

package/README.md

@@ -191,7 +191,7 @@ export default {
 };
 ```
 
-…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
+…every MDX file will have `customProperty` in its frontmatter! See [our Markdown documentation](https://docs.astro.build/en/guides/markdown-content/#example-injecting-frontmatter) for more usage instructions and a [reading time plugin example](https://docs.astro.build/en/guides/markdown-content/#example-calculate-reading-time).
 
 ### Layouts
 Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#frontmatter-layout). You can add a `layout` to [your frontmatter](#frontmatter) like so:
@@ -518,6 +518,26 @@ These are plugins that modify the output [estree](https://github.com/estree/estr
 
 We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
 
+### remarkRehype
+
+Markdown content is transformed into HTML through remark-rehype which has [a number of options](https://github.com/remarkjs/remark-rehype#options).
+
+You can use remark-rehype options in your MDX integration config file like so:
+
+```js
+// astro.config.mjs
+export default {
+  integrations: [mdx({
+    remarkRehype: {
+      footnoteLabel: 'Catatan kaki',
+      footnoteBackLabel: 'Kembali ke konten',
+    },
+  })],
+};
+```
+
+This inherits the configuration of `markdown.remarkRehype`. This behavior can be changed by configuring `extendPlugins`.
+
 ## Examples
 
 - The [Astro MDX example](https://github.com/withastro/astro/tree/latest/examples/with-mdx) shows how to use MDX files in your Astro project.

package/dist/index.d.ts

@@ -1,5 +1,6 @@
 import { PluggableList } from '@mdx-js/mdx/lib/core.js';
 import type { AstroIntegration } from 'astro';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 export declare type MdxOptions = {
     remarkPlugins?: PluggableList;
     rehypePlugins?: PluggableList;
@@ -12,5 +13,6 @@ export declare type MdxOptions = {
      * - false - do not inherit any plugins
      */
     extendPlugins?: 'markdown' | 'astroDefaults' | false;
+    remarkRehype?: RemarkRehypeOptions;
 };
 export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;

package/dist/index.js

@@ -34,6 +34,13 @@ function mdx(mdxOptions = {}) {
           );
           console.info(`See "extendPlugins" option to configure this behavior.`);
         }
+        let remarkRehypeOptions = mdxOptions.remarkRehype;
+        if (mdxOptions.extendPlugins === "markdown") {
+          remarkRehypeOptions = {
+            ...config.markdown.remarkRehype,
+            ...remarkRehypeOptions
+          };
+        }
         const mdxPluginOpts = {
           remarkPlugins: await getRemarkPlugins(mdxOptions, config),
           rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -41,7 +48,8 @@ function mdx(mdxOptions = {}) {
           jsx: true,
           jsxImportSource: "astro",
           format: "mdx",
-          mdExtensions: []
+          mdExtensions: [],
+          remarkRehypeOptions
         };
         let importMetaEnv = {
           SITE: config.site
@@ -83,9 +91,14 @@ function mdx(mdxOptions = {}) {
                 transform(code, id) {
                   if (!id.endsWith(".mdx"))
                     return;
-                  code += `
-MDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
-                  const [, moduleExports] = parseESM(code);
+                  const [moduleImports, moduleExports] = parseESM(code);
+                  const importsFromJSXRuntime = moduleImports.filter(({ n }) => n === "astro/jsx-runtime").map(({ ss, se }) => code.substring(ss, se));
+                  const hasFragmentImport = importsFromJSXRuntime.some(
+                    (statement) => /[\s,{](Fragment,|Fragment\s*})/.test(statement)
+                  );
+                  if (!hasFragmentImport) {
+                    code = 'import { Fragment } from "astro/jsx-runtime"\n' + code;
+                  }
                   const { fileUrl, fileId } = getFileInfo(id, config);
                   if (!moduleExports.includes("url")) {
                     code += `
@@ -108,9 +121,16 @@ export function compiledContent() { throw new Error(${JSON.stringify(
                     )}) };`;
                   }
                   if (!moduleExports.includes("Content")) {
+                    code = code.replace("export default MDXContent;", "");
                     code += `
-export const Content = MDXContent;`;
+export const Content = (props = {}) => MDXContent({
+											...props,
+											components: { Fragment, ...props.components },
+										});
+										export default Content;`;
                   }
+                  code += `
+Content[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
                   if (command === "dev") {
                     code += `
 if (import.meta.hot) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.11.6",
+  "version": "0.12.1",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -46,7 +46,7 @@
     "@types/github-slugger": "^1.3.0",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.6.6",
+    "astro": "1.6.13",
     "astro-scripts": "0.0.9",
     "chai": "^4.3.6",
     "cheerio": "^1.0.0-rc.11",
@@ -56,6 +56,7 @@
     "mocha": "^9.2.2",
     "reading-time": "^1.5.0",
     "rehype-pretty-code": "^0.4.0",
+    "remark-rehype": "^10.1.0",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-toc": "^8.0.1",
     "vite": "^3.0.0"

package/src/index.ts

@@ -5,6 +5,7 @@ import type { AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import { blue, bold } from 'kleur/colors';
 import fs from 'node:fs/promises';
+import type { Options as RemarkRehypeOptions } from 'remark-rehype';
 import { VFile } from 'vfile';
 import type { Plugin as VitePlugin } from 'vite';
 import {
@@ -33,6 +34,7 @@ export type MdxOptions = {
 	 * - false - do not inherit any plugins
 	 */
 	extendPlugins?: 'markdown' | 'astroDefaults' | false;
+	remarkRehype?: RemarkRehypeOptions;
 };
 
 export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
@@ -62,6 +64,15 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					console.info(`See "extendPlugins" option to configure this behavior.`);
 				}
 
+				let remarkRehypeOptions = mdxOptions.remarkRehype;
+
+				if (mdxOptions.extendPlugins === 'markdown') {
+					remarkRehypeOptions = {
+						...config.markdown.remarkRehype,
+						...remarkRehypeOptions,
+					};
+				}
+
 				const mdxPluginOpts: MdxRollupPluginOptions = {
 					remarkPlugins: await getRemarkPlugins(mdxOptions, config),
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
@@ -71,6 +82,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 					// Note: disable `.md` (and other alternative extensions for markdown files like `.markdown`) support
 					format: 'mdx',
 					mdExtensions: [],
+					remarkRehypeOptions,
 				};
 
 				let importMetaEnv: Record<string, any> = {
@@ -120,11 +132,18 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								transform(code, id) {
 									if (!id.endsWith('.mdx')) return;
 
-									// Ensures styles and scripts are injected into a `<head>`
-									// When a layout is not applied
-									code += `\nMDXContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
-
-									const [, moduleExports] = parseESM(code);
+									const [moduleImports, moduleExports] = parseESM(code);
+
+									// Fragment import should already be injected, but check just to be safe.
+									const importsFromJSXRuntime = moduleImports
+										.filter(({ n }) => n === 'astro/jsx-runtime')
+										.map(({ ss, se }) => code.substring(ss, se));
+									const hasFragmentImport = importsFromJSXRuntime.some((statement) =>
+										/[\s,{](Fragment,|Fragment\s*})/.test(statement)
+									);
+									if (!hasFragmentImport) {
+										code = 'import { Fragment } from "astro/jsx-runtime"\n' + code;
+									}
 
 									const { fileUrl, fileId } = getFileInfo(id, config);
 									if (!moduleExports.includes('url')) {
@@ -144,9 +163,19 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 										)}) };`;
 									}
 									if (!moduleExports.includes('Content')) {
-										code += `\nexport const Content = MDXContent;`;
+										// Make `Content` the default export so we can wrap `MDXContent` and pass in `Fragment`
+										code = code.replace('export default MDXContent;', '');
+										code += `\nexport const Content = (props = {}) => MDXContent({
+											...props,
+											components: { Fragment, ...props.components },
+										});
+										export default Content;`;
 									}
 
+									// Ensures styles and scripts are injected into a `<head>`
+									// When a layout is not applied
+									code += `\nContent[Symbol.for('astro.needsHeadRendering')] = !Boolean(frontmatter.layout);`;
+
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach
 										code += `\nif (import.meta.hot) {

package/test/fixtures/mdx-astro-markdown-remarkRehype/src/pages/index.mdx

@@ -0,0 +1,5 @@
+# Hello world
+
+This[^1] should be visible.
+
+[^1]: And there would be a footnote.

package/test/fixtures/mdx-component/src/components/WithFragment.mdx

@@ -0,0 +1,3 @@
+# MDX containing `<Fragment />`
+
+<p><Fragment>bar</Fragment></p>

package/test/fixtures/mdx-component/src/pages/glob.astro

@@ -1,11 +1,20 @@
 ---
+import { parse } from 'node:path';
 const components = await Astro.glob('../components/*.mdx');
 ---
 
 <div data-default-export>
-	{components.map(Component => <Component.default />)}
+	{components.map(Component => (
+		<div data-file={parse(Component.file).base}>
+			<Component.default />
+		</div>
+	))}
 </div>
 
 <div data-content-export>
-	{components.map(({ Content }) => <Content />)}
+	{components.map(({ Content, file }) => (
+		<div data-file={parse(file).base}>
+			<Content />
+		</div>
+	))}
 </div>

package/test/fixtures/mdx-component/src/pages/w-fragment.astro

@@ -0,0 +1,5 @@
+---
+import WithFragment from '../components/WithFragment.mdx';
+---
+
+<WithFragment />

package/test/fixtures/mdx-slots/src/components/Slotted.astro

@@ -0,0 +1,4 @@
+<div class="slotted">
+	<div data-default-slot><slot /></div>
+	<div data-named-slot><slot name="named" /></div>
+</div>

package/test/fixtures/mdx-slots/src/components/Test.mdx

@@ -0,0 +1,15 @@
+import Slotted from './Slotted.astro'
+
+# Hello slotted component!
+
+<Slotted>
+
+Default content.
+
+<Fragment slot="named">
+
+Content for named slot.
+
+</Fragment>
+
+</Slotted>

package/test/fixtures/mdx-slots/src/pages/glob.astro

@@ -0,0 +1,11 @@
+---
+const components = await Astro.glob('../components/*.mdx');
+---
+
+<div data-default-export>
+	{components.map(Component => <Component.default />)}
+</div>
+
+<div data-content-export>
+	{components.map(({ Content }) => <Content />)}
+</div>

package/test/fixtures/mdx-slots/src/pages/index.astro

@@ -0,0 +1,5 @@
+---
+import Test from '../components/Test.mdx';
+---
+
+<Test />

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

@@ -0,0 +1,85 @@
+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

@@ -51,6 +51,41 @@ describe('MDX Component', () => {
 			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', () => {
@@ -108,5 +143,49 @@ describe('MDX Component', () => {
 			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-slots.js

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