refactor(remark-plugin-npm2yarn): migrate package to TS

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

@@ -2,10 +2,14 @@
   "name": "@docusaurus/remark-plugin-npm2yarn",
   "version": "2.0.0-beta.9",
   "description": "Remark plugin for converting npm commands to Yarn commands as tabs.",
-  "main": "src/index.js",
+  "main": "lib/index.js",
   "publishConfig": {
     "access": "public"
   },
+  "scripts": {
+    "build": "tsc",
+    "watch": "tsc --watch"
+  },
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/docusaurus.git",
@@ -16,6 +20,7 @@
     "npm-to-yarn": "^1.0.1"
   },
   "devDependencies": {
+    "@types/mdast": "^3.0.10",
     "remark": "^12.0.0",
     "remark-mdx": "^1.6.21",
     "to-vfile": "^6.0.0"

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

@@ -0,0 +1,105 @@
+/**
+ * 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.
+ */
+
+import type {Code, Content, Literal} from 'mdast';
+import type {Plugin, Transformer} from 'unified';
+import type {Node, Parent} from 'unist';
+import npmToYarn from 'npm-to-yarn';
+
+interface PluginOptions {
+  sync?: boolean;
+}
+
+// E.g. global install: 'npm i' -> 'yarn'
+const convertNpmToYarn = (npmCode: string) => npmToYarn(npmCode, 'yarn');
+
+const transformNode = (node: Code, isSync: boolean): Parent => {
+  const groupIdProp = isSync ? 'groupId="npm2yarn" ' : '';
+  const npmCode = node.value;
+  const yarnCode = convertNpmToYarn(node.value);
+  return {
+    type: '',
+    children: [
+      {
+        type: 'jsx',
+        value:
+          `<Tabs defaultValue="npm" ${groupIdProp}` +
+          `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>',
+      },
+    ] as Content[],
+  };
+};
+
+const isImport = (node: Node): node is Literal => node.type === 'import';
+const isParent = (node: Node): node is Parent =>
+  Array.isArray((node as Parent).children);
+const matchNode = (node: Node): node is Code =>
+  node.type === 'code' && (node as Code).meta === 'npm2yarn';
+const nodeForImport: Literal = {
+  type: 'import',
+  value:
+    "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
+};
+
+const attacher: Plugin<[PluginOptions?]> = (options = {}) => {
+  const {sync = false} = options;
+  let transformed = false;
+  let alreadyImported = false;
+  const transformer: Transformer = (node, _) => {
+    if (isImport(node) && node.value.includes('@theme/Tabs')) {
+      alreadyImported = true;
+      return undefined;
+    }
+    if (matchNode(node)) {
+      transformed = true;
+      return transformNode(node, sync);
+    }
+    if (isParent(node)) {
+      let index = 0;
+      while (index < node.children.length) {
+        const {children: result} =
+          (transformer(node.children[index], _) as Parent) ?? {};
+        if (result) {
+          node.children.splice(index, 1, ...result);
+          index += result.length;
+        } else {
+          index += 1;
+        }
+      }
+    }
+    if (node.type === 'root' && transformed && !alreadyImported) {
+      (node as Parent).children.unshift(nodeForImport);
+    }
+    return undefined;
+  };
+  return transformer;
+};
+
+module.exports = attacher;

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

@@ -0,0 +1,10 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "incremental": true,
+    "tsBuildInfoFile": "./lib/.tsbuildinfo",
+    "rootDir": "src",
+    "outDir": "lib"
+  },
+  "include": ["src/"]
+}

yarn.lock

@@ -4262,7 +4262,7 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.174.tgz#b4b06b6eced9850eed6b6a8f1abdd0f5192803c1"
   integrity sha512-KMBLT6+g9qrGXpDt7ohjWPUD34WA/jasrtjTEHStF0NPdEwJ1N9SZ+4GaMVDeuk/y0+X5j9xFm6mNiXS7UoaLQ==
 
-"@types/mdast@^3.0.0", "@types/mdast@^3.0.7":
+"@types/mdast@^3.0.0", "@types/mdast@^3.0.10", "@types/mdast@^3.0.7":
   version "3.0.10"
   resolved "https://registry.yarnpkg.com/@types/mdast/-/mdast-3.0.10.tgz#4724244a82a4598884cbbe9bcfd73dff927ee8af"
   integrity sha512-W864tg/Osz1+9f4lrGTZpCSO5/z4608eUp19tbozkq2HJK6i3z1kT0H9tlADXuYIb1YYOBByU4Jsqkk75q48qA==