feat: async run

__tests__/custom-components/index.test.tsx

@@ -11,22 +11,22 @@ describe('Custom Components', () => {
     </>
   );
 
-  it('renders custom components', () => {
+  it('renders custom components', async () => {
     const doc = `
 <Example />
     `;
-    const Page = run(compile(doc), { components: { Example } });
+    const Page = await run(compile(doc), { components: { Example } });
     const output = renderToString(<Page />);
 
     expect(output).toBe('<div data-reactroot="">It works!</div>');
   });
 
-  it('renders custom components recursively', () => {
+  it('renders custom components recursively', async () => {
     const doc = `
 <Composite />
     `;
 
-    const Page = run(compile(doc), { components: { Example, Composite } });
+    const Page = await run(compile(doc), { components: { Example, Composite } });
     const output = renderToString(<Page />);
 
     expect(output).toBe('<div>Does it work?</div><div>It works!</div>');

example/Doc.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment, FunctionComponent, useEffect, useState } from 'react';
 import { useParams, useSearchParams } from 'react-router-dom';
 import * as mdx from '../index';
 import docs from './docs';
@@ -8,16 +8,28 @@ const Doc = () => {
   const { fixture } = useParams();
   const [searchParams] = useSearchParams();
   const ci = searchParams.has('ci');
+  const lazyImages = searchParams.has('lazyImages');
+  const safeMode = searchParams.has('safeMode');
 
   const [name, doc] =
     fixture === 'edited' ? [fixture, searchParams.get('edit') || ''] : [docs[fixture].name, docs[fixture].doc];
 
-  const opts = {
-    lazyImages: searchParams.has('lazyImages'),
-    safeMode: searchParams.has('safeMode'),
-  };
+  const [Content, setContent] = useState<FunctionComponent>(null);
 
-  const Content = mdx.run(String(mdx.compile(doc, opts)));
+  useEffect(() => {
+    const render = async () => {
+      const opts = {
+        lazyImages,
+        safeMode,
+      };
+
+      const code = mdx.compile(doc, opts);
+      const content = await mdx.run(code);
+
+      setContent(() => content);
+    };
+    render();
+  }, [doc, lazyImages, safeMode]);
 
   return (
     <React.Fragment>
@@ -26,9 +38,7 @@ const Doc = () => {
           {!ci && <h2 className="rdmd-demo--markdown-header">{name}</h2>}
           <div id="content-container">
             <RenderError>
-              <div className="markdown-body">
-                <Content />
-              </div>
+              <div className="markdown-body">{Content && <Content />}</div>
             </RenderError>
           </div>
         </section>

example/docs.ts

@@ -1,17 +1,32 @@
+// @ts-ignore
 import calloutTests from '../docs/callout-tests.md';
+// @ts-ignore
 import callouts from '../docs/callouts.md';
+// @ts-ignore
 import codeBlockTests from '../docs/code-block-tests.md';
+// @ts-ignore
 import codeBlocks from '../docs/code-blocks.md';
+// @ts-ignore
 import embeds from '../docs/embeds.md';
+// @ts-ignore
 import features from '../docs/features.md';
+// @ts-ignore
 import gettingStarted from '../docs/getting-started.md';
+// @ts-ignore
 import headings from '../docs/headings.md';
+// @ts-ignore
 import images from '../docs/images.md';
+// @ts-ignore
 import lists from '../docs/lists.md';
+// @ts-ignore
 import sanitizingTests from '../docs/sanitizing-tests.md';
+// @ts-ignore
 import tableOfContentsTests from '../docs/table-of-contents-tests.md';
+// @ts-ignore
 import tablesTests from '../docs/tables-tests.md';
+// @ts-ignore
 import tables from '../docs/tables.md';
+// @ts-ignore
 import varsTest from '../docs/variable-tests.md';
 
 const lowerCase = (str: string) =>

index.tsx

@@ -2,7 +2,7 @@ import debug from 'debug';
 import { remark } from 'remark';
 import remarkMdx from 'remark-mdx';
 
-import { createProcessor, compileSync, runSync, RunOptions } from '@mdx-js/mdx';
+import { createProcessor, compileSync, run as mdxRun, RunOptions } from '@mdx-js/mdx';
 import * as runtime from 'react/jsx-runtime';
 
 import Variable from '@readme/variable';
@@ -57,13 +57,11 @@ export const compile = (text: string, opts = {}) => {
   );
 };
 
-export const run = (code: string, _opts: RunOpts = {}) => {
-  // @ts-ignore
-  const Fragment = runtime.Fragment;
-
+export const run = async (code: string, _opts: RunOpts = {}) => {
+  const { Fragment } = runtime as any;
   const { components, ...opts } = _opts;
 
-  const file = runSync(code, {
+  const file = await mdxRun(code, {
     ...runtime,
     Fragment,
     baseUrl: '',

webpack.common.js

@@ -59,14 +59,10 @@ module.exports = {
           },
         },
       },
-      {
-        test: /\.(txt|md)$/i,
-        type: 'asset/source',
-      },
     ],
   },
   resolve: {
-    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx'],
+    extensions: ['.js', '.json', '.jsx', '.ts', '.tsx', '.md'],
     fallback: { buffer: require.resolve('buffer') },
   },
 };

webpack.dev.js

@@ -21,15 +21,20 @@ const config = merge(common, {
     port: 9966,
     hot: true,
   },
+  module: {
+    rules: [
+      {
+        test: /\.(txt|md)$/i,
+        type: 'asset/source',
+      },
+    ],
+  },
   plugins: [
     new webpack.ProvidePlugin({
       process: 'process/browser',
     }),
   ],
   resolve: {
-    alias: {
-      'react-dom': '@hot-loader/react-dom',
-    },
     fallback: {
       fs: require.resolve('browserify-fs'),
       path: require.resolve('path-browserify'),