remark npm2yarn plugin => ready to release

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

@@ -8,8 +8,7 @@
     },
     "license": "MIT",
     "dependencies": {
-      "npm-to-yarn": "^1.0.0-2",
-      "@docusaurus/mdx-loader": "2.0.0-alpha.65"
+      "npm-to-yarn": "^1.0.1"
     },
     "devDependencies": {
       "remark": "^12.0.0",

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

@@ -5,13 +5,77 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-const path = require('path');
+const npmToYarn = require('npm-to-yarn');
 
-module.exports = function (_context, _options) {
-  return {
-    name: 'docusaurus-remark-plugin-npm2yarn',
-    getClientModules() {
-      return [path.resolve(__dirname, './npm2yarn/index.js')];
+// 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;
 };

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",