From bb603d3d66506deb353e4d6346d5e8361fdb9e62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20Mel=C3=A9n?= Date: Wed, 11 May 2022 01:26:46 +0200 Subject: [PATCH] fix(glob): wrap glob compile output in function invocation (#3682) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Tobias Melén Co-authored-by: patak-dev --- .../glob-import/side-effect/writetodom.js | 4 + .../__snapshots__/fixture.test.ts.snap | 120 +++++++++--------- .../vite/src/node/plugins/importMetaGlob.ts | 2 +- .../glob-import/__tests__/glob-import.spec.ts | 27 +++- playground/glob-import/index.html | 9 ++ .../glob-import/side-effect/writedom.js | 4 + 6 files changed, 98 insertions(+), 68 deletions(-) create mode 100644 packages/playground/glob-import/side-effect/writetodom.js create mode 100644 playground/glob-import/side-effect/writedom.js diff --git a/packages/playground/glob-import/side-effect/writetodom.js b/packages/playground/glob-import/side-effect/writetodom.js new file mode 100644 index 00000000000000..e2ab04ba7f5cbe --- /dev/null +++ b/packages/playground/glob-import/side-effect/writetodom.js @@ -0,0 +1,4 @@ +/* global document */ +document && + (document.querySelector('.side-effect-result').textContent = + 'Hello from side effect') diff --git a/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap b/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap index 23e511a50545f7..61ff6eeb4d2fc7 100644 --- a/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap +++ b/packages/vite/src/node/__tests__/plugins/importGlob/__snapshots__/fixture.test.ts.snap @@ -10,67 +10,67 @@ import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\" import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\" import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\" import \\"../../../../../../types/importMeta\\"; -export const basic = { +export const basic = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"), \\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\") -}; -export const basicEager = { +}); +export const basicEager = Object.assign({ \\"./modules/a.ts\\": __vite_glob_1_0, \\"./modules/b.ts\\": __vite_glob_1_1, \\"./modules/index.ts\\": __vite_glob_1_2 -}; -export const ignore = { +}); +export const ignore = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\") -}; -export const namedEager = { +}); +export const namedEager = Object.assign({ \\"./modules/a.ts\\": __vite_glob_3_0, \\"./modules/b.ts\\": __vite_glob_3_1, \\"./modules/index.ts\\": __vite_glob_3_2 -}; -export const namedDefault = { +}); +export const namedDefault = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\").then(m => m[\\"default\\"]), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\").then(m => m[\\"default\\"]), \\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\").then(m => m[\\"default\\"]) -}; -export const eagerAs = { +}); +export const eagerAs = Object.assign({ \\"./modules/a.ts\\": __vite_glob_5_0, \\"./modules/b.ts\\": __vite_glob_5_1 -}; -export const rawImportModule = { +}); +export const rawImportModule = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts?raw\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts?raw\\") -}; -export const excludeSelf = { +}); +export const excludeSelf = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts\\") -}; -export const customQueryString = { +}); +export const customQueryString = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts?custom\\") -}; -export const customQueryObject = { +}); +export const customQueryObject = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts?foo=bar&raw=true\\") -}; -export const parent = { +}); +export const parent = Object.assign({ -}; -export const rootMixedRelative = { +}); +export const rootMixedRelative = Object.assign({ \\"/css.spec.ts\\": () => import(\\"../../css.spec.ts?url\\").then(m => m[\\"default\\"]), \\"/define.spec.ts\\": () => import(\\"../../define.spec.ts?url\\").then(m => m[\\"default\\"]), \\"/import.spec.ts\\": () => import(\\"../../import.spec.ts?url\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts?url\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts?url\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/index.ts\\": () => import(\\"../fixture-b/index.ts?url\\").then(m => m[\\"default\\"]) -}; -export const cleverCwd1 = { +}); +export const cleverCwd1 = Object.assign({ \\"./node_modules/framework/pages/hello.page.js\\": () => import(\\"./node_modules/framework/pages/hello.page.js\\") -}; -export const cleverCwd2 = { +}); +export const cleverCwd2 = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"), \\"../fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts\\"), \\"../fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts\\") -}; +}); " `; @@ -84,79 +84,79 @@ import { name as __vite_glob_3_2 } from \\"./modules/index.ts\\" import { default as __vite_glob_5_0 } from \\"./modules/a.ts?raw\\" import { default as __vite_glob_5_1 } from \\"./modules/b.ts?raw\\" import \\"../../../../../../types/importMeta\\"; -export const basic = { +export const basic = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"), \\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\") -}; -export const basicEager = { +}); +export const basicEager = Object.assign({ \\"./modules/a.ts\\": __vite_glob_1_0, \\"./modules/b.ts\\": __vite_glob_1_1, \\"./modules/index.ts\\": __vite_glob_1_2 -}; -export const ignore = { +}); +export const ignore = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\") -}; -export const namedEager = { +}); +export const namedEager = Object.assign({ \\"./modules/a.ts\\": __vite_glob_3_0, \\"./modules/b.ts\\": __vite_glob_3_1, \\"./modules/index.ts\\": __vite_glob_3_2 -}; -export const namedDefault = { +}); +export const namedDefault = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\").then(m => m[\\"default\\"]), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\").then(m => m[\\"default\\"]), \\"./modules/index.ts\\": () => import(\\"./modules/index.ts\\").then(m => m[\\"default\\"]) -}; -export const eagerAs = { +}); +export const eagerAs = Object.assign({ \\"./modules/a.ts\\": __vite_glob_5_0, \\"./modules/b.ts\\": __vite_glob_5_1 -}; -export const rawImportModule = { +}); +export const rawImportModule = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts?raw\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts?raw\\") -}; -export const excludeSelf = { +}); +export const excludeSelf = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts\\") -}; -export const customQueryString = { +}); +export const customQueryString = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts?custom&lang.ts\\") -}; -export const customQueryObject = { +}); +export const customQueryObject = Object.assign({ \\"./sibling.ts\\": () => import(\\"./sibling.ts?foo=bar&raw=true&lang.ts\\") -}; -export const parent = { +}); +export const parent = Object.assign({ -}; -export const rootMixedRelative = { +}); +export const rootMixedRelative = Object.assign({ \\"/css.spec.ts\\": () => import(\\"../../css.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]), \\"/define.spec.ts\\": () => import(\\"../../define.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]), \\"/import.spec.ts\\": () => import(\\"../../import.spec.ts?url&lang.ts\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts?url&lang.ts\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts?url&lang.ts\\").then(m => m[\\"default\\"]), \\"/importGlob/fixture-b/index.ts\\": () => import(\\"../fixture-b/index.ts?url&lang.ts\\").then(m => m[\\"default\\"]) -}; -export const cleverCwd1 = { +}); +export const cleverCwd1 = Object.assign({ \\"./node_modules/framework/pages/hello.page.js\\": () => import(\\"./node_modules/framework/pages/hello.page.js\\") -}; -export const cleverCwd2 = { +}); +export const cleverCwd2 = Object.assign({ \\"./modules/a.ts\\": () => import(\\"./modules/a.ts\\"), \\"./modules/b.ts\\": () => import(\\"./modules/b.ts\\"), \\"../fixture-b/a.ts\\": () => import(\\"../fixture-b/a.ts\\"), \\"../fixture-b/b.ts\\": () => import(\\"../fixture-b/b.ts\\") -}; +}); " `; exports[`fixture > virtual modules 1`] = ` -"{ +"Object.assign({ \\"/modules/a.ts\\": () => import(\\"/modules/a.ts\\"), \\"/modules/b.ts\\": () => import(\\"/modules/b.ts\\"), \\"/modules/index.ts\\": () => import(\\"/modules/index.ts\\") -} -{ +}) +Object.assign({ \\"/../fixture-b/a.ts\\": () => import(\\"/../fixture-b/a.ts\\"), \\"/../fixture-b/b.ts\\": () => import(\\"/../fixture-b/b.ts\\"), \\"/../fixture-b/index.ts\\": () => import(\\"/../fixture-b/index.ts\\") -}" +})" `; diff --git a/packages/vite/src/node/plugins/importMetaGlob.ts b/packages/vite/src/node/plugins/importMetaGlob.ts index ed46e35bea8ecf..140eb6ca6d1273 100644 --- a/packages/vite/src/node/plugins/importMetaGlob.ts +++ b/packages/vite/src/node/plugins/importMetaGlob.ts @@ -398,7 +398,7 @@ export async function transformGlobImport( files.forEach((i) => matchedFiles.add(i)) - const replacement = `{\n${objectProps.join(',\n')}\n}` + const replacement = `Object.assign({\n${objectProps.join(',\n')}\n})` s.overwrite(start, end, replacement) return staticImports diff --git a/playground/glob-import/__tests__/glob-import.spec.ts b/playground/glob-import/__tests__/glob-import.spec.ts index d738ccec1d4c97..8cc5c61d172236 100644 --- a/playground/glob-import/__tests__/glob-import.spec.ts +++ b/playground/glob-import/__tests__/glob-import.spec.ts @@ -31,6 +31,12 @@ const json = isBuild msg: 'baz' } +const globWithAlias = { + '/dir/alias.js': { + default: 'hi' + } +} + const allResult = { // JSON file should be properly transformed '/dir/alias.js': { @@ -40,14 +46,15 @@ const allResult = { '/dir/foo.js': { msg: 'foo' }, - '/dir/index.js': { - globWithAlias: { - '/dir/alias.js': { - default: 'hi' + '/dir/index.js': isBuild + ? { + modules: filteredResult, + globWithAlias } - }, - modules: filteredResult - }, + : { + globWithAlias, + modules: filteredResult + }, '/dir/nested/bar.js': { modules: { '../baz.json': json @@ -93,6 +100,12 @@ test('import relative glob raw', async () => { ) }) +test('unassigned import processes', async () => { + expect(await page.textContent('.side-effect-result')).toBe( + 'Hello from side effect' + ) +}) + if (!isBuild) { test('hmr for adding/removing files', async () => { addFile('dir/a.js', '') diff --git a/playground/glob-import/index.html b/playground/glob-import/index.html index 8466a6d0495881..6cff2aa0965c59 100644 --- a/playground/glob-import/index.html +++ b/playground/glob-import/index.html @@ -2,6 +2,7 @@ 

 

 

+

 
 
 
+
+
diff --git a/playground/glob-import/side-effect/writedom.js b/playground/glob-import/side-effect/writedom.js
new file mode 100644
index 00000000000000..e2ab04ba7f5cbe
--- /dev/null
+++ b/playground/glob-import/side-effect/writedom.js
@@ -0,0 +1,4 @@
+/* global document */
+document &&
+  (document.querySelector('.side-effect-result').textContent =
+    'Hello from side effect')