@astrojs/mdx 0.8.0 → 0.8.3

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 (12) hide show
  1. package/.turbo/turbo-build.log +5 -5
  2. package/CHANGELOG.md +24 -0
  3. package/README.md +5 -5
  4. package/dist/astro-data-utils.js +35 -0
  5. package/dist/index.js +3 -16
  6. package/package.json +4 -4
  7. package/src/astro-data-utils.ts +36 -0
  8. package/src/index.ts +3 -12
  9. package/test/fixtures/mdx-frontmatter-injection/src/layouts/Base.astro +17 -0
  10. package/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx +4 -0
  11. package/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx +4 -0
  12. package/test/mdx-frontmatter-injection.test.js +12 -0
package/.turbo/turbo-build.log CHANGED
@@ -1,5 +1,5 @@
1
- @astrojs/mdx:build: cache hit, replaying output fb941ae7dc16611b
2
- @astrojs/mdx:build: 
3
- @astrojs/mdx:build: > @astrojs/mdx@0.8.0 build /home/runner/work/astro/astro/packages/integrations/mdx
4
- @astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
5
- @astrojs/mdx:build: 
1
+ @astrojs/mdx:build: cache hit, replaying output 67cdf445a0fed367
2
+ @astrojs/mdx:build: 
3
+ @astrojs/mdx:build: > @astrojs/mdx@0.8.3 build /home/runner/work/astro/astro/packages/integrations/mdx
4
+ @astrojs/mdx:build: > astro-scripts build "src/**/*.ts" && tsc
5
+ @astrojs/mdx:build: 
package/CHANGELOG.md CHANGED
@@ -1,5 +1,29 @@
1
1
  # @astrojs/mdx
2
2
 
3
+ ## 0.8.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#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
8
+
9
+ * [#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
10
+
11
+ * Updated dependencies [[`1f0dd31d9`](https://github.com/withastro/astro/commit/1f0dd31d9239b5e3dca99c88d021e7a9a3e2054d)]:
12
+ - @astrojs/prism@1.0.1
13
+
14
+ ## 0.8.2
15
+
16
+ ### Patch Changes
17
+
18
+ - [#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
19
+
20
+ ## 0.8.1
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies [[`04ad44563`](https://github.com/withastro/astro/commit/04ad445632c67bdd60c1704e1e0dcbcaa27b9308)]:
25
+ - @astrojs/prism@1.0.0
26
+
3
27
  ## 0.8.0
4
28
 
5
29
  ### Minor Changes
package/README.md CHANGED
@@ -195,19 +195,19 @@ title: 'My Blog Post'
195
195
  ---
196
196
  ```
197
197
 
198
- 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):
199
199
 
200
200
  ```astro
201
201
  ---
202
202
  // src/layouts/BaseLayout.astro
203
- const { content } = Astro.props;
203
+ const { frontmatter } = Astro.props;
204
204
  ---
205
205
  <html>
206
206
  <head>
207
- <title>{content.title}</title>
207
+ <title>{frontmatter.title}</title>
208
208
  </head>
209
209
  <body>
210
- <h1>{content.title}</h1>
210
+ <h1>{frontmatter.title}</h1>
211
211
  <!-- Rendered MDX will be passed into the default slot. -->
212
212
  <slot />
213
213
  </body>
@@ -323,7 +323,7 @@ export default {
323
323
  }
324
324
  ```
325
325
 
326
- ### rehypePlugins</strong>
326
+ ### rehypePlugins
327
327
 
328
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!
329
329
 
package/dist/astro-data-utils.js CHANGED
@@ -14,6 +14,41 @@ function rehypeApplyFrontmatterExport(pageFrontmatter) {
14
14
  const exportNodes = [
15
15
  jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`)
16
16
  ];
17
+ if (frontmatter.layout) {
18
+ exportNodes.unshift(
19
+ jsToTreeNode(
20
+ `import { jsx as layoutJsx } from 'astro/jsx-runtime';
21
+ import Layout from ${JSON.stringify(frontmatter.layout)};
22
+
23
+ export default function ({ children }) {
24
+ const { layout, ...content } = frontmatter;
25
+ content.astro = {};
26
+ Object.defineProperty(content.astro, 'headings', {
27
+ get() {
28
+ throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
29
+ }
30
+ });
31
+ Object.defineProperty(content.astro, 'html', {
32
+ get() {
33
+ throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
34
+ }
35
+ });
36
+ Object.defineProperty(content.astro, 'source', {
37
+ get() {
38
+ throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
39
+ }
40
+ });
41
+ return layoutJsx(Layout, {
42
+ content,
43
+ frontmatter: content,
44
+ headings: getHeadings(),
45
+ 'server:root': true,
46
+ children,
47
+ });
48
+ };`
49
+ )
50
+ );
51
+ }
17
52
  tree.children = exportNodes.concat(tree.children);
18
53
  };
19
54
  }
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 = {}) {
@@ -65,20 +65,7 @@ function mdx(mdxOptions = {}) {
65
65
  async transform(code, id) {
66
66
  if (!id.endsWith("mdx"))
67
67
  return;
68
- let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
69
- if (frontmatter.layout) {
70
- const { layout, ...contentProp } = frontmatter;
71
- pageContent += `
72
-
73
- export default async function({ children }) {
74
- const Layout = (await import(${JSON.stringify(
75
- frontmatter.layout
76
- )})).default;
77
- const frontmatter=${JSON.stringify(
78
- contentProp
79
- )};
80
- return <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
81
- }
68
+ const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
82
69
  const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
83
70
  ...mdxPluginOpts,
84
71
  rehypePlugins: [
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.8.0",
4
+ "version": "0.8.3",
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.1",
27
27
  "@mdx-js/mdx": "^2.1.2",
28
28
  "@mdx-js/rollup": "^2.1.1",
29
29
  "acorn": "^8.8.0",
@@ -43,8 +43,8 @@
43
43
  "@types/chai": "^4.3.1",
44
44
  "@types/mocha": "^9.1.1",
45
45
  "@types/yargs-parser": "^21.0.0",
46
- "astro": "1.0.0-rc.8",
47
- "astro-scripts": "0.0.6",
46
+ "astro": "1.0.3",
47
+ "astro-scripts": "0.0.7",
48
48
  "chai": "^4.3.6",
49
49
  "linkedom": "^0.14.12",
50
50
  "mdast-util-to-string": "^3.1.0",
package/src/astro-data-utils.ts CHANGED
@@ -19,6 +19,42 @@ export function rehypeApplyFrontmatterExport(pageFrontmatter: Record<string, any
19
19
  const exportNodes = [
20
20
  jsToTreeNode(`export const ${EXPORT_NAME} = ${JSON.stringify(frontmatter)};`),
21
21
  ];
22
+ if (frontmatter.layout) {
23
+ exportNodes.unshift(
24
+ jsToTreeNode(
25
+ /** @see 'vite-plugin-markdown' for layout props reference */
26
+ `import { jsx as layoutJsx } from 'astro/jsx-runtime';
27
+ import Layout from ${JSON.stringify(frontmatter.layout)};
28
+
29
+ export default function ({ children }) {
30
+ const { layout, ...content } = frontmatter;
31
+ content.astro = {};
32
+ Object.defineProperty(content.astro, 'headings', {
33
+ get() {
34
+ throw new Error('The "astro" property is no longer supported! To access "headings" from your layout, try using "Astro.props.headings."')
35
+ }
36
+ });
37
+ Object.defineProperty(content.astro, 'html', {
38
+ get() {
39
+ throw new Error('The "astro" property is no longer supported! To access "html" from your layout, try using "Astro.props.compiledContent()."')
40
+ }
41
+ });
42
+ Object.defineProperty(content.astro, 'source', {
43
+ get() {
44
+ throw new Error('The "astro" property is no longer supported! To access "source" from your layout, try using "Astro.props.rawContent()."')
45
+ }
46
+ });
47
+ return layoutJsx(Layout, {
48
+ content,
49
+ frontmatter: content,
50
+ headings: getHeadings(),
51
+ 'server:root': true,
52
+ children,
53
+ });
54
+ };`
55
+ )
56
+ );
57
+ }
22
58
  tree.children = exportNodes.concat(tree.children);
23
59
  };
24
60
  }
package/src/index.ts CHANGED
@@ -62,10 +62,10 @@ function getRehypePlugins(
62
62
  let rehypePlugins = handleExtends(mdxOptions.rehypePlugins, DEFAULT_REHYPE_PLUGINS);
63
63
 
64
64
  if (config.markdown.syntaxHighlight === 'shiki' || config.markdown.syntaxHighlight === 'prism') {
65
- rehypePlugins.push([rehypeRaw, { passThrough: nodeTypes }]);
65
+ rehypePlugins.unshift([rehypeRaw, { passThrough: nodeTypes }]);
66
66
  }
67
67
  // getHeadings() is guaranteed by TS, so we can't allow user to override
68
- rehypePlugins.push(rehypeCollectHeadings);
68
+ rehypePlugins.unshift(rehypeCollectHeadings);
69
69
 
70
70
  return rehypePlugins;
71
71
  }
@@ -98,16 +98,7 @@ export default function mdx(mdxOptions: MdxOptions = {}): AstroIntegration {
98
98
  async transform(code, id) {
99
99
  if (!id.endsWith('mdx')) return;
100
100
 
101
- let { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
102
- if (frontmatter.layout) {
103
- const { layout, ...contentProp } = frontmatter;
104
- pageContent += `\n\nexport default async function({ children }) {\nconst Layout = (await import(${JSON.stringify(
105
- frontmatter.layout
106
- )})).default;\nconst frontmatter=${JSON.stringify(
107
- contentProp
108
- )};\nreturn <Layout frontmatter={frontmatter} content={frontmatter} headings={getHeadings()}>{children}</Layout> }`;
109
- }
110
-
101
+ const { data: frontmatter, content: pageContent } = parseFrontmatter(code, id);
111
102
  const compiled = await mdxCompile(new VFile({ value: pageContent, path: id }), {
112
103
  ...mdxPluginOpts,
113
104
  rehypePlugins: [
package/test/fixtures/mdx-frontmatter-injection/src/layouts/Base.astro ADDED
@@ -0,0 +1,17 @@
1
+ ---
2
+ const defaults = { title: 'Frontmatter not passed to layout!' }
3
+ const { frontmatter = defaults, content = defaults } = Astro.props;
4
+ ---
5
+
6
+ <!DOCTYPE html>
7
+ <html lang="en">
8
+ <head>
9
+ <meta charset="UTF-8">
10
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
11
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
+ <title>{frontmatter.title}</title>
13
+ </head>
14
+ <body>
15
+ <slot />
16
+ </body>
17
+ </html>
package/test/fixtures/mdx-frontmatter-injection/src/pages/page-1.mdx CHANGED
@@ -1,3 +1,7 @@
1
+ ---
2
+ layout: '../layouts/Base.astro'
3
+ ---
4
+
1
5
  # Page 1
2
6
 
3
7
  Look at that!
package/test/fixtures/mdx-frontmatter-injection/src/pages/page-2.mdx CHANGED
@@ -1,3 +1,7 @@
1
+ ---
2
+ layout: '../layouts/Base.astro'
3
+ ---
4
+
1
5
  # Page 2
2
6
 
3
7
  ## Table of contents
package/test/mdx-frontmatter-injection.test.js CHANGED
@@ -1,4 +1,5 @@
1
1
  import { expect } from 'chai';
2
+ import { parseHTML } from 'linkedom';
2
3
  import { loadFixture } from '../../../astro/test/test-utils.js';
3
4
 
4
5
  const FIXTURE_ROOT = new URL('./fixtures/mdx-frontmatter-injection/', import.meta.url);
@@ -41,4 +42,15 @@ describe('MDX frontmatter injection', () => {
41
42
  expect(titles).to.contain('Overridden title');
42
43
  expect(readingTimes).to.contain('1000 min read');
43
44
  });
45
+
46
+ it('passes injected frontmatter to layouts', async () => {
47
+ const html1 = await fixture.readFile('/page-1/index.html');
48
+ const html2 = await fixture.readFile('/page-2/index.html');
49
+
50
+ const title1 = parseHTML(html1).document.querySelector('title');
51
+ const title2 = parseHTML(html2).document.querySelector('title');
52
+
53
+ expect(title1.innerHTML).to.equal('Page 1');
54
+ expect(title2.innerHTML).to.equal('Page 2');
55
+ });
44
56
  });