@lwc/engine-core 2.42.0 → 2.44.0

package/dist/engine-core.cjs.js

@@ -446,101 +446,6 @@ const defaultDefHTMLPropertyNames = [
     'tabIndex',
     'title',
 ];
-function offsetPropertyErrorMessage(name) {
-    return `Using the \`${name}\` property is an anti-pattern because it rounds the value to an integer. Instead, use the \`getBoundingClientRect\` method to obtain fractional values for the size of an element and its position relative to the viewport.`;
-}
-// Global HTML Attributes & Properties
-// https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
-// https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
-//
-// If you update this list, check for test files that recapitulate the same list. Searching the codebase
-// for e.g. "dropzone" should suffice.
-const globalHTMLProperties = {
-    accessKey: {
-        attribute: 'accesskey',
-    },
-    accessKeyLabel: {
-        readOnly: true,
-    },
-    className: {
-        attribute: 'class',
-        error: 'Using the `className` property is an anti-pattern because of slow runtime behavior and potential conflicts with classes provided by the owner element. Use the `classList` API instead.',
-    },
-    contentEditable: {
-        attribute: 'contenteditable',
-    },
-    dataset: {
-        readOnly: true,
-        error: "Using the `dataset` property is an anti-pattern because it can't be statically analyzed. Expose each property individually using the `@api` decorator instead.",
-    },
-    dir: {
-        attribute: 'dir',
-    },
-    draggable: {
-        attribute: 'draggable',
-    },
-    dropzone: {
-        attribute: 'dropzone',
-        readOnly: true,
-    },
-    hidden: {
-        attribute: 'hidden',
-    },
-    id: {
-        attribute: 'id',
-    },
-    inputMode: {
-        attribute: 'inputmode',
-    },
-    lang: {
-        attribute: 'lang',
-    },
-    slot: {
-        attribute: 'slot',
-        error: 'Using the `slot` property is an anti-pattern.',
-    },
-    spellcheck: {
-        attribute: 'spellcheck',
-    },
-    style: {
-        attribute: 'style',
-    },
-    tabIndex: {
-        attribute: 'tabindex',
-    },
-    title: {
-        attribute: 'title',
-    },
-    translate: {
-        attribute: 'translate',
-    },
-    // additional "global attributes" that are not present in the link above.
-    isContentEditable: {
-        readOnly: true,
-    },
-    offsetHeight: {
-        readOnly: true,
-        error: offsetPropertyErrorMessage('offsetHeight'),
-    },
-    offsetLeft: {
-        readOnly: true,
-        error: offsetPropertyErrorMessage('offsetLeft'),
-    },
-    offsetParent: {
-        readOnly: true,
-    },
-    offsetTop: {
-        readOnly: true,
-        error: offsetPropertyErrorMessage('offsetTop'),
-    },
-    offsetWidth: {
-        readOnly: true,
-        error: offsetPropertyErrorMessage('offsetWidth'),
-    },
-    role: {
-        attribute: 'role',
-    },
-};
 let controlledElement = null;
 let controlledAttributeName;
 function isAttributeLocked(elm, attrName) {
@@ -725,8 +630,7 @@ function getShadowRootRestrictionsDescriptors(sr) {
         }),
         addEventListener: generateDataDescriptor({
             value(type, listener, options) {
-                // TODO [#420]: this is triggered when the component author attempts to add a listener
-                // programmatically into its Component's shadow root
+                // TODO [#1824]: Potentially relax this restriction
                 if (!shared.isUndefined(options)) {
                     logError('The `addEventListener` method on ShadowRoot does not support any options.', getAssociatedVMIfPresent(this));
                 }
@@ -772,8 +676,7 @@ function getCustomElementRestrictionsDescriptors(elm) {
         }),
         addEventListener: generateDataDescriptor({
             value(type, listener, options) {
-                // TODO [#420]: this is triggered when the component author attempts to add a listener
-                // programmatically into a lighting element node
+                // TODO [#1824]: Potentially relax this restriction
                 if (!shared.isUndefined(options)) {
                     logError('The `addEventListener` method in `LightningElement` does not support any options.', getAssociatedVMIfPresent(this));
                 }
@@ -801,7 +704,7 @@ function getComponentRestrictionsDescriptors() {
 function getLightningElementPrototypeRestrictionsDescriptors(proto) {
     assertNotProd(); // this method should never leak to prod
     const originalDispatchEvent = proto.dispatchEvent;
-    const descriptors = {
+    return {
         dispatchEvent: generateDataDescriptor({
             value(event) {
                 const vm = getAssociatedVM(this);
@@ -819,32 +722,6 @@ function getLightningElementPrototypeRestrictionsDescriptors(proto) {
             },
         }),
     };
-    shared.forEach.call(shared.getOwnPropertyNames(globalHTMLProperties), (propName) => {
-        if (propName in proto) {
-            return; // no need to redefine something that we are already exposing
-        }
-        descriptors[propName] = generateAccessorDescriptor({
-            get() {
-                const { error, attribute } = globalHTMLProperties[propName];
-                const msg = [];
-                msg.push(`Accessing the global HTML property "${propName}" is disabled.`);
-                if (error) {
-                    msg.push(error);
-                }
-                else if (attribute) {
-                    msg.push(`Instead access it via \`this.getAttribute("${attribute}")\`.`);
-                }
-                logError(msg.join('\n'), getAssociatedVM(this));
-            },
-            set() {
-                const { readOnly } = globalHTMLProperties[propName];
-                if (readOnly) {
-                    logError(`The global HTML property \`${propName}\` is read-only.`, getAssociatedVM(this));
-                }
-            },
-        });
-    });
-    return descriptors;
 }
 // This routine will prevent access to certain properties on a shadow root instance to guarantee
 // that all components will work fine in IE11 and other browsers without shadow dom support.
@@ -2195,12 +2072,7 @@ function createPublicPropertyDescriptor(key) {
 }
 function createPublicAccessorDescriptor(key, descriptor) {
     const { get, set, enumerable, configurable } = descriptor;
-    if (!shared.isFunction(get)) {
-        if (process.env.NODE_ENV !== 'production') {
-            shared.assert.invariant(shared.isFunction(get), `Invalid compiler output for public accessor ${shared.toString(key)} decorated with @api`);
-        }
-        throw new Error();
-    }
+    shared.assert.invariant(shared.isFunction(get), `Invalid public accessor ${shared.toString(key)} decorated with @api. The property is missing a getter.`);
     return {
         get() {
             if (process.env.NODE_ENV !== 'production') {
@@ -2322,64 +2194,64 @@ function getClassDescriptorType(descriptor) {
     }
 }
 function validateObservedField(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!shared.isUndefined(descriptor)) {
         const type = getClassDescriptorType(descriptor);
         const message = `Invalid observed ${fieldName} field. Found a duplicate ${type} with the same name.`;
-        // [W-9927596] Ideally we always throw an error when detecting duplicate observed field.
-        // This branch is only here for backward compatibility reasons.
-        if (type === "accessor" /* DescriptorType.Accessor */) {
-            logError(message);
-        }
-        else {
-            shared.assert.fail(message);
-        }
+        // TODO [#3408]: this should throw, not log
+        logError(message);
     }
 }
 function validateFieldDecoratedWithTrack(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!shared.isUndefined(descriptor)) {
         const type = getClassDescriptorType(descriptor);
-        shared.assert.fail(`Invalid @track ${fieldName} field. Found a duplicate ${type} with the same name.`);
+        // TODO [#3408]: this should throw, not log
+        logError(`Invalid @track ${fieldName} field. Found a duplicate ${type} with the same name.`);
     }
 }
 function validateFieldDecoratedWithWire(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!shared.isUndefined(descriptor)) {
         const type = getClassDescriptorType(descriptor);
-        shared.assert.fail(`Invalid @wire ${fieldName} field. Found a duplicate ${type} with the same name.`);
+        // TODO [#3408]: this should throw, not log
+        logError(`Invalid @wire ${fieldName} field. Found a duplicate ${type} with the same name.`);
     }
 }
 function validateMethodDecoratedWithWire(Ctor, methodName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (shared.isUndefined(descriptor) || !shared.isFunction(descriptor.value) || shared.isFalse(descriptor.writable)) {
-        shared.assert.fail(`Invalid @wire ${methodName} method.`);
+        // TODO [#3441]: This line of code does not seem possible to reach.
+        logError(`Invalid @wire ${methodName} field. The field should have a valid writable descriptor.`);
     }
 }
 function validateFieldDecoratedWithApi(Ctor, fieldName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (!shared.isUndefined(descriptor)) {
         const type = getClassDescriptorType(descriptor);
         const message = `Invalid @api ${fieldName} field. Found a duplicate ${type} with the same name.`;
-        // [W-9927596] Ideally we always throw an error when detecting duplicate public properties.
-        // This branch is only here for backward compatibility reasons.
-        if (type === "accessor" /* DescriptorType.Accessor */) {
-            logError(message);
-        }
-        else {
-            shared.assert.fail(message);
-        }
+        // TODO [#3408]: this should throw, not log
+        logError(message);
     }
 }
 function validateAccessorDecoratedWithApi(Ctor, fieldName, descriptor) {
-    if (shared.isUndefined(descriptor)) {
-        shared.assert.fail(`Invalid @api get ${fieldName} accessor.`);
-    }
-    else if (shared.isFunction(descriptor.set)) {
-        shared.assert.isTrue(shared.isFunction(descriptor.get), `Missing getter for property ${fieldName} decorated with @api in ${Ctor}. You cannot have a setter without the corresponding getter.`);
+    assertNotProd(); // this method should never leak to prod
+    if (shared.isFunction(descriptor.set)) {
+        if (!shared.isFunction(descriptor.get)) {
+            // TODO [#3441]: This line of code does not seem possible to reach.
+            logError(`Missing getter for property ${fieldName} decorated with @api in ${Ctor}. You cannot have a setter without the corresponding getter.`);
+        }
     }
     else if (!shared.isFunction(descriptor.get)) {
-        shared.assert.fail(`Missing @api get ${fieldName} accessor.`);
+        // TODO [#3441]: This line of code does not seem possible to reach.
+        logError(`Missing @api get ${fieldName} accessor.`);
     }
 }
 function validateMethodDecoratedWithApi(Ctor, methodName, descriptor) {
+    assertNotProd(); // this method should never leak to prod
     if (shared.isUndefined(descriptor) || !shared.isFunction(descriptor.value) || shared.isFalse(descriptor.writable)) {
-        shared.assert.fail(`Invalid @api ${methodName} method.`);
+        // TODO [#3441]: This line of code does not seem possible to reach.
+        logError(`Invalid @api ${methodName} method.`);
     }
 }
 /**
@@ -2402,13 +2274,14 @@ function registerDecorators(Ctor, meta) {
             apiFieldsConfig[fieldName] = propConfig.config;
             descriptor = shared.getOwnPropertyDescriptor(proto, fieldName);
             if (propConfig.config > 0) {
+                if (shared.isUndefined(descriptor)) {
+                    // TODO [#3441]: This line of code does not seem possible to reach.
+                    throw new Error();
+                }
                 // accessor declaration
                 if (process.env.NODE_ENV !== 'production') {
                     validateAccessorDecoratedWithApi(Ctor, fieldName, descriptor);
                 }
-                if (shared.isUndefined(descriptor)) {
-                    throw new Error();
-                }
                 descriptor = createPublicAccessorDescriptor(fieldName, descriptor);
             }
             else {
@@ -2448,7 +2321,10 @@ function registerDecorators(Ctor, meta) {
             descriptor = shared.getOwnPropertyDescriptor(proto, fieldOrMethodName);
             if (method === 1) {
                 if (process.env.NODE_ENV !== 'production') {
-                    shared.assert.isTrue(adapter, `@wire on method "${fieldOrMethodName}": adapter id must be truthy.`);
+                    if (!adapter) {
+                        // TODO [#3408]: this should throw, not log
+                        logError(`@wire on method "${fieldOrMethodName}": adapter id must be truthy.`);
+                    }
                     validateMethodDecoratedWithWire(Ctor, fieldOrMethodName, descriptor);
                 }
                 if (shared.isUndefined(descriptor)) {
@@ -2459,7 +2335,10 @@ function registerDecorators(Ctor, meta) {
             }
             else {
                 if (process.env.NODE_ENV !== 'production') {
-                    shared.assert.isTrue(adapter, `@wire on field "${fieldOrMethodName}": adapter id must be truthy.`);
+                    if (!adapter) {
+                        // TODO [#3408]: this should throw, not log
+                        logError(`@wire on field "${fieldOrMethodName}": adapter id must be truthy.`);
+                    }
                     validateFieldDecoratedWithWire(Ctor, fieldOrMethodName, descriptor);
                 }
                 descriptor = internalWireFieldDecorator(fieldOrMethodName);
@@ -3265,6 +3144,15 @@ function evaluateStylesheetsContent(stylesheets, stylesheetToken, vm) {
                 // the stylesheet, while internally, we have a replacement for it.
                 stylesheet = getStyleOrSwappedStyle(stylesheet);
             }
+            // Check that this stylesheet was generated by our compiler
+            if (!isStylesheetRegistered(stylesheet)) {
+                if (process.env.NODE_ENV !== 'production') {
+                    logWarnOnce(`TypeError: Unexpected LWC stylesheet content found for component <${vm.tagName.toLowerCase()}>.`);
+                }
+                report("UnexpectedStylesheetContent" /* ReportingEventId.UnexpectedStylesheetContent */, {
+                    tagName: vm.tagName.toLowerCase(),
+                });
+            }
             const isScopedCss = stylesheet[shared.KEY__SCOPED_CSS];
             if (lwcRuntimeFlags.DISABLE_LIGHT_DOM_UNSCOPED_CSS &&
                 !isScopedCss &&
@@ -3385,6 +3273,18 @@ function createStylesheet(vm, stylesheets) {
     }
     return null;
 }
+const signedStylesheetSet = new Set();
+/**
+ * INTERNAL: This function can only be invoked by compiled code. The compiler
+ * will prevent this function from being imported by userland code.
+ */
+function registerStylesheet(stylesheet) {
+    signedStylesheetSet.add(stylesheet);
+    return stylesheet;
+}
+function isStylesheetRegistered(stylesheet) {
+    return signedStylesheetSet.has(stylesheet);
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5094,18 +4994,12 @@ function getVMBeingRendered() {
 function setVMBeingRendered(vm) {
     vmBeingRendered = vm;
 }
-function validateSlots(vm, html) {
+function validateSlots(vm) {
     assertNotProd(); // this method should never leak to prod
     const { cmpSlots } = vm;
-    const { slots = EmptyArray } = html;
     for (const slotName in cmpSlots.slotAssignments) {
         // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
         shared.assert.isTrue(shared.isArray(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${shared.toString(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
-        if (slotName !== '' && shared.ArrayIndexOf.call(slots, slotName) === -1) {
-            // TODO [#1297]: this should never really happen because the compiler should always validate
-            // eslint-disable-next-line @lwc/lwc-internal/no-production-assert
-            logError(`Ignoring unknown provided slot name "${slotName}" in ${vm}. Check for a typo on the slot attribute.`, vm);
-        }
     }
 }
 function validateLightDomTemplate(template, vm) {
@@ -5224,7 +5118,7 @@ function evaluateTemplate(vm, html) {
             }
             if (process.env.NODE_ENV !== 'production') {
                 // validating slots in every rendering since the allocated content might change over time
-                validateSlots(vm, html);
+                validateSlots(vm);
                 // add the VM to the list of host VMs that can be re-rendered if html is swapped
                 setActiveVM(vm);
             }
@@ -6210,7 +6104,7 @@ function checkAndReportViolation(elm, prop, isSetter, setValue) {
         const vm = findVM(elm);
         if (process.env.NODE_ENV !== 'production') {
             logWarnOnce(`Element <${elm.tagName.toLowerCase()}> ` +
-                (shared.isUndefined(vm) ? '' : `owned by <${vm.elm.tagName.toLowerCase()}> `) +
+                (shared.isUndefined(vm) ? '' : `owned by <${vm.tagName.toLowerCase()}> `) +
                 `uses non-standard property "${prop}". This will be removed in a future version of LWC. ` +
                 `See https://sfdc.co/deprecated-aria`);
         }
@@ -6327,8 +6221,6 @@ function hydrateNode(node, vnode, renderer) {
     return renderer.nextSibling(hydratedNode);
 }
 const NODE_VALUE_PROP = 'nodeValue';
-const PARENT_NODE_PROP = 'parentNode';
-const TAG_NAME_PROP = 'tagName';
 function textNodeContentsAreEqual(node, vnode, renderer) {
     const { getProperty } = renderer;
     const nodeValue = getProperty(node, NODE_VALUE_PROP);
@@ -6340,22 +6232,6 @@ function textNodeContentsAreEqual(node, vnode, renderer) {
     if (nodeValue === '\u200D' && vnode.text === '') {
         return true;
     }
-    // Special case for text nodes inside `<style>` tags – these are escaped when rendered server-size,
-    // but not when generated by the engine client-side.
-    const parentNode = getProperty(node, PARENT_NODE_PROP);
-    // Should never be null, but just to be safe, we check.
-    /* istanbul ignore else */
-    if (!shared.isNull(parentNode)) {
-        const tagName = getProperty(parentNode, TAG_NAME_PROP);
-        // If the tagName is STYLE, then the following condition should always be true.
-        // The LWC compiler blocks using `<style>`s inside of templates, so it should be impossible
-        // for component authors to render different `<style>` text content on the client and server.
-        // But just to be safe, we check.
-        /* istanbul ignore next */
-        if (tagName === 'STYLE' && shared.htmlEscape(vnode.text) === nodeValue) {
-            return true;
-        }
-    }
     return false;
 }
 function hydrateText(node, vnode, renderer) {
@@ -6579,7 +6455,7 @@ function validateAttrs(vnode, elm, renderer) {
 function validateClassAttr(vnode, elm, renderer) {
     const { data, owner } = vnode;
     let { className, classMap } = data;
-    const { getProperty, getClassList } = renderer;
+    const { getProperty, getClassList, getAttribute } = renderer;
     const scopedToken = getScopeTokenClass(owner);
     const stylesheetTokenHost = isVCustomElement(vnode) ? getStylesheetTokenHost(vnode) : null;
     // Classnames for scoped CSS are added directly to the DOM during rendering,
@@ -6609,11 +6485,12 @@ function validateClassAttr(vnode, elm, renderer) {
     }
     let nodesAreCompatible = true;
     let readableVnodeClassname;
-    const elmClassName = getProperty(elm, 'className');
+    const elmClassName = getAttribute(elm, 'class');
     if (!shared.isUndefined(className) && String(className) !== elmClassName) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
-        readableVnodeClassname = className;
+        // stringify for pretty-printing
+        readableVnodeClassname = JSON.stringify(className);
     }
     else if (!shared.isUndefined(classMap)) {
         // classMap is used when class is set to static value.
@@ -6626,19 +6503,20 @@ function validateClassAttr(vnode, elm, renderer) {
                 nodesAreCompatible = false;
             }
         }
-        readableVnodeClassname = computedClassName.trim();
+        // stringify for pretty-printing
+        readableVnodeClassname = JSON.stringify(computedClassName.trim());
         if (classList.length > shared.keys(classMap).length) {
             nodesAreCompatible = false;
         }
     }
-    else if (shared.isUndefined(className) && elmClassName !== '') {
+    else if (shared.isUndefined(className) && !shared.isNull(elmClassName)) {
         // SSR contains a className but client-side VDOM does not
         nodesAreCompatible = false;
-        readableVnodeClassname = '';
+        readableVnodeClassname = '""';
     }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${readableVnodeClassname}" but found "${elmClassName}"`, vnode.owner);
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected ${readableVnodeClassname} but found ${JSON.stringify(elmClassName)}`, vnode.owner);
         }
     }
     return nodesAreCompatible;
@@ -6979,7 +6857,7 @@ function readonly(obj) {
     if (process.env.NODE_ENV !== 'production') {
         // TODO [#1292]: Remove the readonly decorator
         if (arguments.length !== 1) {
-            shared.assert.fail('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
+            logError('@readonly cannot be used as a decorator just yet, use it as a function with one argument to produce a readonly version of the provided value.');
         }
     }
     return getReadOnlyProxy(obj);
@@ -7014,6 +6892,7 @@ exports.readonly = readonly;
 exports.register = register;
 exports.registerComponent = registerComponent;
 exports.registerDecorators = registerDecorators;
+exports.registerStylesheet = registerStylesheet;
 exports.registerTemplate = registerTemplate;
 exports.sanitizeAttribute = sanitizeAttribute;
 exports.setHooks = setHooks;
@@ -7023,5 +6902,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.42.0 */
+/* version: 2.44.0 */
 //# sourceMappingURL=engine-core.cjs.js.map