@astrojs/mdx 0.7.0 → 0.8.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/.turbo/turbo-build.log +2 -2
  2. package/CHANGELOG.md +23 -0
  3. package/README.md +59 -63
  4. package/dist/astro-data-utils.d.ts +1 -1
  5. package/dist/astro-data-utils.js +5 -24
  6. package/dist/index.d.ts +0 -7
  7. package/dist/index.js +3 -9
  8. package/package.json +4 -5
  9. package/src/astro-data-utils.ts +6 -28
  10. package/src/index.ts +3 -14
  11. package/test/fixtures/mdx-component/dist/index.html +3 -0
  12. package/test/fixtures/mdx-component/node_modules/.vite/deps_temp/package.json +1 -0
  13. package/test/fixtures/mdx-custom-frontmatter-name/dist/glob.json +1 -0
  14. package/test/fixtures/mdx-custom-frontmatter-name/dist/index.html +1 -0
  15. package/test/fixtures/mdx-custom-frontmatter-name/node_modules/.vite/deps_temp/package.json +1 -0
  16. package/test/fixtures/mdx-frontmatter/dist/glob.json +1 -0
  17. package/test/fixtures/mdx-frontmatter/dist/index.html +17 -0
  18. package/test/fixtures/mdx-frontmatter/dist/with-headings/index.html +18 -0
  19. package/test/fixtures/mdx-frontmatter/node_modules/.vite/deps_temp/package.json +1 -0
  20. package/test/fixtures/mdx-frontmatter-injection/node_modules/.bin/astro +2 -2
  21. package/test/fixtures/mdx-get-headings/dist/pages.json +1 -0
  22. package/test/fixtures/mdx-get-headings/dist/test/index.html +5 -0
  23. package/test/fixtures/mdx-get-headings/dist/test-with-jsx-expressions/index.html +3 -0
  24. package/test/fixtures/mdx-get-headings/node_modules/.vite/deps_temp/package.json +1 -0
  25. package/test/fixtures/mdx-get-static-paths/dist/one/index.html +13 -0
  26. package/test/fixtures/mdx-page/dist/index.html +1 -0
  27. package/test/fixtures/mdx-page/node_modules/.bin/astro +2 -2
  28. package/test/fixtures/mdx-page/node_modules/.vite/deps_temp/package.json +1 -0
  29. package/test/fixtures/mdx-plus-react/dist/client.0d691cb3.js +32 -0
  30. package/test/fixtures/mdx-plus-react/dist/index.html +8 -0
  31. package/test/fixtures/mdx-plus-react/node_modules/.bin/astro +2 -2
  32. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/@astrojs_react_client__js.js +95 -0
  33. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/@astrojs_react_client__js.js.map +7 -0
  34. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/_metadata.json +47 -0
  35. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-CDYRCHBX.js +7480 -0
  36. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-CDYRCHBX.js.map +7 -0
  37. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-RRXZ3AUC.js +326 -0
  38. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-RRXZ3AUC.js.map +7 -0
  39. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-TWLJ45QX.js +27 -0
  40. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/chunk-TWLJ45QX.js.map +7 -0
  41. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/package.json +1 -0
  42. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react-dom.js +12 -0
  43. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react-dom.js.map +7 -0
  44. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react.js +11 -0
  45. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react.js.map +7 -0
  46. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react_jsx-dev-runtime.js +41 -0
  47. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react_jsx-dev-runtime.js.map +7 -0
  48. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react_jsx-runtime.js +62 -0
  49. package/test/fixtures/mdx-plus-react/node_modules/.vite/deps_temp/react_jsx-runtime.js.map +7 -0
  50. package/test/fixtures/mdx-rehype-plugins/dist/reading-time.json +1 -0
  51. package/test/fixtures/mdx-rehype-plugins/dist/space-ipsum/index.html +13 -0
  52. package/test/fixtures/mdx-rehype-plugins/node_modules/.vite/deps_temp/package.json +1 -0
  53. package/test/fixtures/mdx-remark-plugins/dist/with-gfm/index.html +2 -0
  54. package/test/fixtures/mdx-remark-plugins/dist/with-toc/index.html +22 -0
  55. package/test/fixtures/mdx-remark-plugins/node_modules/.vite/deps_temp/package.json +1 -0
  56. package/test/fixtures/mdx-syntax-hightlighting/dist/index.html +6 -0
  57. package/test/fixtures/mdx-syntax-hightlighting/node_modules/.vite/deps_temp/package.json +1 -0
  58. package/test/fixtures/mdx-url-export/dist/pages.json +1 -0
  59. package/test/fixtures/mdx-url-export/dist/test-1/index.html +1 -0
  60. package/test/fixtures/mdx-url-export/dist/test-2/index.html +1 -0
  61. package/test/fixtures/mdx-url-export/dist/with-url-override/index.html +1 -0
  62. package/test/fixtures/mdx-url-export/node_modules/.vite/deps_temp/package.json +1 -0
  63. package/test/fixtures/node_modules/.vite/deps_temp/package.json +1 -0
  64. package/test/mdx-frontmatter.test.js +0 -17
  65. package/test/fixtures/mdx-custom-frontmatter-name/src/pages/glob.json.js +0 -9
  66. package/test/fixtures/mdx-custom-frontmatter-name/src/pages/index.mdx +0 -6
@@ -1,5 +1,5 @@
1
- @astrojs/mdx:build: cache hit, replaying output fbb8fed20a6e13e0
1
+ @astrojs/mdx:build: cache hit, replaying output 3036c715efc9fce9
2
2
  @astrojs/mdx:build: 
3
- @astrojs/mdx:build: > @astrojs/mdx@0.7.0 build /home/runner/work/astro/astro/packages/integrations/mdx
3
+ @astrojs/mdx:build: > @astrojs/mdx@0.8.2 build /Users/matthew/dev/astro/packages/integrations/mdx
4
4
  @astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
5
5
  @astrojs/mdx:build: 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,28 @@
1
1
  # @astrojs/mdx
2
2
 
3
+ ## 0.8.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#4237](https://github.com/withastro/astro/pull/4237) [`9d5ab5508`](https://github.com/withastro/astro/commit/9d5ab55086964fbede17da3d78c209c6d8d13711) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Update "Astro.props.content" -> "Astro.props.frontmatter" in README
8
+
9
+ ## 0.8.1
10
+
11
+ ### Patch Changes
12
+
13
+ - Updated dependencies [[`04ad44563`](https://github.com/withastro/astro/commit/04ad445632c67bdd60c1704e1e0dcbcaa27b9308)]:
14
+ - @astrojs/prism@1.0.0
15
+
16
+ ## 0.8.0
17
+
18
+ ### Minor Changes
19
+
20
+ - [#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
21
+
22
+ ### Patch Changes
23
+
24
+ - [#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
25
+
3
26
  ## 0.7.0
4
27
 
5
28
  ### Minor Changes
package/README.md CHANGED
@@ -20,33 +20,30 @@ Check out [“What is MDX?”](https://mdxjs.com/docs/what-is-mdx/), a deep-dive
20
20
 
21
21
  ## Installation
22
22
 
23
- <details>
24
- <summary>Quick Install</summary>
23
+ ### Quick Install
25
24
 
26
25
  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.
27
26
 
28
- ```sh
29
- # Using NPM
30
- npx astro add mdx
31
- # Using Yarn
32
- yarn astro add mdx
33
- # Using PNPM
34
- pnpx astro add mdx
35
- ```
27
+ ```sh
28
+ # Using NPM
29
+ npx astro add mdx
30
+ # Using Yarn
31
+ yarn astro add mdx
32
+ # Using PNPM
33
+ pnpx astro add mdx
34
+ ```
36
35
 
37
36
  Then, restart the dev server by typing `CTRL-C` and then `npm run astro dev` in the terminal window that was running Astro.
38
37
 
39
38
  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.
40
- </details>
41
39
 
42
- <details>
43
- <summary>Manual Install</summary>
40
+ ### Manual Install
44
41
 
45
42
  First, install the `@astrojs/mdx` package using your package manager. If you're using npm or aren't sure, run this in the terminal:
46
43
 
47
- ```sh
48
- npm install @astrojs/mdx
49
- ```
44
+ ```sh
45
+ npm install @astrojs/mdx
46
+ ```
50
47
 
51
48
  Then, apply this integration to your `astro.config.*` file using the `integrations` property:
52
49
 
@@ -63,11 +60,14 @@ export default defineConfig({
63
60
  ```
64
61
 
65
62
  Finally, restart the dev server.
66
- </details>
67
63
 
68
64
  ## Usage
69
65
 
70
- To write your first MDX page in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
66
+ 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.
67
+
68
+ ### Components
69
+
70
+ To use components in your MDX pages in Astro, head to our [UI framework documentation][astro-ui-frameworks]. You'll explore:
71
71
  - 📦 how framework components are loaded,
72
72
  - 💧 client-side hydration options, and
73
73
  - 🪆 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][
76
76
 
77
77
  > **Note**: `.mdx` files adhere to strict JSX syntax rather than Astro's HTML-like syntax.
78
78
 
79
- Also check our [Astro Integration Documentation][astro-integration] for more on integrations.
80
-
81
79
  ### Variables
82
80
 
83
81
  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
123
121
 
124
122
  ### Frontmatter
125
123
 
126
- 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.
124
+ 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.
127
125
 
128
126
  For example, we can add a `title` and `publishDate` to an MDX page or component like so:
129
127
 
@@ -152,6 +150,40 @@ const posts = await Astro.glob('./*.mdx');
152
150
  ))}
153
151
  ```
154
152
 
153
+ ### Inject frontmatter via remark or rehype plugins
154
+
155
+ 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.
156
+
157
+ You can append to the `data.astro.frontmatter` property from your plugin’s `file` argument like so:
158
+
159
+ ```js
160
+ // example-remark-plugin.mjs
161
+ export function exampleRemarkPlugin() {
162
+ // All remark and rehype plugins return a separate function
163
+ return function (tree, file) {
164
+ file.data.astro.frontmatter.customProperty = 'Generated property';
165
+ }
166
+ }
167
+ ```
168
+
169
+ After applying this plugin to your MDX integration config:
170
+
171
+ ```js
172
+ // astro.config.mjs
173
+ import mdx from '@astrojs/mdx';
174
+ import { exampleRemarkPlugin } from './example-remark-plugin.mjs';
175
+
176
+ export default {
177
+ integrations: [
178
+ mdx({
179
+ remarkPlugins: [exampleRemarkPlugin],
180
+ }),
181
+ ],
182
+ };
183
+ ```
184
+
185
+ …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).
186
+
155
187
  ### Layouts
156
188
 
157
189
  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:
@@ -163,19 +195,19 @@ title: 'My Blog Post'
163
195
  ---
164
196
  ```
165
197
 
166
- Then, you can retrieve all other frontmatter properties from your layout via the `content` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots):
198
+ Then, you can retrieve all other frontmatter properties from your layout via the `frontmatter` property, and render your MDX using the default [`<slot />`](https://docs.astro.build/en/core-concepts/astro-components/#slots):
167
199
 
168
200
  ```astro
169
201
  ---
170
202
  // src/layouts/BaseLayout.astro
171
- const { content } = Astro.props;
203
+ const { frontmatter } = Astro.props;
172
204
  ---
173
205
  <html>
174
206
  <head>
175
- <title>{content.title}</title>
207
+ <title>{frontmatter.title}</title>
176
208
  </head>
177
209
  <body>
178
- <h1>{content.title}</h1>
210
+ <h1>{frontmatter.title}</h1>
179
211
  <!-- Rendered MDX will be passed into the default slot. -->
180
212
  <slot />
181
213
  </body>
@@ -255,8 +287,7 @@ This applies a minimal Prism renderer with added support for `astro` code blocks
255
287
 
256
288
  ## Configuration
257
289
 
258
- <details>
259
- <summary><strong>remarkPlugins</strong></summary>
290
+ ### remarkPlugins
260
291
 
261
292
  **Default plugins:** [remark-gfm](https://github.com/remarkjs/remark-gfm), [remark-smartypants](https://github.com/silvenon/remark-smartypants)
262
293
 
@@ -292,10 +323,7 @@ export default {
292
323
  }
293
324
  ```
294
325
 
295
- </details>
296
-
297
- <details>
298
- <summary><strong>rehypePlugins</strong></summary>
326
+ ### rehypePlugins
299
327
 
300
328
  [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!
301
329
 
@@ -313,38 +341,6 @@ export default {
313
341
  })],
314
342
  }
315
343
  ```
316
- </details>
317
-
318
- <details>
319
- <summary><strong>frontmatterOptions</strong></summary>
320
-
321
- **Default:** `{ name: 'frontmatter' }`
322
-
323
- 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.
324
-
325
- 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:
326
-
327
- ```js
328
- // astro.config.mjs
329
- export default {
330
- integrations: [mdx({
331
- frontmatterOptions: {
332
- name: '',
333
- }
334
- })],
335
- }
336
- ```
337
-
338
- ```mdx
339
- ---
340
- title: I'm just a variable now!
341
- ---
342
-
343
- # {title}
344
- ```
345
-
346
- See the [remark-mdx-frontmatter README](https://github.com/remcohaszing/remark-mdx-frontmatter#options) for a complete list of options.
347
- </details>
348
344
 
349
345
  ## Examples
350
346
 
@@ -1,7 +1,7 @@
1
1
  import type { MarkdownAstroData } from 'astro';
2
2
  import type { Data, VFile } from 'vfile';
3
3
  export declare function remarkInitializeAstroData(): (tree: any, vfile: VFile) => void;
4
- export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>, exportName?: string): (tree: any, vfile: VFile) => void;
4
+ export declare function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>): (tree: any, vfile: VFile) => void;
5
5
  /**
6
6
  * Copied from markdown utils
7
7
  * @see "vite-plugin-utils"
@@ -1,4 +1,3 @@
1
- import { name as isValidIdentifierName } from "estree-util-is-identifier-name";
2
1
  import { jsToTreeNode } from "./utils.js";
3
2
  function remarkInitializeAstroData() {
4
3
  return function(tree, vfile) {
@@ -7,32 +6,14 @@ function remarkInitializeAstroData() {
7
6
  }
8
7
  };
9
8
  }
10
- function rehypeApplyFrontmatterExport(pageFrontmatter, exportName = "frontmatter") {
9
+ const EXPORT_NAME = "frontmatter";
10
+ function rehypeApplyFrontmatterExport(pageFrontmatter) {
11
11
  return function(tree, vfile) {
12
- if (!isValidIdentifierName(exportName)) {
13
- throw new Error(
14
- `[MDX] ${JSON.stringify(
15
- exportName
16
- )} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
17
- );
18
- }
19
12
  const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
20
13
  const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
21
- let exportNodes = [];
22
- if (!exportName) {
23
- exportNodes = Object.entries(frontmatter).map(([k, v]) => {
24
- if (!isValidIdentifierName(k)) {
25
- throw new Error(
26
- `[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
27
- k
28
- )} as a top-level export, which is not a valid export name.`
29
- );
30
- }
31
- return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
32
- });
33
- } else {
34
- exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
35
- }
14
+ const exportNodes = [
15
+ jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
16
+ ];
36
17
  tree.children = exportNodes.concat(tree.children);
37
18
  };
38
19
  }
package/dist/index.d.ts CHANGED
@@ -1,18 +1,11 @@
1
1
  import { Options as MdxRollupPluginOptions } from '@mdx-js/rollup';
2
2
  import type { AstroIntegration } from 'astro';
3
- import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
4
3
  declare type WithExtends<T> = T | {
5
4
  extends: T;
6
5
  };
7
6
  declare type MdxOptions = {
8
7
  remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
9
8
  rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
10
- /**
11
- * Configure the remark-mdx-frontmatter plugin
12
- * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
13
- * @default {{ name: 'frontmatter' }}
14
- */
15
- frontmatterOptions?: RemarkMdxFrontmatterOptions;
16
9
  };
17
10
  export default function mdx(mdxOptions?: MdxOptions): AstroIntegration;
18
11
  export {};
package/dist/index.js CHANGED
@@ -37,9 +37,9 @@ function getRemarkPlugins(mdxOptions, config) {
37
37
  function getRehypePlugins(mdxOptions, config) {
38
38
  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
39
39
  if (config.markdown.syntaxHighlight === "shiki" || config.markdown.syntaxHighlight === "prism") {
40
- rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
40
+ rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
41
41
  }
42
- rehypePlugins.push(rehypeCollectHeadings);
42
+ rehypePlugins.unshift(rehypeCollectHeadings);
43
43
  return rehypePlugins;
44
44
  }
45
45
  function mdx(mdxOptions = {}) {
@@ -83,13 +83,7 @@ return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHead
83
83
  ...mdxPluginOpts,
84
84
  rehypePlugins: [
85
85
  ...mdxPluginOpts.rehypePlugins ?? [],
86
- () => {
87
- var _a;
88
- return rehypeApplyFrontmatterExport(
89
- frontmatter,
90
- (_a = mdxOptions.frontmatterOptions) == null ? void 0 : _a.name
91
- );
92
- }
86
+ () => rehypeApplyFrontmatterExport(frontmatter)
93
87
  ]
94
88
  });
95
89
  return {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@astrojs/mdx",
3
3
  "description": "Use MDX within Astro",
4
- "version": "0.7.0",
4
+ "version": "0.8.2",
5
5
  "type": "module",
6
6
  "types": "./dist/index.d.ts",
7
7
  "author": "withastro",
@@ -23,7 +23,7 @@
23
23
  "./package.json": "./package.json"
24
24
  },
25
25
  "dependencies": {
26
- "@astrojs/prism": "^0.7.0",
26
+ "@astrojs/prism": "^1.0.0",
27
27
  "@mdx-js/mdx": "^2.1.2",
28
28
  "@mdx-js/rollup": "^2.1.1",
29
29
  "acorn": "^8.8.0",
@@ -33,7 +33,6 @@
33
33
  "rehype-raw": "^6.1.1",
34
34
  "remark-frontmatter": "^4.0.1",
35
35
  "remark-gfm": "^3.0.1",
36
- "remark-mdx-frontmatter": "^2.0.2",
37
36
  "remark-shiki-twoslash": "^3.1.0",
38
37
  "remark-smartypants": "^2.0.0",
39
38
  "shiki": "^0.10.1",
@@ -44,8 +43,8 @@
44
43
  "@types/chai": "^4.3.1",
45
44
  "@types/mocha": "^9.1.1",
46
45
  "@types/yargs-parser": "^21.0.0",
47
- "astro": "1.0.0-rc.7",
48
- "astro-scripts": "0.0.6",
46
+ "astro": "1.0.2",
47
+ "astro-scripts": "0.0.7",
49
48
  "chai": "^4.3.6",
50
49
  "linkedom": "^0.14.12",
51
50
  "mdast-util-to-string": "^3.1.0",
@@ -1,6 +1,4 @@
1
1
  import type { MarkdownAstroData } from 'astro';
2
- import { name as isValidIdentifierName } from 'estree-util-is-identifier-name';
3
- import type { MdxjsEsm } from 'mdast-util-mdx';
4
2
  import type { Data, VFile } from 'vfile';
5
3
  import { jsToTreeNode } from './utils.js';
6
4
 
@@ -12,35 +10,15 @@ export function remarkInitializeAstroData() {
12
10
  };
13
11
  }
14
12
 
15
- export function rehypeApplyFrontmatterExport(
16
- pageFrontmatter: Record<string, any>,
17
- exportName = 'frontmatter'
18
- ) {
13
+ const EXPORT_NAME = 'frontmatter';
14
+
15
+ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any>) {
19
16
  return function (tree: any, vfile: VFile) {
20
- if (!isValidIdentifierName(exportName)) {
21
- throw new Error(
22
- `[MDX] ${JSON.stringify(
23
- exportName
24
- )} is not a valid frontmatter export name! Make sure "frontmatterOptions.name" could be used as a JS export (i.e. "export const frontmatterName = ...")`
25
- );
26
- }
27
17
  const { frontmatter: injectedFrontmatter } = safelyGetAstroData(vfile.data);
28
18
  const frontmatter = { ...injectedFrontmatter, ...pageFrontmatter };
29
- let exportNodes: MdxjsEsm[] = [];
30
- if (!exportName) {
31
- exportNodes = Object.entries(frontmatter).map(([k, v]) => {
32
- if (!isValidIdentifierName(k)) {
33
- throw new Error(
34
- `[MDX] A remark or rehype plugin tried to inject ${JSON.stringify(
35
- k
36
- )} as a top-level export, which is not a valid export name.`
37
- );
38
- }
39
- return jsToTreeNode(`export const ${k} = ${JSON.stringify(v)};`);
40
- });
41
- } else {
42
- exportNodes = [jsToTreeNode(`export const ${exportName} = ${JSON.stringify(frontmatter)};`)];
43
- }
19
+ const exportNodes = [
20
+ jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
21
+ ];
44
22
  tree.children = exportNodes.concat(tree.children);
45
23
  };
46
24
  }
package/src/index.ts CHANGED
@@ -4,7 +4,6 @@ import type { AstroConfig, AstroIntegration } from 'astro';
4
4
  import { parse as parseESM } from 'es-module-lexer';
5
5
  import rehypeRaw from 'rehype-raw';
6
6
  import remarkGfm from 'remark-gfm';
7
- import type { RemarkMdxFrontmatterOptions } from 'remark-mdx-frontmatter';
8
7
  import remarkShikiTwoslash from 'remark-shiki-twoslash';
9
8
  import remarkSmartypants from 'remark-smartypants';
10
9
  import { VFile } from 'vfile';
@@ -19,12 +18,6 @@ type WithExtends<T> = T | { extends: T };
19
18
  type MdxOptions = {
20
19
  remarkPlugins?: WithExtends<MdxRollupPluginOptions['remarkPlugins']>;
21
20
  rehypePlugins?: WithExtends<MdxRollupPluginOptions['rehypePlugins']>;
22
- /**
23
- * Configure the remark-mdx-frontmatter plugin
24
- * @see https://github.com/remcohaszing/remark-mdx-frontmatter#options for a full list of options
25
- * @default {{ name: 'frontmatter' }}
26
- */
27
- frontmatterOptions?: RemarkMdxFrontmatterOptions;
28
21
  };
29
22
 
30
23
  const DEFAULT_REMARK_PLUGINS: MdxRollupPluginOptions['remarkPlugins'] = [
@@ -69,10 +62,10 @@ function getRehypePlugins(
69
62
  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
70
63
 
71
64
  if (config.markdown.syntaxHighlight === 'shiki' || config.markdown.syntaxHighlight === 'prism') {
72
- rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
65
+ rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
73
66
  }
74
67
  // getHeadings() is guaranteed by TS, so we can't allow user to override
75
- rehypePlugins.push(rehypeCollectHeadings);
68
+ rehypePlugins.unshift(rehypeCollectHeadings);
76
69
 
77
70
  return rehypePlugins;
78
71
  }
@@ -119,11 +112,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
119
112
  ...mdxPluginOpts,
120
113
  rehypePlugins: [
121
114
  ...(mdxPluginOpts.rehypePlugins ?? []),
122
- () =>
123
- rehypeApplyFrontmatterExport(
124
- frontmatter,
125
- mdxOptions.frontmatterOptions?.name
126
- ),
115
+ () => rehypeApplyFrontmatterExport(frontmatter),
127
116
  ],
128
117
  });
129
118
 
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html>
2
+ <h1 id="hello-component">Hello component!</h1>
3
+ <div id="foo">bar</div>
@@ -0,0 +1 @@
1
+ {"titles":["Using YAML frontmatter"]}
@@ -0,0 +1 @@
1
+ <!DOCTYPE html><h1 id="customfrontmatterillthrowifidontexist">Oh no, that&#39;s scary!</h1>
@@ -0,0 +1 @@
1
+ {"titles":["Using YAML frontmatter",null]}
@@ -0,0 +1,17 @@
1
+ <!DOCTYPE html><html lang="en">
2
+
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ </head>
8
+
9
+ <body>
10
+ <p data-content-title>Using YAML frontmatter</p>
11
+ <p data-frontmatter-title>Using YAML frontmatter</p>
12
+ <p data-layout-rendered>Layout rendered!</p>
13
+ <ul data-headings>
14
+
15
+ </ul>
16
+ Oh no, that&#39;s scary!
17
+ </body></html>
@@ -0,0 +1,18 @@
1
+ <!DOCTYPE html><html lang="en">
2
+
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ </head>
8
+
9
+ <body>
10
+ <p data-content-title></p>
11
+ <p data-frontmatter-title></p>
12
+ <p data-layout-rendered>Layout rendered!</p>
13
+ <ul data-headings>
14
+ <li>section-1</li><li>section-2</li>
15
+ </ul>
16
+ <h2 id="section-1">Section 1</h2>
17
+ <h2 id="section-2">Section 2</h2>
18
+ </body></html>
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="$NODE_PATH:/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../../../../astro/astro.js" "$@"
@@ -0,0 +1 @@
1
+ {"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"}]}}
@@ -0,0 +1,5 @@
1
+ <!DOCTYPE html><h1 id="heading-test">Heading test</h1>
2
+ <h2 id="section-1">Section 1</h2>
3
+ <h3 id="subsection-1">Subsection 1</h3>
4
+ <h3 id="subsection-2">Subsection 2</h3>
5
+ <h2 id="section-2">Section 2</h2>
@@ -0,0 +1,3 @@
1
+ <!DOCTYPE html><h1 id="heading-test-with-jsx-expressions">Heading test with JSX expressions</h1>
2
+ <h2 id="h2title">Section 1</h2>
3
+ <h3 id="h3title">Subsection 1</h3>
@@ -0,0 +1,13 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <title>Page</title>
5
+ </head>
6
+ <body>
7
+ <p>First mdx file</p>
8
+
9
+ <div id="one">hello</div>
10
+ <div id="url">/src/content/1.mdx</div>
11
+ <div id="file">/Users/matthew/dev/astro/packages/integrations/mdx/test/fixtures/mdx-get-static-paths/src/content/1.mdx</div>
12
+ </body>
13
+ </html>
@@ -0,0 +1 @@
1
+ <!DOCTYPE html><h1 id="hello-page">Hello page!</h1>
@@ -6,9 +6,9 @@ case `uname` in
6
6
  esac
7
7
 
8
8
  if [ -z "$NODE_PATH" ]; then
9
- export NODE_PATH="/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
9
+ export NODE_PATH="/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
10
10
  else
11
- export NODE_PATH="$NODE_PATH:/home/runner/work/astro/astro/node_modules/.pnpm/node_modules"
11
+ export NODE_PATH="$NODE_PATH:/Users/matthew/dev/astro/node_modules/.pnpm/node_modules"
12
12
  fi
13
13
  if [ -x "$basedir/node" ]; then
14
14
  exec "$basedir/node" "$basedir/../../../../../../../astro/astro.js" "$@"