test: migrate file-delete-restore playground test to hmr playground (v…

…itejs#11176)

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>