From 01a7ddde3c8019ca964c4194204a3d9b6091f946 Mon Sep 17 00:00:00 2001 From: Dylan Staley <88163+dstaley@users.noreply.github.com> Date: Thu, 21 Mar 2024 13:46:48 -0700 Subject: [PATCH] feat: restore useDynamicImport --- __tests__/rsc.test.tsx | 2 +- __tests__/serialize.test.tsx | 32 +++++++++++++++++++++++++++----- package-lock.json | 12 +----------- src/serialize.ts | 3 ++- src/types.ts | 4 +++- 5 files changed, 34 insertions(+), 19 deletions(-) diff --git a/__tests__/rsc.test.tsx b/__tests__/rsc.test.tsx index ef6b12c..4df7c30 100644 --- a/__tests__/rsc.test.tsx +++ b/__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' diff --git a/__tests__/serialize.test.tsx b/__tests__/serialize.test.tsx index 5900bd6..1c1cfb3 100644 --- a/__tests__/serialize.test.tsx +++ b/__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(`"

Hello world

"`) }) - 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(`"

foo bar

"`) }) + 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}, diff --git a/package-lock.json b/package-lock.json index c57f125..8b02d6b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "4.4.1", "license": "MPL-2.0", "dependencies": { + "@babel/code-frame": "^7.23.5", "@mdx-js/mdx": "^3.0.1", "@mdx-js/react": "^3.0.1", "unist-util-remove": "^3.1.0", @@ -16,7 +17,6 @@ "vfile-matter": "^5.0.0" }, "devDependencies": { - "@babel/code-frame": "^7.23.5", "@changesets/changelog-github": "^0.5.0", "@changesets/cli": "^2.27.1", "@hashicorp/remark-plugins": "^3.2.1", @@ -68,7 +68,6 @@ }, "node_modules/@babel/code-frame": { "version": "7.23.5", - "dev": true, "license": "MIT", "dependencies": { "@babel/highlight": "^7.23.4", @@ -286,7 +285,6 @@ }, "node_modules/@babel/helper-validator-identifier": { "version": "7.22.20", - "dev": true, "license": "MIT", "engines": { "node": ">=6.9.0" @@ -316,7 +314,6 @@ }, "node_modules/@babel/highlight": { "version": "7.23.4", - "dev": true, "license": "MIT", "dependencies": { "@babel/helper-validator-identifier": "^7.22.20", @@ -1835,7 +1832,6 @@ }, "node_modules/ansi-styles": { "version": "3.2.1", - "dev": true, "license": "MIT", "dependencies": { "color-convert": "^1.9.0" @@ -2278,7 +2274,6 @@ }, "node_modules/chalk": { "version": "2.4.2", - "dev": true, "license": "MIT", "dependencies": { "ansi-styles": "^3.2.1", @@ -2491,7 +2486,6 @@ }, "node_modules/color-convert": { "version": "1.9.3", - "dev": true, "license": "MIT", "dependencies": { "color-name": "1.1.3" @@ -2499,7 +2493,6 @@ }, "node_modules/color-name": { "version": "1.1.3", - "dev": true, "license": "MIT" }, "node_modules/comma-separated-tokens": { @@ -3182,7 +3175,6 @@ }, "node_modules/escape-string-regexp": { "version": "1.0.5", - "dev": true, "license": "MIT", "engines": { "node": ">=0.8.0" @@ -4003,7 +3995,6 @@ }, "node_modules/has-flag": { "version": "3.0.0", - "dev": true, "license": "MIT", "engines": { "node": ">=4" @@ -8808,7 +8799,6 @@ }, "node_modules/supports-color": { "version": "5.5.0", - "dev": true, "license": "MIT", "dependencies": { "has-flag": "^3.0.0" diff --git a/src/serialize.ts b/src/serialize.ts index b535c1a..23822a3 100644 --- a/src/serialize.ts +++ b/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 { diff --git a/src/types.ts b/src/types.ts index 7e3a673..91ccdb4 100644 --- a/src/types.ts +++ b/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 + mdxOptions?: Omit & { + useDynamicImport?: boolean + } /** * Indicate whether or not frontmatter should be parsed out of the MDX. Defaults to false */