chore: merge main

packages/vite/src/node/server/pluginContainer.ts

@@ -445,6 +445,21 @@ export async function createPluginContainer(
  }
  }
  }
+ } else if (err.loc) {
+ if (!err.frame) {
+ let code = err.pluginCode
+ if (err.loc.file) {
+ err.id = normalizePath(err.loc.file)
+ if (!code) {
+ try {
+ code = fs.readFileSync(err.loc.file, 'utf-8')
+ } catch {}
+ }
+ }
+ if (code) {
+ err.frame = generateCodeFrame(code, err.loc)
+ }
+ }
  }
  return err
  }

playground/css-dynamic-import/__tests__/css-dynamic-import.spec.ts

@@ -33,12 +33,12 @@ async function withServe(base: string, fn: () => Promise<void>) {
  const config = getConfig(base)
  const server = await createServer(config)
  await server.listen()
- await new Promise((r) => setTimeout(r, 500))
 
  try {
  await page.goto(server.resolvedUrls.local[0])
  await fn()
  } finally {
+ await page.goto('about:blank') // move to a different page to avoid auto-refresh after server start
  await server.close()
  }
 }

playground/hmr/__tests__/hmr.spec.ts

@@ -1,10 +1,12 @@
 import { beforeAll, describe, expect, it, test } from 'vitest'
 import {
+ addFile,
  browserLogs,
  editFile,
  getBg,
  isBuild,
  page,
+ removeFile,
  untilBrowserLogAfter,
  untilUpdated,
  viteTestUrl,
@@ -713,4 +715,63 @@ if (!isBuild) {
  await navigationPromise
  }, /500/)
  })
+
+ test('should hmr when file is deleted and restored', async () => {
+ await page.goto(viteTestUrl)
+
+ const parentFile = 'file-delete-restore/parent.js'
+ const childFile = 'file-delete-restore/child.js'
+
+ await untilUpdated(
+ () => page.textContent('.file-delete-restore'),
+ 'parent:child',
+ )
+
+ editFile(childFile, (code) =>
+ code.replace("value = 'child'", "value = 'child1'"),
+ )
+ await untilUpdated(
+ () => page.textContent('.file-delete-restore'),
+ 'parent:child1',
+ )
+
+ editFile(parentFile, (code) =>
+ code.replace(
+ "export { value as childValue } from './child'",
+ "export const childValue = 'not-child'",
+ ),
+ )
+ removeFile(childFile)
+ await untilUpdated(
+ () => page.textContent('.file-delete-restore'),
+ 'parent:not-child',
+ )
+
+ addFile(
+ childFile,
+ `
+import { rerender } from './runtime'
+
+export const value = 'child'
+
+if (import.meta.hot) {
+ import.meta.hot.accept((newMod) => {
+ if (!newMod) return
+
+ rerender({ child: newMod.value })
+ })
+}
+`,
+ )
+ editFile(parentFile, (code) =>
+ code.replace(
+ "export const childValue = 'not-child'",
+ "export { value as childValue } from './child'",
+ ),
+ )
+ await untilUpdated(
+ () => page.textContent('.file-delete-restore'),
+ 'parent:child',
+ )
+ })
 }

playground/hmr/file-delete-restore/child.js

@@ -0,0 +1,11 @@
+import { rerender } from './runtime'
+
+export const value = 'child'
+
+if (import.meta.hot) {
+ import.meta.hot.accept((newMod) => {
+ if (!newMod) return
+
+ rerender({ child: newMod.value })
+ })
+}

playground/hmr/file-delete-restore/index.js

@@ -0,0 +1,4 @@
+import { render } from './runtime'
+import { childValue, parentValue } from './parent'
+
+render({ parent: parentValue, child: childValue })

playground/hmr/file-delete-restore/parent.js

@@ -0,0 +1,12 @@
+import { rerender } from './runtime'
+
+export const parentValue = 'parent'
+export { value as childValue } from './child'
+
+if (import.meta.hot) {
+ import.meta.hot.accept((newMod) => {
+ if (!newMod) return
+
+ rerender({ child: newMod.childValue, parent: newMod.parentValue })
+ })
+}

playground/hmr/file-delete-restore/runtime.js

@@ -0,0 +1,16 @@
+let state = {}
+
+export const render = (newState) => {
+ state = newState
+ apply()
+}
+
+export const rerender = (updates) => {
+ state = { ...state, ...updates }
+ apply()
+}
+
+const apply = () => {
+ document.querySelector('.file-delete-restore').textContent =
+ Object.values(state).join(':')
+}

playground/hmr/hmr.ts

@@ -3,6 +3,7 @@ import { virtual } from 'virtual:file'
 import { foo as depFoo, nestedFoo } from './hmrDep'
 import './importing-updated'
 import './invalidation/parent'
+import './file-delete-restore'
 
 export const foo = 1
 text('.app', foo)

playground/hmr/index.html

@@ -30,3 +30,4 @@
 <div class="link-tag-removed">no</div>
 <div class="import-image"></div>
 <div class="importing-reloaded"></div>
+<div class="file-delete-restore"></div>