@astrojs/mdx 0.7.0 → 0.8.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
-@astrojs/mdx:build: cache hit, replaying output fbb8fed20a6e13e0
+@astrojs/mdx:build: cache hit, replaying output fb941ae7dc16611b
 @astrojs/mdx:build: 
-@astrojs/mdx:build: > @astrojs/mdx@0.7.0 build /home/runner/work/astro/astro/packages/integrations/mdx
+@astrojs/mdx:build: > @astrojs/mdx@0.8.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,15 @@
 # @astrojs/mdx
 
+## 0.8.0
+
+### Minor Changes
+
+- [#4204](https://github.com/withastro/astro/pull/4204) [`4c2ca5352`](https://github.com/withastro/astro/commit/4c2ca5352d0c4119ed2a9e5e0b78ce71eb1b414a) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Remove `frontmatterOptions` from MDX config
+
+### Patch Changes
+
+- [#4205](https://github.com/withastro/astro/pull/4205) [`6c9736cbc`](https://github.com/withastro/astro/commit/6c9736cbc90162f1de3ebccd7cfe98332749b639) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Add frontmatter injection instructions to README
+
 ## 0.7.0
 
 ### Minor Changes

package/README.md

@@ -20,33 +20,30 @@ Check out [“What is MDX?”](https://mdxjs.com/docs/what-is-mdx/), a deep-dive
 
 ## Installation
 
-<details>
-  <summary>Quick Install</summary>
+### Quick Install
 
 The `astro add` command-line tool automates the installation for you. Run one of the following commands in a new terminal window. (If you aren't sure which package manager you're using, run the first command.) Then, follow the prompts, and type "y" in the terminal (meaning "yes") for each one.
 
-  ```sh
-  # Using NPM
-  npx astro add mdx
-  # Using Yarn
-  yarn astro add mdx
-  # Using PNPM
-  pnpx astro add mdx
-  ```
+```sh
+# Using NPM
+npx astro add mdx
+# Using Yarn
+yarn astro add mdx
+# Using PNPM
+pnpx astro add mdx
+```
 
 Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
 
 Because this command is new, it might not properly set things up. If that happens, [feel free to log an issue on our GitHub](https://github.com/withastro/astro/issues) and try the manual installation steps below.
-</details>
 
-<details>
-  <summary>Manual Install</summary>
+### Manual Install
 
 First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
 
-  ```sh
-  npm install @astrojs/mdx
-  ```
+```sh
+npm install @astrojs/mdx
+```
 
 Then, apply this integration to your `astro.config.*` file using the `integrations` property:
 
@@ -63,11 +60,14 @@ export default defineConfig({
 ```
 
 Finally, restart the dev server.
-</details>
 
 ## Usage
 
-To write your first MDX page in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
+You can [add MDX pages to your project](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) by adding `.mdx` files within your `src/pages/` directory. 
+
+### Components
+
+To use components in your MDX pages in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
 - 📦 how framework components are loaded,
 - 💧 client-side hydration options, and
 - 🪆 opportunities to mix and nest frameworks together
@@ -76,8 +76,6 @@ To write your first MDX page in Astro, head to our [UI framework documentation][
 
 > **Note**: `.mdx` files adhere to strict JSX syntax rather than Astro's HTML-like syntax.
 
-Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
-
 ### Variables
 
 MDX supports `export` statements to add variables to your templates. These variables are accessible both from the template itself _and_ as named properties when importing the template somewhere else.
@@ -123,7 +121,7 @@ A function that returns an array of all headings (i.e. `h1 -> h6` elements) in t
 
 ### Frontmatter
 
-Astro also supports YAML-based frontmatter out-of-the-box using the [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) plugin. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export. See the `frontmatterOptions` configuration to customize this behavior.
+Astro also supports YAML-based frontmatter out-of-the-box. By default, all variables declared in a frontmatter fence (`---`) will be accessible via the `frontmatter` export.
 
 For example, we can add a `title` and `publishDate` to an MDX page or component like so:
 
@@ -152,6 +150,40 @@ const posts = await Astro.glob('./*.mdx');
 ))}
 ```
 
+### Inject frontmatter via remark or rehype plugins
+
+You may want to inject frontmatter properties across all of your MDX files. By using a [remark](#remarkPlugins) or [rehype](#remarkplugins) plugin, you can generate these properties based on a file’s contents.
+
+You can append to the `data.astro.frontmatter` property from your plugin’s `file` argument like so:
+
+```js
+// example-remark-plugin.mjs
+export function exampleRemarkPlugin() {
+  // All remark and rehype plugins return a separate function
+  return function (tree, file) {
+    file.data.astro.frontmatter.customProperty = 'Generated property';
+  }
+}
+```
+
+After applying this plugin to your MDX integration config:
+
+```js
+// astro.config.mjs
+import mdx from '@astrojs/mdx';
+import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
+
+export default {
+  integrations: [
+    mdx({
+      remarkPlugins: [exampleRemarkPlugin],
+    }),
+  ],
+};
+```
+
+…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).
+
 ### Layouts
 
 Layouts can be applied [in the same way as standard Astro Markdown](https://docs.astro.build/en/guides/markdown-content/#markdown-layouts). You can add a `layout` to [your frontmatter](#frontmatter) like so:
@@ -255,8 +287,7 @@ This applies a minimal Prism renderer with added support for `astro` code blocks
 
 ## Configuration
 
-<details>
-  <summary><strong>remarkPlugins</strong></summary>
+### remarkPlugins
 
 **Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)
 
@@ -292,10 +323,7 @@ export default {
 }
 ```
 
-</details>
-
-<details>
-  <summary><strong>rehypePlugins</strong></summary>
+### rehypePlugins</strong>
 
 [Rehype plugins](https://github.com/rehypejs/rehype/blob/main/doc/plugins.md) allow you to transform the HTML that your Markdown generates. We recommend checking the [Remark plugin](https://github.com/remarkjs/remark/blob/main/doc/plugins.md) catalog first _before_ considering rehype plugins, since most users want to transform their Markdown syntax instead. If HTML transforms are what you need, we encourage you to browse [awesome-rehype](https://github.com/rehypejs/awesome-rehype) for a full curated list of plugins!
 
@@ -313,38 +341,6 @@ export default {
   })],
 }
 ```
-</details>
-
-<details>
-  <summary><strong>frontmatterOptions</strong></summary>
-
-**Default:** `{ name: 'frontmatter' }`
-
-We use [remark-mdx-frontmatter](https://github.com/remcohaszing/remark-mdx-frontmatter) to parse YAML-based frontmatter in your MDX files. If you want to override our default configuration or extend remark-mdx-frontmatter (ex. to [apply a custom frontmatter parser](https://github.com/remcohaszing/remark-mdx-frontmatter#parsers)), you can supply a `frontmatterOptions` configuration.
-
-For example, say you want to access frontmatter as root-level variables without a nested `frontmatter` object. You can override the [`name` configuration option](https://github.com/remcohaszing/remark-mdx-frontmatter#name) like so:
-
-```js
-// astro.config.mjs
-export default {
-  integrations: [mdx({
-    frontmatterOptions: {
-      name: '',
-    }
-  })],
-}
-```
-
-```mdx
----
-title: I'm just a variable now!
----
-
-# {title}
-```
-
-See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
-</details>
 
 ## Examples
 

package/dist/astro-data-utils.d.ts

@@ -1,7 +1,7 @@
 import type { MarkdownAstroData } from 'astro';
 import type { Data, VFile } from 'vfile';
 export declare function remarkInitializeAstroData(): (tree: any, vfile: VFile) => void;
-export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>, exportName?: string): (tree: any, vfile: VFile) => void;
+export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>): (tree: any, vfile: VFile) => void;
 /**
  * Copied from markdown utils
  * @see "vite-plugin-utils"

package/dist/astro-data-utils.js

@@ -1,4 +1,3 @@
-import { name as isValidIdentifierName } from "estree-util-is-identifier-name";
 import { jsToTreeNode } from "./utils.js";
 function remarkInitializeAstroData() {
   return function(tree, vfile) {
@@ -7,32 +6,14 @@ function remarkInitializeAstroData() {
     }
   };
 }
-function rehypeApplyFrontmatterExport(pageFrontmatter, exportName = "frontmatter") {
+const EXPORT_NAME = "frontmatter";
+function rehypeApplyFrontmatterExport(pageFrontmatter) {
   return function(tree, vfile) {
-    if (!isValidIdentifierName(exportName)) {
-      throw new Error(
-        `[MDX] ${JSON.stringify(
-          exportName
-        )} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
-      );
-    }
     const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
     const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
-    let exportNodes = [];
-    if (!exportName) {
-      exportNodes = Object.entries(frontmatter).map(([k, v]) => {
-        if (!isValidIdentifierName(k)) {
-          throw new Error(
-            `[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
-              k
-            )} as a top-level export, which is not a valid export name.`
-          );
-        }
-        return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
-      });
-    } else {
-      exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
-    }
+    const exportNodes = [
+      jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
+    ];
     tree.children = exportNodes.concat(tree.children);
   };
 }

package/dist/index.d.ts

@@ -1,18 +1,11 @@
 import { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
 import type { AstroIntegration } from 'astro';
-import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
 declare type WithExtends<T> = T | {
     extends: T;
 };
 declare type MdxOptions = {
     remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
     rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
-    /**
-     * Configure the remark-mdx-frontmatter plugin
-     * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
-     * @default {{ name: 'frontmatter' }}
-     */
-    frontmatterOptions?: RemarkMdxFrontmatterOptions;
 };
 export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;
 export {};

package/dist/index.js

@@ -83,13 +83,7 @@ return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHead
                     ...mdxPluginOpts,
                     rehypePlugins: [
                       ...mdxPluginOpts.rehypePlugins ?? [],
-                      () => {
-                        var _a;
-                        return rehypeApplyFrontmatterExport(
-                          frontmatter,
-                          (_a = mdxOptions.frontmatterOptions) == null ? void 0 : _a.name
-                        );
-                      }
+                      () => rehypeApplyFrontmatterExport(frontmatter)
                     ]
                   });
                   return {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.7.0",
+  "version": "0.8.0",
   "type": "module",
   "types": "./dist/index.d.ts",
   "author": "withastro",
@@ -33,7 +33,6 @@
     "rehype-raw": "^6.1.1",
     "remark-frontmatter": "^4.0.1",
     "remark-gfm": "^3.0.1",
-    "remark-mdx-frontmatter": "^2.0.2",
     "remark-shiki-twoslash": "^3.1.0",
     "remark-smartypants": "^2.0.0",
     "shiki": "^0.10.1",
@@ -44,7 +43,7 @@
     "@types/chai": "^4.3.1",
     "@types/mocha": "^9.1.1",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.0.0-rc.7",
+    "astro": "1.0.0-rc.8",
     "astro-scripts": "0.0.6",
     "chai": "^4.3.6",
     "linkedom": "^0.14.12",

package/src/astro-data-utils.ts

@@ -1,6 +1,4 @@
 import type { MarkdownAstroData } from 'astro';
-import { name as isValidIdentifierName } from 'estree-util-is-identifier-name';
-import type { MdxjsEsm } from 'mdast-util-mdx';
 import type { Data, VFile } from 'vfile';
 import { jsToTreeNode } from './utils.js';
 
@@ -12,35 +10,15 @@ export function remarkInitializeAstroData() {
 	};
 }
 
-export function rehypeApplyFrontmatterExport(
-	pageFrontmatter: Record<string, any>,
-	exportName = 'frontmatter'
-) {
+const EXPORT_NAME = 'frontmatter';
+
+export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>) {
 	return function (tree: any, vfile: VFile) {
-		if (!isValidIdentifierName(exportName)) {
-			throw new Error(
-				`[MDX] ${JSON.stringify(
-					exportName
-				)} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
-			);
-		}
 		const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
 		const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
-		let exportNodes: MdxjsEsm[] = [];
-		if (!exportName) {
-			exportNodes = Object.entries(frontmatter).map(([k, v]) => {
-				if (!isValidIdentifierName(k)) {
-					throw new Error(
-						`[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
-							k
-						)} as a top-level export, which is not a valid export name.`
-					);
-				}
-				return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
-			});
-		} else {
-			exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
-		}
+		const exportNodes = [
+			jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
+		];
 		tree.children = exportNodes.concat(tree.children);
 	};
 }

package/src/index.ts

@@ -4,7 +4,6 @@ import type { AstroConfig, AstroIntegration } from 'astro';
 import { parse as parseESM } from 'es-module-lexer';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
-import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
 import remarkShikiTwoslash from 'remark-shiki-twoslash';
 import remarkSmartypants from 'remark-smartypants';
 import { VFile } from 'vfile';
@@ -19,12 +18,6 @@ type WithExtends<T> = T | { extends: T };
 type MdxOptions = {
 	remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
 	rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
-	/**
-	 * Configure the remark-mdx-frontmatter plugin
-	 * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
-	 * @default {{ name: 'frontmatter' }}
-	 */
-	frontmatterOptions?: RemarkMdxFrontmatterOptions;
 };
 
 const DEFAULT_REMARK_PLUGINS: MdxRollupPluginOptions['remarkPlugins'] = [
@@ -119,11 +112,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
 										...mdxPluginOpts,
 										rehypePlugins: [
 											...(mdxPluginOpts.rehypePlugins ?? []),
-											() =>
-												rehypeApplyFrontmatterExport(
-													frontmatter,
-													mdxOptions.frontmatterOptions?.name
-												),
+											() => rehypeApplyFrontmatterExport(frontmatter),
 										],
 									});
 

package/test/mdx-frontmatter.test.js

@@ -56,21 +56,4 @@ describe('MDX frontmatter', () => {
 		expect(headingSlugs).to.contain('section-1');
 		expect(headingSlugs).to.contain('section-2');
 	});
-
-	it('extracts frontmatter to "customFrontmatter" export when configured', async () => {
-		const customFixture = await loadFixture({
-			root: new URL('./fixtures/mdx-custom-frontmatter-name/', import.meta.url),
-			integrations: [
-				mdx({
-					frontmatterOptions: {
-						name: 'customFrontmatter',
-					},
-				}),
-			],
-		});
-		await customFixture.build();
-
-		const { titles } = JSON.parse(await customFixture.readFile('/glob.json'));
-		expect(titles).to.include('Using YAML frontmatter');
-	});
 });

package/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js

@@ -1,9 +0,0 @@
-export async function get() {
-	const mdxPages = await import.meta.glob('./*.mdx', { eager: true });
-
-	return {
-		body: JSON.stringify({
-			titles: Object.values(mdxPages ?? {}).map(v => v?.customFrontmatter?.title),
-		})
-	}
-}

package/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx

@@ -1,6 +0,0 @@
----
-title: 'Using YAML frontmatter'
-illThrowIfIDontExist: "Oh no, that's scary!"
----
-
-# {customFrontmatter.illThrowIfIDontExist}