MDX to JSX to SWC

1_screenshot.md

2_text.mdx

title	Test MDX Doc
description	Some frontmatter
date	2021-11-25T12:00:00.000Z
author	Kevin Wang
avatar	/image/kevin.webp
image	/image/2021/11/01/chart.png
tags	foo bar baz

This is an H1

This is an H2

Blockquote action

More blockquote action

This is a custom component

3_mdx-v1-result.jsx

/* @jsxRuntime classic */
/* @jsx mdx */


const makeShortcode = name => function MDXDefaultShortcode(props) {
      console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope")
      return <div {...props}/>
    };
const Note = makeShortcode("Note");
const layoutProps = {
  
};
const MDXLayout = "wrapper"
function MDXContent({
  components,
  ...props
}) {
  return <MDXLayout {...layoutProps} {...props} components={components} mdxType="MDXLayout">
    <h1 {...{
      "id": "this-is-an-h1"
    }}>{`This is an H1`}</h1>
    <h2 {...{
      "id": "this-is-an-h2"
    }}>{`This is an H2`}</h2>
    <blockquote>
      <p parentName="blockquote">{`Blockquote action`}</p>
      <p parentName="blockquote">{`More blockquote action`}</p>
    </blockquote>
    <Note label={false} type="warning" variant="contrast" mdxType="Note">
  This is a custom component
    </Note>
    </MDXLayout>;
}

;
MDXContent.isMDXComponent = true;

4_swc-core-transform-result.js

function _extends() {
    return (_extends = Object.assign || function(target) {
        for(var i = 1; i < arguments.length; i++){
            var source = arguments[i];
            for(var key in source)Object.prototype.hasOwnProperty.call(source, key) && (target[key] = source[key]);
        }
        return target;
    }).apply(this, arguments);
}
const makeShortcode = (name)=>function MDXDefaultShortcode(props) {
        return console.warn("Component " + name + " was not imported, exported, or provided by MDXProvider as global scope"), mdx("div", _extends({
        }, props));
    }
, Note = makeShortcode("Note"), layoutProps = {
}, MDXLayout = "wrapper";
function MDXContent({ components , ...props }) {
    return mdx("wrapper", _extends({
    }, layoutProps, props, {
        components: components,
        mdxType: "MDXLayout"
    }), mdx("h1", _extends({
    }, {
        id: "this-is-an-h1"
    }), "This is an H1"), mdx("h2", _extends({
    }, {
        id: "this-is-an-h2"
    }), "This is an H2"), mdx("blockquote", null, mdx("p", {
        parentName: "blockquote"
    }, "Blockquote action"), mdx("p", {
        parentName: "blockquote"
    }, "More blockquote action")), mdx(Note, {
        label: !1,
        type: "warning",
        variant: "contrast",
        mdxType: "Note"
    }, "This is a custom component"));
}
MDXContent.isMDXComponent = !0;

5_flow.txt

1. mdx file
2. read as string (fs.readFileSync)
3. passed to serialization function

-----------------------------

Serialization function:

inputs:
- source (the string contents of the mdx file)
- ...

import mdx from "@mdx-js/mdx";
import { transformSync } from "@swc/core";

const compiledMdx = await mdx(source, { ...mdxOptions, skipExport: true });

const swcTransformResult = transformSync(compiledMdx, {
  minify: false,
  jsc: {
    minify: {
      compress: {
        unused: false,
      },
      mangle: false,
    },
    parser: {
      jsx: true,
      syntax: "ecmascript",
    },
    transform: null,
    target: "es2020",
  },
});