created a new recma plugin `recma-mdx-change-props`

[talatkuyuk]

Initial checklist

• [X] I read the support docs
• [X] I read the contributing guide
• [X] I agree to follow the code of conduct
• [X] I searched issues and couldn’t find anything (or linked relevant results below)

Problem

We are not able to use "props" key in the mdx files like:

# Hi {props.foo}

<Test name={props.baz} />

Solution

Solution is to change props into _props in the _createMdxContent function:

function _createMdxContent(_props) {
  const _components = {
    // ...
    ..._props.components
  }, // ...
  // ...
}

That is why I created the recma plugin recma-mdx-change-props.

The recma-mdx-change-props changes the props parameter into _props in the function _createMdxContent; and makes appropriate changes in order to provide us to be able to use for example {props.foo} in the mdx files.

I am going to open a PR to add this into the docs. Thanks.

Alternatives

Another alternative would be to make appropriate changes in the @mdx-js/mdx package in maybe recma-document.js. But, I prefer to use the recma-mdx-change-props in order to make the mdx community accustomed to use recma plugins for who especially needs to use {props.foo} in the mdx files.

[talatkuyuk]

I've planned to employ @ChristianMurphy's advices later for all of my other plugins.

• adding provenance
• vitest
• test coverage
• type coverage
• testing types
• run the test suite in GitHub actions
• automatic release notes etc.

[wooorm]

Weird? The code here generates props?

https://github.com/mdx-js/mdx/blob/b9b37b687d13a951188a2dc164e7a123050d5e6d/packages/mdx/lib/plugin/recma-document.js#L622-L623

It’s also documented: https://mdxjs.com/docs/using-mdx/#props

[talatkuyuk]

I see the example that you reference. Interesting...

This issue is related maybe with nextjs users who are using next-mdx-remote like me. If so, we can say that this plugin appeals to these users.

Since the next-mdx-remote is little opinionated to enforce users to pass the props in the scope like that <MDXRemote scope={{name: "Mars", year: 2022 }} />, and it's users are able to call the props in the mdx like below:

# Hello {name.toUpperCase()}

The current year is {year}

instead of

# Hello {props.name.toUpperCase()}

The current year is {props.year}

[wooorm]

It seems to be next-mdx-remote, with its scope. The tools maintained here put it all in props.

[talatkuyuk]

Hmm. Then, this plugin is valid for only users who are using next-mdx-remote or other wrappers of the @mdx-js/mdx that are inline with the the similar implementation, today or in future.

[talatkuyuk]

The plugin is added into the docs. Thanks.