feat(v2): Extract npm2yarn plugin (#3469)

* chore(v2): add dependency

* test(v2): Add npm2yarn tests

* feat(v2): Move npm2yarn to a new remark plugin

* remark npm2yarn plugin => ready to release

Co-authored-by: slorber <lorber.sebastien@gmail.com>

packages/docusaurus-mdx-loader/package.json

@@ -17,6 +17,7 @@
     "@docusaurus/utils": "2.0.0-alpha.65",
     "@mdx-js/mdx": "^1.5.8",
     "@mdx-js/react": "^1.5.8",
+    "npm-to-yarn": "^1.0.0-2",
     "escape-html": "^1.0.3",
     "file-loader": "^6.0.0",
     "fs-extra": "^8.1.0",

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

@@ -0,0 +1,53 @@
+# Remark plugin npm2yarn
+
+## Motivation:
+
+Transforms npm bash command code blocks to Docusaurus tabs:
+
+The following (remove the `//`):
+
+````bash
+// ```bash npm2yarn
+// npm run build
+// ```
+````
+
+Becomes:
+
+![npm2yarn tabs example](./example.png)
+
+**Note**: it only works when used with Docusaurus themes that have the `Tabs` and `TabItems` components.
+
+## Install
+
+```bash
+npm install @docusaurus/remark-plugin-npm2yarn`
+```
+
+It is a Remark plugin, **not a Docusaurus plugin**, so you have to install it as a Remark plugin in the config of your Docusaurus plugins.
+
+```js
+module.exports = {
+  presets: [
+    [
+      '@docusaurus/preset-classic',
+      {
+        docs: {
+          // ...
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+        },
+        blog: {
+          // ...
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+        },
+        pages: {
+          // ...
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
+        },
+        // ...
+      },
+    ],
+  ],
+  // ...
+};
+```

packages/docusaurus-remark-plugin-npm2yarn/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@docusaurus/remark-plugin-npm2yarn",
+  "version": "2.0.0-alpha.65",
+    "description": "Remark plugin for convert npm commands to yarn as tabs",
+    "main": "src/index.js",
+    "publishConfig": {
+      "access": "public"
+    },
+    "license": "MIT",
+    "dependencies": {
+      "npm-to-yarn": "^1.0.1"
+    },
+    "devDependencies": {
+      "remark": "^12.0.0",
+      "remark-mdx": "^1.5.8",
+      "to-vfile": "^6.0.0"
+    },
+    "peerDependencies": {
+      "react": "^16.8.4",
+      "react-dom": "^16.8.4"
+    },
+    "engines": {
+      "node": ">=10.15.1"
+    }
+  }

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

@@ -0,0 +1,74 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`npm2yarn plugin test: installation file 1`] = `
+"import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+<Tabs defaultValue=\\"npm\\" values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'Yarn', value: 'yarn', },
+  ]}
+>
+<TabItem value=\\"npm\\">
+
+\`\`\`bash
+  $ npm install --global docusaurus
+\`\`\`
+
+</TabItem>
+<TabItem value=\\"yarn\\">
+
+\`\`\`bash
+  $ yarn add --global docusaurus
+\`\`\`
+
+</TabItem>
+</Tabs>
+"
+`;
+
+exports[`npm2yarn plugin test: language was not setted 1`] = `
+"\`\`\`npm2yarn
+npm install --save docusaurus-plugin-name
+\`\`\`
+
+\`\`\`bash
+npm install --save docusaurus-plugin-name
+\`\`\`
+
+\`\`\`shell
+npm install --save docusaurus-plugin-name
+\`\`\`
+"
+`;
+
+exports[`npm2yarn plugin test: plugin file 1`] = `
+"import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
+
+## Installing a plugin
+
+A plugin is usually a npm package, so you install them like other npm packages using npm.
+
+<Tabs defaultValue=\\"npm\\" values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'Yarn', value: 'yarn', },
+  ]}
+>
+<TabItem value=\\"npm\\">
+
+\`\`\`bash
+npm install --save docusaurus-plugin-name
+\`\`\`
+
+</TabItem>
+<TabItem value=\\"yarn\\">
+
+\`\`\`bash
+yarn add docusaurus-plugin-name
+\`\`\`
+
+</TabItem>
+</Tabs>
+"
+`;

packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/fixtures/installation.md

@@ -0,0 +1,3 @@
+```bash npm2yarn
+  $ npm install --global docusaurus
+```

packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/fixtures/plugin.md

@@ -0,0 +1,7 @@
+## Installing a plugin
+
+A plugin is usually a npm package, so you install them like other npm packages using npm.
+
+```bash npm2yarn
+npm install --save docusaurus-plugin-name
+```

packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/fixtures/syntax-not-properly-set.md

@@ -0,0 +1,11 @@
+```npm2yarn
+npm install --save docusaurus-plugin-name
+```
+
+```bash
+npm install --save docusaurus-plugin-name
+```
+
+```shell
+npm install --save docusaurus-plugin-name
+```

packages/docusaurus-remark-plugin-npm2yarn/src/__tests__/index.test.js

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/* eslint-disable no-param-reassign */
+
+import remark from 'remark';
+import npm2yarn from '../index';
+import vfile from 'to-vfile';
+import {join, relative} from 'path';
+import mdx from 'remark-mdx';
+
+const staticDir = `./${relative(process.cwd(), join(__dirname, 'fixtures'))}`;
+
+const processFixture = async (name, options) => {
+  const path = join(__dirname, 'fixtures', `${name}.md`);
+  const file = await vfile.read(path);
+  const result = await remark()
+    .use(mdx)
+    .use(npm2yarn, {...options, filePath: path})
+    .process(file);
+
+  return result.toString();
+};
+
+describe('npm2yarn plugin', () => {
+  test('test: installation file', async () => {
+    const result = await processFixture('installation', {
+      staticDir,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  test('test: plugin file', async () => {
+    const result = await processFixture('plugin', {
+      staticDir,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+
+  test('test: language was not setted', async () => {
+    const result = await processFixture('syntax-not-properly-set', {
+      staticDir,
+    });
+
+    expect(result).toMatchSnapshot();
+  });
+});

website/src/plugins/remark-npm2yarn.js → packages/docusaurus-remark-plugin-npm2yarn/src/index.js

@@ -17,7 +17,7 @@ const transformNode = (node) => {
     {
       type: 'jsx',
       value:
-        `<Tabs groupId="npm2yarn" defaultValue="npm" ` +
+        `<Tabs defaultValue="npm" ` +
         `values={[
     { label: 'npm', value: 'npm', },
     { label: 'Yarn', value: 'yarn', },

website/docusaurus.config.js

@@ -193,7 +193,7 @@ module.exports = {
             'https://github.com/facebook/docusaurus/edit/master/website/',
           showLastUpdateAuthor: true,
           showLastUpdateTime: true,
-          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
           disableVersioning: isVersioningDisabled,
           lastVersion: 'current',
           onlyIncludeVersions:
@@ -218,7 +218,7 @@ module.exports = {
           },
         },
         pages: {
-          remarkPlugins: [require('./src/plugins/remark-npm2yarn')],
+          remarkPlugins: [require('@docusaurus/remark-plugin-npm2yarn')],
         },
         theme: {
           customCss: [require.resolve('./src/css/custom.css')],

website/package.json

@@ -30,6 +30,7 @@
     "@docusaurus/plugin-ideal-image": "2.0.0-alpha.65",
     "@docusaurus/plugin-pwa": "2.0.0-alpha.65",
     "@docusaurus/preset-classic": "2.0.0-alpha.65",
+    "@docusaurus/remark-plugin-npm2yarn": "2.0.0-alpha.65",
     "@docusaurus/theme-live-codeblock": "2.0.0-alpha.65",
     "clsx": "^1.1.1",
     "color": "^3.1.2",

yarn.lock

@@ -15357,7 +15357,7 @@ npm-run-path@^4.0.0:
   dependencies:
     path-key "^3.0.0"
 
-npm-to-yarn@^1.0.0-2:
+npm-to-yarn@^1.0.0-2, npm-to-yarn@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/npm-to-yarn/-/npm-to-yarn-1.0.1.tgz#6cdb95114c4ff0be50a7a2381d4d16131a5f52df"
   integrity sha512-bp8T8oNMfLW+N/fE0itFfSu7RReytwhqNd9skbkfHfzGYC+5CCdzS2HnaXz6JiG4AlK2eA0qlT6NJN1SoFvcWQ==