test: add tests for hmr with dynamic import

The self-accepting test is failing. It will be fixed

playground/App.vue

@@ -30,7 +30,7 @@
 import { defineAsyncComponent } from 'vue'
 import TestEnv from './TestEnv.vue'
 import TestModuleResolve from './TestModuleResolve.vue'
-import TestHmr from './TestHmr.vue'
+import TestHmr from './TestHmr/TestHmr.vue'
 import TestPostCss from './TestPostCss.vue'
 import TestScopedCss from './TestScopedCss.vue'
 import TestCssModules from './TestCssModules.vue'

playground/TestHmr/TestHmr.vue

@@ -0,0 +1,118 @@
+<template>
+  <h2>Hot Module Replacement</h2>
+  <p>
+    <span>
+      HMR: click button and edit template part of <code>./TestHmr.vue</code>,
+      count should not reset
+    </span>
+    <button class="hmr-increment" @click="count++">
+      &gt;&gt;&gt; {{ count }} &lt;&lt;&lt;
+    </button>
+  </p>
+  <p>
+    <span>
+      HMR: edit the return value of <code>foo()</code> in
+      <code>./testHmrPropagation.js</code>, should update without reloading
+      page:
+    </span>
+    <span class="hmr-propagation">{{ foo() }}</span>
+  </p>
+  <p>
+    <span>
+      HMR: edit the value of <code>bar</code> in
+      <code>./testDynamicImportHmrPropagation.js</code>, should update without
+      reloading page:
+    </span>
+    <span class="hmr-propagation-dynamic">{{ barValue }}</span>
+    <button class="hmr-propagation-dynamic-load" @click="loadDynamic()">
+      load
+    </button>
+  </p>
+  <p>
+    <span>
+      HMR: edit the value of <code>baz</code> in
+      <code>./testFullDynamicImportHmrPropagation.js</code>, the app should not
+      update because the imported module is not self-accepting:
+    </span>
+    <span class="hmr-propagation-full-dynamic">{{ bazValue }}</span>
+    <button
+      class="hmr-propagation-full-dynamic-load"
+      @click="loadFullDynamic()"
+    >
+      load
+    </button>
+  </p>
+  <p>
+    <span>
+      HMR: edit the value of <code>__text</code> in
+      <code>./testFullDynamicImportHmrPropagationSelfAccepting.js</code>, the
+      app should update without reloading and the count state should persist,
+      because the imported module is self-accepting:
+    </span>
+    <span
+      class="hmr-propagation-full-dynamic-self-accepting"
+      ref="dynamicDataOutlet"
+      >qux not loaded</span
+    >
+    <button
+      class="hmr-propagation-full-dynamic-load-self-accepting"
+      @click="loadFullDynamicSelfAccepting()"
+    >
+      load
+    </button>
+  </p>
+  <p>
+    HMR: manual API (see console) - edit <code>./testHmrManual.js</code> and it
+    should log new exported value without reloading the page.
+  </p>
+</template>
+
+<script>
+import { ref } from 'vue'
+import { foo } from './testHmrPropagation'
+
+export default {
+  setup() {
+    const barValue = ref('bar not loaded')
+    const bazValue = ref('baz not loaded')
+    const dynamicDataOutlet = ref()
+    return {
+      count: 0,
+      foo,
+      barValue,
+      bazValue,
+      dynamicDataOutlet,
+      loadDynamic() {
+        barValue.value = 'bar loading'
+        // This kind of dynamic import can be analyzed and rewrited by vite
+        import('./testHmrPropagationDynamicImport').then(({ bar }) => {
+          barValue.value = bar
+        })
+      },
+      loadFullDynamic() {
+        bazValue.value = 'baz loading'
+        // This kind of dynamic import can't be analyzed and rewrited by vite
+        import(dummy('./testHmrPropagationFullDynamicImport')).then(
+          ({ baz }) => {
+            bazValue.value = baz
+          }
+        )
+      },
+      loadFullDynamicSelfAccepting() {
+        dynamicDataOutlet.value.innerHTML = 'qux loading'
+        // This kind of dynamic import can't be analyzed and rewrited by vite
+        import(
+          dummy('./testHmrPropagationFullDynamicImportSelfAccepting')
+        ).then(({ render }) => {
+          render(dynamicDataOutlet.value)
+        })
+      }
+    }
+  }
+}
+
+// make the imported path unanalysable in build time
+function dummy(value) {
+  return value
+}
+</script>

playground/TestHmr/testHmrPropagationDynamicImport.js

@@ -0,0 +1 @@
+export const bar = 'bar loaded'

playground/TestHmr/testHmrPropagationFullDynamicImport.js

@@ -0,0 +1 @@
+export const baz = 'baz loaded'

playground/TestHmr/testHmrPropagationFullDynamicImportSelfAccepting.js

@@ -0,0 +1,14 @@
+export let __text = 'qux loaded'
+
+let domEl
+
+export function render(_domEl) {
+  domEl = _domEl
+  domEl.innerHTML = __text
+}
+
+if (import.meta.hot) {
+  import.meta.hot.accept((newModule) => {
+    newModule.render(domEl)
+  })
+}

test/test.js

@@ -116,7 +116,7 @@ describe('vite', () => {
         await button.click()
         expect(await getText(button)).toMatch('>>> 1 <<<')
 
-        await updateFile('TestHmr.vue', (content) =>
+        await updateFile('TestHmr/TestHmr.vue', (content) =>
           content.replace('{{ count }}', 'count is {{ count }}')
         )
         // note: using the same button to ensure the component did only re-render
@@ -125,7 +125,7 @@ describe('vite', () => {
       })
 
       test('hmr (vue reload)', async () => {
-        await updateFile('TestHmr.vue', (content) =>
+        await updateFile('TestHmr/TestHmr.vue', (content) =>
           content.replace('count: 0,', 'count: 1337,')
         )
         await expectByPolling(() => getText('.hmr-increment'), 'count is 1337')
@@ -134,12 +134,102 @@ describe('vite', () => {
       test('hmr (js -> vue propagation)', async () => {
         const span = await page.$('.hmr-propagation')
         expect(await getText(span)).toBe('1')
-        await updateFile('testHmrPropagation.js', (content) =>
+        await updateFile('TestHmr/testHmrPropagation.js', (content) =>
           content.replace('return 1', 'return 666')
         )
         await expectByPolling(() => getText('.hmr-propagation'), '666')
       })
 
+      test('hmr (js -> vue propagation. dynamic import, static-analyzable)', async () => {
+        let span = await page.$('.hmr-propagation-dynamic')
+        expect(await getText(span)).toBe('bar not loaded')
+        // trigger the dynamic import
+        let button = await page.$('.hmr-propagation-dynamic-load')
+        await button.click()
+        expect(await getText(span)).toBe('bar loading')
+        await expectByPolling(() => getText(span), 'bar loaded')
+        // update souce code
+        await updateFile(
+          'TestHmr/testHmrPropagationDynamicImport.js',
+          (content) => content.replace('bar loaded', 'bar updated')
+        )
+        // the update trigger the reload of TestHmr component
+        // all states in it are lost
+        await expectByPolling(
+          () => getText('.hmr-propagation-dynamic'),
+          'bar not loaded'
+        )
+        span = await page.$('.hmr-propagation-dynamic')
+        button = await page.$('.hmr-propagation-dynamic-load')
+        await button.click()
+        expect(await getText(span)).toBe('bar loading')
+        await expectByPolling(() => getText(span), 'bar updated')
+      })
+
+      test('hmr (js -> vue propagation. full dynamic import, non-static-analyzable)', async () => {
+        let span = await page.$('.hmr-propagation-full-dynamic')
+        expect(await getText(span)).toBe('baz not loaded')
+        // trigger the dynamic import
+        let button = await page.$('.hmr-propagation-full-dynamic-load')
+        await button.click()
+        expect(await getText(span)).toBe('baz loading')
+        await expectByPolling(() => getText(span), 'baz loaded')
+        // update souce code
+        await updateFile(
+          'TestHmr/testHmrPropagationFullDynamicImport.js',
+          (content) => content.replace('baz loaded', 'baz updated')
+        )
+        // the update doesn't trigger hmr
+        // because it is a non-static-analyzable dynamic import
+        // and the imported file is not self-accepting
+        await timeout(200)
+        expect(await getText('.hmr-propagation-full-dynamic')).toBe(
+          'baz loaded'
+        )
+        // only if we reload the whole page, we can see the new content
+        await page.reload({ waitUntil: ['networkidle0', 'domcontentloaded'] })
+        span = await page.$('.hmr-propagation-full-dynamic')
+        expect(await getText(span)).toBe('baz not loaded')
+        // trigger the dynamic import
+        button = await page.$('.hmr-propagation-full-dynamic-load')
+        await button.click()
+        expect(await getText(span)).toBe('baz loading')
+        await expectByPolling(() => getText(span), 'baz updated')
+      })
+
+      test('hmr (js -> vue propagation. full dynamic import, non-static-analyzable, but self-accepting)', async () => {
+        // reset the sate
+        await page.reload({ waitUntil: ['networkidle0', 'domcontentloaded'] })
+        let stateIncrementButton = await page.$('.hmr-increment')
+        await stateIncrementButton.click()
+        expect(await getText(stateIncrementButton)).toMatch(
+          '>>> count is 1338 <<<'
+        )
+
+        let span = await page.$('.hmr-propagation-full-dynamic-self-accepting')
+        expect(await getText(span)).toBe('qux not loaded')
+        // trigger the dynamic import
+        let button = await page.$(
+          '.hmr-propagation-full-dynamic-load-self-accepting'
+        )
+        await button.click()
+        expect(await getText(span)).toBe('qux loading')
+        await expectByPolling(() => getText(span), 'qux loaded')
+        // update souce code
+        await updateFile(
+          'TestHmr/testHmrPropagationFullDynamicImportSelfAccepting.js',
+          (content) => content.replace('qux loaded', 'qux updated')
+        )
+        // the update is accepted by the imported file
+        await expectByPolling(() => getText(span), 'qux updated')
+        // the state should be the same
+        // because the TestHmr component is not reloaded
+        stateIncrementButton = await page.$('.hmr-increment')
+        expect(await getText(stateIncrementButton)).toMatch(
+          '>>> count is 1338 <<<'
+        )
+      })
+
       test('hmr (manual API, self accepting)', async () => {
         await updateFile('testHmrManual.js', (content) =>
           content.replace('foo = 1', 'foo = 2')