allow custom recma plugins before recmaJsxBuild

[0phoff]

Initial checklist

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

Problem

I am developing a custom Recma plugin.

My issue is that during development, I usually compiled my mdx with jsx: true, because that makes it easier to look at the output and debug the process. However, I was (stupidly) unaware that the resulting AST is completely different, depending on this setting.

While I will probably rework my plugin to work with jsx: false, this does seem to complicate things for plugin developers.
Should a plugin work in both cases (basically needing to build 2 plugins and decide which one to use at runtime) ?

Solution

I think that this issue could be resolved by using the recmaplugins before recmaJsxBuild (code), that way any plugin works regardless of whether the output should be jsx or not.

However, this means that the plugins also get used before recmaStringify (not entirely sure what it does).
I gues it might be a possibility to use recmaStringify before recmaJsxBuild as well, since recmaJsxBuild is currently not always used ?

---

I understand this change is probably not something you can quickly commit to, as existing plugins need to be adapted as well and this would thus need a discussion with the plugin authors ?
As far as I am aware, the only plugins for recma are those by @remcohaszing, but I might be mistaken ?

[remcohaszing]

There’s only one other recma plugin I’m aware of (recma-nextjs-static-props) but JSX isn’t involved with its transforms.

I do recognize this problem when I initially tried to implement #2045 as an external recma plugin, but it became part of core (work in progress). It would be nice to be able to transform JSX using recma plugins knowing it always works regardless of further JSX transformation.

[wooorm]

I mostly disagree. recma plugins are meant to work on any javascript. Like babel plugins. E.g.: minify code.

There are many options that do different things. And there are many ways to write content that result in different things. That could all theoretically change the content you work on and how things are structured.

Perhaps you don't need to change javascript. But work on remark/rehype.

All of this is hard to help with without knowing what you want to accomplish though

[0phoff]

Perhaps you don't need to change javascript. But work on remark/rehype.

Hmm, you are probably right about this one.

I am creating a very simply plugin that splits MDX on a specific component and then wraps the resulting chunks in another component (eg. splitting on <hr/> and wrapping the results in <Slide/>).
I figured I needed recma, because I add extra imports and use custom components, but it seems they are already available in remark as mdxjsEsm nodes.
I should have researched this a bit better! 😇

@wooorm, is there a naming convention for remark/rehype plugins, that specifically target MDX stuff ?

[wooorm]

Something like {remark,rehype}-mdx-{deck,whatever-you-like}. See https://mdxjs.com/docs/extending-mdx/#list-of-plugins for existing and inspirational plugins. And add yours there when it’s ready.

Cool idea! Perhaps that solves #454.

Does your plugin really need to import things? MDX already has several ways of passing and importing components: could you let users do that and benefit from the existing passing methods?

[0phoff]

Something like {remark,rehype}-mdx-{deck,whatever-you-like}

Makes sense, thank you!

---

Does your plugin really need to import things? MDX already has several ways of passing and importing components: could you let users do that and benefit from the existing passing methods?

In my current recma plugin, it is optional.
If you enable the import, it imports the wrapper component for you, but if you disable it, you can either import manually, or use component prop/MDXProvider for it.
The end use is to upgrade my MDXP package for writing slides in mdx, and for that scenario I want the automatic import ! :)