Skip to content

Commit

Permalink
fix: change throw new Error to logError
Browse files Browse the repository at this point in the history
  • Loading branch information
@gaurav-rk9
gaurav-rk9 committed Mar 5, 2025
1 parent 528b1ca commit 1a5236b
Show file tree
Hide file tree
Showing 2 changed files with 74 additions and 51 deletions.
19 changes: 11 additions & 8 deletions packages/@lwc/engine-core/src/framework/modules/dynamic-events.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
import { isUndefined } from '@lwc/shared';
import { EmptyObject } from '../utils';
import { invokeEventListener } from '../invoker';
import { logError } from '../../shared/logger';
import type { VM } from '../vm';
import type { VBaseElement } from '../vnodes';
import type { RendererAPI } from '../renderer';
Expand Down Expand Up @@ -35,10 +36,11 @@ export function patchDynamicEventListeners(
// Properties that are present in 'oldDynamicOn' but not in 'newDynamicOn'
for (const eventType in oldDynamicOn) {
if (!(eventType in newDynamicOn)) {
// Throw if same object is passed
if (isObjectSame) {
throw new Error(
`Detected mutation of property '${eventType}' in the object passed to lwc:on for <${sel}>. Reusing the same object with modified properties is prohibited. Please pass a new object instead.`
// log error if same object is passed
if (isObjectSame && process.env.NODE_ENV !== 'production') {
logError(
`Detected mutation of property '${eventType}' in the object passed to lwc:on for <${sel}>. Reusing the same object with modified properties is prohibited. Please pass a new object instead.`,
owner
);
}

Expand All @@ -56,10 +58,11 @@ export function patchDynamicEventListeners(

// Properties that are present in 'newDynamicOn' but whose value are different from that in `oldDynamicOn`
if (oldCallback !== newCallback) {
// Throw if same object is passed
if (isObjectSame) {
throw new Error(
`Detected mutation of property '${eventType}' in the object passed to lwc:on for <${sel}>. Reusing the same object with modified properties is prohibited. Please pass a new object instead.`
// log error if same object is passed
if (isObjectSame && process.env.NODE_ENV !== 'production') {
logError(
`Detected mutation of property '${eventType}' in the object passed to lwc:on for <${sel}>. Reusing the same object with modified properties is prohibited. Please pass a new object instead.`,
owner
);
}

Expand Down
106 changes: 63 additions & 43 deletions packages/@lwc/integration-karma/test/lwc-on/index.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import Rerender from 'x/rerender';
import RerenderLoop from 'x/rerenderLoop';
import PublicProp from 'x/publicProp';

import { catchUnhandledRejectionsAndErrors } from 'test-utils';
// import { catchUnhandledRejectionsAndErrors, spyConsole } from 'test-utils';

describe('lwc:on', () => {
it('adds multiple event listeners', () => {
Expand Down Expand Up @@ -189,44 +189,54 @@ describe('lwc:on', () => {
});

describe('with same object modified', () => {
let caughtError;

catchUnhandledRejectionsAndErrors((error) => {
caughtError = error;
let consoleSpy;
beforeEach(() => {
consoleSpy = TestUtils.spyConsole();
});

afterEach(() => {
caughtError = undefined;
consoleSpy.reset();
});

it('throws when a new property is added to object passed to lwc:on', async () => {
element.addMouseoverHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'mouseover' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'mouseover' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});

it('throws when a property is modified in object passed to lwc:on', async () => {
element.modifyClickHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});

it('throws when a property is deleted from object passed to lwc:on', async () => {
element.deleteClickHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});
});
});
Expand Down Expand Up @@ -270,44 +280,54 @@ describe('lwc:on', () => {
});

describe('with same object modified', () => {
let caughtError;

catchUnhandledRejectionsAndErrors((error) => {
caughtError = error;
let consoleSpy;
beforeEach(() => {
consoleSpy = TestUtils.spyConsole();
});

afterEach(() => {
caughtError = undefined;
consoleSpy.reset();
});

it('throws when a new property is added to object passed to lwc:on', async () => {
element.addMouseoverHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'mouseover' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'mouseover' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});

it('throws when a property is modified in object passed to lwc:on', async () => {
element.modifyClickHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});

it('throws when a property is deleted from object passed to lwc:on', async () => {
element.deleteClickHandler();
await element.triggerReRender();
await new Promise((resolve) => setTimeout(resolve));
await new Promise((resolve) => setTimeout(resolve));
expect(caughtError.message).toBe(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);

if (process.env.NODE_ENV !== 'production') {
expect(consoleSpy.calls.error.length).toEqual(1);
expect(consoleSpy.calls.error[0][0].message).toContain(
"Detected mutation of property 'click' in the object passed to lwc:on for <button>. Reusing the same object with modified properties is prohibited. Please pass a new object instead."
);
} else {
expect(consoleSpy.calls.error.length).toEqual(0);
}
});
});
});
Expand Down

0 comments on commit 1a5236b

Please sign in to comment.