Pass mdast tree to mdx compile?

[dmca-glasgow]

Hi there,

I am working in long documents in either Markdown or LaTeX which eventually get evaled with mdx in a Preact environment.

It may be an unusual case, but by the time I get to the final mdx step, my data is already in mdast form.

It would be nice to have the option to pass the mdast tree to compile without the need to serialise and parse it again.

Thanks.

[remcohaszing]

Hey there 👋

If have mdast, you can already skip the parsing step. You can create a unified processor with createProcessor(). You can then skip the unified parse phase.

import { createProcessor } from '@mdx-js/mdx'

const processor = createProcessor(options)
const estree = await processor.run(mdast, vfile)
const js = String(processor.compile(estree))

Depending on your use case you may want to compile your mdast to hast instead and turn that into a Preact component using hast-util-to-jsx-runtime.

[dmca-glasgow]

Hey @remcohaszing, this seems like a good solution, thank you.

However I'm a little bit stumped...

createProcessor creates a unified processor instance, which doesn't have a compile method, like @mdx-js/mdx.

I've tried various things but so far I'm unable to wire these two parts together successfully:

import { Root } from 'mdast';
import { createProcessor, ProcessorOptions } from '@mdx-js/mdx';
import * as runtime from 'preact/jsx-runtime';

// import { createContext } from './context';
// import { createRehypePlugins } from './rehype-plugins';
// import { createRemarkPlugins } from './remark-plugins';

// @ts-expect-error: typescript doesn't like preact/jsx-runtime for unknown reasons
const options: ProcessorOptions = {
  ...runtime,
};

options.outputFormat = 'function-body';

export async function compileMdastToJs(mdast: Root) {
  // const ctx = createContext();
  // options.remarkPlugins = createRemarkPlugins(ctx);
  // options.rehypePlugins = createRehypePlugins(ctx);

  const processor = createProcessor(options);
  const estree = await processor.run(mdast);

  return {
    jsString: String(processor.stringify(estree)), // <-- I guess stringify is not this right method to use here
  };
}

and Preact component:

import { Fragment } from 'preact';
import { useEffect, useState } from 'preact/hooks';
import { RunOptions, run } from '@mdx-js/mdx';
import { MDXComponents, MDXModule } from 'mdx/types';
import * as runtime from 'preact/jsx-runtime';

// @ts-expect-error: preact/jsx-runtime is incompatible for unknown reasons
const options: RunOptions = {
  ...runtime,
};

type Props = {
  jsString: string;
};

export function Article({ jsString }: Props) {
  const [MDX, setMDX] = useState<MDXModule | null>(null);
  const MDXContent = MDX ? MDX.default : Fragment;

  useEffect(() => {
    (async () => {
      setMDX(await run(jsString, options));
    })();
  }, [jsString]);

  return (
    <article>
      <MDXContent />
    </article>
  );
}

[dmca-glasgow]

I got there in the end :)

I had passed the preact runtime in the options to createProcessor. When I remove this everything is working.

Thanks again!

[dmca-glasgow]

My code in case it helps someone:

import { Root } from 'mdast';
import { createProcessor, ProcessorOptions } from '@mdx-js/mdx';

const options: ProcessorOptions = {
  outputFormat: 'function-body',
  elementAttributeNameCase: 'html',
};

export async function compileMdastToJs(mdast: Root) {
  const processor = createProcessor(options);

  // @ts-expect-error: mdast is not of type Program
  const estree = await processor.run(mdast);

  return {
    jsString: String(processor.stringify(estree)),
  };
}

import { useEffect, useState } from 'preact/hooks';
import { RunOptions, run } from '@mdx-js/mdx';
import { MDXModule } from 'mdx/types';
import { Fragment, jsx, jsxs } from 'preact/jsx-runtime';
import './styles/index.scss';

const options: RunOptions = {
  Fragment,
  // @ts-expect-error: jsx is incompatible for unknown reasons
  jsx,
  // @ts-expect-error: jsxs is incompatible for unknown reasons
  jsxs,
  elementAttributeNameCase: 'html',
};

type Props = {
  jsString: string;
};

export function Article({ jsString }: Props) {
  const [MDX, setMDX] = useState<MDXModule | null>(null);
  const MDXContent = MDX ? MDX.default : Fragment;

  useEffect(() => {
    (async () => {
      setMDX(await run(jsString, options));
    })();
  }, [jsString]);

  return (
    <article>
      <MDXContent />
    </article>
  );
}