feat: pass in react

__tests__/react.test.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import { compile, run } from '../index';
+import { render, screen, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+describe('import React', () => {
+  it('allows importing react', async () => {
+    const mdx = `
+import { useState } from 'react';
+
+export default function Counter() {
+  const [count, setCount] = useState(0)
+
+  return (
+    <div>
+      <p>You clicked {count} times!</p>
+      <button onClick={() => setCount(count + 1)}>
+        Click me
+      </button>
+    </div>
+  )
+}
+
+<Counter />
+    `;
+
+    const Content = await run(compile(mdx));
+    render(<Content />);
+
+    expect(screen.getByText('You clicked 0 times!')).toBeVisible();
+    userEvent.click(screen.getByRole('button'));
+
+    await waitFor(() => screen.getByText('You clicked 1 times!'));
+  });
+});

index.tsx

@@ -14,12 +14,13 @@ import { options } from './options';
 require('./styles/main.scss');
 
 import calloutTransformer from './processor/transform/callouts';
-import react from 'react';
+import React from 'react';
 
 const unimplemented = debug('mdx:unimplemented');
 
 type RunOpts = Omit<RunOptions, 'Fragment'> & {
   components?: Record<string, React.Component>;
+  imports?: Record<string, unknown>;
 };
 
 export { Components };
@@ -54,7 +55,7 @@ export const compile = (text: string, opts = {}) => {
       remarkPlugins: [calloutTransformer],
       ...opts,
     }),
-  );
+  ).replace(/await import\(_resolveDynamicMdxSpecifier\('react'\)\)/, 'arguments[0].imports.React');
 };
 
 export const run = async (code: string, _opts: RunOpts = {}) => {
@@ -64,7 +65,8 @@ export const run = async (code: string, _opts: RunOpts = {}) => {
   const file = await mdxRun(code, {
     ...runtime,
     Fragment,
-    baseUrl: '',
+    baseUrl: import.meta.url,
+    imports: { React },
     useMDXComponents: makeUseMDXComponents(components),
     ...opts,
   });