fix(build): emptyOutDir should happen for watch rebuilds (#22207)

Author: sapphi-red

packages/vite/src/node/plugins/prepareOutDir.ts

@@ -11,7 +11,7 @@ export function prepareOutDirPlugin(): Plugin {
   const rendered = new Set<Environment>()
   return {
     name: 'vite:prepare-out-dir',
-    options() {
+    watchChange() {
       rendered.delete(this.environment)
     },
     renderStart: {

playground/assets/__tests__/assets.spec.ts

@@ -705,6 +705,27 @@ describe.runIf(isBuild)('css and assets in css in build watch', () => {
     expect(cssFile).not.toMatch(/undefined/)
   })
 
+  test('old file is removed when the content changes', async () => {
+    await expect.poll(() => page.textContent('.update-content')).toBe('hello')
+
+    const oldMainJsFiles = listAssets('foo').filter((f) =>
+      /index-[-\w]+\.js$/.test(f),
+    )
+    expect(oldMainJsFiles.length).toBe(1)
+    const oldMainJsFile = oldMainJsFiles[0]
+
+    editFile('asset/update.js', (code) => code.replace('hello', 'world'))
+    await notifyRebuildComplete(watcher)
+    await page.reload()
+    await expect.poll(() => page.textContent('.update-content')).toBe('world')
+
+    const newMainJsFiles = listAssets('foo').filter((f) =>
+      /index-[-\w]+\.js$/.test(f),
+    )
+    expect(newMainJsFiles).not.toContain(oldMainJsFile)
+    expect(newMainJsFiles.length).toBe(1)
+  })
+
   test('import module.css', async () => {
     expect(await getColor('#foo')).toBe('red')
     editFile('css/foo.module.css', (code) => code.replace('red', 'blue'))

playground/assets/asset/update.js

@@ -0,0 +1,4 @@
+function text(el, text) {
+  document.querySelector(el).textContent = text
+}
+text('.update-content', 'hello')

playground/assets/index.html

@@ -482,7 +482,9 @@ <h3>assets in template</h3>
 <link rel="stylesheet" href="asset/style.css" />
 <div class="relative-css">link style</div>
 <div class="relative-js"></div>
+<div class="update-content"></div>
 <script src="asset/main.js" type="module"></script>
+<script src="asset/update.js" type="module"></script>
 <style>
   @import '/foo.css';
 </style>

playground/css/vite.config.js

@@ -55,6 +55,7 @@ export default defineConfig({
         },
       },
     },
+    emptyOutDir: false, // the dist directory is shared with other configs
   },
   esbuild: {
     logOverride: {

playground/legacy/vite.config.js

@@ -17,6 +17,7 @@ export default defineConfig({
     manifest: true,
     sourcemap: true,
     assetsInlineLimit: 100, // keep SVG as assets URL
+    emptyOutDir: false, // the dist directory is shared with other configs
     rollupOptions: {
       input: {
         index: path.resolve(import.meta.dirname, 'index.html'),

playground/vitestSetup.ts

@@ -265,8 +265,6 @@ async function loadConfig(configEnv: ConfigEnv) {
       // esbuild do not minify ES lib output since that would remove pure annotations and break tree-shaking
       // skip transpilation during tests to make it faster
       target: 'esnext',
-      // tests are flaky when `emptyOutDir` is `true`
-      emptyOutDir: false,
     },
     customLogger: createInMemoryLogger(serverLogs),
     plugins: [throwHtmlParseError()],