logto/packages/console/parcel-transformer-mdx2.js

// https://github.com/parcel-bundler/parcel/pull/7922#issuecomment-1750704973

import { compile } from '@mdx-js/mdx';
import { default as ThrowableDiagnostic } from '@parcel/diagnostic';
import { Transformer } from '@parcel/plugin';
import rehypeMdxCodeProps from 'rehype-mdx-code-props';
import remarkGfm from 'remark-gfm';

export default new Transformer({
  async transform({ asset }) {
    const source = await asset.getCode();

    let codeVFile;

    try {
      codeVFile = await compile(source, {
        development: true,
        jsx: true,
        providerImportSource: '@mdx-js/react',
        remarkPlugins: [remarkGfm],
        rehypePlugins: [[rehypeMdxCodeProps, { tagName: 'code' }]],
      });
    } catch (error) {
      const { start, end } = error.position;

      const highlight = {
        message: error.reason,
        start,
        end,
      };

      if (!(end.line && end.column)) {
        highlight.end = { ...start };
      }

      // Adjust for parser and reporter differences
      highlight.start.column -= 1;
      highlight.end.column -= 1;

      throw new ThrowableDiagnostic({
        diagnostic: {
          message: 'Unable to compile MDX',
          codeFrames: [
            {
              filePath: asset.filePath,
              code: source,
              codeHighlights: [highlight],
            },
          ],
        },
      });
    }

    const code = String(codeVFile);

    asset.type = 'jsx';
    asset.setCode(code);

    return [asset];
  },
});