feat(plugin-npm2yarn): Add Bun to default tabs conversions (#10953)

* fix(plugin-npm2yarn): Add Bun as default to align with docs

* fix(plugin-npm2yarn): update test snapshot with bunx

* fix(plugin-npm2yarn): update test snapshot with bunx-create

* fix(plugin-npm2yarn): update screenshot to add pnpm and Bun

---------

Co-authored-by: Sébastien Lorber <slorber@users.noreply.github.com>

Author: jakeboone02

packages/docusaurus-remark-plugin-npm2yarn/README.md

@@ -63,7 +63,7 @@ module.exports = {
 | Property | Type | Default | Description |
 | --- | --- | --- | --- |
 | `sync` | `boolean` | `false` | Syncing tab choices (Yarn and npm). See https://docusaurus.io/docs/markdown-features/#syncing-tab-choices for details. |
-| `converters` | `array` | `'yarn'`, `'pnpm'`, `'bun'` | The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice. |
+| `converters` | `array` | `['yarn', 'pnpm', 'bun']` | The list of converters to use. The order of the converters is important, as the first converter will be used as the default choice. |
 
 ## Custom converters
 

packages/docusaurus-remark-plugin-npm2yarn/example.png

@@ -24,6 +24,12 @@ import TabItem from '@theme/TabItem'
       $ pnpm add --global docusaurus
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+      $ bun add --global docusaurus
+    \`\`\`
+  </TabItem>
 </Tabs>
 
 <div className="nested-npm2yarn">
@@ -45,6 +51,12 @@ import TabItem from '@theme/TabItem'
       pnpm install
       \`\`\`
     </TabItem>
+
+    <TabItem value="bun" label="Bun">
+      \`\`\`bash
+      bun install
+      \`\`\`
+    </TabItem>
   </Tabs>
 </div>
 
@@ -72,6 +84,12 @@ echo "no npm2yarn here"
     yarn add @docusaurus/core
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    yarn add @docusaurus/core
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -99,6 +117,12 @@ import TabItem from '@theme/TabItem';
       $ pnpm add --global docusaurus
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+      $ bun add --global docusaurus
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -122,6 +146,12 @@ exports[`npm2yarn plugin does not re-import tabs components when already importe
       $ pnpm add --global docusaurus
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+      $ bun add --global docusaurus
+    \`\`\`
+  </TabItem>
 </Tabs>
 
 import Tabs from '@theme/Tabs';
@@ -263,6 +293,12 @@ import TabItem from '@theme/TabItem'
       $ pnpm add --global docusaurus
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+      $ bun add --global docusaurus
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -293,6 +329,12 @@ A plugin is usually a npm package, so you install them like other npm packages u
     pnpm add docusaurus-plugin-name
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun add docusaurus-plugin-name
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -319,6 +361,12 @@ import TabItem from '@theme/TabItem'
     pnpm run xxx --arg
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun run xxx --arg
+    \`\`\`
+  </TabItem>
 </Tabs>
 
 <Tabs groupId="npm2yarn">
@@ -339,6 +387,12 @@ import TabItem from '@theme/TabItem'
     pnpm add package
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun add package
+    \`\`\`
+  </TabItem>
 </Tabs>
 
 <Tabs groupId="npm2yarn">
@@ -359,6 +413,12 @@ import TabItem from '@theme/TabItem'
     pnpm remove package-name
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun remove package-name
+    \`\`\`
+  </TabItem>
 </Tabs>
 
 <Tabs groupId="npm2yarn">
@@ -382,6 +442,13 @@ import TabItem from '@theme/TabItem'
     pnpm create docusaurus@latest my-website classic
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bunx create-docusaurus
+    bunx create-docusaurus@latest my-website classic
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -412,6 +479,12 @@ Hey
     pnpm add test
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun add test
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;
@@ -442,6 +515,12 @@ A plugin is usually a npm package, so you install them like other npm packages u
     pnpm add docusaurus-plugin-name
     \`\`\`
   </TabItem>
+
+  <TabItem value="bun" label="Bun">
+    \`\`\`bash
+    bun add docusaurus-plugin-name
+    \`\`\`
+  </TabItem>
 </Tabs>
 "
 `;

packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/__snapshots__/index.test.ts.snap

@@ -172,7 +172,7 @@ function createImportNode() {
 }
 
 const plugin: Plugin<[PluginOptions?]> = (options = {}): Transformer => {
-  const {sync = false, converters = ['yarn', 'pnpm']} = options;
+  const {sync = false, converters = ['yarn', 'pnpm', 'bun']} = options;
   return async (root) => {
     const {visit} = await import('unist-util-visit');