@lwc/engine-core 8.2.0 → 8.4.0

package/README.md

@@ -115,3 +115,9 @@ This experimental API enables the sanitization of HTML content by external servi
 ### unwrap()
 
 This experimental API enables the removal of an object's observable membrane proxy wrapper.
+
+### setTrustedSignalSet()
+
+This experimental API enables the addition of a signal as a trusted signal. If the [ENABLE_EXPERIMENTAL_SIGNALS](https://github.com/salesforce/lwc/blob/master/packages/%40lwc/features/README.md#lwcfeatures) feature is enabled, any signal value change will trigger a re-render.
+
+If `setTrustedSignalSet` is called more than once, it will throw an error. If it is never called, then no trusted signal validation will be performed. The same `setTrustedSignalSet` API must be called on both `@lwc/engine-dom` and `@lwc/signals`.

package/dist/framework/main.d.ts

@@ -28,3 +28,4 @@ export { default as track } from './decorators/track';
 export { default as wire } from './decorators/wire';
 export { readonly } from './readonly';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
+export { setTrustedSignalSet } from '@lwc/shared';

package/dist/framework/reporting.d.ts

@@ -1,4 +1,4 @@
-import { ShadowMode, ShadowSupportMode } from './vm';
+import { RenderMode, ShadowMode, ShadowSupportMode } from './vm';
 export declare const enum ReportingEventId {
     CrossRootAriaInSyntheticShadow = "CrossRootAriaInSyntheticShadow",
     CompilerRuntimeVersionMismatch = "CompilerRuntimeVersionMismatch",
@@ -7,7 +7,8 @@ export declare const enum ReportingEventId {
     StylesheetMutation = "StylesheetMutation",
     ConnectedCallbackWhileDisconnected = "ConnectedCallbackWhileDisconnected",
     ShadowModeUsage = "ShadowModeUsage",
-    ShadowSupportModeUsage = "ShadowSupportModeUsage"
+    ShadowSupportModeUsage = "ShadowSupportModeUsage",
+    RenderModeMismatch = "RenderModeMismatch"
 }
 export interface BasePayload {
     tagName?: string;
@@ -32,6 +33,9 @@ export interface StylesheetMutationPayload extends BasePayload {
 }
 export interface ConnectedCallbackWhileDisconnectedPayload extends BasePayload {
 }
+export interface RenderModeMismatchPayload extends BasePayload {
+    mode: RenderMode;
+}
 export interface ShadowModeUsagePayload extends BasePayload {
     mode: ShadowMode;
 }
@@ -47,6 +51,7 @@ export type ReportingPayloadMapping = {
     [ReportingEventId.ConnectedCallbackWhileDisconnected]: ConnectedCallbackWhileDisconnectedPayload;
     [ReportingEventId.ShadowModeUsage]: ShadowModeUsagePayload;
     [ReportingEventId.ShadowSupportModeUsage]: ShadowSupportModeUsagePayload;
+    [ReportingEventId.RenderModeMismatch]: RenderModeMismatchPayload;
 };
 export type ReportingDispatcher<T extends ReportingEventId = ReportingEventId> = (reportingEventId: T, payload: ReportingPayloadMapping[T]) => void;
 /** Callbacks to invoke when reporting is enabled */

package/dist/index.cjs.js

@@ -296,6 +296,16 @@ function toPrettyMemberNotation(parent, child) {
         return `${shared.toString(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.
  */
@@ -364,7 +374,7 @@ function trackTargetForMutationLogging(key, target) {
         // Deeply traverse arrays and objects to track every object within
         if (shared.isArray(target)) {
             for (let i = 0; i < target.length; i++) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, i), target[i]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, i), safelyCallGetter(target, i));
             }
         }
         else {
@@ -373,10 +383,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 shared.getOwnPropertyNames(target)) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
             }
             for (const prop of shared.getOwnPropertySymbols(target)) {
-                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), target[prop]);
+                trackTargetForMutationLogging(toPrettyMemberNotation(key, prop), safelyCallGetter(target, prop));
             }
         }
     }
@@ -602,6 +612,7 @@ function componentValueObserved(vm, key, target = {}) {
         'value' in target &&
         'subscribe' in target &&
         shared.isFunction(target.subscribe) &&
+        shared.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.
@@ -668,8 +679,9 @@ for (const [propName, attrName] of shared.entries(shared.AriaPropNameToAttrNameM
                 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 (shared.isNull(newValue)) {
                     this.removeAttribute(attrName);
@@ -6182,19 +6194,30 @@ function validateSlots(vm) {
         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}.`);
     }
 }
-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 (!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"`);
+    // 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);
         }
     }
 }
@@ -6409,9 +6432,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: ${shared.toString(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 (!shared.isNull(cmpTemplate)) {
@@ -7998,7 +8019,10 @@ function validateClassAttr(vnode, elm, data, renderer) {
     let nodesAreCompatible = true;
     let readableVnodeClassname;
     const elmClassName = getAttribute(elm, 'class');
-    if (!shared.isUndefined(className) && String(className) !== elmClassName) {
+    if (!shared.isUndefined(className) &&
+        String(className) !== elmClassName &&
+        // No mismatch if SSR `class` attribute is missing and CSR `class` is the empty string
+        !(className === '' && shared.isNull(elmClassName))) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
         // stringify for pretty-printing
@@ -8137,13 +8161,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 (shared.isFalse(hasMatchingAttrs && hasMatchingStyleAttr && hasMatchingClass)) {
+            const hasMatchingStyleAttr = shouldValidateAttr(data, 'style')
+                ? validateStyleAttr(vnode, elm, data, renderer)
+                : true;
+            if (shared.isFalse(hasMatchingAttrs && hasMatchingClass && hasMatchingStyleAttr)) {
                 return false;
             }
         }
@@ -8433,6 +8459,10 @@ function readonly(obj) {
     return getReadOnlyProxy(obj);
 }
 
+Object.defineProperty(exports, "setTrustedSignalSet", {
+    enumerable: true,
+    get: function () { return shared.setTrustedSignalSet; }
+});
 Object.defineProperty(exports, "setFeatureFlag", {
     enumerable: true,
     get: function () { return features.setFeatureFlag; }
@@ -8477,5 +8507,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.2.0 */
+/** version: 8.4.0 */
 //# sourceMappingURL=index.cjs.js.map