$3

If you find recma-mdx-change-props useful in your projects, consider supporting my work.
Your sponsorship means a lot 💖

Be the first sponsor and get featured here and on my sponsor wall.
Thank you for supporting open source! 🙌

recma-mdx-change-props

[![npm version][badge-npm-version]][url-npm-package]
[![npm downloads][badge-npm-download]][url-npm-package]
[![publish to npm][badge-publish-to-npm]][url-publish-github-actions]
[![code-coverage][badge-codecov]][url-codecov]
[![type-coverage][badge-type-coverage]][url-github-package]
[![typescript][badge-typescript]][url-typescript]
[![license][badge-license]][url-license]

> [!WARNING]
> recma-mdx-change-props is useful for next-mdx-remote or next-mdx-remote-client users in nextjs applications. @mdx-js/mdx and @next/mdx users does NOT need to use recma-mdx-change-props since everything is props in that packages.

This package is a [unified][unified] ([recma][recma]) plugin that enables the use of expressions like {props.foo} in MDX documents.

[unified][unified] is a project that transforms content with abstract syntax trees (ASTs) using the new parser [micromark][micromark]. [recma][recma] adds support for producing a javascript code by transforming [esast][esast] which stands for Ecma Script Abstract Syntax Tree (AST) that is used in production of compiled source for the [MDX][MDX].

When should I use this?

Use recma-mdx-change-props to enable expressions like {props.foo} in MDX documents.

recma-mdx-change-props allows you to pass the props object in the scope variable when using next-mdx-remote or next-mdx-remote-client.

``javascript
const scope = {
props: {
foo: "foofoo",
baz: "bazbaz"
}
}

... / />
`

recma-mdx-change-props changes the props parameter into _props in the function _createMdxContent in the compiled source; and makes appropriate changes in order to do so. Without recma-mdx-change-props, there will be a confliction caused by "props" in the function _createMdxContent(props){} and the expression like {props.foo} in a MDX document, and it will not work as expected.

Installation

This package is suitable for ESM only. In Node.js (version 18+), install with npm:

`bash
npm install recma-mdx-change-props
`

or

`bash
yarn add recma-mdx-change-props
`

Usage

Say we have the following file, example.mdx,

`mdx


Hi {props.foo}




`

And our module, example.js, looks as follows:

`javascript
import { read } from "to-vfile";
import { compile } from "@mdx-js/mdx";
import recmaMdxChangeProps from "recma-mdx-change-props";

main();

async function main() {
const source = await read("example.mdx");

const compiledSource = await compile(source, {
recmaPlugins: [recmaMdxChangeProps],
});

return String(compiledSource);
}
`

Now, running node example.js produces the compiled source like below:

`js
function _createMdxContent(_props) {
const _components = {
h1: "h1",
..._props.components
}, {Test} = _components;
// ...
return _jsxs(_Fragment, {
children: [_jsxs(_components.h1, {
children: ["Hi ", props.foo]
}), "\\n", _jsx(Test, {
name: props.baz
})]
});
}
`

And, this provides us to pass an object containing the props key during function construction of the compiled source.

`js
const scope = {
title: "My Article",
props: {
foo: "foofoo",
bar: "barbar",
}
}
`

Without recma-mdx-change-props, the statements props.foo and props.baz will be undefined during function construction.

`js
function _createMdxContent(props) {
const _components = {
h1: "h1",
...props.components
}, {Test} = _components;
// ...
return _jsxs(_Fragment, {
children: [_jsxs(_components.h1, {
children: ["Hi ", props.foo]
}), "\\n", _jsx(Test, {
name: props.baz
})]
});
}
`

Options

All options are optional, and implemented as for being more flexible in case of need to change the names.

`typescript
export type ChangePropsOptions = {
funcName?: string; // default is "_createMdxContent" which the plugin looks for
propName?: string; // default is "props" which the plugin looks for
propAs?: string; // default is "_props" which the plugin converts into
};
`

The options are self-explainotary, so that is why no need to represent more example here.

`javascript
use(recmaMdxChangeProps, {propAs: "__props__"} as ChangePropsOptions);
`

Syntax tree

This plugin only modifies the ESAST (Ecma Script Abstract Syntax Tree) as explained.

Types

This package is fully typed with [TypeScript][url-typescript]. The plugin options is exported as ChangePropsOptions.

Compatibility

This plugin works with unified version 6+. It is compatible with mdx version 3+.

Security

Use of recma-mdx-change-props does not involve user content so there are no openings for cross-site scripting (XSS) attacks.

My Plugins

I like to contribute the Unified / Remark / MDX ecosystem, so I recommend you to have a look my plugins.

$3

- remark-flexible-code-titles
– Remark plugin to add titles or/and containers for the code blocks with customizable properties
- remark-flexible-containers
– Remark plugin to add custom containers with customizable properties in markdown
- remark-ins
– Remark plugin to add ins element in markdown
- remark-flexible-paragraphs
– Remark plugin to add custom paragraphs with customizable properties in markdown
- remark-flexible-markers
– Remark plugin to add custom mark element with customizable properties in markdown
- remark-flexible-toc
– Remark plugin to expose the table of contents via vfile.data or via an option reference
- remark-mdx-remove-esm
– Remark plugin to remove import and/or export statements (mdxjsEsm)

$3

- rehype-pre-language
– Rehype plugin to add language information as a property to pre element
- rehype-highlight-code-lines
– Rehype plugin to add line numbers to code blocks and allow highlighting of desired code lines
- rehype-code-meta
– Rehype plugin to copy code.data.meta to code.properties.metastring
- rehype-image-toolkit
– Rehype plugin to enhance Markdown image syntax ![]() and Markdown/MDX media elements (,

with optional captions, unwrapping images/videos/audio from paragraph, parsing directives in title for styling and adding attributes, and dynamically converting images into