From 7f9e9b5a6c960b3adc3dd1e309eb701e4dfa283a Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Mon, 25 Jul 2022 11:37:54 +0800 Subject: [PATCH 1/7] fix: dynamic import path contain `../` and its own directory will not work --- .../vite/src/node/plugins/dynamicImportVars.ts | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/packages/vite/src/node/plugins/dynamicImportVars.ts b/packages/vite/src/node/plugins/dynamicImportVars.ts index b7d5ed5a5f8792..5e429c4467a2e5 100644 --- a/packages/vite/src/node/plugins/dynamicImportVars.ts +++ b/packages/vite/src/node/plugins/dynamicImportVars.ts @@ -14,6 +14,7 @@ import { requestQuerySplitRE, transformStableResult } from '../utils' +import { toAbsoluteGlob } from './importMetaGlob' export const dynamicImportHelperId = '/@vite/dynamic-import-helper' @@ -105,6 +106,7 @@ export async function transformDynamicImport( const params = globParams ? `, ${JSON.stringify({ ...globParams, import: '*' })}` : '' + const exp = `(import.meta.glob(${JSON.stringify(userPattern)}${params}))` return { @@ -198,11 +200,22 @@ export function dynamicImportVarsPlugin(config: ResolvedConfig): Plugin { const { rawPattern, glob } = result + let newPattern = posix.relative( + posix.dirname(importer), + await toAbsoluteGlob(rawPattern, config.root, importer, (im) => + this.resolve(im, importer).then((i) => i?.id || im) + ) + ) + + if (!/^\.{1,2}\//.test(newPattern)) { + newPattern = `./${newPattern}` + } + needDynamicImportHelper = true s.overwrite( expStart, expEnd, - `__variableDynamicImportRuntimeHelper(${glob}, \`${rawPattern}\`)` + `__variableDynamicImportRuntimeHelper(${glob}, \`${newPattern}\`)` ) } From 840560d5ed68e95ecf9df545aaaab88e857b1b54 Mon Sep 17 00:00:00 2001 From: "qing.deng" Date: Mon, 25 Jul 2022 11:53:13 +0800 Subject: [PATCH 2/7] test: add some test cases --- .../__tests__/dynamic-import.spec.ts | 16 ++++++++++++++++ playground/dynamic-import/index.html | 4 ++++ playground/dynamic-import/nested/index.js | 9 +++++++++ playground/dynamic-import/nested/nested/self.js | 1 + playground/dynamic-import/nested/self.js | 1 + 5 files changed, 31 insertions(+) create mode 100644 playground/dynamic-import/nested/nested/self.js create mode 100644 playground/dynamic-import/nested/self.js diff --git a/playground/dynamic-import/__tests__/dynamic-import.spec.ts b/playground/dynamic-import/__tests__/dynamic-import.spec.ts index c8a90a32aeaf75..fb113fc552bd03 100644 --- a/playground/dynamic-import/__tests__/dynamic-import.spec.ts +++ b/playground/dynamic-import/__tests__/dynamic-import.spec.ts @@ -96,3 +96,19 @@ test('should load dynamic import with css in package', async () => { await page.click('.pkg-css') await untilUpdated(() => getColor('.pkg-css'), 'blue', true) }) + +test('should work with load ../ and itself directory', async () => { + await untilUpdated( + () => page.textContent('.dynamic-import-self'), + 'dynamic-import-self-content', + true + ) +}) + +test('should work with load ../ and contain itself directory', async () => { + await untilUpdated( + () => page.textContent('.dynamic-import-nested-self'), + 'dynamic-import-nested-self-content', + true + ) +}) diff --git a/playground/dynamic-import/index.html b/playground/dynamic-import/index.html index 997ad059ad6821..8eb5e60098a15c 100644 --- a/playground/dynamic-import/index.html +++ b/playground/dynamic-import/index.html @@ -21,6 +21,10 @@
+
+ +
+