@astrojs/mdx 0.8.3 → 0.9.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 67cdf445a0fed367
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.8.3 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 5d04eed831bc49e1
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.9.0 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,18 @@
 # @astrojs/mdx
 
+## 0.9.0
+
+### Minor Changes
+
+- [#4268](https://github.com/withastro/astro/pull/4268) [`f7afdb889`](https://github.com/withastro/astro/commit/f7afdb889fe4e97177958c8ec92f80c5f6e5cb51) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Align MD with MDX on layout props and "glob" import results:
+  - Add `Content` to MDX
+  - Add `file` and `url` to MDX frontmatter (layout import only)
+  - Update glob types to reflect differences (lack of `rawContent` and `compiledContent`)
+
+### Patch Changes
+
+- [#4272](https://github.com/withastro/astro/pull/4272) [`24d2f7a6e`](https://github.com/withastro/astro/commit/24d2f7a6e6700c10c863f826f37bb653d70e3a83) Thanks [@natemoo-re](https://github.com/natemoo-re)! - Properly handle hydration for namespaced components
+
 ## 0.8.3
 
 ### Patch Changes

package/dist/astro-data-utils.js

@@ -22,6 +22,8 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
 				
 				export default function ({ children }) {
 					const { layout, ...content } = frontmatter;
+					content.file = file;
+					content.url = url;
 					content.astro = {};
 					Object.defineProperty(content.astro, 'headings', {
 						get() {

package/dist/index.js

@@ -15,6 +15,8 @@ const DEFAULT_REMARK_PLUGINS = [
   remarkSmartypants
 ];
 const DEFAULT_REHYPE_PLUGINS = [];
+const RAW_CONTENT_ERROR = "MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
+const COMPILED_CONTENT_ERROR = "MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins";
 function handleExtends(config, defaults = []) {
   if (Array.isArray(config))
     return config;
@@ -93,6 +95,22 @@ export const url = ${JSON.stringify(fileUrl)};`;
                   if (!moduleExports.includes("file")) {
                     code += `
 export const file = ${JSON.stringify(fileId)};`;
+                  }
+                  if (!moduleExports.includes("rawContent")) {
+                    code += `
+export function rawContent() { throw new Error(${JSON.stringify(
+                      RAW_CONTENT_ERROR
+                    )}) };`;
+                  }
+                  if (!moduleExports.includes("compiledContent")) {
+                    code += `
+export function compiledContent() { throw new Error(${JSON.stringify(
+                      COMPILED_CONTENT_ERROR
+                    )}) };`;
+                  }
+                  if (!moduleExports.includes("Content")) {
+                    code += `
+export const Content = MDXContent;`;
                   }
                   if (command === "dev") {
                     code += `

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.8.3",
+  "version": "0.9.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -43,7 +43,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.3",
+    "astro": "1.0.4",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/astro-data-utils.ts

@@ -28,6 +28,8 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 				
 				export default function ({ children }) {
 					const { layout, ...content } = frontmatter;
+					content.file = file;
+					content.url = url;
 					content.astro = {};
 					Object.defineProperty(content.astro, 'headings', {
 						get() {

package/src/index.ts

@@ -26,6 +26,12 @@ const DEFAULT_REMARK_PLUGINS: MdxRollupPluginOptions['remarkPlugins'] = [
 ];
 const DEFAULT_REHYPE_PLUGINS: MdxRollupPluginOptions['rehypePlugins'] = [];
 
+const RAW_CONTENT_ERROR =
+	'MDX does not support rawContent()! If you need to read the Markdown contents to calculate values (ex. reading time), we suggest injecting frontmatter via remark plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
+
+const COMPILED_CONTENT_ERROR =
+	'MDX does not support compiledContent()! If you need to read the HTML contents to calculate values (ex. reading time), we suggest injecting frontmatter via rehype plugins. Learn more on our docs: https://docs.astro.build/en/guides/integrations-guide/mdx/#inject-frontmatter-via-remark-or-rehype-plugins';
+
 function handleExtends<T>(config: WithExtends<T[] | undefined>, defaults: T[] = []): T[] {
 	if (Array.isArray(config)) return config;
 
@@ -127,6 +133,19 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 									if (!moduleExports.includes('file')) {
 										code += `\nexport const file = ${JSON.stringify(fileId)};`;
 									}
+									if (!moduleExports.includes('rawContent')) {
+										code += `\nexport function rawContent() { throw new Error(${JSON.stringify(
+											RAW_CONTENT_ERROR
+										)}) };`;
+									}
+									if (!moduleExports.includes('compiledContent')) {
+										code += `\nexport function compiledContent() { throw new Error(${JSON.stringify(
+											COMPILED_CONTENT_ERROR
+										)}) };`;
+									}
+									if (!moduleExports.includes('Content')) {
+										code += `\nexport const Content = MDXContent;`;
+									}
 
 									if (command === 'dev') {
 										// TODO: decline HMR updates until we have a stable approach

package/test/fixtures/mdx-component/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-frontmatter/src/layouts/Base.astro

@@ -1,7 +1,11 @@
 ---
 const {
 	content = { title: "content didn't work" },
-	frontmatter = { title: "frontmatter didn't work" },
+	frontmatter = {
+		title: "frontmatter didn't work",
+		file: "file didn't work",
+		url: "url didn't work",
+	},
 	headings = [],
 } = Astro.props;
 ---
@@ -18,6 +22,8 @@ const {
 <body>
 	<p data-content-title>{content.title}</p>
 	<p data-frontmatter-title>{frontmatter.title}</p>
+	<p data-frontmatter-file>{frontmatter.file}</p>
+	<p data-frontmatter-url>{frontmatter.url}</p>
 	<p data-layout-rendered>Layout rendered!</p>
 	<ul data-headings>
 		{headings.map(heading => <li>{heading.slug}</li>)}

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/test/mdx-component.test.js

@@ -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.test.js

@@ -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

@@ -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');
+		});
+	});
+});