lwc 2.23.5 → 2.24.0

package/dist/engine-dom/umd/es2017/engine-dom.js

@@ -305,9 +305,9 @@
    * 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) 2018 salesforce.com, inc.
@@ -389,7 +389,7 @@
           patch$1(propName);
       }
   }
-  /** version: 2.23.5 */
+  /** version: 2.24.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -468,7 +468,7 @@
           setFeatureFlag(name, value);
       }
   }
-  /** version: 2.23.5 */
+  /** version: 2.24.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -602,6 +602,20 @@
       }
       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.
@@ -1918,6 +1932,8 @@
           },
       };
   }
+  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.
@@ -2097,6 +2113,70 @@
           }
           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.
@@ -3685,13 +3765,27 @@
       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;
@@ -3701,7 +3795,9 @@
           // 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`
+          ) {
               // Additional verification if properties are supported by the element
               // Validation relies on html properties and public properties being defined on the element,
               // SSR has its own custom validation.
@@ -4761,17 +4857,20 @@
               }
           });
       }
-      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) {
@@ -4836,7 +4935,7 @@
               });
           }
       }
-      const { key } = data;
+      const { key, ref } = data;
       let elm, aChildren, vm;
       const vnode = {
           type: 3 /* VNodeType.CustomElement */,
@@ -4852,6 +4951,9 @@
           vm,
       };
       addVNodeToChildLWC(vnode);
+      if (!isUndefined$1(ref)) {
+          setRefVNode(vmBeingRendered, ref, vnode);
+      }
       return vnode;
   }
   // [i]terable node
@@ -5380,6 +5482,10 @@
                   // 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 = [];
@@ -5738,6 +5844,8 @@
       tagName,
       mode,
       owner,
+      refVNodes: null,
+      hasRefVNodes: false,
       children: EmptyArray,
       aChildren: EmptyArray,
       velements: EmptyArray,
@@ -7140,7 +7248,7 @@
       }
       return ctor;
   }
-  /* version: 2.23.5 */
+  /* version: 2.24.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -7301,20 +7409,59 @@
    * @param baseRenderer Either null or the base renderer imported from 'lwc'.
    */
   function rendererFactory(baseRenderer) {
-      // Util functions
-      function assertInvariant(value, msg) {
+      const renderer = (function (exports) {
+
+      /**
+       * Copyright (C) 2018 salesforce.com, inc.
+       */
+      /*
+       * Copyright (c) 2018, salesforce.com, inc.
+       * All rights reserved.
+       * SPDX-License-Identifier: MIT
+       * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+       */
+      function invariant(value, msg) {
           if (!value) {
               throw new Error(`Invariant Violation: ${msg}`);
           }
       }
-      function isNull(obj) {
-          return obj === null;
+      function isTrue$1(value, msg) {
+          if (!value) {
+              throw new Error(`Assert Violation: ${msg}`);
+          }
       }
+      function isFalse$1(value, msg) {
+          if (value) {
+              throw new Error(`Assert Violation: ${msg}`);
+          }
+      }
+      function fail(msg) {
+          throw new Error(msg);
+      }
+
+      var assert = /*#__PURE__*/Object.freeze({
+          __proto__: null,
+          invariant: invariant,
+          isTrue: isTrue$1,
+          isFalse: isFalse$1,
+          fail: fail
+      });
       function isUndefined(obj) {
           return obj === undefined;
       }
-      let getCustomElement;
-      let defineCustomElement;
+      function isNull(obj) {
+          return obj === null;
+      }
+      /** version: 2.24.0 */
+
+      /*
+       * Copyright (c) 2018, salesforce.com, inc.
+       * All rights reserved.
+       * SPDX-License-Identifier: MIT
+       * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+       */
+      exports.getCustomElement = void 0;
+      exports.defineCustomElement = void 0;
       let HTMLElementConstructor;
       function isCustomElementRegistryAvailable() {
           if (typeof customElements === 'undefined') {
@@ -7340,21 +7487,21 @@
           }
       }
       if (isCustomElementRegistryAvailable()) {
-          getCustomElement = customElements.get.bind(customElements);
-          defineCustomElement = customElements.define.bind(customElements);
+          exports.getCustomElement = customElements.get.bind(customElements);
+          exports.defineCustomElement = customElements.define.bind(customElements);
           HTMLElementConstructor = HTMLElement;
       }
       else {
           const registry = Object.create(null);
           const reverseRegistry = new WeakMap();
-          defineCustomElement = function define(name, ctor) {
+          exports.defineCustomElement = function define(name, ctor) {
               if (name !== String.prototype.toLowerCase.call(name) || registry[name]) {
                   throw new TypeError(`Invalid Registration`);
               }
               registry[name] = ctor;
               reverseRegistry.set(ctor, name);
           };
-          getCustomElement = function get(name) {
+          exports.getCustomElement = function get(name) {
               return registry[name];
           };
           HTMLElementConstructor = function HTMLElement() {
@@ -7386,12 +7533,12 @@
       function createComment(content) {
           return document.createComment(content);
       }
-      let createFragment;
+      exports.createFragment = void 0;
       // IE11 lacks support for this feature
       const SUPPORTS_TEMPLATE = typeof HTMLTemplateElement === 'function';
       if (SUPPORTS_TEMPLATE) {
           // Parse the fragment HTML string into DOM
-          createFragment = function (html) {
+          exports.createFragment = function (html) {
               const template = document.createElement('template');
               template.innerHTML = html;
               return template.content.firstChild;
@@ -7423,7 +7570,7 @@
               return (/<([a-z][^/\0>\x20\t\r\n\f]+)/i.exec(text) || ['', ''])[1].toLowerCase();
           };
           // Via https://github.com/webcomponents/polyfills/blob/ee1db33/packages/template/template.js#L295-L320
-          createFragment = function (html) {
+          exports.createFragment = function (html) {
               const wrapperTags = topLevelWrappingMap[getTagName(html)];
               if (!isUndefined(wrapperTags)) {
                   for (const wrapperTag of wrapperTags) {
@@ -7543,47 +7690,47 @@
           return node.isConnected;
       }
       function assertInstanceOfHTMLElement(elm, msg) {
-          assertInvariant(elm instanceof HTMLElement, msg);
+          assert.invariant(elm instanceof HTMLElement, msg);
       }
       const HTMLElementExported = HTMLElementConstructor;
-      const renderer = {
-          HTMLElementExported,
-          insert,
-          remove,
-          cloneNode,
-          createFragment,
-          createElement,
-          createText,
-          createComment,
-          nextSibling,
-          attachShadow,
-          getProperty,
-          setProperty,
-          setText,
-          getAttribute,
-          setAttribute,
-          removeAttribute,
-          addEventListener,
-          removeEventListener,
-          dispatchEvent,
-          getClassList,
-          setCSSStyleProperty,
-          getBoundingClientRect,
-          querySelector,
-          querySelectorAll,
-          getElementsByTagName,
-          getElementsByClassName,
-          getChildren,
-          getChildNodes,
-          getFirstChild,
-          getFirstElementChild,
-          getLastChild,
-          getLastElementChild,
-          isConnected,
-          assertInstanceOfHTMLElement,
-          defineCustomElement,
-          getCustomElement,
-      };
+
+      exports.HTMLElementExported = HTMLElementExported;
+      exports.addEventListener = addEventListener;
+      exports.assertInstanceOfHTMLElement = assertInstanceOfHTMLElement;
+      exports.attachShadow = attachShadow;
+      exports.cloneNode = cloneNode;
+      exports.createComment = createComment;
+      exports.createElement = createElement;
+      exports.createText = createText;
+      exports.dispatchEvent = dispatchEvent;
+      exports.getAttribute = getAttribute;
+      exports.getBoundingClientRect = getBoundingClientRect;
+      exports.getChildNodes = getChildNodes;
+      exports.getChildren = getChildren;
+      exports.getClassList = getClassList;
+      exports.getElementsByClassName = getElementsByClassName;
+      exports.getElementsByTagName = getElementsByTagName;
+      exports.getFirstChild = getFirstChild;
+      exports.getFirstElementChild = getFirstElementChild;
+      exports.getLastChild = getLastChild;
+      exports.getLastElementChild = getLastElementChild;
+      exports.getProperty = getProperty;
+      exports.insert = insert;
+      exports.isConnected = isConnected;
+      exports.nextSibling = nextSibling;
+      exports.querySelector = querySelector;
+      exports.querySelectorAll = querySelectorAll;
+      exports.remove = remove;
+      exports.removeAttribute = removeAttribute;
+      exports.removeEventListener = removeEventListener;
+      exports.setAttribute = setAttribute;
+      exports.setCSSStyleProperty = setCSSStyleProperty;
+      exports.setProperty = setProperty;
+      exports.setText = setText;
+
+      return exports;
+
+  })({});
       // Meant to inherit any properties passed via the base renderer as the argument to the factory.
       Object.setPrototypeOf(renderer, baseRenderer);
       return renderer;
@@ -7924,7 +8071,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.23.5 */
+  /* version: 2.24.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;