fix(glob): wrap glob compile output in function invocation (#3682)

Co-authored-by: Tobias Melén <tobias.melen@makingwaves.com> Co-authored-by: patak-dev <matias.capeletto@gmail.com>
vitejs · May 10, 2022 · bb603d3 · bb603d3
1 parent 5484c8c
commit bb603d3
Show file tree

Hide file tree

Showing 6 changed files with 98 additions and 68 deletions.
diff --git a/packages/playground/glob-import/side-effect/writetodom.js 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
@@ -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
@@ -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
@@ -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
@@ -2,6 +2,7 @@
 <pre class="result-node_modules"></pre>
 <pre class="globraw"></pre>
 <pre class="relative-glob-raw"></pre>
+<pre class="side-effect-result"></pre>
 
 <script type="module" src="./dir/index.js"></script>
 <script type="module">
@@ -70,3 +71,11 @@
     2
   )
 </script>
+
+<script type="module">
+  const neverInvoke = () =>
+    (document.querySelector('.side-effect-result').textContent =
+      "Syntax generated from 'import.meta.glob' must do ASI.")
+  const notInvocation = neverInvoke
+  import.meta.glob('/side-effect/**', { eager: true })
+</script>
diff --git a/playground/glob-import/side-effect/writedom.js 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')