chore: re-introduce new constructor validation with gate (#5320)

* chore: re-introduce new constructor validation with gate

* fix: constructor type

* fix: reversed flag

* fix: flag logic

* fix: flag logic, test

* fix: gate naming

* fix: added extra test to please will

Author: jhefferman-sfdc

packages/@lwc/engine-core/src/framework/invoker.ts

@@ -11,7 +11,7 @@ import { addErrorComponentStack } from '../shared/error';
 import { evaluateTemplate, setVMBeingRendered, getVMBeingRendered } from './template';
 import { runWithBoundaryProtection } from './vm';
 import { logOperationStart, logOperationEnd, OperationId } from './profiler';
-import type { LightningElement } from './base-lightning-element';
+import { LightningElement } from './base-lightning-element';
 import type { Template } from './template';
 import type { VM } from './vm';
 import type { LightningElementConstructor } from './base-lightning-element';
@@ -54,16 +54,18 @@ export function invokeComponentConstructor(vm: VM, Ctor: LightningElementConstru
         // job
         const result = new Ctor();
 
-        // Check indirectly if the constructor result is an instance of LightningElement. Using
-        // the "instanceof" operator would not work here since Locker Service provides its own
-        // implementation of LightningElement, so we indirectly check if the base constructor is
-        // invoked by accessing the component on the vm.
+        // Check indirectly if the constructor result is an instance of LightningElement.
+        // When Locker is enabled, the "instanceof" operator would not work since Locker Service
+        // provides its own implementation of LightningElement, so we indirectly check
+        // if the base constructor is invoked by accessing the component on the vm.
+        // When the ENABLE_LOCKER_VALIDATION gate is true and LEGACY_LOCKER_ENABLED is false,
+        // then the instanceof LightningElement can be used.
+        const useLegacyConstructorCheck =
+            lwcRuntimeFlags.ENABLE_LEGACY_VALIDATION || lwcRuntimeFlags.LEGACY_LOCKER_ENABLED;
 
-        // TODO [W-17769475]: Restore this fix when we can reliably detect Locker enabled
-        // const isInvalidConstructor = lwcRuntimeFlags.LEGACY_LOCKER_ENABLED
-        //     ? vmBeingConstructed.component !== result
-        //     : !(result instanceof LightningElement);
-        const isInvalidConstructor = vmBeingConstructed.component !== result;
+        const isInvalidConstructor = useLegacyConstructorCheck
+            ? vmBeingConstructed.component !== result
+            : !(result instanceof LightningElement);
 
         if (isInvalidConstructor) {
             throw new TypeError(

packages/@lwc/features/src/index.ts

@@ -22,6 +22,7 @@ const features: FeatureFlagMap = {
     DISABLE_SYNTHETIC_SHADOW: null,
     DISABLE_SCOPE_TOKEN_VALIDATION: null,
     LEGACY_LOCKER_ENABLED: null,
+    ENABLE_LEGACY_VALIDATION: null,
 };
 
 if (!(globalThis as any).lwcRuntimeFlags) {

packages/@lwc/features/src/types.ts

@@ -86,6 +86,13 @@ export interface FeatureFlagMap {
      * properly.
      */
     LEGACY_LOCKER_ENABLED: FeatureFlagValue;
+
+    /**
+     * A manual override for `LEGACY_LOCKER_ENABLED`; should not be used if that flag is correctly set.
+     * If true, behave as if legacy Locker is enabled.
+     * If false or unset, then the value of the `LEGACY_LOCKER_ENABLED` flag is used.
+     */
+    ENABLE_LEGACY_VALIDATION: FeatureFlagValue;
 }
 
 export type FeatureFlagName = keyof FeatureFlagMap;

packages/@lwc/integration-karma/test/component/LightningElement/index.spec.js

@@ -1,4 +1,4 @@
-import { LightningElement, createElement } from 'lwc';
+import { LightningElement, createElement, setFeatureFlagForTest } from 'lwc';
 
 import NotInvokingSuper from 'x/notInvokingSuper';
 import NotReturningThis from 'x/notReturningThis';
@@ -81,12 +81,37 @@ it("[W-6981076] shouldn't throw when a component with an invalid child in unmoun
     expect(() => document.body.removeChild(elm)).not.toThrow();
 });
 
-// TODO [W-17769475]: Restore this test when we can reliably detect Locker enabled
-xit('should fail when the constructor returns something other than an instance of itself', () => {
+it('should fail when the constructor returns something other than LightningElement when ENABLE_LEGACY_VALIDATION is falsy and LEGACY_LOCKER_ENABLED is falsy', () => {
     expect(() => {
         createElement('x-returning-bad', { is: ReturningBad });
     }).toThrowError(
         TypeError,
         'Invalid component constructor, the class should extend LightningElement.'
     );
 });
+
+it('should succeed when the constructor returns something other than LightningElement when ENABLE_LEGACY_VALIDATION is true and LEGACY_LOCKER_ENABLED is falsy', () => {
+    setFeatureFlagForTest('ENABLE_LEGACY_VALIDATION', true);
+    expect(() => {
+        createElement('x-returning-bad', { is: ReturningBad });
+    }).not.toThrow();
+    setFeatureFlagForTest('ENABLE_LEGACY_VALIDATION', false);
+});
+
+it('should succeed when the constructor returns something other than LightningElement when ENABLE_LEGACY_VALIDATION is falsy and LEGACY_LOCKER_ENABLED is true', () => {
+    setFeatureFlagForTest('LEGACY_LOCKER_ENABLED', true);
+    expect(() => {
+        createElement('x-returning-bad', { is: ReturningBad });
+    }).not.toThrow();
+    setFeatureFlagForTest('LEGACY_LOCKER_ENABLED', false);
+});
+
+it('should succeed when the constructor returns something other than LightningElement when ENABLE_LEGACY_VALIDATION is falsy and LEGACY_LOCKER_ENABLED is true', () => {
+    setFeatureFlagForTest('ENABLE_LEGACY_VALIDATION', true);
+    setFeatureFlagForTest('LEGACY_LOCKER_ENABLED', true);
+    expect(() => {
+        createElement('x-returning-bad', { is: ReturningBad });
+    }).not.toThrow();
+    setFeatureFlagForTest('ENABLE_LEGACY_VALIDATION', false);
+    setFeatureFlagForTest('LEGACY_LOCKER_ENABLED', false);
+});