diff --git a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap index cb23b5bc2..80304b4ba 100644 --- a/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap +++ b/packages/compiler-vapor/__tests__/transforms/__snapshots__/vOn.spec.ts.snap @@ -18,7 +18,11 @@ const t0 = _template("
") export function render(_ctx) { const n0 = t0() - _renderEffect(() => _on(n0, _ctx.event, () => _ctx.handler)) + _renderEffect(() => { + _on(n0, _ctx.event, () => _ctx.handler, { + effect: true + }) + }) return n0 }" `; @@ -29,7 +33,11 @@ const t0 = _template("
") export function render(_ctx) { const n0 = t0() - _renderEffect(() => _on(n0, _ctx.event(_ctx.foo), () => _ctx.handler)) + _renderEffect(() => { + _on(n0, _ctx.event(_ctx.foo), () => _ctx.handler, { + effect: true + }) + }) return n0 }" `; @@ -40,7 +48,11 @@ const t0 = _template("
") export function render(_ctx) { const n0 = t0() - _renderEffect(() => _on(n0, _ctx.event, () => _ctx.handler)) + _renderEffect(() => { + _on(n0, _ctx.event, () => _ctx.handler, { + effect: true + }) + }) return n0 }" `; @@ -366,7 +378,8 @@ export function render(_ctx) { const n0 = t0() _renderEffect(() => { _on(n0, (_ctx.event) === "click" ? "mouseup" : (_ctx.event), () => _ctx.test, { - modifiers: ["middle"] + modifiers: ["middle"], + effect: true }) }) return n0 @@ -396,7 +409,8 @@ export function render(_ctx) { _renderEffect(() => { _on(n0, (_ctx.event) === "click" ? "contextmenu" : (_ctx.event), () => _ctx.test, { modifiers: ["right"], - keys: ["right"] + keys: ["right"], + effect: true }) }) return n0 @@ -424,7 +438,8 @@ export function render(_ctx) { _renderEffect(() => { _on(n0, _ctx.e, () => _ctx.test, { modifiers: ["left"], - keys: ["left"] + keys: ["left"], + effect: true }) }) return n0 diff --git a/packages/compiler-vapor/src/generators/event.ts b/packages/compiler-vapor/src/generators/event.ts index b736e6d4f..9c7514bf8 100644 --- a/packages/compiler-vapor/src/generators/event.ts +++ b/packages/compiler-vapor/src/generators/event.ts @@ -16,7 +16,7 @@ export function genSetEvent( context: CodegenContext, ): CodeFragment[] { const { vaporHelper, options } = context - const { element, key, keyOverride, value, modifiers, delegate } = oper + const { element, key, keyOverride, value, modifiers, delegate, effect } = oper const name = genName() const handler = genEventHandler() @@ -77,7 +77,7 @@ export function genSetEvent( function genEventOptions(): CodeFragment[] | undefined { let { options, keys, nonKeys } = modifiers - if (!options.length && !nonKeys.length && !keys.length) return + if (!options.length && !nonKeys.length && !keys.length && !effect) return return genMulti( [ @@ -87,6 +87,7 @@ export function genSetEvent( ], !!nonKeys.length && ['modifiers: ', genArrayExpression(nonKeys)], !!keys.length && ['keys: ', genArrayExpression(keys)], + effect && ['effect: true'], ...options.map((option): CodeFragment[] => [`${option}: true`]), ) } diff --git a/packages/compiler-vapor/src/ir.ts b/packages/compiler-vapor/src/ir.ts index 61f129d68..82e47e6cc 100644 --- a/packages/compiler-vapor/src/ir.ts +++ b/packages/compiler-vapor/src/ir.ts @@ -116,6 +116,8 @@ export interface SetEventIRNode extends BaseIRNode { } keyOverride?: KeyOverride delegate: boolean + /** Whether it's in effect */ + effect: boolean } export interface SetHtmlIRNode extends BaseIRNode { diff --git a/packages/compiler-vapor/src/transforms/vOn.ts b/packages/compiler-vapor/src/transforms/vOn.ts index 63a52b2c5..748e89f9e 100644 --- a/packages/compiler-vapor/src/transforms/vOn.ts +++ b/packages/compiler-vapor/src/transforms/vOn.ts @@ -70,6 +70,7 @@ export const transformVOn: DirectiveTransform = (dir, node, context) => { }, keyOverride, delegate, + effect: !arg.isStatic, } context.registerEffect([arg], [operation]) diff --git a/packages/reactivity/src/baseWatch.ts b/packages/reactivity/src/baseWatch.ts index 84a1b0b1f..b279c6039 100644 --- a/packages/reactivity/src/baseWatch.ts +++ b/packages/reactivity/src/baseWatch.ts @@ -98,13 +98,6 @@ const DEFAULT_HANDLE_ERROR: HandleError = (err: unknown) => { const cleanupMap: WeakMap void)[]> = new WeakMap() let activeEffect: ReactiveEffect | undefined = undefined -/** - * Returns the current active effect if there is one. - */ -export function getCurrentEffect() { - return activeEffect -} - /** * Registers a cleanup callback on the current active effect. This * registered cleanup callback will be invoked right before the diff --git a/packages/reactivity/src/effect.ts b/packages/reactivity/src/effect.ts index 9594a9cdd..ca90544c0 100644 --- a/packages/reactivity/src/effect.ts +++ b/packages/reactivity/src/effect.ts @@ -70,7 +70,7 @@ export class ReactiveEffect { public fn: () => T, public trigger: () => void, public scheduler?: EffectScheduler, - public scope?: EffectScope, + scope?: EffectScope, ) { recordEffectScope(this, scope) } diff --git a/packages/reactivity/src/index.ts b/packages/reactivity/src/index.ts index 821f19d6a..05cd45b4f 100644 --- a/packages/reactivity/src/index.ts +++ b/packages/reactivity/src/index.ts @@ -72,7 +72,6 @@ export { export { TrackOpTypes, TriggerOpTypes, ReactiveFlags } from './constants' export { baseWatch, - getCurrentEffect, onEffectCleanup, traverse, BaseWatchErrorCodes, diff --git a/packages/runtime-vapor/src/dom/event.ts b/packages/runtime-vapor/src/dom/event.ts index 3bce078df..c12e32576 100644 --- a/packages/runtime-vapor/src/dom/event.ts +++ b/packages/runtime-vapor/src/dom/event.ts @@ -1,5 +1,4 @@ import { - getCurrentEffect, getCurrentScope, onEffectCleanup, onScopeDispose, @@ -27,25 +26,19 @@ export function on( el: HTMLElement, event: string, handlerGetter: () => undefined | ((...args: any[]) => any), - options: AddEventListenerOptions & ModifierOptions = {}, + options: AddEventListenerOptions & + ModifierOptions & { effect?: boolean } = {}, ) { const handler: DelegatedHandler = eventHandler(handlerGetter, options) const cleanupMetadata = recordEventMetadata(el, event, handler) - let cleanupEvent: (() => void) | undefined queuePostRenderEffect(() => { cleanupEvent = addEventListener(el, event, handler, options) }) - const scope = getCurrentScope() - const effect = getCurrentEffect() - // If we are in an effect and the effect has the same scope as - // the current scope, we can cleanup when the effect is disposed - // This solves the issue where createFor itself has an effect, - // but this effect is unrelated to its block. - if (effect && effect.scope === scope) { + if (options.effect) { onEffectCleanup(cleanup) - } else if (scope) { + } else if (getCurrentScope()) { onScopeDispose(cleanup) } diff --git a/packages/runtime-vapor/src/index.ts b/packages/runtime-vapor/src/index.ts index 0cf0116b9..3a7384f23 100644 --- a/packages/runtime-vapor/src/index.ts +++ b/packages/runtime-vapor/src/index.ts @@ -29,7 +29,6 @@ export { // effect stop, ReactiveEffect, - getCurrentEffect, onEffectCleanup, // effect scope effectScope,