fix(glob): fix HMR for array patterns with exclusions

[abbasyed]

fix(import-glob): fix HMR for array patterns with exclusions

fix #20852

Description

Fixes HMR not triggering when files are added or deleted that match import.meta.glob array patterns with exclusions.

Problem

When using array patterns with exclusions like:

import.meta.glob(["./modules/*.js", "!./modules/_excluded.js"], {
  import: "default",
  eager: true,
})

HMR would fail to trigger when:

1. Adding a file: New files matching the glob pattern wouldn't trigger HMR (page doesn't update)
2. Deleting a file: Deleted files would cause the error "Pre-transform error: Failed to load url" instead of triggering HMR

Root Cause

The bug was in the hotUpdate hook in packages/vite/src/node/plugins/importMetaGlob.ts where negated patterns were being passed to picomatch with the ! prefix still attached.

Picomatch expects negated patterns without the ! prefix for proper matching. When a file was added/deleted, the matcher would try to match against "!/path/to/_excluded.js" instead of "/path/to/_excluded.js", causing the matcher to always return false.

Solution

Strip the ! prefix from negated patterns before passing them to picomatch:

for (const glob of globs) {
  if (glob[0] === '!') {
    negated.push(glob.slice(1))  // Remove the '!' prefix
  } else {
    affirmed.push(glob)
  }
}

Verification

Using the Reproduction Repo

You can verify this fix using the reproduction repository: https://github.com/MoritzLoewenstein/vite-import-glob-repro

1. Clone the reproduction repo and install dependencies:

git clone https://github.com/MoritzLoewenstein/vite-import-glob-repro.git
cd vite-import-glob-repro
npm install

2. Link this fixed version of Vite:

npm link /path/to/this/vite/packages/vite

3. Start the dev server:

npm run dev

4. In another terminal, test adding a file:

npm run addMod

✅ Expected: The page should HMR automatically and show both included_a.js and included_b.js

5. Test deleting the file:

npm run delMod

✅ Expected: The page should HMR automatically and show only included_a.js (no errors)

Manual Verification

1. Create a test project with the following structure:

test-project/
├── modules/
│   ├── included.js
│   └── excluded.js
└── main.js

2. In main.js:

const modules = import.meta.glob(["./modules/*.js", "!./modules/excluded.js"], {
  import: "default",
  eager: true,
})
console.log(modules)

3. Run vite and verify:
   • Only included.js appears in the output (excluded.js is filtered)
   • Adding a new file in modules/ triggers HMR
   • Deleting a file from modules/ triggers HMR without errors

Test Coverage

Added comprehensive test coverage in playground/glob-import/__tests__/glob-import.spec.ts:

• Tests HMR for adding files with array patterns and exclusions
• Tests HMR for removing files with array patterns and exclusions
• Verifies exclusion patterns work correctly

Related Issues

This fix resolves the issue reported in the reproduction repository and ensures that array patterns with exclusions work correctly with HMR, matching the behavior of single-pattern globs.

[sapphi-red]

Thanks!