@lwc/engine-core 8.1.1 → 8.1.3

package/dist/framework/api.d.ts

@@ -1,6 +1,7 @@
 import { SlotSet } from './vm';
 import { LightningElementConstructor } from './base-lightning-element';
 import { Key, VComment, VCustomElement, VElement, VElementData, VFragment, VNode, VNodes, VScopedSlotFragment, VStatic, VStaticPart, VStaticPartData, VText } from './vnodes';
+import { SanitizedHtmlContent } from './sanitized-html-content';
 declare function sp(partId: number, data: VStaticPartData | null, text: string | null): VStaticPart;
 declare function ssf(slotName: unknown, factory: (value: any, key: any) => VFragment): VScopedSlotFragment;
 declare function st(fragmentFactory: (parts?: VStaticPart[]) => Element, key: Key, parts?: VStaticPart[]): VStatic;
@@ -45,7 +46,7 @@ export type SanitizeHtmlContentHook = (content: unknown) => string;
  * @param newHookImpl
  */
 export declare function setSanitizeHtmlContentHook(newHookImpl: SanitizeHtmlContentHook): void;
-declare function shc(content: unknown): string;
+declare function shc(content: unknown): SanitizedHtmlContent;
 /**
  * [ncls] - Normalize class name attribute.
  *

package/dist/framework/main.d.ts

@@ -20,7 +20,7 @@ export { getComponentConstructor } from './get-component-constructor';
 export type { RendererAPI, LifecycleCallback } from './renderer';
 export type { Stylesheets } from './stylesheet';
 export type { Template } from './template';
-export type { ConfigValue as WireConfigValue, ContextConsumer as WireContextConsumer, ContextProvider as WireContextProvider, ContextValue as WireContextValue, DataCallback, WireAdapter, WireAdapterConstructor, WireAdapterSchemaValue, WireContextSubscriptionPayload, WireContextSubscriptionCallback, } from './wiring';
+export type { ConfigValue as WireConfigValue, ContextConsumer as WireContextConsumer, ContextProvider as WireContextProvider, ContextValue as WireContextValue, DataCallback as WireDataCallback, WireAdapter, WireAdapterConstructor, WireAdapterSchemaValue, WireContextSubscriptionPayload, WireContextSubscriptionCallback, } from './wiring';
 export type { FormRestoreState, FormRestoreReason } from './vm';
 export { LightningElement } from './base-lightning-element';
 export { default as api } from './decorators/api';

package/dist/framework/sanitized-html-content.d.ts

@@ -0,0 +1,29 @@
+import type { RendererAPI } from './renderer';
+declare const sanitizedHtmlContentSymbol: unique symbol;
+export type SanitizedHtmlContent = {
+    [sanitizedHtmlContentSymbol]: unknown;
+};
+/**
+ * Wrap a pre-sanitized string designated for `.innerHTML` via `lwc:inner-html`
+ * as an object with a Symbol that only we have access to.
+ * @param sanitizedString
+ * @returns SanitizedHtmlContent
+ */
+export declare function createSanitizedHtmlContent(sanitizedString: unknown): SanitizedHtmlContent;
+/**
+ * Safely call setProperty on an Element while handling any SanitizedHtmlContent objects correctly
+ *
+ * @param setProperty - renderer.setProperty
+ * @param elm - Element
+ * @param key - key to set
+ * @param value -  value to set
+ */
+export declare function safelySetProperty(setProperty: RendererAPI['setProperty'], elm: Element, key: string, value: any): void;
+/**
+ * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
+ * string values are equivalent.
+ * @param first
+ * @param second
+ */
+export declare function isSanitizedHtmlContentEqual(first: any, second: any): boolean;
+export {};

package/dist/framework/utils.d.ts

@@ -6,9 +6,6 @@ export declare const EmptyObject: any;
 export declare const EmptyArray: never[];
 export declare function addCallbackToNextTick(callback: Callback): void;
 export declare function guid(): string;
-export declare function parseStyleText(cssText: string): {
-    [name: string]: string;
-};
 export declare function cloneAndOmitKey(object: {
     [key: string]: any;
 }, keyToOmit: string): {

package/dist/index.cjs.js

@@ -221,23 +221,6 @@ function guid() {
     }
     return s4() + s4() + '-' + s4() + '-' + s4() + '-' + s4() + '-' + s4() + s4() + s4();
 }
-// Borrowed from Vue template compiler.
-// https://github.com/vuejs/vue/blob/531371b818b0e31a989a06df43789728f23dc4e8/src/platforms/web/util/style.js#L5-L16
-const DECLARATION_DELIMITER = /;(?![^(]*\))/g;
-const PROPERTY_DELIMITER = /:(.+)/;
-function parseStyleText(cssText) {
-    const styleMap = {};
-    const declarations = cssText.split(DECLARATION_DELIMITER);
-    for (const declaration of declarations) {
-        if (declaration) {
-            const [prop, value] = declaration.split(PROPERTY_DELIMITER);
-            if (prop !== undefined && value !== undefined) {
-                styleMap[prop.trim()] = value.trim();
-            }
-        }
-    }
-    return styleMap;
-}
 // Make a shallow copy of an object but omit the given key
 function cloneAndOmitKey(object, keyToOmit) {
     const result = {};
@@ -3937,6 +3920,65 @@ function isVStaticPartText(vnode) {
     return vnode.type === 0 /* VStaticPartType.Text */;
 }
 
+const sanitizedHtmlContentSymbol = Symbol('lwc-get-sanitized-html-content');
+function isSanitizedHtmlContent(object) {
+    return shared.isObject(object) && !shared.isNull(object) && sanitizedHtmlContentSymbol in object;
+}
+function unwrapIfNecessary(object) {
+    return isSanitizedHtmlContent(object) ? object[sanitizedHtmlContentSymbol] : object;
+}
+/**
+ * Wrap a pre-sanitized string designated for `.innerHTML` via `lwc:inner-html`
+ * as an object with a Symbol that only we have access to.
+ * @param sanitizedString
+ * @returns SanitizedHtmlContent
+ */
+function createSanitizedHtmlContent(sanitizedString) {
+    return shared.create(null, {
+        [sanitizedHtmlContentSymbol]: {
+            value: sanitizedString,
+            configurable: false,
+            writable: false,
+        },
+    });
+}
+/**
+ * Safely call setProperty on an Element while handling any SanitizedHtmlContent objects correctly
+ *
+ * @param setProperty - renderer.setProperty
+ * @param elm - Element
+ * @param key - key to set
+ * @param value -  value to set
+ */
+function safelySetProperty(setProperty, elm, key, value) {
+    // See W-16614337
+    // we support setting innerHTML to `undefined` because it's inherently safe
+    if ((key === 'innerHTML' || key === 'outerHTML') && !shared.isUndefined(value)) {
+        if (isSanitizedHtmlContent(value)) {
+            // it's a SanitizedHtmlContent object
+            setProperty(elm, key, value[sanitizedHtmlContentSymbol]);
+        }
+        else {
+            // not a SanitizedHtmlContent object
+            if (process.env.NODE_ENV !== 'production') {
+                logWarn(`Cannot set property "${key}". Instead, use lwc:inner-html or lwc:dom-manual.`);
+            }
+        }
+    }
+    else {
+        setProperty(elm, key, value);
+    }
+}
+/**
+ * Given two objects (likely either a string or a SanitizedHtmlContent object), return true if their
+ * string values are equivalent.
+ * @param first
+ * @param second
+ */
+function isSanitizedHtmlContentEqual(first, second) {
+    return unwrapIfNecessary(first) === unwrapIfNecessary(second);
+}
+
 /*
  * Copyright (c) 2018, salesforce.com, inc.
  * All rights reserved.
@@ -3967,7 +4009,7 @@ function patchAttributes(oldVnode, vnode, renderer) {
             // Use kebabCaseToCamelCase directly because we don't want to set props like `ariaLabel` or `tabIndex`
             // on a custom element versus just using the more reliable attribute format.
             if (external && (propName = shared.kebabCaseToCamelCase(key)) in elm) {
-                setProperty(elm, propName, cur);
+                safelySetProperty(setProperty, elm, propName, cur);
             }
             else if (shared.StringCharCodeAt.call(key, 3) === ColonCharCode) {
                 // Assume xml namespace
@@ -4047,7 +4089,7 @@ function patchProps(oldVnode, vnode, renderer) {
                     logWarn(`Unknown public property "${key}" of element <${elm.tagName.toLowerCase()}>. This is either a typo on the corresponding attribute "${shared.htmlPropertyToAttribute(key)}", or the attribute does not exist in this browser or DOM implementation.`);
                 }
             }
-            setProperty(elm, key, cur);
+            safelySetProperty(setProperty, elm, key, cur);
         }
     }
 }
@@ -5755,7 +5797,8 @@ function setSanitizeHtmlContentHook(newHookImpl) {
 }
 // [s]anitize [h]tml [c]ontent
 function shc(content) {
-    return sanitizeHtmlContentHook(content);
+    const sanitizedString = sanitizeHtmlContentHook(content);
+    return createSanitizedHtmlContent(sanitizedString);
 }
 /**
  * [ncls] - Normalize class name attribute.
@@ -7598,31 +7641,41 @@ function textNodeContentsAreEqual(node, vnode, renderer) {
 // 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(elm, renderer, optOutStaticProp) {
-    // `data-lwc-host-mutated` is a special attribute added by the SSR engine itself,
-    // which does the same thing as an explicit `static validationOptOut = ['attr1', 'attr2']`.
+    // `data-lwc-host-mutated` is a special attribute added by the SSR engine itself, which automatically detects
+    // host mutations during `connectedCallback`.
     const hostMutatedValue = renderer.getAttribute(elm, 'data-lwc-host-mutated');
-    if (shared.isString(hostMutatedValue)) {
-        const mutatedAttrValues = new Set(shared.StringSplit.call(hostMutatedValue, / /));
-        return (attrName) => !mutatedAttrValues.has(attrName);
-    }
-    if (shared.isUndefined(optOutStaticProp)) {
-        return (_attrName) => true;
-    }
+    const detectedHostMutations = shared.isString(hostMutatedValue)
+        ? new Set(shared.StringSplit.call(hostMutatedValue, / /))
+        : undefined;
     // 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);
-    }
-    if (process.env.NODE_ENV !== 'production') {
-        logWarn('Validation opt out must be `true` or an array of attributes that should not be validated.');
-    }
-    return (_attrName) => true;
+    const fullOptOut = shared.isTrue(optOutStaticProp);
+    // 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.
+    const isValidArray = shared.isArray(optOutStaticProp) && shared.arrayEvery(optOutStaticProp, shared.isString);
+    const conditionalOptOut = isValidArray ? new Set(optOutStaticProp) : undefined;
+    if (process.env.NODE_ENV !== 'production' &&
+        !shared.isUndefined(optOutStaticProp) &&
+        !shared.isTrue(optOutStaticProp) &&
+        !isValidArray) {
+        logWarn('`validationOptOut` must be `true` or an array of attributes that should not be validated.');
+    }
+    return (attrName) => {
+        // Component wants to opt out of all validation
+        if (fullOptOut) {
+            return false;
+        }
+        // Mutations were automatically detected and should be ignored
+        if (!shared.isUndefined(detectedHostMutations) && detectedHostMutations.has(attrName)) {
+            return false;
+        }
+        // Component explicitly wants to opt out of certain validations, regardless of auto-detection
+        if (!shared.isUndefined(conditionalOptOut) && conditionalOptOut.has(attrName)) {
+            return false;
+        }
+        // Attribute must be validated
+        return true;
+    };
 }
 function hydrateText(node, vnode, renderer) {
     if (!hasCorrectNodeType(vnode, node, 3 /* EnvNodeTypes.TEXT */, renderer)) {
@@ -7653,6 +7706,8 @@ function hydrateComment(node, vnode, renderer) {
         }
     }
     const { setProperty } = renderer;
+    // We only set the `nodeValue` property here (on a comment), so we don't need
+    // to sanitize the content as HTML using `safelySetProperty`
     setProperty(node, NODE_VALUE_PROP, vnode.text ?? null);
     vnode.elm = node;
     return node;
@@ -7699,7 +7754,7 @@ function hydrateElement(elm, vnode, renderer) {
         const { data: { props }, } = vnode;
         const { getProperty } = renderer;
         if (!shared.isUndefined(props) && !shared.isUndefined(props.innerHTML)) {
-            if (getProperty(elm, 'innerHTML') === props.innerHTML) {
+            if (isSanitizedHtmlContentEqual(getProperty(elm, 'innerHTML'), props.innerHTML)) {
                 // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
                 vnode.data = {
                     ...vnode.data,
@@ -7984,12 +8039,12 @@ function validateStyleAttr(vnode, elm, data, renderer) {
         vnodeStyle = style;
     }
     else if (!shared.isUndefined(styleDecls)) {
-        const parsedVnodeStyle = parseStyleText(elmStyle);
+        const parsedVnodeStyle = shared.parseStyleText(elmStyle);
         const expectedStyle = [];
         // styleMap is used when style is set to static value.
         for (let i = 0, n = styleDecls.length; i < n; i++) {
             const [prop, value, important] = styleDecls[i];
-            expectedStyle.push(`${prop}: ${value + (important ? ' important!' : '')}`);
+            expectedStyle.push(`${prop}: ${value + (important ? ' !important' : '')};`);
             const parsedPropValue = parsedVnodeStyle[prop];
             if (shared.isUndefined(parsedPropValue)) {
                 nodesAreCompatible = false;
@@ -8004,7 +8059,7 @@ function validateStyleAttr(vnode, elm, data, renderer) {
         if (shared.keys(parsedVnodeStyle).length > styleDecls.length) {
             nodesAreCompatible = false;
         }
-        vnodeStyle = shared.ArrayJoin.call(expectedStyle, ';');
+        vnodeStyle = shared.ArrayJoin.call(expectedStyle, ' ');
     }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
@@ -8416,5 +8471,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 8.1.1 */
+/** version: 8.1.3 */
 //# sourceMappingURL=index.cjs.js.map