@astrojs/mdx 0.8.2 → 0.8.3

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output 3036c715efc9fce9
-@astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.8.2 build /Users/matthew/dev/astro/packages/integrations/mdx
-@astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
-@astrojs/mdx:build: 
+@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: 

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @astrojs/mdx
 
+## 0.8.3
+
+### Patch Changes
+
+- [#4248](https://github.com/withastro/astro/pull/4248) [`869d00935`](https://github.com/withastro/astro/commit/869d0093596b709cfcc1a1a95ee631b48d6d1c26) Thanks [@svemat01](https://github.com/svemat01)! - Load builtin rehype plugins before user plugins instead of after
+
+* [#4255](https://github.com/withastro/astro/pull/4255) [`411612808`](https://github.com/withastro/astro/commit/4116128082121ee276d51cb245bf8095be4728a1) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Pass injected frontmatter from remark and rehype plugins to layouts
+
+* Updated dependencies [[`1f0dd31d9`](https://github.com/withastro/astro/commit/1f0dd31d9239b5e3dca99c88d021e7a9a3e2054d)]:
+  - @astrojs/prism@1.0.1
+
 ## 0.8.2
 
 ### Patch Changes

package/dist/astro-data-utils.js

@@ -14,6 +14,41 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
     const exportNodes = [
       jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
     ];
+    if (frontmatter.layout) {
+      exportNodes.unshift(
+        jsToTreeNode(
+          `import { jsx as layoutJsx } from 'astro/jsx-runtime';
+				import Layout from ${JSON.stringify(frontmatter.layout)};
+				
+				export default function ({ children }) {
+					const { layout, ...content } = frontmatter;
+					content.astro = {};
+					Object.defineProperty(content.astro, 'headings', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
+						}
+					});
+					Object.defineProperty(content.astro, 'html', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
+						}
+					});
+					Object.defineProperty(content.astro, 'source', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
+						}
+					});
+					return layoutJsx(Layout, {
+						content,
+						frontmatter: content,
+						headings: getHeadings(),
+						'server:root': true,
+						children,
+					});
+				};`
+        )
+      );
+    }
     tree.children = exportNodes.concat(tree.children);
   };
 }

package/dist/index.js

@@ -65,20 +65,7 @@ function mdx(mdxOptions = {}) {
                 async transform(code, id) {
                   if (!id.endsWith("mdx"))
                     return;
-                  let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
-                  if (frontmatter.layout) {
-                    const { layout, ...contentProp } = frontmatter;
-                    pageContent += `
-
-export default async function({ children }) {
-const Layout = (await import(${JSON.stringify(
-                      frontmatter.layout
-                    )})).default;
-const frontmatter=${JSON.stringify(
-                      contentProp
-                    )};
-return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
-                  }
+                  const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
                   const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
                     ...mdxPluginOpts,
                     rehypePlugins: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.8.2",
+  "version": "0.8.3",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -23,7 +23,7 @@
     "./package.json": "./package.json"
   },
   "dependencies": {
-    "@astrojs/prism": "^1.0.0",
+    "@astrojs/prism": "^1.0.1",
     "@mdx-js/mdx": "^2.1.2",
     "@mdx-js/rollup": "^2.1.1",
     "acorn": "^8.8.0",
@@ -43,7 +43,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.2",
+    "astro": "1.0.3",
     "astro-scripts": "0.0.7",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/astro-data-utils.ts

@@ -19,6 +19,42 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
 		const exportNodes = [
 			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
 		];
+		if (frontmatter.layout) {
+			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 }) {
+					const { layout, ...content } = frontmatter;
+					content.astro = {};
+					Object.defineProperty(content.astro, 'headings', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
+						}
+					});
+					Object.defineProperty(content.astro, 'html', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
+						}
+					});
+					Object.defineProperty(content.astro, 'source', {
+						get() {
+							throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
+						}
+					});
+					return layoutJsx(Layout, {
+						content,
+						frontmatter: content,
+						headings: getHeadings(),
+						'server:root': true,
+						children,
+					});
+				};`
+				)
+			);
+		}
 		tree.children = exportNodes.concat(tree.children);
 	};
 }

package/src/index.ts

@@ -98,16 +98,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 								async transform(code, id) {
 									if (!id.endsWith('mdx')) return;
 
-									let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
-									if (frontmatter.layout) {
-										const { layout, ...contentProp } = frontmatter;
-										pageContent += `\n\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
-											frontmatter.layout
-										)})).default;\nconst frontmatter=${JSON.stringify(
-											contentProp
-										)};\nreturn <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
-									}
-
+									const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
 									const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
 										...mdxPluginOpts,
 										rehypePlugins: [

package/test/fixtures/mdx-frontmatter-injection/node_modules/.bin/astro

@@ -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-frontmatter-injection/src/layouts/Base.astro

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

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

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

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

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

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

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

@@ -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/fixtures/mdx-component/dist/index.html

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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