@astrojs/mdx 0.10.0 → 0.10.2

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 9de770958d53d2f8
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.10.0 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 97b75f35cc1d424b
+@astrojs/mdx:build: 
+@astrojs/mdx:build: > @astrojs/mdx@0.10.2 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,25 @@
 # @astrojs/mdx
 
+## 0.10.2
+
+### Patch Changes
+
+- [#4423](https://github.com/withastro/astro/pull/4423) [`d4cd7a59f`](https://github.com/withastro/astro/commit/d4cd7a59fd38d411c442a818cfaab40f74106628) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment
+
+## 0.10.2-next.0
+
+### Patch Changes
+
+- [#4423](https://github.com/withastro/astro/pull/4423) [`d4cd7a59f`](https://github.com/withastro/astro/commit/d4cd7a59fd38d411c442a818cfaab40f74106628) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update Markdown type signature to match new markdown plugin,and update top-level layout props for better alignment
+
+## 0.10.1
+
+### Patch Changes
+
+- [#4443](https://github.com/withastro/astro/pull/4443) [`adb207979`](https://github.com/withastro/astro/commit/adb20797962c280d4d38f335f577fd52a1b48d4b) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix MDX style imports when layout is not applied
+
+* [#4428](https://github.com/withastro/astro/pull/4428) [`a2414bf59`](https://github.com/withastro/astro/commit/a2414bf59e2e2cd633aece68e724401c4ad281b9) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Fix dev server reload performance when globbing from an MDX layout
+
 ## 0.10.0
 
 ### Minor Changes

package/dist/astro-data-utils.js

@@ -18,9 +18,9 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
       exportNodes.unshift(
         jsToTreeNode(
           `import { jsx as layoutJsx } from 'astro/jsx-runtime';
-				import Layout from ${JSON.stringify(frontmatter.layout)};
 				
-				export default function ({ children }) {
+				export default async function ({ children }) {
+					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
@@ -41,6 +41,8 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/dist/index.js

@@ -85,6 +85,8 @@ 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 { fileUrl, fileId } = getFileInfo(id, config);
                   if (!moduleExports.includes("url")) {

package/package.json

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

package/src/astro-data-utils.ts

@@ -20,13 +20,17 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
 		];
 		if (frontmatter.layout) {
+			// NOTE(bholmesdev) 08-22-2022
+			// Using an async layout import (i.e. `const Layout = (await import...)`)
+			// Preserves the dev server import cache when globbing a large set of MDX files
+			// Full explanation: 'https://github.com/withastro/astro/pull/4428'
 			exportNodes.unshift(
 				jsToTreeNode(
 					/** @see 'vite-plugin-markdown' for layout props reference */
 					`import { jsx as layoutJsx } from 'astro/jsx-runtime';
-				import Layout from ${JSON.stringify(frontmatter.layout)};
 				
-				export default function ({ children }) {
+				export default async function ({ children }) {
+					const Layout = (await import(${JSON.stringify(frontmatter.layout)})).default;
 					const { layout, ...content } = frontmatter;
 					content.file = file;
 					content.url = url;
@@ -47,6 +51,8 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 						}
 					});
 					return layoutJsx(Layout, {
+						file,
+						url,
 						content,
 						frontmatter: content,
 						headings: getHeadings(),

package/src/index.ts

@@ -119,6 +119,11 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								// These transforms must happen *after* JSX runtime transformations
 								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 { fileUrl, fileId } = getFileInfo(id, config);

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

@@ -1,6 +1,8 @@
 ---
 const {
 	content = { title: "content didn't work" },
+	file = "file didn't work",
+	url = "url didn't work",
 	frontmatter = {
 		title: "frontmatter didn't work",
 		file: "file didn't work",
@@ -24,6 +26,8 @@ const {
 	<p data-frontmatter-title>{frontmatter.title}</p>
 	<p data-frontmatter-file>{frontmatter.file}</p>
 	<p data-frontmatter-url>{frontmatter.url}</p>
+	<p data-file>{frontmatter.file}</p>
+	<p data-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-page/src/pages/index.mdx

@@ -1 +1,3 @@
+import '../styles.css'
+
 # Hello page!

package/test/fixtures/mdx-page/src/styles.css

@@ -0,0 +1,3 @@
+p {
+	color: red;
+}

package/test/mdx-frontmatter.test.js

@@ -57,17 +57,21 @@ describe('MDX frontmatter', () => {
 		expect(headingSlugs).to.contain('section-2');
 	});
 
-	it('passes "file" and "url" to layout via frontmatter', async () => {
+	it('passes "file" and "url" to layout', 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;
+		const file = document.querySelector('[data-file]')?.textContent;
+		const url = document.querySelector('[data-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');
+		expect(file).to.equal(frontmatterFile);
+		expect(url).to.equal(frontmatterUrl);
 	});
 });

package/test/mdx-page.test.js

@@ -26,6 +26,15 @@ describe('MDX Page', () => {
 
 			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', () => {