diff --git a/docs/_asset/editor.jsx b/docs/_asset/editor.jsx index 6aab838e8..78179b13c 100644 --- a/docs/_asset/editor.jsx +++ b/docs/_asset/editor.jsx @@ -199,8 +199,7 @@ function Playground() { : 'program', recmaPlugins, rehypePlugins, - remarkPlugins, - useDynamicImport: true + remarkPlugins }) if (show === 'result') { diff --git a/packages/mdx/lib/core.js b/packages/mdx/lib/core.js index c7adc329f..06cd1a72f 100644 --- a/packages/mdx/lib/core.js +++ b/packages/mdx/lib/core.js @@ -127,14 +127,6 @@ * @property {boolean | null | undefined} [tableCellAlignToStyle=true] * Turn obsolete `align` props on `td` and `th` into CSS `style` props * (default: `true`). - * @property {boolean | null | undefined} [useDynamicImport=false] - * whether to compile to dynamic import expressions when `outputFormat` is - * `'function-body'` (default: `false`); - * so, it will turn import statements (`import {x} from 'y'`) into dynamic - * import expressions (`const {x} = await import('y')`); - * import statements only work at the top level of modules but import - * expressions are available inside function bodies; - * you should probably set `baseUrl` too. */ import {unreachable} from 'devlop' @@ -196,11 +188,11 @@ export function createProcessor(options) { } if ( - !warned && (settings.jsxRuntime === 'classic' || settings.pragma || settings.pragmaFrag || - settings.pragmaImportSource) + settings.pragmaImportSource) && + !warned ) { warned = true console.warn( diff --git a/packages/mdx/lib/plugin/recma-document.js b/packages/mdx/lib/plugin/recma-document.js index bdd709399..e4c81a01e 100644 --- a/packages/mdx/lib/plugin/recma-document.js +++ b/packages/mdx/lib/plugin/recma-document.js @@ -48,7 +48,6 @@ import {specifiersToDeclarations} from '../util/estree-util-specifiers-to-declar export function recmaDocument(options) { const baseUrl_ = options.baseUrl || undefined const baseUrl = typeof baseUrl_ === 'object' ? baseUrl_.href : baseUrl_ - const useDynamicImport = options.useDynamicImport || undefined const outputFormat = options.outputFormat || 'program' const pragma = options.pragma === undefined ? 'React.createElement' : options.pragma @@ -419,19 +418,6 @@ export function recmaDocument(options) { // Source optional: (node.type === 'ExportNamedDeclaration' && node.source) ) { - if (!useDynamicImport) { - file.fail( - 'Unexpected `import` or `export … from` in `evaluate` (outputting a function body) by default: please set `useDynamicImport: true` (and probably specify a `baseUrl`)', - { - // Results of this function end up in `tree` again. - ancestors: [tree, node], - place: positionFromEstree(node), - ruleId: 'invalid-esm-statement', - source: 'recma-document' - } - ) - } - // We always have a source, but types say they can be missing. assert(node.source, 'expected `node.source` to be defined') diff --git a/packages/mdx/readme.md b/packages/mdx/readme.md index 7064e0160..a04e505bb 100644 --- a/packages/mdx/readme.md +++ b/packages/mdx/readme.md @@ -764,8 +764,6 @@ Configuration for `createProcessor` (TypeScript type). The `'function-body'` format will get the runtime (and optionally provider) from `arguments[0]`, rewrite export statements, and use a return statement to yield what was exported. - Normally, this output format will throw on `import` (and `export … from`) - statements, but you can support them by setting `useDynamicImport`. * `mdExtensions` (`Array`, default: `['.md', '.markdown', '.mdown', @@ -957,49 +955,6 @@ Configuration for `createProcessor` (TypeScript type). for AST nodes generated by this project, this option configures it * `tableCellAlignToStyle` (`boolean`, default: `true`) — turn obsolete `align` props on `td` and `th` into CSS `style` props -* `useDynamicImport` (`boolean`, default: `false`) - — whether to compile to dynamic import expressions when `outputFormat` is - `'function-body'`; - so, it will turn import statements (`import {x} from 'y'`) into dynamic - import expressions (`const {x} = await import('y')`); - import statements only work at the top level of modules but import - expressions are available inside function bodies; - you should probably set `baseUrl` too. - -
Expand example - - Say we have a couple modules: - - ```tsx - // meta.js: - export const title = 'World' - - // numbers.js: - export const no = 3.14 - - // example.js: - import {compile} from '@mdx-js/mdx' - - const code = `import {name} from './meta.js' - export {no} from './numbers.js' - - # hi {name}!` - - console.log(String(await compile(code, {outputFormat: 'function-body', useDynamicImport: true}))) - ``` - - …now running `node example.js` yields: - - ```tsx - const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0] - const {name} = await import('./meta.js') - const {no} = await import('./numbers.js') - function _createMdxContent(props) { /* … */ } - function MDXContent(props = {}) { /* … */ } - return {no, default: MDXContent} - ``` - -
### `RunOptions` @@ -1248,8 +1203,6 @@ abide by its terms. [baseurl]: #optionsbaseurl -[usedynamicimport]: #optionsusedynamicimport - [unified]: https://github.com/unifiedjs/unified [processor]: https://github.com/unifiedjs/unified#processor diff --git a/packages/mdx/test/evaluate.js b/packages/mdx/test/evaluate.js index bdeddda8e..a2ff1ca6f 100644 --- a/packages/mdx/test/evaluate.js +++ b/packages/mdx/test/evaluate.js @@ -98,11 +98,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { }) await t.test( - 'should support an `import` of a relative url w/ `useDynamicImport`', + 'should support an `import` of a relative url w/ `baseUrl`', async function () { const mod = await evaluate( 'import {number} from "./context/data.js"\n\n{number}', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} + {baseUrl: import.meta.url, ...runtime} ) assert.equal( @@ -113,13 +113,13 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support an `import` of a full url w/ `useDynamicImport`', + 'should support an `import` of a full url w/ `baseUrl`', async function () { const mod = await evaluate( 'import {number} from "' + new URL('context/data.js', import.meta.url) + '"\n\n{number}', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} + {baseUrl: import.meta.url, ...runtime} ) assert.equal( @@ -130,29 +130,21 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support an `import` w/o specifiers w/ `useDynamicImport`', + 'should support an `import` w/o specifiers w/o `baseUrl`', async function () { assert.match( - String( - await compile('import "a"', { - outputFormat: 'function-body', - useDynamicImport: true - }) - ), + String(await compile('import "a"', {outputFormat: 'function-body'})), /\nawait import\("a"\);?\n/ ) } ) await t.test( - 'should support an `import` w/ 0 specifiers w/ `useDynamicImport`', + 'should support an `import` w/ 0 specifiers w/o `baseUrl`', async function () { assert.match( String( - await compile('import {} from "a"', { - outputFormat: 'function-body', - useDynamicImport: true - }) + await compile('import {} from "a"', {outputFormat: 'function-body'}) ), /\nawait import\("a"\);?\n/ ) @@ -160,11 +152,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support a namespace import w/ `useDynamicImport`', + 'should support a namespace import w/ `baseUrl`', async function () { const mod = await evaluate( 'import * as x from "./context/components.js"\n\nHi!', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} + {baseUrl: import.meta.url, ...runtime} ) assert.equal( @@ -175,11 +167,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support a namespace import and a bare specifier w/ `useDynamicImport`', + 'should support a namespace import and a bare specifier w/ `baseUrl`', async function () { const mod = await evaluate( 'import Div, * as x from "./context/components.js"\n\na and
b
', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} + {baseUrl: import.meta.url, ...runtime} ) assert.equal( @@ -247,24 +239,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) }) - await t.test('should throw on an `export * from`', async function () { - try { - await evaluate('export {a} from "b"', runtime) - assert.fail() - } catch (error) { - assert.match( - String(error), - /Unexpected `import` or `export … from` in `evaluate` \(outputting a function body\) by default/ - ) - } - }) - await t.test( - 'should support an `export from` w/ `useDynamicImport`', + 'should support an `export from` w/ `baseUrl`', async function () { const mod = await evaluate('export {number} from "./context/data.js"', { baseUrl: import.meta.url, - useDynamicImport: true, ...runtime }) @@ -272,28 +251,21 @@ test('@mdx-js/mdx: evaluate', async function (t) { } ) - await t.test( - 'should support an `export` w/ `useDynamicImport`', - async function () { - const mod = await evaluate( - 'import {number} from "./context/data.js"\nexport {number}', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} - ) + await t.test('should support an `export` w/ `baseUrl`', async function () { + const mod = await evaluate( + 'import {number} from "./context/data.js"\nexport {number}', + {baseUrl: import.meta.url, ...runtime} + ) - assert.equal(mod.number, 3.14) - } - ) + assert.equal(mod.number, 3.14) + }) await t.test( - 'should support an `export as from` w/ `useDynamicImport`', + 'should support an `export as from` w/ `baseUrl`', async function () { const mod = await evaluate( 'export {number as data} from "./context/data.js"', - { - baseUrl: import.meta.url, - useDynamicImport: true, - ...runtime - } + {baseUrl: import.meta.url, ...runtime} ) assert.equal(mod.data, 3.14) @@ -301,15 +273,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support an `export default as from` w/ `useDynamicImport`', + 'should support an `export default as from` w/ `baseUrl`', async function () { const mod = await evaluate( 'export {default as data} from "./context/data.js"', - { - baseUrl: import.meta.url, - useDynamicImport: true, - ...runtime - } + {baseUrl: import.meta.url, ...runtime} ) assert.equal(mod.data, 6.28) @@ -317,11 +285,10 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support an `export all from` w/ `useDynamicImport`', + 'should support an `export all from` w/ `baseUrl`', async function () { const mod = await evaluate('export * from "./context/data.js"', { baseUrl: import.meta.url, - useDynamicImport: true, ...runtime }) @@ -333,11 +300,11 @@ test('@mdx-js/mdx: evaluate', async function (t) { ) await t.test( - 'should support an `export all from`, but prefer explicit exports, w/ `useDynamicImport`', + 'should support an `export * from`, but prefer explicit exports, w/ `baseUrl`', async function () { const mod = await evaluate( 'export {default as number} from "./context/data.js"\nexport * from "./context/data.js"', - {baseUrl: import.meta.url, useDynamicImport: true, ...runtime} + {baseUrl: import.meta.url, ...runtime} ) // I’m not sure if this makes sense, but it is how Node works. @@ -372,42 +339,6 @@ test('@mdx-js/mdx: evaluate', async function (t) { } ) - await t.test('should throw on an export all from', async function () { - try { - await evaluate('export * from "a"', runtime) - assert.fail() - } catch (error) { - assert.match( - String(error), - /Unexpected `import` or `export … from` in `evaluate` \(outputting a function body\) by default/ - ) - } - }) - - await t.test('should throw on an import', async function () { - try { - await evaluate('import {a} from "b"', runtime) - assert.fail() - } catch (error) { - assert.match( - String(error), - /Unexpected `import` or `export … from` in `evaluate` \(outputting a function body\) by default/ - ) - } - }) - - await t.test('should throw on an import default', async function () { - try { - await evaluate('import a from "b"', runtime) - assert.fail() - } catch (error) { - assert.match( - String(error), - /Unexpected `import` or `export … from` in `evaluate` \(outputting a function body\) by default:/ - ) - } - }) - await t.test('should support a given components', async function () { const mod = await evaluate('', runtime)