fix: imports (#1050)

| [![PR App][icn]][demo] | Fix RM-11562 |
| :--------------------: | :----------: |

## 🧰 Changes

Fixes user variables in the mdx-renderer.

The mdx-renderer passes in `{ imports: { React } }` as they have to
provide their own compiled version. `lib/run` was not properly merging
that with it's own imports, and that was causing `user` to be undefined!

## 🧬 QA & Testing

- [Broken on production][prod].
- [Working in this PR app][demo].

[demo]: https://markdown-pr-PR_NUMBER.herokuapp.com
[prod]: https://SUBDOMAIN.readme.io
[icn]:
https://user-images.githubusercontent.com/886627/160426047-1bee9488-305a-4145-bb2b-09d8b757d38a.svg

__tests__/lib/run.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import { execute } from '../helpers';
+
+describe('run', () => {
+  it('allows providing imports', async () => {
+    const mdx = `Hello, world!`;
+    const Component = await execute(mdx, {}, { imports: { React } });
+
+    render(<Component />);
+
+    expect(screen.getByText('Hello, world!')).toBeInTheDocument();
+  });
+
+  it('merges the imports with the built-ins', async () => {
+    const mdx = `{user.test}`;
+    const Component = await execute(mdx, {}, { imports: { React } });
+
+    render(<Component />);
+
+    expect(screen.getByText('TEST')).toBeInTheDocument();
+  });
+});

lib/run.tsx

@@ -49,7 +49,7 @@ const makeUseMDXComponents = (more: ReturnType<UseMdxComponents> = {}): UseMdxCo
 
 const run = async (string: string, _opts: RunOpts = {}) => {
   const { Fragment } = runtime as any;
-  const { components = {}, terms, variables, baseUrl, ...opts } = _opts;
+  const { components = {}, terms, variables, baseUrl, imports = {}, ...opts } = _opts;
   const executedComponents = Object.entries(components).reduce((memo, [tag, mod]) => {
     const { default: Content, toc, Toc, ...rest } = mod;
     memo[tag] = Content;
@@ -68,10 +68,10 @@ const run = async (string: string, _opts: RunOpts = {}) => {
       ...runtime,
       Fragment,
       baseUrl: import.meta.url,
-      imports: { React, user: User(variables) },
+      imports: { React, user: User(variables), ...imports },
       useMDXComponents,
       ...opts,
-    }) as Promise<RMDXModule>;
+    } as RunOptions) as Promise<RMDXModule>;
   };
 
   const { Toc: _Toc, toc, default: Content, ...exports } = await exec(string);