salesforce · gaurav-rk9 · Feb 18, 2025 · Feb 22, 2025 · Feb 22, 2025 · Feb 22, 2025
diff --git a/packages/@lwc/engine-core/src/framework/api.ts b/packages/@lwc/engine-core/src/framework/api.ts
@@ -716,6 +716,11 @@ function shc(content: unknown): SanitizedHtmlContent {
     return createSanitizedHtmlContent(sanitizedString);
 }
 
+// [fr]ee[z]e
+function frz(obj: object) {
+    return ObjectFreeze(obj);
+}
+
 const ncls = normalizeClass;
 
 const api = ObjectFreeze({
@@ -740,6 +745,7 @@ const api = ObjectFreeze({
     ddc,
     sp,
     ncls,
+    frz,
 });
 
 export default api;

@@ -50,6 +50,7 @@ import { VNodeType, isVStaticPartElement } from './vnodes';
 
 import { patchProps } from './modules/props';
 import { applyEventListeners } from './modules/events';
+import { patchDynamicEventListeners } from './modules/dynamic-events';
 import { hydrateStaticParts, traverseAndSetElements } from './modules/static-parts';
 import { getScopeTokenClass } from './stylesheet';
 import { renderComponent } from './component';
@@ -517,6 +518,7 @@ function handleMismatch(node: Node, vnode: VNode, renderer: RendererAPI): Node |
 
 function patchElementPropsAndAttrsAndRefs(vnode: VBaseElement, renderer: RendererAPI) {
     applyEventListeners(vnode, renderer);
+    patchDynamicEventListeners(null, vnode, renderer, vnode.owner);
     patchProps(null, vnode, renderer);
     // The `refs` object is blown away in every re-render, so we always need to re-apply them
     applyRefs(vnode, vnode.owner);

@@ -0,0 +1,84 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+import { isUndefined, isNull, keys, propertyIsEnumerable } from '@lwc/shared';
+import { EmptyObject } from '../utils';
+import { invokeEventListener } from '../invoker';
+import type { VM } from '../vm';
+import type { VBaseElement } from '../vnodes';
+import type { RendererAPI } from '../renderer';
+
+export function patchDynamicEventListeners(
+    oldVnode: VBaseElement | null,
+    vnode: VBaseElement,
+    renderer: RendererAPI,
+    owner: VM
+) {
+    const {
+        elm,
+        data: { dynamicOn },
+    } = vnode;
+
+    // The argument passed to lwc:on is frozen.
+    // Because of this, `oldVnode.data.dynamicOn` is deeply equal
+    // to its value from the previous render cycle.
+    const oldDynamicOn =
+        isNull(oldVnode) || isUndefined(oldVnode.data.dynamicOn)
+            ? EmptyObject
+            : oldVnode.data.dynamicOn;
+    const newDynamicOn = isUndefined(dynamicOn) ? EmptyObject : dynamicOn;
+
+    if (oldDynamicOn === newDynamicOn) {
+        return;
+    }
+
+    const { addEventListener, removeEventListener } = renderer;
+    const actualEventListeners = getActualEventListeners(owner, elm!);
+
+    const oldDynamicOnNames = keys(oldDynamicOn);
+    const newDynamicOnNames = keys(newDynamicOn);
+
+    for (const name of oldDynamicOnNames) {
+        if (!propertyIsEnumerable.call(newDynamicOn, name)) {
+            const actualListener = actualEventListeners[name];
+            removeEventListener(elm, name, actualListener);
+            delete actualEventListeners[name];
+        }
+    }
+
+    for (const name of newDynamicOnNames) {
+        const oldHandler = propertyIsEnumerable.call(oldDynamicOn, name)
+            ? oldDynamicOn[name]
+            : null;
+        const newHandler = newDynamicOn[name];
+
+        if (oldHandler === newHandler) {
+            continue;
+        }
+        if (oldHandler) {
+            const actualListener = actualEventListeners[name];
+            removeEventListener(elm, name, actualListener);
+        }
+        const actualListener = bindEventListener(owner, newHandler);
+        addEventListener(elm, name, actualListener);
+        actualEventListeners[name] = actualListener;
+    }
+}
+
+function getActualEventListeners(vm: VM, elm: Element): Record<string, EventListener> {
+    let actualEventListeners = vm.actualEventListeners.get(elm);
+    if (isUndefined(actualEventListeners)) {
+        actualEventListeners = {};
+        vm.actualEventListeners.set(elm, actualEventListeners);
+    }
+    return actualEventListeners;
+}
+
+function bindEventListener(vm: VM, fn: EventListener): EventListener {
+    return function (event: Event) {
+        invokeEventListener(vm, fn, vm.component, event);
+    };
+}
@@ -53,6 +53,7 @@ import { patchProps } from './modules/props';
 import { patchClassAttribute } from './modules/computed-class-attr';
 import { patchStyleAttribute } from './modules/computed-style-attr';
 import { applyEventListeners } from './modules/events';
+import { patchDynamicEventListeners } from './modules/dynamic-events';
 import { applyStaticClassAttribute } from './modules/static-class-attr';
 import { applyStaticStyleAttribute } from './modules/static-style-attr';
 import { applyRefs } from './modules/refs';
@@ -586,6 +587,7 @@ function patchElementPropsAndAttrsAndRefs(
     }
 
     const { owner } = vnode;
+    patchDynamicEventListeners(oldVnode, vnode, renderer, owner);
     // Attrs need to be applied to element before props IE11 will wipe out value on radio inputs if
     // value is set before type=radio.
     patchClassAttribute(oldVnode, vnode, renderer);

@@ -135,6 +135,8 @@ export interface VM<N = HostNode, E = HostElement> {
     readonly owner: VM<N, E> | null;
     /** References to elements rendered using lwc:ref (template refs) */
     refVNodes: RefVNodes | null;
+    /** Actual listeners added to elements corresponding to listeners provided by lwc:on */
+    actualEventListeners: WeakMap<Element, Record<string, EventListener>>;
     /** Whether or not the VM was hydrated */
     readonly hydrated: boolean;
     /** Rendering operations associated with the VM */
@@ -344,6 +346,7 @@ export function createVM<HostNode, HostElement>(
         mode,
         owner,
         refVNodes: null,
+        actualEventListeners: new WeakMap(),
         children: EmptyArray,
         aChildren: EmptyArray,
         velements: EmptyArray,

@@ -153,6 +153,7 @@ export interface VNodeData {
     readonly styleDecls?: ReadonlyArray<[string, string, boolean]>;
     readonly context?: Readonly<Record<string, Readonly<Record<string, any>>>>;
     readonly on?: Readonly<Record<string, (event: Event) => any>>;
+    readonly dynamicOn?: Readonly<Record<string, (event: Event) => any>>;
     readonly svg?: boolean;
     readonly renderer?: RendererAPI;
 }

@@ -5,7 +5,7 @@
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 /**
- * Next error code: 1202
+ * Next error code: 1205
  */
 
 export * from './compiler';

@@ -947,4 +947,28 @@ export const ParserDiagnostics = {
         level: DiagnosticLevel.Warning,
         url: '',
     },
+
+    LWC_ON_INVALID_ELEMENT: {
+        code: 1202,
+        message:
+            'Invalid lwc:on usage on element "{0}". The directive can\'t be used on a template element.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    INVALID_LWC_ON_LITERAL_PROP: {
+        code: 1203,
+        message:
+            'Invalid lwc:on usage on element "{0}". The directive binding must be an expression.',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
+
+    INVALID_LWC_ON_WITH_DECLARATIVE_LISTENERS: {
+        code: 1204,
+        message:
+            'Invalid lwc:on usage on element "{0}". It is not permitted to use declarative event listeners alongside lwc:on',
+        level: DiagnosticLevel.Error,
+        url: '',
+    },
 };