feat: add react-dom support (#63)

src/__tests__/index.js

@@ -446,4 +446,35 @@ test('should support over-riding the entry point', async () => {
   assert.match(container.innerHTML, 'Thanks for being willing to contribute')
 })
 
+test('should work with react-dom api', async () => {
+  const mdxSource = `
+import Demo from './demo'
+
+<Demo />
+  `.trim()
+
+  const result = await bundleMDX(mdxSource, {
+    files: {
+      './demo.tsx': `
+import * as ReactDOM from 'react-dom'
+
+function Demo() {
+  return ReactDOM.createPortal(
+    <div>Portal!</div>,
+    document.body
+  )
+}
+
+export default Demo
+`.trim()
+    }
+  })
+
+  const Component = getMDXComponent(result.code)
+
+  const {container} = render(React.createElement(Component), { container: document.body })
+
+  assert.match(container.innerHTML, 'Portal!')
+})
+
 test.run()

src/client.js

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as _jsx_runtime from 'react/jsx-runtime.js'
+import * as ReactDOM from 'react-dom'
 
 /**
  * @typedef {{[name: string]: React.ComponentType | string | ComponentMap}} ComponentMap
@@ -16,7 +17,7 @@ import * as _jsx_runtime from 'react/jsx-runtime.js'
  * @return {React.FunctionComponent<MDXContentProps>}
  */
 function getMDXComponent(code, globals) {
-  const scope = {React, _jsx_runtime, ...globals}
+  const scope = {React, ReactDOM, _jsx_runtime, ...globals}
   // eslint-disable-next-line
   const fn = new Function(...Object.keys(scope), code)
   return fn(...Object.values(scope))