@lwc/engine-core 8.2.0 → 8.3.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

@@ -602,6 +602,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.
@@ -6182,19 +6183,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 +6421,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)) {
@@ -8137,13 +8147,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 +8445,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 +8493,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.2.0 */
+/** version: 8.3.0 */
 //# sourceMappingURL=index.cjs.js.map