@lwc/engine-core 8.2.0 → 8.4.0

package/dist/index.js

@@ -1,7 +1,8 @@
 /**
  * Copyright (c) 2024 Salesforce, Inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isArray as isArray$1, isFunction as isFunction$1, keys, ArrayFilter, isObject, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString as toString$1, isString, ArrayIndexOf, ArrayPop, isFalse, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, seal, create, isAPIFeatureEnabled, isArray as isArray$1, isFunction as isFunction$1, keys, ArrayFilter, isObject, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertySymbols as getOwnPropertySymbols$1, toString as toString$1, isString, ArrayIndexOf, ArrayPop, isFalse, isTrustedSignal, hasOwnProperty as hasOwnProperty$1, entries, AriaPropNameToAttrNameMap, getPropertyDescriptor, forEach, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, assert, freeze, KEY__SYNTHETIC_MODE, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, ArraySplice, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, StringTrim, ArraySort, ArrayFrom, htmlEscape, StringCharAt, ArrayUnshift, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, StringSplit, parseStyleText, arrayEvery, ArrayCopyWithin, ArrayFill, ArrayReverse, ArrayShift } from '@lwc/shared';
+export { setTrustedSignalSet } from '@lwc/shared';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
 /*
@@ -292,6 +293,16 @@ function toPrettyMemberNotation(parent, child) {
         return `${toString$1(parent)}[${JSON.stringify(child)}]`;
     }
 }
+function safelyCallGetter(target, key) {
+    // Arbitrary getters can throw. We don't want to throw an error just due to dev-mode-only mutation tracking
+    // (which is only used for performance debugging) so ignore errors here.
+    try {
+        return target[key];
+    }
+    catch (_err) {
+        /* ignore */
+    }
+}
 /**
  * Flush all the logs we've written so far and return the current logs.
  */
@@ -360,7 +371,7 @@ function trackTargetForMutationLogging(key, target) {
         // Deeply traverse arrays and objects to track every object within
         if (isArray$1(target)) {
             for (let i = 0; i < target.length; i++) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, i), target[i]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, i), safelyCallGetter(target, i));
             }
         }
         else {
@@ -369,10 +380,10 @@ function trackTargetForMutationLogging(key, target) {
             // https://github.com/salesforce/observable-membrane/blob/b85417f/src/base-handler.ts#L142-L143
             // Note this code path is very hot, hence doing two separate for-loops rather than creating a new array.
             for (const prop of getOwnPropertyNames$1(target)) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
             }
             for (const prop of getOwnPropertySymbols$1(target)) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
             }
         }
     }
@@ -598,6 +609,7 @@ function componentValueObserved(vm, key, target = {}) {
         'value' in target &&
         'subscribe' in target &&
         isFunction$1(target.subscribe) &&
+        isTrustedSignal(target) &&
         // Only subscribe if a template is being rendered by the engine
         tro.isObserving()) {
         // Subscribe the template reactive observer's notify method, which will mark the vm as dirty and schedule hydration.
@@ -664,8 +676,9 @@ for (const [propName, attrName] of entries(AriaPropNameToAttrNameMap)) {
                 return this.getAttribute(attrName);
             },
             set(newValue) {
-                // TODO [#3284]: there is disagreement between browsers and the spec on how to treat undefined
-                // Our historical behavior is to only treat null as removing the attribute
+                // TODO [#3284]: According to the spec, IDL nullable type values
+                // (null and undefined) should remove the attribute; however, we
+                // only do so in the case of null for historical reasons.
                 // See also https://github.com/w3c/aria/issues/1858
                 if (isNull(newValue)) {
                     this.removeAttribute(attrName);
@@ -6178,19 +6191,30 @@ function validateSlots(vm) {
         assert.isTrue(isArray$1(cmpSlots.slotAssignments[slotName]), `Slots can only be set to an array, instead received ${toString$1(cmpSlots.slotAssignments[slotName])} for slot "${slotName}" in ${vm}.`);
     }
 }
-function validateLightDomTemplate(template, vm) {
-    assertNotProd(); // should never leak to prod mode
-    if (template === defaultEmptyTemplate) {
+function checkHasMatchingRenderMode(template, vm) {
+    // don't validate in prod environments where reporting is disabled
+    if (process.env.NODE_ENV === 'production' && !isReportingEnabled()) {
         return;
     }
-    if (vm.renderMode === 0 /* RenderMode.Light */) {
-        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)}.`);
-        }
+    // don't validate the default empty template - it is not inherently light or shadow
+    if (template === defaultEmptyTemplate) {
+        return;
     }
-    else {
-        if (!isUndefined$1(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"`);
+    // TODO [#4663]: `renderMode` mismatch between template and component causes `console.error` but no error
+    // Note that `undefined` means shadow in this case, because shadow is the default.
+    const vmIsLight = vm.renderMode === 0 /* RenderMode.Light */;
+    const templateIsLight = template.renderMode === 'light';
+    if (vmIsLight !== templateIsLight) {
+        report("RenderModeMismatch" /* ReportingEventId.RenderModeMismatch */, {
+            tagName: vm.tagName,
+            mode: vm.renderMode,
+        });
+        if (process.env.NODE_ENV !== 'production') {
+            const tagName = getComponentTag(vm);
+            const message = vmIsLight
+                ? `Light DOM components can't render shadow DOM templates. Add an 'lwc:render-mode="light"' directive to the root template tag of ${tagName}.`
+                : `Shadow DOM components template can't render light DOM templates. Either remove the 'lwc:render-mode' directive from ${tagName} or set it to 'lwc:render-mode="shadow"`;
+            logError(message);
         }
     }
 }
@@ -6405,9 +6429,7 @@ function evaluateTemplate(vm, html) {
                 if (!isTemplateRegistered(html)) {
                     throw new TypeError(`Invalid template returned by the render() method on ${vm.tagName}. It must return an imported template (e.g.: \`import html from "./${vm.def.name}.html"\`), instead, it has returned: ${toString$1(html)}.`);
                 }
-                if (process.env.NODE_ENV !== 'production') {
-                    validateLightDomTemplate(html, vm);
-                }
+                checkHasMatchingRenderMode(html, vm);
                 // Perf opt: do not reset the shadow root during the first rendering (there is
                 // nothing to reset).
                 if (!isNull(cmpTemplate)) {
@@ -7994,7 +8016,10 @@ function validateClassAttr(vnode, elm, data, renderer) {
     let nodesAreCompatible = true;
     let readableVnodeClassname;
     const elmClassName = getAttribute(elm, 'class');
-    if (!isUndefined$1(className) && String(className) !== elmClassName) {
+    if (!isUndefined$1(className) &&
+        String(className) !== elmClassName &&
+        // No mismatch if SSR `class` attribute is missing and CSR `class` is the empty string
+        !(className === '' && isNull(elmClassName))) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
         // stringify for pretty-printing
@@ -8133,13 +8158,15 @@ function haveCompatibleStaticParts(vnode, renderer) {
             // Explicitly skip hydration validation when static parts don't contain `style` or `className`.
             // This means the style/class attributes are either static or don't exist on the element and
             // cannot be affected by hydration.
-            const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
-                ? validateStyleAttr(vnode, elm, data, renderer)
-                : true;
+            // We need to do class first, style second to match the ordering of non-static-optimized nodes,
+            // otherwise the ordering of console errors is different between the two.
             const hasMatchingClass = shouldValidateAttr(data, 'className')
                 ? validateClassAttr(vnode, elm, data, renderer)
                 : true;
-            if (isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+            const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
+                ? validateStyleAttr(vnode, elm, data, renderer)
+                : true;
+            if (isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
             }
         }
@@ -8430,5 +8457,5 @@ function readonly(obj) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, reportingControl as __unstable__ReportingControl, api$1 as api, computeShadowAndRenderMode, connectRootElement, createContextProviderWithRegister, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentAPIVersion, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, registerComponent, registerDecorators, registerTemplate, runFormAssociatedCallback, runFormDisabledCallback, runFormResetCallback, runFormStateRestoreCallback, sanitizeAttribute, setHooks, shouldBeFormAssociated, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 8.2.0 */
+/** version: 8.4.0 */
 //# sourceMappingURL=index.js.map