feat(npm-to-yarn): add support for PnPm and custom converters

[armano2]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

This PR add's conversion of npm commands to pnpm and exposes easy api that allow users to add additional conversions.
by default pnpm is enabled and can be turned off by new plugin config option converters

type CustomConverter = [name: string, cb: (npmCode: string) => string];

type PluginOptions = {
  sync?: boolean;
  converters?: (CustomConverter | 'yarn' | 'pnpm')[];
}

this change was requested in babel/website#2725 (comment)

Test case

https://deploy-preview-8690--docusaurus-2.netlify.app/docs/installation/#running-the-development-server
https://deploy-preview-8690--docusaurus-2.netlify.app/docs/markdown-features/code-blocks#npm2yarn-remark-plugin

Related issues/PRs

#8650
fixes #5861

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	6138a74
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/63f8e906a4329a0008e4e252
😎 Deploy Preview	https://deploy-preview-8690--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 89	🟢 97	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 72	🟢 100	🟢 100	🟢 100	🟢 90	Report

[slorber]

Thanks a lot for taking care of the npm-to-yarn plugin
Got access to the repo only recently but didn't have time to do the work, so thanks for doing it for me 😄

Left some little review comments before merging

[mrazauskas]

Regarding the name, it could be: @docusaurus/remark-plugin-npm-or-yarn-or-pnpm.

I was working on a similar plugin, because it seemed like issues around Docusaurus plugin will not get sorted soon. The name comes from that work which was never published. Glad to see the progress here.

One thing I would love to see improved is the labels. Command based labels like npm, yarn and pnpm look the best for my eye. If it is hard to find a consensus around them, perhaps text of the labels could be customisable? I was implementing the labels option like this: labels: Array<['npm' | 'yarn', string]>. Usage example: labels: [['npm', 'NPM command'], ['yarn', 'Yarn command']].

[armano2]

labels

adding labels option to customize displayed name is not hard, but I'm against pushing more changes in this PR

[mrazauskas]

Sure. This is simply a feature request (;

[slorber]

Thanks for your feedback

FYI the MDX 2.0 upgrade is in progress and the code of this plugin is significantly different so I'd rather not do to many things here until we finalize the upgrade.

See https://github.com/facebook/docusaurus/blob/slorber/mdx-2.0/packages/docusaurus-remark-plugin-npm2yarn/src/index.ts

---

There's probably an opportunity to create a remark plugin for MDX 2 that's generic/flexible enough to work with any React docs tools and custom stacks (and even non-React stacks since MDX is not just for React).

For example, maybe @shuding would be interested to use it on Nextra: https://nextra.site/docs/docs-theme/built-ins/tabs

It doesn't even have to only work for npm2yarn conversions, but maybe just be a very generic code block expanding to multiple tabs feature?

[slorber]

added converters to readme, thanks, LGTM 👍