feat(v2): Extract npm2yarn plugin

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/package.json

@@ -0,0 +1,26 @@
+{
+  "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.0-2",
+      "@docusaurus/mdx-loader": "2.0.0-alpha.65"
+    },
+    "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/index.js

@@ -0,0 +1,17 @@
+/**
+ * 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.
+ */
+
+const path = require('path');
+
+module.exports = function (_context, _options) {
+  return {
+    name: 'docusaurus-remark-plugin-npm2yarn',
+    getClientModules() {
+      return [path.resolve(__dirname, './npm2yarn/index.js')];
+    },
+  };
+};

packages/docusaurus-remark-plugin-npm2yarn/src/npm2yarn/__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/npm2yarn/__tests__/fixtures/installation.md

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

packages/docusaurus-remark-plugin-npm2yarn/src/npm2yarn/__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/npm2yarn/__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/npm2yarn/__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();
+  });
+});

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

@@ -0,0 +1,81 @@
+/**
+ * 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.
+ */
+
+const npmToYarn = require('npm-to-yarn');
+
+// E.g. global install: 'npm i' -> 'yarn'
+const convertNpmToYarn = (npmCode) => npmToYarn(npmCode, 'yarn');
+
+const transformNode = (node) => {
+  const npmCode = node.value;
+  const yarnCode = convertNpmToYarn(node.value);
+  return [
+    {
+      type: 'jsx',
+      value:
+        `<Tabs defaultValue="npm" ` +
+        `values={[
+    { label: 'npm', value: 'npm', },
+    { label: 'Yarn', value: 'yarn', },
+  ]}
+>
+<TabItem value="npm">`,
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: npmCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n<TabItem value="yarn">',
+    },
+    {
+      type: node.type,
+      lang: node.lang,
+      value: yarnCode,
+    },
+    {
+      type: 'jsx',
+      value: '</TabItem>\n</Tabs>',
+    },
+  ];
+};
+
+const matchNode = (node) => node.type === 'code' && node.meta === 'npm2yarn';
+const nodeForImport = {
+  type: 'import',
+  value:
+    "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
+};
+
+module.exports = () => {
+  let transformed = false;
+  const transformer = (node) => {
+    if (matchNode(node)) {
+      transformed = true;
+      return transformNode(node);
+    }
+    if (Array.isArray(node.children)) {
+      let index = 0;
+      while (index < node.children.length) {
+        const result = transformer(node.children[index]);
+        if (result) {
+          node.children.splice(index, 1, ...result);
+          index += result.length;
+        } else {
+          index += 1;
+        }
+      }
+    }
+    if (node.type === 'root' && transformed) {
+      node.children.unshift(nodeForImport);
+    }
+    return null;
+  };
+  return transformer;
+};