@lwc/engine-core 3.7.1 → 3.7.2

package/dist/index.js

@@ -1,7 +1,7 @@
 /**
  * Copyright (C) 2023 salesforce.com, inc.
  */
-import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse } from '@lwc/shared';
+import { noop, StringToLowerCase, isNull, ArrayPush as ArrayPush$1, ArrayJoin, isFrozen, isUndefined as isUndefined$1, defineProperty, ArrayIndexOf, ArraySplice, create, seal, isArray as isArray$1, isFunction as isFunction$1, keys, hasOwnProperty as hasOwnProperty$1, globalThis as globalThis$1, forEach, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, assign, isObject, freeze, KEY__SYNTHETIC_MODE, isString, assert, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, getOwnPropertyNames as getOwnPropertyNames$1, getOwnPropertyDescriptors, htmlPropertyToAttribute, ArraySlice, ArrayMap, KEY__SCOPED_CSS, kebabCaseToCamelCase, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, StringSlice, ArrayShift, ArrayUnshift, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, LOWEST_API_VERSION, KEY__NATIVE_GET_ELEMENT_BY_ID, KEY__NATIVE_QUERY_SELECTOR_ALL, ID_REFERENCING_ATTRIBUTES_SET, KEY__SHADOW_TOKEN, ArrayFilter, StringSplit, arrayEvery, ArrayIncludes, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
 
@@ -1454,12 +1454,31 @@ const formAssociatedProps = new Set([
     'labels',
 ]);
 // Verify that access to a form-associated property of the ElementInternals proxy has formAssociated set in the LWC.
-function assertFormAssociatedPropertySet(propertyKey, isFormAssociated) {
-    if (formAssociatedProps.has(propertyKey) && !isFormAssociated) {
+function verifyPropForFormAssociation(propertyKey, isFormAssociated) {
+    if (isString(propertyKey) && formAssociatedProps.has(propertyKey) && !isFormAssociated) {
         //Note this error message mirrors Chrome and Firefox error messages, in Safari the error is slightly different.
         throw new DOMException(`Failed to execute '${propertyKey}' on 'ElementInternals': The target element is not a form-associated custom element.`);
     }
 }
+const elementInternalsAccessorAllowList = new Set(['shadowRoot', 'role', ...formAssociatedProps]);
+// Prevent access to properties not defined in the HTML spec in case browsers decide to
+// provide new APIs that provide access to form associated properties.
+// This can be removed along with UpgradeableConstructor.
+function isAllowedElementInternalAccessor(propertyKey) {
+    let isAllowedAccessor = false;
+    // As of this writing all ElementInternal property keys as described in the spec are implemented with strings
+    // in Chrome, Firefox, and Safari
+    if (isString(propertyKey)) {
+        // Allow list is based on HTML spec:
+        // https://html.spec.whatwg.org/multipage/custom-elements.html#the-elementinternals-interface
+        isAllowedAccessor =
+            elementInternalsAccessorAllowList.has(propertyKey) || /^aria/.test(propertyKey);
+        if (!isAllowedAccessor && process.env.NODE_ENV !== 'production') {
+            logWarn('Only properties defined in the ElementInternals HTML spec are available.');
+        }
+    }
+    return isAllowedAccessor;
+}
 // Wrap all ElementInternal objects in a proxy to prevent form association when `formAssociated` is not set on an LWC.
 // This is needed because the 1UpgradeableConstructor1 always sets `formAssociated=true`, which means all
 // ElementInternal objects will have form-associated properties set when an LWC is placed in a form.
@@ -1468,19 +1487,28 @@ function assertFormAssociatedPropertySet(propertyKey, isFormAssociated) {
 function createElementInternalsProxy(elementInternals, isFormAssociated) {
     const elementInternalsProxy = new Proxy(elementInternals, {
         set(target, propertyKey, newValue) {
-            // ElementInternals implementation uses strings as property keys exclusively in chrome, firefox, and safari
-            assertFormAssociatedPropertySet(propertyKey, isFormAssociated);
-            return Reflect.set(target, propertyKey, newValue);
+            if (isAllowedElementInternalAccessor(propertyKey)) {
+                // Verify that formAssociated is set for form associated properties
+                verifyPropForFormAssociation(propertyKey, isFormAssociated);
+                return Reflect.set(target, propertyKey, newValue);
+            }
+            // As of this writing ElementInternals do not have non-string properties that can be set.
+            return false;
         },
         get(target, propertyKey) {
-            // ElementInternals implementation uses strings as property keys exclusively in chrome, firefox, and safari
-            assertFormAssociatedPropertySet(propertyKey, isFormAssociated);
-            const internalsPropertyValue = Reflect.get(target, propertyKey);
-            // Bind the property value to the target so that function invocations are called with the
-            // correct context ('this' value).
-            return typeof internalsPropertyValue === 'function'
-                ? internalsPropertyValue.bind(target)
-                : internalsPropertyValue;
+            if (
+            // Pass through Object.prototype methods such as toString()
+            hasOwnProperty$1.call(Object.prototype, propertyKey) ||
+                // As of this writing, ElementInternals only uses Symbol.toStringTag which is called
+                // on Object.hasOwnProperty invocations
+                Symbol.for('Symbol.toStringTag') === propertyKey ||
+                // ElementInternals allow listed properties
+                isAllowedElementInternalAccessor(propertyKey)) {
+                // Verify that formAssociated is set for form associated properties
+                verifyPropForFormAssociation(propertyKey, isFormAssociated);
+                const propertyValue = Reflect.get(target, propertyKey);
+                return isFunction$1(propertyValue) ? propertyValue.bind(target) : propertyValue;
+            }
         },
     });
     return elementInternalsProxy;
@@ -3764,8 +3792,9 @@ function traverseAndSetElements(root, parts, renderer) {
  * @param root - the root element
  * @param vnode - the parent VStatic
  * @param renderer - the renderer to use
+ * @param mount - true this is a first (mount) render as opposed to a subsequent (patch) render
  */
-function applyStaticParts(root, vnode, renderer) {
+function applyStaticParts(root, vnode, renderer, mount) {
     // On the server, we don't support ref (because it relies on renderedCallback), nor do we
     // support event listeners (no interactivity), so traversing parts makes no sense
     if (!process.env.IS_BROWSER) {
@@ -3775,11 +3804,17 @@ function applyStaticParts(root, vnode, renderer) {
     if (isUndefined$1(parts)) {
         return;
     }
-    traverseAndSetElements(root, parts, renderer); // this adds `part.elm` to each `part`
+    // This adds `part.elm` to each `part`. We have to do this on every mount/patch because the `parts`
+    // array is recreated from scratch every time, so each `part.elm` is now undefined.
+    // TODO [#3800]: avoid calling traverseAndSetElements on every re-render
+    traverseAndSetElements(root, parts, renderer);
+    // Currently only event listeners and refs are supported for static vnodes
     for (const part of parts) {
-        // Event listeners are only applied once when mounting, so they are allowed for static vnodes
-        applyEventListeners(part, renderer);
-        // Refs are allowed as well
+        if (mount) {
+            // Event listeners only need to be applied once when mounting
+            applyEventListeners(part, renderer);
+        }
+        // Refs must be updated after every render due to refVNodes getting reset before every render
         applyRefs(part, owner);
     }
 }
@@ -3826,7 +3861,7 @@ function patch(n1, n2, parent, renderer) {
             patchComment(n1, n2, renderer);
             break;
         case 4 /* VNodeType.Static */:
-            n2.elm = n1.elm;
+            patchStatic(n1, n2, renderer);
             break;
         case 5 /* VNodeType.Fragment */:
             patchFragment(n1, n2, parent, renderer);
@@ -3924,6 +3959,11 @@ function mountElement(vnode, parent, anchor, renderer) {
     insertNode(elm, parent, anchor, renderer);
     mountVNodes(vnode.children, elm, renderer, null);
 }
+function patchStatic(n1, n2, renderer) {
+    const elm = (n2.elm = n1.elm);
+    // The `refs` object is blown away in every re-render, so we always need to re-apply them
+    applyStaticParts(elm, n2, renderer, false);
+}
 function patchElement(n1, n2, renderer) {
     const elm = (n2.elm = n1.elm);
     patchElementPropsAndAttrsAndRefs$1(n1, n2, renderer);
@@ -3943,7 +3983,7 @@ function mountStatic(vnode, parent, anchor, renderer) {
         }
     }
     insertNode(elm, parent, anchor, renderer);
-    applyStaticParts(elm, vnode, renderer);
+    applyStaticParts(elm, vnode, renderer, true);
 }
 function mountCustomElement(vnode, parent, anchor, renderer) {
     const { sel, owner } = vnode;
@@ -5369,8 +5409,6 @@ function evaluateTemplate(vm, html) {
                 // add the VM to the list of host VMs that can be re-rendered if html is swapped
                 setActiveVM(vm);
             }
-            // reset the refs; they will be set during the tmpl() instantiation
-            vm.refVNodes = html.hasRefs ? create(null) : null;
             // right before producing the vnodes, we clear up all internal references
             // to custom elements from the template.
             vm.velements = [];
@@ -5871,6 +5909,8 @@ function rehydrate(vm) {
 }
 function patchShadowRoot(vm, newCh) {
     const { renderRoot, children: oldCh, renderer } = vm;
+    // reset the refs; they will be set during `patchChildren`
+    resetRefVNodes(vm);
     // caching the new children collection
     vm.children = newCh;
     if (newCh.length > 0 || oldCh.length > 0) {
@@ -6168,6 +6208,10 @@ function runFormStateRestoreCallback(elm) {
         runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback);
     }
 }
+function resetRefVNodes(vm) {
+    const { cmpTemplate } = vm;
+    vm.refVNodes = !isNull(cmpTemplate) && cmpTemplate.hasRefs ? create(null) : null;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6454,6 +6498,8 @@ function hydrateRoot(vm) {
 function hydrateVM(vm) {
     const children = renderComponent(vm);
     vm.children = children;
+    // reset the refs; they will be set during `hydrateChildren`
+    resetRefVNodes(vm);
     const { renderRoot: parentNode, renderer: { getFirstChild }, } = vm;
     hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
     runRenderedCallback(vm);
@@ -6562,7 +6608,7 @@ function hydrateStaticElement(elm, vnode, renderer) {
         return handleMismatch(elm, vnode, renderer);
     }
     vnode.elm = elm;
-    applyStaticParts(elm, vnode, renderer);
+    applyStaticParts(elm, vnode, renderer, true);
     return elm;
 }
 function hydrateFragment(elm, vnode, renderer) {
@@ -7177,5 +7223,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, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/** version: 3.7.1 */
+/** version: 3.7.2 */
 //# sourceMappingURL=index.js.map