fix(plugin-vue-jsx): fix vue jsx hmr (#1495)

Author: Jokcy

packages/playground/vue-jsx/__tests__/vue-jsx.spec.ts

@@ -1,4 +1,4 @@
-import { editFile, isBuild, untilUpdated } from '../../testUtils'
+import { editFile, isBuild, untilUpdated } from 'testUtils'
 
 test('should render', async () => {
   expect(await page.textContent('.named')).toMatch('0')
@@ -25,9 +25,10 @@ if (!isBuild) {
     )
     await untilUpdated(() => page.textContent('.named'), 'named updated 0')
 
-    // should not affect other components on the page
-    expect(await page.textContent('.named-specifier')).toMatch('2')
-    expect(await page.textContent('.default')).toMatch('3')
+    // affect all components in same file
+    expect(await page.textContent('.named-specifier')).toMatch('1')
+    expect(await page.textContent('.default')).toMatch('2')
+    // should not affect other components from different file
     expect(await page.textContent('.default-tsx')).toMatch('4')
   })
 
@@ -40,8 +41,9 @@ if (!isBuild) {
       'named specifier updated 1'
     )
 
+    // affect all components in same file
+    expect(await page.textContent('.default')).toMatch('2')
     // should not affect other components on the page
-    expect(await page.textContent('.default')).toMatch('3')
     expect(await page.textContent('.default-tsx')).toMatch('4')
   })
 

packages/plugin-vue-jsx/index.js

@@ -62,15 +62,14 @@ function vueJsxPlugin(options = {}) {
 
         // check for hmr injection
         /**
-         * @type {{ name: string, hash: string }[]}
+         * @type {{ name: string }[]}
          */
         const declaredComponents = []
         /**
          * @type {{
          *  local: string,
          *  exported: string,
          *  id: string,
-         *  hash: string
          * }[]}
          */
         const hotComponents = []
@@ -91,11 +90,10 @@ function vueJsxPlugin(options = {}) {
             ) {
               hotComponents.push(
                 ...parseComponentDecls(node.declaration, code).map(
-                  ({ name, hash: _hash }) => ({
+                  ({ name }) => ({
                     local: name,
                     exported: name,
-                    id: hash(id + name),
-                    hash: _hash
+                    id: hash(id + name)
                   })
                 )
               )
@@ -112,8 +110,7 @@ function vueJsxPlugin(options = {}) {
                     hotComponents.push({
                       local: spec.local.name,
                       exported: spec.exported.name,
-                      id: hash(id + spec.exported.name),
-                      hash: matched.hash
+                      id: hash(id + spec.exported.name)
                     })
                   }
                 }
@@ -131,19 +128,15 @@ function vueJsxPlugin(options = {}) {
                 hotComponents.push({
                   local: node.declaration.name,
                   exported: 'default',
-                  id: hash(id + 'default'),
-                  hash: matched.hash
+                  id: hash(id + 'default')
                 })
               }
             } else if (isDefineComponentCall(node.declaration)) {
               hasDefault = true
               hotComponents.push({
                 local: '__default__',
                 exported: 'default',
-                id: hash(id + 'default'),
-                hash: hash(
-                  code.slice(node.declaration.start, node.declaration.end)
-                )
+                id: hash(id + 'default')
               })
             }
           }
@@ -160,14 +153,11 @@ function vueJsxPlugin(options = {}) {
           }
 
           let callbackCode = ``
-          for (const { local, exported, id, hash } of hotComponents) {
+          for (const { local, exported, id } of hotComponents) {
             code +=
               `\n${local}.__hmrId = "${id}"` +
-              `\n${local}.__hmrHash = "${hash}"` +
               `\n__VUE_HMR_RUNTIME__.createRecord("${id}", ${local})`
-            callbackCode +=
-              `\n  if (__${exported}.__hmrHash !== ${local}.__hmrHash) ` +
-              `__VUE_HMR_RUNTIME__.reload("${id}", __${exported})`
+            callbackCode += `\n__VUE_HMR_RUNTIME__.reload("${id}", __${exported})`
           }
 
           code += `\nimport.meta.hot.accept(({${hotComponents
@@ -195,8 +185,7 @@ function parseComponentDecls(node, source) {
   for (const decl of node.declarations) {
     if (decl.id.type === 'Identifier' && isDefineComponentCall(decl.init)) {
       names.push({
-        name: decl.id.name,
-        hash: hash(source.slice(decl.init.start, decl.init.end))
+        name: decl.id.name
       })
     }
   }