Merge pull request #454 from hashicorp/ds.v5-enable-imports

feat: restore useDynamicImport

__tests__/rsc.test.tsx

@@ -3,7 +3,7 @@
  * SPDX-License-Identifier: MPL-2.0
  */
 
-import { compileMDX } from '../rsc'
+import { compileMDX } from '../src/rsc'
 
 import { describe, test, expect } from 'vitest'
 

__tests__/serialize.test.tsx

@@ -9,8 +9,8 @@ import { paragraphCustomAlerts } from '@hashicorp/remark-plugins'
 import * as MDX from '@mdx-js/react'
 import { VFile } from 'vfile'
 
-import { MDXRemote } from '../'
-import { serialize } from '../serialize'
+import { MDXRemote } from '../src'
+import { serialize } from '../src/serialize'
 import { renderStatic } from './utils'
 
 import { describe, test, expect } from 'vitest'
@@ -113,15 +113,37 @@ describe('serialize', () => {
     expect(result).toMatchInlineSnapshot(`"<p>Hello world</p>"`)
   })
 
-  test('strips imports & exports', async () => {
-    const result = await renderStatic(`import foo from 'bar'
+  test('strips imports & exports by default', async () => {
+    const source = `import foo from 'bar'
 
 foo **bar**
 
-export const bar = 'bar'`)
+export const bar = 'bar'`
+
+    const { compiledSource } = await serialize(source)
+    expect(compiledSource).not.toMatch(/import/)
+
+    const result = await renderStatic(source)
     expect(result).toMatchInlineSnapshot(`"<p>foo <strong>bar</strong></p>"`)
   })
 
+  test('keeps imports & exports if useDynamicImport is true', async () => {
+    const source = `import foo from 'bar'
+
+foo **bar**
+
+export const bar = 'bar'`
+
+    const { compiledSource } = await serialize(source, {
+      mdxOptions: { useDynamicImport: true },
+    })
+    expect(compiledSource).toMatch(/await import/)
+
+    // We specifically don't attempt to render this source given that it won't
+    // run correctly since we're emitting a top-level await and executing the
+    // code in a non-async context.
+  })
+
   test('fragments', async () => {
     const components = {
       Test: ({ content }: { content: string }) => <>{content}</>,

src/serialize.ts

@@ -17,11 +17,12 @@ function getCompileOptions(
   mdxOptions: SerializeOptions['mdxOptions'] = {},
   rsc: boolean = false
 ): CompileOptions {
+  const areImportsEnabled = mdxOptions.useDynamicImport ?? false
   // don't modify the original object when adding our own plugin
   // this allows code to reuse the same options object
   const remarkPlugins = [
     ...(mdxOptions.remarkPlugins || []),
-    removeImportsExportsPlugin,
+    ...(areImportsEnabled ? [] : [removeImportsExportsPlugin]),
   ]
 
   return {

src/types.ts

@@ -14,7 +14,9 @@ export interface SerializeOptions {
    * These options are passed to the MDX compiler.
    * See [the MDX docs.](https://github.com/mdx-js/mdx/blob/master/packages/mdx/index.js).
    */
-  mdxOptions?: Omit<CompileOptions, 'outputFormat' | 'providerImportSource'>
+  mdxOptions?: Omit<CompileOptions, 'outputFormat' | 'providerImportSource'> & {
+    useDynamicImport?: boolean
+  }
   /**
    * Indicate whether or not frontmatter should be parsed out of the MDX. Defaults to false
    */