website/src/remark/configTabs.js - main - githubmirror/docusaurus

website/src/remark/configTabs.js
95 строк3 KB
Sébastien Lorber
feat(mdx-loader): upgrade to MDX v3 + (#9451)
26 окт 2023, 16:47
26 окт 2023, 16:477e456ec
/**
 * 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 {visit} from 'unist-util-visit';

/**
 * Turns a "```js config-tabs" code block into a "plugin options" and a "preset
 * options" tab
 */
export default function plugin() {
  /** @type {import("unified").Transformer} */
  const transformer = (root) => {
    visit(root, 'code', (node, index, parent) => {
      if (!node.meta?.includes('config-tabs')) {
        return;
      }
      const {value} = node;
      const [presetMeta, pluginMeta] = value.split('\n');
      const {
        groups: {presetOptionName},
      } = presetMeta.match(/\/\/.*?: (?<presetOptionName>[A-Z]+)/i) ?? {
        groups: {presetOptionName: '[translation failure]'},
      };
      const {
        groups: {pluginName},
      } = pluginMeta.match(/\/\/.*?: (?<pluginName>[A-Z@/-]+)/i) ?? {
        groups: {pluginName: '[translation failure]'},
      };
      // Replace pragma comments
      const config = value
        .replace(presetMeta, '')
        .replace(pluginMeta, '')
        .trim()
        .replace(/^.*?= /, '')
        .replace(/;$/, '');

      const importNode = {
        type: 'mdxjsEsm',
        value: 'import ConfigTabs from "@site/src/components/ConfigTabs"',
        data: {
          estree: {
            type: 'Program',
            body: [
              {
                type: 'ImportDeclaration',
                specifiers: [
                  {
                    type: 'ImportDefaultSpecifier',
                    local: {type: 'Identifier', name: 'ConfigTabs'},
                  },
                ],
                source: {
                  type: 'Literal',
                  value: '@site/src/components/ConfigTabs',
                  raw: "'@site/src/components/ConfigTabs'",
                },
              },
            ],
            sourceType: 'module',
          },
        },
      };

      const jsxNode = {
        type: 'mdxJsxFlowElement',
        name: 'ConfigTabs',
        attributes: [
          {
            type: 'mdxJsxAttribute',
            name: 'pluginName',
            value: pluginName.trim(),
          },
          {
            type: 'mdxJsxAttribute',
            name: 'presetOptionName',
            value: presetOptionName.trim(),
          },
          {
            type: 'mdxJsxAttribute',
            name: 'code',
            value: config,
          },
        ],
        children: [],
      };

      parent.children.splice(index, 1, importNode, jsxNode);
    });
  };
  return transformer;
}