@astrojs/mdx - npm Package Compare versions

Comparing version 0.11.4 to 0.11.5

CHANGELOG.md

 # @astrojs/mdx
 
+## 0.11.5
+
+### Patch Changes
+
+- [#5146](https://github.com/withastro/astro/pull/5146) [`308e565ad`](https://github.com/withastro/astro/commit/308e565ad39957e3353d72ca5d3bbce1a1b45008) Thanks [@bholmesdev](https://github.com/bholmesdev)! - Support recmaPlugins config option
+
 ## 0.11.4
@@ -4,0 +10,0 @@

dist/index.d.ts

@@ -6,2 +6,3 @@ import { PluggableList } from '@mdx-js/mdx/lib/core.js';
     rehypePlugins?: PluggableList;
+    recmaPlugins?: PluggableList;
     /**
@@ -8,0 +9,0 @@ * Choose which remark and rehype plugins to inherit, if any.

dist/index.js

@@ -40,2 +40,3 @@ import { compile as mdxCompile } from "@mdx-js/mdx";
           rehypePlugins: getRehypePlugins(mdxOptions, config),
+          recmaPlugins: mdxOptions.recmaPlugins,
           jsx: true,
@@ -70,3 +71,6 @@ jsxImportSource: "astro",
                     ],
-                    recmaPlugins: [() => recmaInjectImportMetaEnvPlugin({ importMetaEnv })]
+                    recmaPlugins: [
+                      ...mdxPluginOpts.recmaPlugins ?? [],
+                      () => recmaInjectImportMetaEnvPlugin({ importMetaEnv })
+                    ]
                   });
@@ -73,0 +77,0 @@ return {

package.json

 {
   "name": "@astrojs/mdx",
   "description": "Use MDX within Astro",
-  "version": "0.11.4",
+  "version": "0.11.5",
   "type": "module",
@@ -49,3 +49,3 @@ "types": "./dist/index.d.ts",
     "@types/yargs-parser": "^21.0.0",
-    "astro": "1.4.3",
+    "astro": "1.5.3",
     "astro-scripts": "0.0.8",
@@ -70,4 +70,5 @@ "chai": "^4.3.6",
     "dev": "astro-scripts dev \"src/**/*.ts\"",
-    "test": "mocha --exit --timeout 20000"
+    "test": "mocha --exit --timeout 20000",
+    "test:match": "mocha --timeout 20000 -g"
   }
 }

README.md

@@ -74,3 +74,3 @@ # @astrojs/mdx 📝
 
-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. 
+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.
 
@@ -80,2 +80,3 @@ ### 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,
@@ -165,3 +166,3 @@ - 💧 client-side hydration options, and
 
-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 may want to inject frontmatter properties across all of your MDX files. By using a [remark](#remarkplugins) or [rehype](#rehypeplugins) plugin, you can generate these properties based on a file’s contents.
 
@@ -266,2 +267,3 @@ You can append to the `data.astro.frontmatter` property from your plugin’s `file` argument like so:
 All [exported properties](#exported-properties) are available from `Astro.props` in your layout, **with two key differences:**
+
 - Heading information (i.e. `h1 -> h6` elements) is available via the `headings` array, rather than a `getHeadings()` function.
@@ -293,2 +295,3 @@ - `file` and `url` are _also_ available as nested `frontmatter` properties (i.e. `frontmatter.url` and `frontmatter.file`). This is consistent with Astro's Markdown layout properties.
 ```
+
 Then, your values are available to you through `Astro.props` in your layout, and your MDX content will be injected into the page where your `<slot />` component is written:
@@ -327,3 +330,7 @@
 ```astro title="src/components/Blockquote.astro"
-<blockquote class="bg-blue-50 p-4">
+---
+const props = Astro.props;
+---
+
+<blockquote {...props} class="bg-blue-50 p-4">
   <span class="text-4xl text-blue-600 mb-2">“</span>
@@ -334,3 +341,3 @@ <slot />
 
-Then in the MDX file you import the component and export it to the `components` export. 
+Then in the MDX file you import the component and export it to the `components` export.
 
@@ -344,14 +351,15 @@ ```mdx title="src/pages/posts/post-1.mdx" {2}
 
-
 #### Custom components with imported `mdx`
 
-When rendering imported MDX content, custom components can also be passed via the `components` prop:
+When rendering imported MDX content, custom components can be passed via the `components` prop.
 
-```astro title="src/pages/page.astro" "components={{ h1: Heading }}"
+Note: An MDX file's exported components will _not_ be used unless you manually import and pass them via the `components` property. See the example below:
+
+```astro title="src/pages/page.astro" "components={{...components, h1: Heading }}"
 ---
-import Content from '../content.mdx';
+import { Content, components } from '../content.mdx';
 import Heading from '../Heading.astro';
 ---
 
-<Content components={{ h1: Heading }} />
+<Content components={{...components, h1: Heading }} />
 ```
@@ -418,3 +426,3 @@
 
-This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendPlugins).
+This example applies the [`remark-toc`](https://github.com/remarkjs/remark-toc) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
 
@@ -438,3 +446,3 @@ ```js
 
-This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendPlugins).
+This example applies the [`rehype-minify`](https://github.com/rehypejs/rehype-minify) plugin to `.mdx` files. To customize plugin inheritance from your Markdown config or Astro's defaults, [see the `extendPlugins` option](#extendplugins).
 
@@ -460,3 +468,3 @@ ```js
 
-By default, Astro inherits all [remark](#remarkPlugins) and [rehype](#rehypePlugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins.
+By default, Astro inherits all [remark](#remarkplugins) and [rehype](#rehypeplugins) plugins from [the `markdown` option in your Astro config](https://docs.astro.build/en/guides/markdown-content/#markdown-plugins). This also respects the [`markdown.extendDefaultPlugins`](https://docs.astro.build/en/reference/configuration-reference/#markdownextenddefaultplugins) option to extend Astro's defaults. Any additional plugins you apply in your MDX config will be applied _after_ your configured Markdown plugins.
 
@@ -519,2 +527,8 @@ This example applies [`remark-toc`](https://github.com/remarkjs/remark-toc) to Markdown _and_ MDX, and [`rehype-minify`](https://github.com/rehypejs/rehype-minify) to MDX alone:
 
+### recmaPlugins
+
+These are plugins that modify the output [estree](https://github.com/estree/estree) directly. This is useful for modifying or injecting JavaScript variables in your MDX files.
+
+We suggest [using AST Explorer](https://astexplorer.net/) to play with estree outputs, and trying [`estree-util-visit`](https://unifiedjs.com/explore/package/estree-util-visit/) for searching across JavaScript nodes.
+
 ## Examples
@@ -521,0 +535,0 @@

src/index.ts

@@ -27,2 +27,3 @@ import { compile as mdxCompile } from '@mdx-js/mdx';
 	rehypePlugins?: PluggableList;
+	recmaPlugins?: PluggableList;
 	/**
@@ -68,2 +69,3 @@ * Choose which remark and rehype plugins to inherit, if any.
 					rehypePlugins: getRehypePlugins(mdxOptions, config),
+					recmaPlugins: mdxOptions.recmaPlugins,
 					jsx: true,
@@ -105,3 +107,6 @@ jsxImportSource: 'astro',
 										],
-										recmaPlugins: [() => recmaInjectImportMetaEnvPlugin({ importMetaEnv })],
+										recmaPlugins: [
+											...(mdxPluginOpts.recmaPlugins ?? []),
+											() => recmaInjectImportMetaEnvPlugin({ importMetaEnv }),
+										],
 									});
@@ -108,0 +113,0 @@

test/mdx-plugins.test.js

@@ -7,2 +7,3 @@ import mdx from '@astrojs/mdx';
 import remarkToc from 'remark-toc';
+import { visit as estreeVisit } from 'estree-util-visit';
 
@@ -168,2 +169,17 @@ const FIXTURE_ROOT = new URL('./fixtures/mdx-plugins/', import.meta.url);
 	});
+
+	it('supports custom recma plugins', async () => {
+		const fixture = await buildFixture({
+			integrations: [
+				mdx({
+					recmaPlugins: [recmaExamplePlugin],
+				}),
+			],
+		});
+
+		const html = await fixture.readFile(FILE);
+		const { document } = parseHTML(html);
+
+		expect(selectRecmaExample(document)).to.not.be.null;
+	});
 });
@@ -199,2 +215,20 @@
 
+function recmaExamplePlugin() {
+	return (tree) => {
+		estreeVisit(tree, (node) => {
+			if (
+				node.type === 'VariableDeclarator' &&
+				node.id.name === 'recmaPluginWorking' &&
+				node.init?.type === 'Literal'
+			) {
+				node.init = {
+					...(node.init ?? {}),
+					value: true,
+					raw: 'true',
+				};
+			}
+		});
+	};
+}
+
 function selectTocLink(document) {
@@ -215,1 +249,5 @@ return document.querySelector('ul a[href="#section-1"]');
 }
+
+function selectRecmaExample(document) {
+	return document.querySelector('div[data-recma-plugin-works]');
+}

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125553

increased by1.8%

Lines of code

2176

increased by2.02%

Number of lines in readme file

542

increased by2.65%

No dependency changes