From 7b5257f3ab278a1a40671a1a00c8131a2eadae73 Mon Sep 17 00:00:00 2001 From: bluwy Date: Tue, 5 Jul 2022 23:33:30 +0800 Subject: [PATCH 1/4] fix(dynamic-import-vars): trim import source --- packages/vite/src/node/plugins/dynamicImportVars.ts | 2 +- .../dynamic-import/__tests__/dynamic-import.spec.ts | 8 ++++++++ playground/dynamic-import/nested/index.js | 7 +++++++ 3 files changed, 16 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts index 97f605c1758d53..6ce365b2037f09 100644 --- a/packages/vite/src/node/plugins/dynamicImportVars.ts +++ b/packages/vite/src/node/plugins/dynamicImportVars.ts @@ -177,7 +177,7 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin { let result try { result = await transformDynamicImport( - source.slice(start, end), + source.slice(start, end).trim(), // Note: trim as es-module-lexer doesn't capture backticks importer, resolve ) diff --git a/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/playground/dynamic-import/__tests__/dynamic-import.spec.ts index 86c42a4d79a7e5..c8a90a32aeaf75 100644 --- a/playground/dynamic-import/__tests__/dynamic-import.spec.ts +++ b/playground/dynamic-import/__tests__/dynamic-import.spec.ts @@ -68,6 +68,14 @@ test('should load dynamic import with vars', async () => { ) }) +test('should load dynamic import with vars multiline', async () => { + await untilUpdated( + () => page.textContent('.dynamic-import-with-vars'), + 'hello', + true + ) +}) + test('should load dynamic import with vars alias', async () => { await untilUpdated( () => page.textContent('.dynamic-import-with-vars-alias'), diff --git a/playground/dynamic-import/nested/index.js b/playground/dynamic-import/nested/index.js index 0b229055b32b7c..c1922f8c2cee47 100644 --- a/playground/dynamic-import/nested/index.js +++ b/playground/dynamic-import/nested/index.js @@ -84,6 +84,13 @@ import(`../alias/${base}.js`).then((mod) => { text('.dynamic-import-with-vars', mod.hello()) }) +// prettier-ignore +import( + `../alias/${base}.js` +).then((mod) => { + text('.dynamic-import-with-vars-multiline', mod.hello()) +}) + import(`../alias/${base}.js?raw`).then((mod) => { text('.dynamic-import-with-vars-raw', JSON.stringify(mod)) }) From 39762ba05faf8d185a57e22a5fa46f892a446b4a Mon Sep 17 00:00:00 2001 From: bluwy Date: Wed, 6 Jul 2022 00:12:02 +0800 Subject: [PATCH 2/4] chore: temp fix --- packages/vite/src/node/plugins/dynamicImportVars.ts | 10 +++++----- packages/vite/src/node/utils.ts | 4 ++++ playground/dynamic-import/nested/index.js | 2 ++ 3 files changed, 11 insertions(+), 5 deletions(-) diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts index 6ce365b2037f09..18196e50f628aa 100644 --- a/packages/vite/src/node/plugins/dynamicImportVars.ts +++ b/packages/vite/src/node/plugins/dynamicImportVars.ts @@ -10,6 +10,7 @@ import { createFilter, normalizePath, parseRequest, + removeComments, requestQuerySplitRE, transformStableResult } from '../utils' @@ -176,11 +177,10 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin { s ||= new MagicString(source) let result try { - result = await transformDynamicImport( - source.slice(start, end).trim(), // Note: trim as es-module-lexer doesn't capture backticks - importer, - resolve - ) + // When import string is using backticks, es-module-lexer `end` captures until + // the closing parenthesis, instead of the closing backtick. Remove them manually. + const importSource = removeComments(source.slice(start, end)).trim() + result = await transformDynamicImport(importSource, importer, resolve) } catch (error) { if (warnOnError) { this.warn(error) diff --git a/packages/vite/src/node/utils.ts b/packages/vite/src/node/utils.ts index 0b0c205d80b9e4..2cdf49d7a51563 100644 --- a/packages/vite/src/node/utils.ts +++ b/packages/vite/src/node/utils.ts @@ -929,6 +929,10 @@ export function emptyCssComments(raw: string): string { return raw.replace(multilineCommentsRE, (s) => ' '.repeat(s.length)) } +export function removeComments(raw: string): string { + return raw.replace(multilineCommentsRE, '').replace(singlelineCommentsRE, '') +} + function mergeConfigRecursively( defaults: Record, overrides: Record, diff --git a/playground/dynamic-import/nested/index.js b/playground/dynamic-import/nested/index.js index c1922f8c2cee47..75d6c0fdd9b224 100644 --- a/playground/dynamic-import/nested/index.js +++ b/playground/dynamic-import/nested/index.js @@ -86,7 +86,9 @@ import(`../alias/${base}.js`).then((mod) => { // prettier-ignore import( + /* this messes with */ `../alias/${base}.js` + /* es-module-lexer */ ).then((mod) => { text('.dynamic-import-with-vars-multiline', mod.hello()) }) From ad31933c934891b2a720ec0d299be8d8763168c6 Mon Sep 17 00:00:00 2001 From: bluwy Date: Sat, 23 Jul 2022 13:13:43 +0800 Subject: [PATCH 3/4] docs: update comment --- packages/vite/src/node/plugins/dynamicImportVars.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts index 18196e50f628aa..ff90b1c459ef55 100644 --- a/packages/vite/src/node/plugins/dynamicImportVars.ts +++ b/packages/vite/src/node/plugins/dynamicImportVars.ts @@ -178,7 +178,8 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin { let result try { // When import string is using backticks, es-module-lexer `end` captures until - // the closing parenthesis, instead of the closing backtick. Remove them manually. + // the closing parenthesis, instead of the closing backtick. Remove comments manually. + // See https://github.com/guybedford/es-module-lexer/issues/118 const importSource = removeComments(source.slice(start, end)).trim() result = await transformDynamicImport(importSource, importer, resolve) } catch (error) { From bff2acb6209dd60f93dfe27ed3a20c1dead42d4c Mon Sep 17 00:00:00 2001 From: bluwy Date: Sat, 23 Jul 2022 13:18:15 +0800 Subject: [PATCH 4/4] docs: neater comment --- packages/vite/src/node/plugins/dynamicImportVars.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts index ff90b1c459ef55..b7d5ed5a5f8792 100644 --- a/packages/vite/src/node/plugins/dynamicImportVars.ts +++ b/packages/vite/src/node/plugins/dynamicImportVars.ts @@ -177,8 +177,10 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin { s ||= new MagicString(source) let result try { - // When import string is using backticks, es-module-lexer `end` captures until - // the closing parenthesis, instead of the closing backtick. Remove comments manually. + // When import string is using backticks, es-module-lexer `end` captures + // until the closing parenthesis, instead of the closing backtick. + // There may be inline comments between the backtick and the closing + // parenthesis, so we manually remove them for now. // See https://github.com/guybedford/es-module-lexer/issues/118 const importSource = removeComments(source.slice(start, end)).trim() result = await transformDynamicImport(importSource, importer, resolve)