feat: support import.meta.hot?.accept (#12053)

Author: sapphi-red

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

@@ -406,19 +406,20 @@ export function importAnalysisPlugin(config: ResolvedConfig): Plugin {
           const prop = source.slice(end, end + 4)
           if (prop === '.hot') {
             hasHMR = true
-            if (source.slice(end + 4, end + 11) === '.accept') {
+            const endHot = end + 4 + (source[end + 4] === '?' ? 1 : 0)
+            if (source.slice(endHot, endHot + 7) === '.accept') {
               // further analyze accepted modules
-              if (source.slice(end + 4, end + 18) === '.acceptExports') {
+              if (source.slice(endHot, endHot + 14) === '.acceptExports') {
                 lexAcceptedHmrExports(
                   source,
-                  source.indexOf('(', end + 18) + 1,
+                  source.indexOf('(', endHot + 14) + 1,
                   acceptedExports,
                 )
                 isPartiallySelfAccepting = true
               } else if (
                 lexAcceptedHmrDeps(
                   source,
-                  source.indexOf('(', end + 11) + 1,
+                  source.indexOf('(', endHot + 7) + 1,
                   acceptedUrls,
                 )
               ) {

playground/hmr/__tests__/hmr.spec.ts

@@ -774,4 +774,16 @@ if (import.meta.hot) {
       'parent:child',
     )
   })
+
+  test('import.meta.hot?.accept', async () => {
+    const el = await page.$('.optional-chaining')
+    await untilBrowserLogAfter(
+      () =>
+        editFile('optional-chaining/child.js', (code) =>
+          code.replace('const foo = 1', 'const foo = 2'),
+        ),
+      '(optional-chaining) child update',
+    )
+    await untilUpdated(() => el.textContent(), '2')
+  })
 }

playground/hmr/hmr.ts

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

playground/hmr/index.html

@@ -31,3 +31,4 @@
 <div class="import-image"></div>
 <div class="importing-reloaded"></div>
 <div class="file-delete-restore"></div>
+<div class="optional-chaining"></div>

playground/hmr/optional-chaining/child.js

@@ -0,0 +1 @@
+export const foo = 1

playground/hmr/optional-chaining/parent.js

@@ -0,0 +1,6 @@
+import { foo } from './child'
+
+import.meta.hot?.accept('./child', ({ foo }) => {
+  console.log('(optional-chaining) child update')
+  document.querySelector('.optional-chaining').textContent = foo
+})