diff --git a/website/src/plugins/remark-npm2yarn.js b/website/src/plugins/remark-npm2yarn.js index 7ebb2bea5a..875c5920dd 100644 --- a/website/src/plugins/remark-npm2yarn.js +++ b/website/src/plugins/remark-npm2yarn.js @@ -23,11 +23,17 @@ const convertNpmToYarn = npmCode => { const transformNode = node => { const npmCode = node.value; const yarnCode = convertNpmToYarn(node.value); - node.children = [ + return [ { type: 'jsx', value: - "\n", + ` +`, }, { type: node.type, @@ -48,28 +54,38 @@ const transformNode = node => { value: '\n', }, ]; - node.type = 'element'; - delete node.lang; - delete node.meta; - delete node.value; +}; + +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 (node.type === 'code' && node.meta === 'npm2yarn') { - transformNode(node); + if (matchNode(node)) { transformed = true; - } else if (Array.isArray(node.children)) { - node.children.forEach(transformer); + 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({ - type: 'import', - value: - "import Tabs from '@theme/Tabs';\nimport TabItem from '@theme/TabItem';", - }); + node.children.unshift(nodeForImport); } + return null; }; return transformer; };