created a new recma plugin `recma-mdx-escape-missing-components`

[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

I created a new recma plugin namely recma-escape-missing-components. I want to support and encourage the mdx community to reach that recma plugin.

Basically, the recma-escape-missing-components;

looks for a declaration statement in an object pattern initiated by the _components

const {Component1, Component2} = _components;

converts it as the destructed properties (Components) having a default value () => null

const {Component1 = () => null, Component2 = () => null} = _components;

in order not to receive a runtime error in case that component(s) is/are not provided into MDXContent / MDXProvider.

Thanks.

Solution

Is it possible to add the plugin into the docs somewhere available.

Alternatives

Actually it is more needed to have List of Recma Plugins page like "remak plugins" and "rehype plugins".

[wooorm]

Nice!

There's a list of things specifically to mdx here on the website: https://mdxjs.com/docs/extending-mdx/#list-of-plugins. Want to PR it there?

[remcohaszing]

Nice plugin! One small tip: It would be better to declare the fallback function once, then assign it:

const _EmptyComponent = () => null;

// …

function _createMdxContent(props) {
  // …
  const {Component1 = _EmptyComponent, Component2 = _EmptyComponent} = _components;

  // …
}

This saves needless rerenders in frameworks that rely on the function identity, such as React and Preact.

[talatkuyuk]

Nice!

There's a list of things specifically to mdx here on the website: https://mdxjs.com/docs/extending-mdx/#list-of-plugins. Want to PR it there?

Thanks for your positive feedback @wooorm , I am going to create a PR soon.

[talatkuyuk]

Nice plugin! One small tip: It would be better to declare the fallback function once, then assign it:

const _EmptyComponent = () => null;

// …

function _createMdxContent(props) {
  // …
  const {Component1 = _EmptyComponent, Component2 = _EmptyComponent} = _components;

  // …
}

This saves needless rerenders in frameworks that rely on the function identity, such as React and Preact.

Thanks for your positive feedback @remcohaszing, I will try to implement as you suggested in the next version.

[talatkuyuk]

Hi @remcohaszing,

I added the declaration const _EmptyComponent = () => null; and published the new version v.1.0.2

[wooorm]

Ah, one thing I would recommend, is to use recma-mdx-escape-missing-components as a plugin name. In the future, recma plugins could be used for any javascript. This plugin is specific to MDX, so I think it’s best to make that explicit in the plugin name!

[talatkuyuk]

Ah, one thing I would recommend, is to use recma-mdx-escape-missing-components as a plugin name. In the future, recma plugins could be used for any javascript. This plugin is specific to MDX, so I think it’s best to make that explicit in the plugin name!

Okey, I have to delete the package from npm. I'll take care.

[talatkuyuk]

Hi @wooorm,

The new recma plugin recma-mdx-escape-missing-components is published as v1.0.3.

[ChristianMurphy]

Thanks for sharing @talatkuyuk! 👍 🎉 🙇 I'd second @wooorm's suggestion to add this to the recma plugin list.

Some optional thoughts and ideas for the project

• It looks like you are doing automated releases through GitHub actions, consider adding provenance for more traceable builds https://github.blog/2023-04-19-introducing-npm-package-provenance/ and https://docs.npmjs.com/generating-provenance-statements
• While Jest can be coaxed into working with ESM, I generally recommend vitest which is API compatible with Jest, for a faster and more consistent experience https://vitest.dev/
• With TypeScript I've found it helpful to include https://github.com/plantain-00/type-coverage and set a minimum identifier coverage limit, to ensure the API is fully typed. Your plugin looks mostly/fully typed, but it's hard to tell without a tool double checking. This is the config MDX uses https://github.com/mdx-js/mdx/blob/b9b37b687d13a951188a2dc164e7a123050d5e6d/package.json#L179-L184
• It can be helpful to run the test suite in GitHub actions as well to give more visibility into the test suite for both adopters and people contributing to your project.

[talatkuyuk]

Thanks to @ChristianMurphy for great advices.

I've created about 10 plugins. I think my plugins are small projects; actually I didn't get any PR, but only few issues for one year.

Although my thoughts, I will employ your advices in the phase of refinement of this and my all other plugins.

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

Thanks again.

[talatkuyuk]

The plugin is added into the docs. Thanks.