@lwc/engine-core 3.7.1 → 3.7.3

package/dist/framework/modules/static-parts.d.ts

@@ -6,5 +6,6 @@ import { RendererAPI } from '../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
  */
-export declare function applyStaticParts(root: Element, vnode: VStatic, renderer: RendererAPI): void;
+export declare function applyStaticParts(root: Element, vnode: VStatic, renderer: RendererAPI, mount: boolean): void;

package/dist/framework/renderer.d.ts

@@ -43,6 +43,7 @@ export interface RendererAPI {
     insertStylesheet: (content: string, target?: ShadowRoot) => void;
     assertInstanceOfHTMLElement: (elm: any, msg: string) => void;
     createCustomElement: (tagName: string, upgradeCallback: LifecycleCallback, connectedCallback?: LifecycleCallback, disconnectedCallback?: LifecycleCallback, formAssociatedCallback?: LifecycleCallback, formDisabledCallback?: LifecycleCallback, formResetCallback?: LifecycleCallback, formStateRestoreCallback?: LifecycleCallback) => E;
+    defineCustomElement: (tagName: string, connectedCallback?: LifecycleCallback, disconnectedCallback?: LifecycleCallback) => void;
     ownerDocument(elm: E): Document;
     registerContextConsumer: (element: E, adapterContextToken: string, subscriptionPayload: WireContextSubscriptionPayload) => void;
     attachInternals: (elm: E) => ElementInternals;

package/dist/framework/vm.d.ts

@@ -172,4 +172,5 @@ export declare function runFormAssociatedCallback(elm: HTMLElement): void;
 export declare function runFormDisabledCallback(elm: HTMLElement): void;
 export declare function runFormResetCallback(elm: HTMLElement): void;
 export declare function runFormStateRestoreCallback(elm: HTMLElement): void;
+export declare function resetRefVNodes(vm: VM): void;
 export {};

package/dist/index.cjs.js

@@ -1458,12 +1458,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 (shared.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 (shared.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.
@@ -1472,19 +1491,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()
+            shared.hasOwnProperty.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 shared.isFunction(propertyValue) ? propertyValue.bind(target) : propertyValue;
+            }
         },
     });
     return elementInternalsProxy;
@@ -3768,8 +3796,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) {
@@ -3779,11 +3808,17 @@ function applyStaticParts(root, vnode, renderer) {
     if (shared.isUndefined(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);
     }
 }
@@ -3830,7 +3865,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);
@@ -3928,6 +3963,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);
@@ -3947,7 +3987,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;
@@ -5373,8 +5413,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 ? shared.create(null) : null;
             // right before producing the vnodes, we clear up all internal references
             // to custom elements from the template.
             vm.velements = [];
@@ -5875,6 +5913,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) {
@@ -6172,6 +6212,10 @@ function runFormStateRestoreCallback(elm) {
         runFormAssociatedCustomElementCallback(vm, formStateRestoreCallback);
     }
 }
+function resetRefVNodes(vm) {
+    const { cmpTemplate } = vm;
+    vm.refVNodes = !shared.isNull(cmpTemplate) && cmpTemplate.hasRefs ? shared.create(null) : null;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -6458,6 +6502,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);
@@ -6566,7 +6612,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) {
@@ -6624,6 +6670,8 @@ function hydrateCustomElement(elm, vnode, renderer) {
         return handleMismatch(elm, vnode, renderer);
     }
     const { sel, mode, ctor, owner } = vnode;
+    const { defineCustomElement, getTagName } = renderer;
+    defineCustomElement(shared.StringToLowerCase.call(getTagName(elm)));
     const vm = createVM(elm, ctor, renderer, {
         mode,
         owner,
@@ -7223,5 +7271,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 3.7.1 */
+/** version: 3.7.3 */
 //# sourceMappingURL=index.cjs.js.map