Support SolidJs inside MDX files

xdm-solid.ts

import { compile } from 'xdm';
import * as Path from 'path';
import * as fs from 'fs';
import * as babel from '@babel/core';
import esbuild from 'esbuild';

async function main() {
  /**
   * Compile MDX file with XDM
   */
  const path = Path.join(__dirname, './index.mdx');
  const res = await compile(fs.readFileSync(path), {
    jsx: true,
  });
  let code = res.value.toString();
  console.log('== MDX Result ==');
  console.log('code :>> ', code);

  /**
   * Bundle XDM output in order to resolve imports
   */
  const out = await esbuild.build({
    stdin: {
      contents: code,
      sourcefile: 'code.ts',
      resolveDir: __dirname,
      loader: 'jsx',
    },
    jsx: 'preserve',
    bundle: true,
    write: false,
    external: ['solid-js'],
    format: 'esm',
  });
  code = out.outputFiles[0].text;
  console.log('== ESBUILD Result ==');
  console.log('code :>> ', code);

  /**
   * Compile JSX with solid's babel plugin
   */
  babel.transform(
    code,
    {
      presets: ['solid'],
    },
    (err, res) => {
      if (err) {
        console.error(err);
        return;
      }
      console.log('== BABEL Result ==');
      console.log('res.code :>> ', res!.code);
      fs.writeFileSync(Path.join(__dirname, './out.js'), res!.code!);
    }
  );
}

main().catch((err) => console.error(err));