@docusaurus/remark-plugin-npm2yarn 2.4.1 → 3.0.0-alpha.0

package/lib/index.d.ts

@@ -4,11 +4,13 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-import type { Plugin } from 'unified';
-declare type CustomConverter = [name: string, cb: (npmCode: string) => string];
-declare type PluginOptions = {
+type Plugin<T> = any;
+type KnownConverter = 'yarn' | 'pnpm';
+type CustomConverter = [name: string, cb: (npmCode: string) => string];
+type Converter = CustomConverter | KnownConverter;
+type PluginOptions = {
     sync?: boolean;
-    converters?: (CustomConverter | 'yarn' | 'pnpm')[];
+    converters?: Converter[];
 };
 declare const plugin: Plugin<[PluginOptions?]>;
 export = plugin;

package/lib/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAKH,OAAO,KAAK,EAAC,MAAM,EAAC,MAAM,SAAS,CAAC;AAGpC,aAAK,eAAe,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEvE,aAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,CAAC,eAAe,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,CAAC;CACpD,CAAC;AAkEF,QAAA,MAAM,MAAM,EAAE,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC,CA4BpC,CAAC;AAIF,SAAS,MAAM,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAgBH,KAAK,MAAM,CAAC,CAAC,IAAI,GAAG,CAAC;AAErB,KAAK,cAAc,GAAG,MAAM,GAAG,MAAM,CAAC;AAEtC,KAAK,eAAe,GAAG,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,MAAM,CAAC,CAAC;AAEvE,KAAK,SAAS,GAAG,eAAe,GAAG,cAAc,CAAC;AAElD,KAAK,aAAa,GAAG;IACnB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,UAAU,CAAC,EAAE,SAAS,EAAE,CAAC;CAC1B,CAAC;AA4IF,QAAA,MAAM,MAAM,EAAE,MAAM,CAAC,CAAC,aAAa,CAAC,CAAC,CAgCpC,CAAC;AAIF,SAAS,MAAM,CAAC"}

package/lib/index.js

@@ -8,62 +8,129 @@
 const tslib_1 = require("tslib");
 const unist_util_visit_1 = tslib_1.__importDefault(require("unist-util-visit"));
 const npm_to_yarn_1 = tslib_1.__importDefault(require("npm-to-yarn"));
-function createTabItem(code, node, value, label) {
-    return [
-        {
-            type: 'jsx',
-            value: `<TabItem value="${value}"${label ? ` label="${label}"` : ''}>`,
-        },
-        {
-            type: node.type,
-            lang: node.lang,
-            value: code,
-        },
-        {
-            type: 'jsx',
-            value: '</TabItem>',
-        },
-    ];
+function createAttribute(attributeName, attributeValue) {
+    return {
+        type: 'mdxJsxAttribute',
+        name: attributeName,
+        value: attributeValue,
+    };
+}
+function createTabItem({ code, node, value, label, }) {
+    return {
+        type: 'mdxJsxFlowElement',
+        name: 'TabItem',
+        attributes: [
+            createAttribute('value', value),
+            label && createAttribute('label', label),
+        ].filter((attr) => Boolean(attr)),
+        children: [
+            {
+                type: node.type,
+                lang: node.lang,
+                value: code,
+            },
+        ],
+    };
 }
 const transformNode = (node, isSync, converters) => {
-    const groupIdProp = isSync ? ' groupId="npm2yarn"' : '';
+    const groupIdProp = isSync
+        ? {
+            type: 'mdxJsxAttribute',
+            name: 'groupId',
+            value: 'npm2yarn',
+        }
+        : undefined;
     const npmCode = node.value;
+    function createConvertedTabItem(converter) {
+        if (typeof converter === 'string') {
+            return createTabItem({
+                code: (0, npm_to_yarn_1.default)(npmCode, converter),
+                node,
+                value: converter,
+                label: converter === 'yarn' ? 'Yarn' : converter,
+            });
+        }
+        const [converterName, converterFn] = converter;
+        return createTabItem({
+            code: converterFn(npmCode),
+            node,
+            value: converterName,
+        });
+    }
     return [
         {
-            type: 'jsx',
-            value: `<Tabs${groupIdProp}>`,
-        },
-        ...createTabItem(npmCode, node, 'npm'),
-        ...converters.flatMap((converter) => typeof converter === 'string'
-            ? createTabItem((0, npm_to_yarn_1.default)(npmCode, converter), node, converter, converter === 'yarn' ? 'Yarn' : converter)
-            : createTabItem(converter[1](npmCode), node, converter[0])),
-        {
-            type: 'jsx',
-            value: '</Tabs>',
+            type: 'mdxJsxFlowElement',
+            name: 'Tabs',
+            attributes: [groupIdProp].filter(Boolean),
+            children: [
+                createTabItem({ code: npmCode, node, value: 'npm' }),
+                ...converters.flatMap(createConvertedTabItem),
+            ],
         },
     ];
 };
-const isImport = (node) => node.type === 'import';
+const isMdxEsmLiteral = (node) => node.type === 'mdxjsEsm';
+// TODO legacy approximation, good-enough for now but not 100% accurate
+const isTabsImport = (node) => isMdxEsmLiteral(node) && node.value.includes('@theme/Tabs');
 const isParent = (node) => Array.isArray(node.children);
-const matchNode = (node) => node.type === 'code' && node.meta === 'npm2yarn';
-const nodeForImport = {
-    type: 'import',
-    value: "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';",
-};
+const isNpm2Yarn = (node) => node.type === 'code' && node.meta === 'npm2yarn';
+function createImportNode() {
+    return {
+        type: 'mdxjsEsm',
+        value: "import Tabs from '@theme/Tabs'\nimport TabItem from '@theme/TabItem'",
+        data: {
+            estree: {
+                type: 'Program',
+                body: [
+                    {
+                        type: 'ImportDeclaration',
+                        specifiers: [
+                            {
+                                type: 'ImportDefaultSpecifier',
+                                local: { type: 'Identifier', name: 'Tabs' },
+                            },
+                        ],
+                        source: {
+                            type: 'Literal',
+                            value: '@theme/Tabs',
+                            raw: "'@theme/Tabs'",
+                        },
+                    },
+                    {
+                        type: 'ImportDeclaration',
+                        specifiers: [
+                            {
+                                type: 'ImportDefaultSpecifier',
+                                local: { type: 'Identifier', name: 'TabItem' },
+                            },
+                        ],
+                        source: {
+                            type: 'Literal',
+                            value: '@theme/TabItem',
+                            raw: "'@theme/TabItem'",
+                        },
+                    },
+                ],
+                sourceType: 'module',
+            },
+        },
+    };
+}
 const plugin = (options = {}) => {
+    // @ts-expect-error: todo temporary
     const { sync = false, converters = ['yarn', 'pnpm'] } = options;
     return (root) => {
         let transformed = false;
         let alreadyImported = false;
         (0, unist_util_visit_1.default)(root, (node) => {
-            if (isImport(node) && node.value.includes('@theme/Tabs')) {
+            if (isTabsImport(node)) {
                 alreadyImported = true;
             }
             if (isParent(node)) {
                 let index = 0;
                 while (index < node.children.length) {
                     const child = node.children[index];
-                    if (matchNode(child)) {
+                    if (isNpm2Yarn(child)) {
                         const result = transformNode(child, sync, converters);
                         node.children.splice(index, 1, ...result);
                         index += result.length;
@@ -76,7 +143,7 @@ const plugin = (options = {}) => {
             }
         });
         if (transformed && !alreadyImported) {
-            root.children.unshift(nodeForImport);
+            root.children.unshift(createImportNode());
         }
     };
 };

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@docusaurus/remark-plugin-npm2yarn",
-  "version": "2.4.1",
+  "version": "3.0.0-alpha.0",
   "description": "Remark plugin for converting npm commands to Yarn commands as tabs.",
   "main": "lib/index.js",
   "publishConfig": {
@@ -17,18 +17,20 @@
   },
   "license": "MIT",
   "dependencies": {
+    "mdast-util-mdx": "^2.0.0",
     "npm-to-yarn": "^2.0.0",
-    "tslib": "^2.4.1",
+    "tslib": "^2.5.0",
+    "unified": "^10.1.2",
     "unist-util-visit": "^2.0.3"
   },
   "devDependencies": {
     "@types/mdast": "^3.0.10",
-    "remark": "^12.0.1",
-    "remark-mdx": "^1.6.21",
+    "remark": "^14.0.2",
+    "remark-mdx": "^2.1.5",
     "to-vfile": "^6.1.0"
   },
   "engines": {
     "node": ">=16.14"
   },
-  "gitHead": "60e657d8ae5a4a9ed1c2d777f9defd882cc12681"
+  "gitHead": "7327f7ff880ed97ad7855744e59c9c55d467a950"
 }

package/src/index.ts

@@ -7,95 +7,186 @@
 
 import visit from 'unist-util-visit';
 import npmToYarn from 'npm-to-yarn';
-import type {Code, Content, Literal} from 'mdast';
-import type {Plugin} from 'unified';
+import type {Code, Literal} from 'mdast';
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+import type {MdxJsxFlowElement, MdxJsxAttribute} from 'mdast-util-mdx';
 import type {Node, Parent} from 'unist';
+// @ts-expect-error: TODO see https://github.com/microsoft/TypeScript/issues/49721
+import type {Transformer} from 'unified';
+
+// TODO as of April 2023, no way to import/re-export this ESM type easily :/
+// This might change soon, likely after TS 5.2
+// See https://github.com/microsoft/TypeScript/issues/49721#issuecomment-1517839391
+// import type {Plugin} from 'unified';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+type Plugin<T> = any; // TODO fix this asap
+
+type KnownConverter = 'yarn' | 'pnpm';
 
 type CustomConverter = [name: string, cb: (npmCode: string) => string];
 
+type Converter = CustomConverter | KnownConverter;
+
 type PluginOptions = {
   sync?: boolean;
-  converters?: (CustomConverter | 'yarn' | 'pnpm')[];
+  converters?: Converter[];
 };
 
-function createTabItem(
-  code: string,
-  node: Code,
-  value: string,
-  label?: string,
-) {
-  return [
-    {
-      type: 'jsx',
-      value: `<TabItem value="${value}"${label ? ` label="${label}"` : ''}>`,
-    },
-    {
-      type: node.type,
-      lang: node.lang,
-      value: code,
-    },
-    {
-      type: 'jsx',
-      value: '</TabItem>',
-    },
-  ] as Content[];
+function createAttribute(
+  attributeName: string,
+  attributeValue: MdxJsxAttribute['value'],
+): MdxJsxAttribute {
+  return {
+    type: 'mdxJsxAttribute',
+    name: attributeName,
+    value: attributeValue,
+  };
+}
+
+function createTabItem({
+  code,
+  node,
+  value,
+  label,
+}: {
+  code: string;
+  node: Code;
+  value: string;
+  label?: string;
+}): MdxJsxFlowElement {
+  return {
+    type: 'mdxJsxFlowElement',
+    name: 'TabItem',
+    attributes: [
+      createAttribute('value', value),
+      label && createAttribute('label', label),
+    ].filter((attr): attr is MdxJsxAttribute => Boolean(attr)),
+    children: [
+      {
+        type: node.type,
+        lang: node.lang,
+        value: code,
+      },
+    ],
+  };
 }
 
 const transformNode = (
   node: Code,
   isSync: boolean,
-  converters: (CustomConverter | 'yarn' | 'pnpm')[],
+  converters: Converter[],
 ) => {
-  const groupIdProp = isSync ? ' groupId="npm2yarn"' : '';
+  const groupIdProp = isSync
+    ? {
+        type: 'mdxJsxAttribute',
+        name: 'groupId',
+        value: 'npm2yarn',
+      }
+    : undefined;
   const npmCode = node.value;
+
+  function createConvertedTabItem(converter: Converter) {
+    if (typeof converter === 'string') {
+      return createTabItem({
+        code: npmToYarn(npmCode, converter),
+        node,
+        value: converter,
+        label: converter === 'yarn' ? 'Yarn' : converter,
+      });
+    }
+    const [converterName, converterFn] = converter;
+    return createTabItem({
+      code: converterFn(npmCode),
+      node,
+      value: converterName,
+    });
+  }
+
   return [
     {
-      type: 'jsx',
-      value: `<Tabs${groupIdProp}>`,
+      type: 'mdxJsxFlowElement',
+      name: 'Tabs',
+      attributes: [groupIdProp].filter(Boolean),
+      children: [
+        createTabItem({code: npmCode, node, value: 'npm'}),
+        ...converters.flatMap(createConvertedTabItem),
+      ],
     },
-    ...createTabItem(npmCode, node, 'npm'),
-    ...converters.flatMap((converter) =>
-      typeof converter === 'string'
-        ? createTabItem(
-            npmToYarn(npmCode, converter),
-            node,
-            converter,
-            converter === 'yarn' ? 'Yarn' : converter,
-          )
-        : createTabItem(converter[1](npmCode), node, converter[0]),
-    ),
-    {
-      type: 'jsx',
-      value: '</Tabs>',
-    },
-  ] as Content[];
+  ] as any[];
 };
 
-const isImport = (node: Node): node is Literal => node.type === 'import';
+const isMdxEsmLiteral = (node: Node): node is Literal =>
+  node.type === 'mdxjsEsm';
+// TODO legacy approximation, good-enough for now but not 100% accurate
+const isTabsImport = (node: Node): boolean =>
+  isMdxEsmLiteral(node) && node.value.includes('@theme/Tabs');
+
 const isParent = (node: Node): node is Parent =>
   Array.isArray((node as Parent).children);
-const matchNode = (node: Node): node is Code =>
+const isNpm2Yarn = (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 plugin: Plugin<[PluginOptions?]> = (options = {}) => {
+function createImportNode() {
+  return {
+    type: 'mdxjsEsm',
+    value:
+      "import Tabs from '@theme/Tabs'\nimport TabItem from '@theme/TabItem'",
+    data: {
+      estree: {
+        type: 'Program',
+        body: [
+          {
+            type: 'ImportDeclaration',
+            specifiers: [
+              {
+                type: 'ImportDefaultSpecifier',
+                local: {type: 'Identifier', name: 'Tabs'},
+              },
+            ],
+            source: {
+              type: 'Literal',
+              value: '@theme/Tabs',
+              raw: "'@theme/Tabs'",
+            },
+          },
+          {
+            type: 'ImportDeclaration',
+            specifiers: [
+              {
+                type: 'ImportDefaultSpecifier',
+                local: {type: 'Identifier', name: 'TabItem'},
+              },
+            ],
+            source: {
+              type: 'Literal',
+              value: '@theme/TabItem',
+              raw: "'@theme/TabItem'",
+            },
+          },
+        ],
+        sourceType: 'module',
+      },
+    },
+  };
+}
+
+const plugin: Plugin<[PluginOptions?]> = (options = {}): Transformer => {
+  // @ts-expect-error: todo temporary
   const {sync = false, converters = ['yarn', 'pnpm']} = options;
   return (root) => {
-    let transformed = false as boolean;
-    let alreadyImported = false as boolean;
+    let transformed = false;
+    let alreadyImported = false;
+
     visit(root, (node: Node) => {
-      if (isImport(node) && node.value.includes('@theme/Tabs')) {
+      if (isTabsImport(node)) {
         alreadyImported = true;
       }
+
       if (isParent(node)) {
         let index = 0;
         while (index < node.children.length) {
           const child = node.children[index]!;
-          if (matchNode(child)) {
+          if (isNpm2Yarn(child)) {
             const result = transformNode(child, sync, converters);
             node.children.splice(index, 1, ...result);
             index += result.length;
@@ -106,8 +197,9 @@ const plugin: Plugin<[PluginOptions?]> = (options = {}) => {
         }
       }
     });
+
     if (transformed && !alreadyImported) {
-      (root as Parent).children.unshift(nodeForImport);
+      (root as Parent).children.unshift(createImportNode());
     }
   };
 };