@lwc/engine-core 2.45.0 → 2.45.2

package/dist/engine-core.cjs.js

@@ -530,8 +530,9 @@ function patchElementWithRestrictions(elm, options) {
             get() {
                 return originalOuterHTMLDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set outerHTML on Element.`);
+            set(value) {
+                logError(`Invalid attempt to set outerHTML on Element.`);
+                return originalOuterHTMLDescriptor.set.call(this, value);
             },
         }),
     };
@@ -616,16 +617,18 @@ function getShadowRootRestrictionsDescriptors(sr) {
             get() {
                 return originalInnerHTMLDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set innerHTML on ShadowRoot.`);
+            set(value) {
+                logError(`Invalid attempt to set innerHTML on ShadowRoot.`);
+                return originalInnerHTMLDescriptor.set.call(this, value);
             },
         }),
         textContent: generateAccessorDescriptor({
             get() {
                 return originalTextContentDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set textContent on ShadowRoot.`);
+            set(value) {
+                logError(`Invalid attempt to set textContent on ShadowRoot.`);
+                return originalTextContentDescriptor.set.call(this, value);
             },
         }),
         addEventListener: generateDataDescriptor({
@@ -654,24 +657,27 @@ function getCustomElementRestrictionsDescriptors(elm) {
             get() {
                 return originalInnerHTMLDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set innerHTML on HTMLElement.`);
+            set(value) {
+                logError(`Invalid attempt to set innerHTML on HTMLElement.`);
+                return originalInnerHTMLDescriptor.set.call(this, value);
             },
         }),
         outerHTML: generateAccessorDescriptor({
             get() {
                 return originalOuterHTMLDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set outerHTML on HTMLElement.`);
+            set(value) {
+                logError(`Invalid attempt to set outerHTML on HTMLElement.`);
+                return originalOuterHTMLDescriptor.set.call(this, value);
             },
         }),
         textContent: generateAccessorDescriptor({
             get() {
                 return originalTextContentDescriptor.get.call(this);
             },
-            set(_value) {
-                throw new TypeError(`Invalid attempt to set textContent on HTMLElement.`);
+            set(value) {
+                logError(`Invalid attempt to set textContent on HTMLElement.`);
+                return originalTextContentDescriptor.set.call(this, value);
             },
         }),
         addEventListener: generateDataDescriptor({
@@ -687,20 +693,6 @@ function getCustomElementRestrictionsDescriptors(elm) {
         }),
     };
 }
-function getComponentRestrictionsDescriptors() {
-    assertNotProd(); // this method should never leak to prod
-    return {
-        tagName: generateAccessorDescriptor({
-            get() {
-                throw new Error(`Usage of property \`tagName\` is disallowed because the component itself does` +
-                    ` not know which tagName will be used to create the element, therefore writing` +
-                    ` code that check for that value is error prone.`);
-            },
-            configurable: true,
-            enumerable: false, // no enumerable properties on component
-        }),
-    };
-}
 function getLightningElementPrototypeRestrictionsDescriptors(proto) {
     assertNotProd(); // this method should never leak to prod
     const originalDispatchEvent = proto.dispatchEvent;
@@ -733,9 +725,6 @@ function patchCustomElementWithRestrictions(elm) {
     const elmProto = shared.getPrototypeOf(elm);
     shared.setPrototypeOf(elm, shared.create(elmProto, restrictionsDescriptors));
 }
-function patchComponentWithRestrictions(cmp) {
-    shared.defineProperties(cmp, getComponentRestrictionsDescriptors());
-}
 function patchLightningElementPrototypeWithRestrictions(proto) {
     shared.defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
@@ -1346,16 +1335,10 @@ function markLockerLiveObject(obj) {
 function createBridgeToElementDescriptor(propName, descriptor) {
     const { get, set, enumerable, configurable } = descriptor;
     if (!shared.isFunction(get)) {
-        if (process.env.NODE_ENV !== 'production') {
-            shared.assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
-        }
-        throw new TypeError();
+        throw new TypeError(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard getter.`);
     }
     if (!shared.isFunction(set)) {
-        if (process.env.NODE_ENV !== 'production') {
-            shared.assert.fail(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
-        }
-        throw new TypeError();
+        throw new TypeError(`Detected invalid public property descriptor for HTMLElement.prototype.${propName} definition. Missing the standard setter.`);
     }
     return {
         enumerable,
@@ -1375,10 +1358,18 @@ function createBridgeToElementDescriptor(propName, descriptor) {
             const vm = getAssociatedVM(this);
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
-                shared.assert.invariant(!isUpdatingTemplate, `When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
-                shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
-                shared.assert.invariant(!shared.isObject(newValue) || shared.isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+                if (isInvokingRender) {
+                    logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${propName}`);
+                }
+                if (isUpdatingTemplate) {
+                    logError(`When updating the template of ${vmBeingRendered}, one of the accessors used by the template has side effects on the state of ${vm}.${propName}`);
+                }
+                if (isBeingConstructed(vm)) {
+                    logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+                }
+                if (shared.isObject(newValue) && !shared.isNull(newValue)) {
+                    logError(`Invalid value "${newValue}" for "${propName}" of ${vm}. Value cannot be an object, must be a primitive value.`);
+                }
             }
             updateComponentValue(vm, propName, newValue);
             return set.call(vm.elm, newValue);
@@ -1431,7 +1422,6 @@ const LightningElement = function () {
     // Adding extra guard rails in DEV mode.
     if (process.env.NODE_ENV !== 'production') {
         patchCustomElementWithRestrictions(elm);
-        patchComponentWithRestrictions(component);
     }
     return this;
 };
@@ -1467,9 +1457,15 @@ LightningElement.prototype = {
         const { elm, renderer: { addEventListener }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
             const vmBeingRendered = getVMBeingRendered();
-            shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-            shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
-            shared.assert.invariant(shared.isFunction(listener), `Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+            if (isInvokingRender) {
+                logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+            }
+            if (isUpdatingTemplate) {
+                logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm} by adding an event listener for "${type}".`);
+            }
+            if (!shared.isFunction(listener)) {
+                logError(`Invalid second argument for this.addEventListener() in ${vm} for event "${type}". Expected an EventListener but received ${listener}.`);
+            }
         }
         const wrappedListener = getWrappedComponentsListener(vm, listener);
         addEventListener(elm, type, wrappedListener, options);
@@ -1519,7 +1515,9 @@ LightningElement.prototype = {
         const vm = getAssociatedVM(this);
         const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
-            shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+            if (isBeingConstructed(vm)) {
+                logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+            }
         }
         unlockAttribute(elm, name);
         setAttribute(elm, name, value);
@@ -1529,7 +1527,9 @@ LightningElement.prototype = {
         const vm = getAssociatedVM(this);
         const { elm, renderer: { setAttribute }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
-            shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+            if (isBeingConstructed(vm)) {
+                logError(`Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
+            }
         }
         unlockAttribute(elm, name);
         setAttribute(elm, name, value, namespace);
@@ -1552,9 +1552,9 @@ LightningElement.prototype = {
         const vm = getAssociatedVM(this);
         const { elm, renderer: { getClassList }, } = vm;
         if (process.env.NODE_ENV !== 'production') {
-            // TODO [#1290]: this still fails in dev but works in production, eventually, we should
-            // just throw in all modes
-            shared.assert.isFalse(isBeingConstructed(vm), `Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
+            if (isBeingConstructed(vm)) {
+                logError(`Failed to construct ${vm}: The result must not have attributes. Adding or tampering with classname in constructor is not allowed in a web component, use connectedCallback() instead.`);
+            }
         }
         return getClassList(elm);
     },
@@ -2060,8 +2060,12 @@ function createPublicPropertyDescriptor(key) {
             const vm = getAssociatedVM(this);
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+                if (isInvokingRender) {
+                    logError(`render() method has side effects on the state of property "${shared.toString(key)}"`, shared.isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                }
+                if (isUpdatingTemplate) {
+                    logError(`Updating the template has side effects on the state of property "${shared.toString(key)}"`, shared.isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                }
             }
             vm.cmpProps[key] = newValue;
             componentValueMutated(vm, key);
@@ -2085,14 +2089,18 @@ function createPublicAccessorDescriptor(key, descriptor) {
             const vm = getAssociatedVM(this);
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+                if (isInvokingRender) {
+                    logError(`render() method has side effects on the state of property "${shared.toString(key)}"`, shared.isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                }
+                if (isUpdatingTemplate) {
+                    logError(`Updating the template has side effects on the state of property "${shared.toString(key)}"`, shared.isNull(vmBeingRendered) ? vm : vmBeingRendered);
+                }
             }
             if (set) {
                 set.call(this, newValue);
             }
             else if (process.env.NODE_ENV !== 'production') {
-                shared.assert.fail(`Invalid attempt to set a new value for property ${shared.toString(key)} of ${vm} that does not has a setter decorated with @api.`);
+                logError(`Invalid attempt to set a new value for property "${shared.toString(key)}" that does not has a setter decorated with @api.`, vm);
             }
         },
         enumerable,
@@ -2126,8 +2134,12 @@ function internalTrackDecorator(key) {
             const vm = getAssociatedVM(this);
             if (process.env.NODE_ENV !== 'production') {
                 const vmBeingRendered = getVMBeingRendered();
-                shared.assert.invariant(!isInvokingRender, `${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
-                shared.assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+                if (isInvokingRender) {
+                    logError(`${vmBeingRendered}.render() method has side effects on the state of ${vm}.${shared.toString(key)}`);
+                }
+                if (isUpdatingTemplate) {
+                    logError(`Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${shared.toString(key)}`);
+                }
             }
             const reactiveOrAnyValue = getReactiveProxy(newValue);
             updateComponentValue(vm, key, reactiveOrAnyValue);
@@ -2904,13 +2916,20 @@ function createComponentDef(Ctor) {
         const ctorName = Ctor.name;
         // Removing the following assert until https://bugs.webkit.org/show_bug.cgi?id=190140 is fixed.
         // assert.isTrue(ctorName && isString(ctorName), `${toString(Ctor)} should have a "name" property with string value, but found ${ctorName}.`);
-        shared.assert.isTrue(Ctor.constructor, `Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
-        if (!shared.isUndefined(ctorShadowSupportMode)) {
-            shared.assert.invariant(ctorShadowSupportMode === "any" /* ShadowSupportMode.Any */ ||
-                ctorShadowSupportMode === "reset" /* ShadowSupportMode.Default */, `Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
+        if (!Ctor.constructor) {
+            // This error seems impossible to hit, due to an earlier check in `isComponentConstructor()`.
+            // But we keep it here just in case.
+            logError(`Missing ${ctorName}.constructor, ${ctorName} should have a "constructor" property.`);
         }
-        if (!shared.isUndefined(ctorRenderMode)) {
-            shared.assert.invariant(ctorRenderMode === 'light' || ctorRenderMode === 'shadow', `Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
+        if (!shared.isUndefined(ctorShadowSupportMode) &&
+            ctorShadowSupportMode !== "any" /* ShadowSupportMode.Any */ &&
+            ctorShadowSupportMode !== "reset" /* ShadowSupportMode.Default */) {
+            logError(`Invalid value for static property shadowSupportMode: '${ctorShadowSupportMode}'`);
+        }
+        if (!shared.isUndefined(ctorRenderMode) &&
+            ctorRenderMode !== 'light' &&
+            ctorRenderMode !== 'shadow') {
+            logError(`Invalid value for static property renderMode: '${ctorRenderMode}'. renderMode must be either 'light' or 'shadow'.`);
         }
     }
     const decoratorsMeta = getDecoratorsMeta(Ctor);
@@ -4692,7 +4711,7 @@ function k(compilerKey, obj) {
             return compilerKey + ':' + obj;
         case 'object':
             if (process.env.NODE_ENV !== 'production') {
-                shared.assert.fail(`Invalid key value "${obj}" in ${getVMBeingRendered()}. Key must be a string or number.`);
+                logError(`Invalid key value "${obj}" in ${getVMBeingRendered()}. Key must be a string or number.`);
             }
     }
 }
@@ -4982,13 +5001,19 @@ function validateSlots(vm) {
     }
 }
 function validateLightDomTemplate(template, vm) {
-    if (template === defaultEmptyTemplate)
+    assertNotProd(); // should never leak to prod mode
+    if (template === defaultEmptyTemplate) {
         return;
+    }
     if (vm.renderMode === 0 /* RenderMode.Light */) {
-        shared.assert.isTrue(template.renderMode === 'light', `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
+        if (template.renderMode !== 'light') {
+            logError(`Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${getComponentTag(vm)}.`);
+        }
     }
     else {
-        shared.assert.isTrue(shared.isUndefined(template.renderMode), `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
+        if (!shared.isUndefined(template.renderMode)) {
+            logError(`Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${getComponentTag(vm)} or set it to 'lwc:render-mode="shadow"`);
+        }
     }
 }
 function buildParseFragmentFn(createFragmentFn) {
@@ -5121,7 +5146,9 @@ function evaluateTemplate(vm, html) {
         logOperationEnd(1 /* OperationId.Render */, vm);
     });
     if (process.env.NODE_ENV !== 'production') {
-        shared.assert.invariant(shared.isArray(vnodes), `Compiler should produce html functions that always return an array.`);
+        if (!shared.isArray(vnodes)) {
+            logError(`Compiler should produce html functions that always return an array.`);
+        }
     }
     return vnodes;
 }
@@ -6213,6 +6240,27 @@ function textNodeContentsAreEqual(node, vnode, renderer) {
     }
     return false;
 }
+// The validationOptOut static property can be an array of attribute names.
+// Any attribute names specified in that array will not be validated, and the
+// LWC runtime will assume that VDOM attrs and DOM attrs are in sync.
+function getValidationPredicate(optOutStaticProp) {
+    if (shared.isUndefined(optOutStaticProp)) {
+        return (_attrName) => true;
+    }
+    // If validationOptOut is true, no attributes will be checked for correctness
+    // and the runtime will assume VDOM attrs and DOM attrs are in sync.
+    if (shared.isTrue(optOutStaticProp)) {
+        return (_attrName) => false;
+    }
+    // If validationOptOut is an array of strings, attributes specified in the
+    // array will be "opted out". Attributes not specified in the array will still
+    // be validated.
+    if (shared.isArray(optOutStaticProp) && shared.arrayEvery(optOutStaticProp, shared.isString)) {
+        return (attrName) => !shared.ArrayIncludes.call(optOutStaticProp, attrName);
+    }
+    logWarn('Validation opt out must be `true` or an array of attributes that should not be validated.');
+    return (_attrName) => true;
+}
 function hydrateText(node, vnode, renderer) {
     var _a;
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -6291,8 +6339,19 @@ function hydrateElement(elm, vnode, renderer) {
     return elm;
 }
 function hydrateCustomElement(elm, vnode, renderer) {
+    const { validationOptOut } = vnode.ctor;
+    const shouldValidateAttr = getValidationPredicate(validationOptOut);
+    // The validationOptOut static property can be an array of attribute names.
+    // Any attribute names specified in that array will not be validated, and the
+    // LWC runtime will assume that VDOM attrs and DOM attrs are in sync.
+    //
+    // If validationOptOut is true, no attributes will be checked for correctness
+    // and the runtime will assume VDOM attrs and DOM attrs are in sync.
+    //
+    // Therefore, if validationOptOut is falsey or an array of strings, we need to
+    // examine some or all of the custom element's attributes.
     if (!hasCorrectNodeType(vnode, elm, 1 /* EnvNodeTypes.ELEMENT */, renderer) ||
-        !isMatchingElement(vnode, elm, renderer)) {
+        !isMatchingElement(vnode, elm, renderer, shouldValidateAttr)) {
         return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
@@ -6386,7 +6445,7 @@ function hasCorrectNodeType(vnode, node, nodeType, renderer) {
     }
     return true;
 }
-function isMatchingElement(vnode, elm, renderer) {
+function isMatchingElement(vnode, elm, renderer, shouldValidateAttr = () => true) {
     const { getProperty } = renderer;
     if (vnode.sel.toLowerCase() !== getProperty(elm, 'tagName').toLowerCase()) {
         if (process.env.NODE_ENV !== 'production') {
@@ -6394,10 +6453,14 @@ function isMatchingElement(vnode, elm, renderer) {
         }
         return false;
     }
-    const hasIncompatibleAttrs = validateAttrs(vnode, elm, renderer);
-    const hasIncompatibleClass = validateClassAttr(vnode, elm, renderer);
-    const hasIncompatibleStyle = validateStyleAttr(vnode, elm, renderer);
-    return hasIncompatibleAttrs && hasIncompatibleClass && hasIncompatibleStyle;
+    const hasCompatibleAttrs = validateAttrs(vnode, elm, renderer, shouldValidateAttr);
+    const hasCompatibleClass = shouldValidateAttr('class')
+        ? validateClassAttr(vnode, elm, renderer)
+        : true;
+    const hasCompatibleStyle = shouldValidateAttr('style')
+        ? validateStyleAttr(vnode, elm, renderer)
+        : true;
+    return hasCompatibleAttrs && hasCompatibleClass && hasCompatibleStyle;
 }
 function attributeValuesAreEqual(vnodeValue, value) {
     const vnodeValueAsString = String(vnodeValue);
@@ -6412,12 +6475,15 @@ function attributeValuesAreEqual(vnodeValue, value) {
     // In all other cases, the two values are not considered equal
     return false;
 }
-function validateAttrs(vnode, elm, renderer) {
+function validateAttrs(vnode, elm, renderer, shouldValidateAttr) {
     const { data: { attrs = {} }, } = vnode;
     let nodesAreCompatible = true;
     // Validate attributes, though we could always recovery from those by running the update mods.
     // Note: intentionally ONLY matching vnodes.attrs to elm.attrs, in case SSR is adding extra attributes.
     for (const [attrName, attrValue] of Object.entries(attrs)) {
+        if (!shouldValidateAttr(attrName)) {
+            continue;
+        }
         const { owner } = vnode;
         const { getAttribute } = renderer;
         const elmAttrValue = getAttribute(elm, attrName);
@@ -6880,5 +6946,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.45.0 */
+/* version: 2.45.2 */
 //# sourceMappingURL=engine-core.cjs.js.map