lwc 2.23.5 → 2.24.0

package/dist/engine-server/esm/es2017/engine-server.js

@@ -432,9 +432,9 @@ function htmlEscape(str, attrMode = false) {
  * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
  */
 // Increment whenever the LWC template compiler changes
-const LWC_VERSION = "2.23.5";
+const LWC_VERSION = "2.24.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.23.5 */
+/** version: 2.24.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -545,7 +545,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.23.5 */
+/** version: 2.24.0 */
 
 /* proxy-compat-disable */
 
@@ -596,6 +596,20 @@ function flattenStylesheets(stylesheets) {
     }
     return list;
 }
+// Set a ref (lwc:ref) on a VM, from a template API
+function setRefVNode(vm, ref, vnode) {
+    if (process.env.NODE_ENV !== 'production' && isUndefined$1(vm.refVNodes)) {
+        throw new Error('refVNodes must be defined when setting a ref');
+    }
+    // If this method is called, then vm.refVNodes is set as the template has refs.
+    // If not, then something went wrong and we threw an error above.
+    const refVNodes = vm.refVNodes;
+    // In cases of conflict (two elements with the same ref), prefer, the last one,
+    // in depth-first traversal order.
+    if (!(ref in refVNodes) || refVNodes[ref].key < vnode.key) {
+        refVNodes[ref] = vnode;
+    }
+}
 
 /*
  * Copyright (c) 2019, salesforce.com, inc.
@@ -1830,6 +1844,8 @@ function createBridgeToElementDescriptor(propName, descriptor) {
         },
     };
 }
+const EMPTY_REFS = freeze(create(null));
+const refsCache = new WeakMap();
 /**
  * This class is the base class for any LWC element.
  * Some elements directly extends this class, others implement it via inheritance.
@@ -2008,6 +2024,70 @@ LightningElement.prototype = {
         }
         return vm.shadowRoot;
     },
+    get refs() {
+        const vm = getAssociatedVM(this);
+        if (isUpdatingTemplate) {
+            if (process.env.NODE_ENV !== 'production') {
+                logError(`this.refs should not be called while ${getComponentTag(vm)} is rendering. Use this.refs only when the DOM is stable, e.g. in renderedCallback().`);
+            }
+            // If the template is in the process of being updated, then we don't want to go through the normal
+            // process of returning the refs and caching them, because the state of the refs is unstable.
+            // This can happen if e.g. a template contains `<div class={foo}></div>` and `foo` is computed
+            // based on `this.refs.bar`.
+            return;
+        }
+        if (process.env.NODE_ENV !== 'production') {
+            warnIfInvokedDuringConstruction(vm, 'refs');
+        }
+        const { refVNodes, hasRefVNodes, cmpTemplate } = vm;
+        // If the `cmpTemplate` is null, that means that the template has not been rendered yet. Most likely this occurs
+        // if `this.refs` is called during the `connectedCallback` phase. The DOM elements have not been rendered yet,
+        // so log a warning. Note we also check `isBeingConstructed()` to avoid a double warning (due to
+        // `warnIfInvokedDuringConstruction` above).
+        if (process.env.NODE_ENV !== 'production' &&
+            isNull(cmpTemplate) &&
+            !isBeingConstructed(vm)) {
+            logError(`this.refs is undefined for ${getComponentTag(vm)}. This is either because the attached template has no "lwc:ref" directive, or this.refs was ` +
+                `invoked before renderedCallback(). Use this.refs only when the referenced HTML elements have ` +
+                `been rendered to the DOM, such as within renderedCallback() or disconnectedCallback().`);
+        }
+        // For backwards compatibility with component written before template refs
+        // were introduced, we return undefined if the template has no refs defined
+        // anywhere. This fixes components that may want to add an expando called `refs`
+        // and are checking if it exists with `if (this.refs)`  before adding it.
+        // Note it is not sufficient to just check if `refVNodes` is null or empty,
+        // because a template may have `lwc:ref` defined within a falsy `if:true` block.
+        if (!hasRefVNodes) {
+            return;
+        }
+        // For templates that are using `lwc:ref`, if there are no refs currently available
+        // (e.g. refs inside of a falsy `if:true` block), we return an empty object.
+        if (isNull(refVNodes)) {
+            return EMPTY_REFS;
+        }
+        // The refNodes can be cached based on the refVNodes, since the refVNodes
+        // are recreated from scratch every time the template is rendered.
+        // This happens with `vm.refVNodes = null` in `template.ts` in `@lwc/engine-core`.
+        let refs = refsCache.get(refVNodes);
+        if (isUndefined$1(refs)) {
+            refs = create(null);
+            for (const key of keys(refVNodes)) {
+                refs[key] = refVNodes[key].elm;
+            }
+            freeze(refs);
+            refsCache.set(refVNodes, refs);
+        }
+        return refs;
+    },
+    // For backwards compat, we allow component authors to set `refs` as an expando
+    set refs(value) {
+        defineProperty(this, 'refs', {
+            configurable: true,
+            enumerable: true,
+            writable: true,
+            value,
+        });
+    },
     get shadowRoot() {
         // From within the component instance, the shadowRoot is always reported as "closed".
         // Authors should rely on this.template instead.
@@ -3430,13 +3510,27 @@ function isLiveBindingProp(sel, key) {
     return sel === 'input' && (key === 'value' || key === 'checked');
 }
 function patchProps(oldVnode, vnode, renderer) {
-    const { props } = vnode.data;
-    if (isUndefined$1(props)) {
+    let { props } = vnode.data;
+    const { spread } = vnode.data;
+    if (isUndefined$1(props) && isUndefined$1(spread)) {
         return;
     }
-    const oldProps = isNull(oldVnode) ? EmptyObject : oldVnode.data.props;
-    if (oldProps === props) {
-        return;
+    let oldProps;
+    if (!isNull(oldVnode)) {
+        oldProps = oldVnode.data.props;
+        const oldSpread = oldVnode.data.spread;
+        if (oldProps === props && oldSpread === spread) {
+            return;
+        }
+        if (isUndefined$1(oldProps)) {
+            oldProps = EmptyObject;
+        }
+        if (!isUndefined$1(oldSpread)) {
+            oldProps = assign({}, oldProps, oldSpread);
+        }
+    }
+    if (!isUndefined$1(spread)) {
+        props = assign({}, props, spread);
     }
     const isFirstPatch = isNull(oldVnode);
     const { elm, sel } = vnode;
@@ -3446,7 +3540,9 @@ function patchProps(oldVnode, vnode, renderer) {
         // Set the property if it's the first time is is patched or if the previous property is
         // different than the one previously set.
         if (isFirstPatch ||
-            cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key])) {
+            cur !== (isLiveBindingProp(sel, key) ? getProperty(elm, key) : oldProps[key]) ||
+            !(key in oldProps) // this is required because the above case will pass when `cur` is `undefined` and key is missing in `oldProps`
+        ) {
             setProperty(elm, key, cur);
         }
     }
@@ -4490,17 +4586,20 @@ function h(sel, data, children = EmptyArray) {
             }
         });
     }
-    let elm;
-    const { key } = data;
-    return {
+    const { key, ref } = data;
+    const vnode = {
         type: 2 /* VNodeType.Element */,
         sel,
         data,
         children,
-        elm,
+        elm: undefined,
         key,
         owner: vmBeingRendered,
     };
+    if (!isUndefined$1(ref)) {
+        setRefVNode(vmBeingRendered, ref, vnode);
+    }
+    return vnode;
 }
 // [t]ab[i]ndex function
 function ti(value) {
@@ -4565,7 +4664,7 @@ function c(sel, Ctor, data, children = EmptyArray) {
             });
         }
     }
-    const { key } = data;
+    const { key, ref } = data;
     let elm, aChildren, vm;
     const vnode = {
         type: 3 /* VNodeType.CustomElement */,
@@ -4581,6 +4680,9 @@ function c(sel, Ctor, data, children = EmptyArray) {
         vm,
     };
     addVNodeToChildLWC(vnode);
+    if (!isUndefined$1(ref)) {
+        setRefVNode(vmBeingRendered, ref, vnode);
+    }
     return vnode;
 }
 // [i]terable node
@@ -5070,6 +5172,10 @@ 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
+            const hasRefVNodes = Boolean(html.hasRefs);
+            vm.hasRefVNodes = hasRefVNodes;
+            vm.refVNodes = hasRefVNodes ? create(null) : null;
             // right before producing the vnodes, we clear up all internal references
             // to custom elements from the template.
             vm.velements = [];
@@ -5422,6 +5528,8 @@ function createVM(elm, ctor, renderer, options) {
     tagName,
     mode,
     owner,
+    refVNodes: null,
+    hasRefVNodes: false,
     children: EmptyArray,
     aChildren: EmptyArray,
     velements: EmptyArray,
@@ -6299,7 +6407,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.23.5 */
+/* version: 2.24.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6769,6 +6877,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.23.5 */
+/* version: 2.24.0 */
 
 export { LightningElement, api$1 as api, createContextProvider, freezeTemplate, getComponentDef, isComponentConstructor, parseFragment, parseFragment as parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderComponent, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, track, unwrap, wire };