chore: stop prev renderEffect before hmr rerender

Author: edison1105

packages/runtime-vapor/__tests__/components/Teleport.spec.ts

@@ -195,7 +195,7 @@ describe('renderer: VaporTeleport', () => {
       expect(target.innerHTML).toBe('<div>teleported 2</div>')
     })
 
-    test.todo('parent rerender + toggle disabled', async () => {
+    test('parent rerender + toggle disabled', async () => {
       const target = document.createElement('div')
       const root = document.createElement('div')
       const parentId = 'test3-parent-rerender'

packages/runtime-vapor/src/component.ts

@@ -52,7 +52,7 @@ import {
   resolveDynamicProps,
   setupPropsValidation,
 } from './componentProps'
-import { renderEffect } from './renderEffect'
+import { type RenderEffect, renderEffect } from './renderEffect'
 import { emit, normalizeEmitsOptions } from './componentEmits'
 import { setDynamicProps } from './dom/prop'
 import {
@@ -446,6 +446,7 @@ export class VaporComponentInstance implements GenericComponentInstance {
   devtoolsRawSetupState?: any
   hmrRerender?: () => void
   hmrReload?: (newComp: VaporComponent) => void
+  renderEffects?: RenderEffect[]
   parentTeleport?: TeleportFragment | null
   propsOptions?: NormalizedPropsOptions
   emitsOptions?: ObjectEmitsOptions | null

packages/runtime-vapor/src/hmr.ts

@@ -21,6 +21,7 @@ export function hmrRerender(instance: VaporComponentInstance): void {
   remove(instance.block, parent)
   const prev = setCurrentInstance(instance)
   pushWarningContext(instance)
+  if (instance.renderEffects) instance.renderEffects.forEach(e => e.stop())
   devRender(instance)
   popWarningContext()
   setCurrentInstance(...prev)
@@ -45,35 +46,14 @@ export function hmrReload(
   )
   setCurrentInstance(...prev)
   mountComponent(newInstance, parent, anchor)
-  updateParentBlockOnHmrReload(parentInstance, instance, newInstance)
+  // in case the old instance in parent's block, it is necessary
+  // to update instance.block to ensure that the correct parent and
+  // anchor are found during parent instance HMR rerender/reload, as
+  // `normalizeBlock` relies on the instance.block
+  instance.block = newInstance.block
   updateParentTeleportOnHmrReload(instance, newInstance)
 }
 
-/**
- * dev only
- * update parentInstance.block to ensure that the correct parent and
- * anchor are found during parentInstance HMR rerender/reload, as
- * `normalizeBlock` relies on the current instance.block
- */
-function updateParentBlockOnHmrReload(
-  parentInstance: VaporComponentInstance | null,
-  instance: VaporComponentInstance,
-  newInstance: VaporComponentInstance,
-): void {
-  if (parentInstance) {
-    if (parentInstance.block === instance) {
-      parentInstance.block = newInstance
-    } else if (isArray(parentInstance.block)) {
-      for (let i = 0; i < parentInstance.block.length; i++) {
-        if (parentInstance.block[i] === instance) {
-          parentInstance.block[i] = newInstance
-          break
-        }
-      }
-    }
-  }
-}
-
 /**
  * dev only
  * during root component HMR reload, since the old component will be unmounted

packages/runtime-vapor/src/renderEffect.ts

@@ -11,7 +11,7 @@ import {
 import { type VaporComponentInstance, isVaporComponent } from './component'
 import { invokeArrayFns } from '@vue/shared'
 
-class RenderEffect extends ReactiveEffect {
+export class RenderEffect extends ReactiveEffect {
   i: VaporComponentInstance | null
   job: SchedulerJob
   updateJob: SchedulerJob
@@ -41,6 +41,9 @@ class RenderEffect extends ReactiveEffect {
         this.onTrigger = instance.rtg
           ? e => invokeArrayFns(instance.rtg!, e)
           : void 0
+
+        // hmr rerender needs to stop all effects under the current instance
+        ;(instance.renderEffects || (instance.renderEffects = [])).push(this)
       }
       job.i = instance
     }