lwc 2.22.0 → 2.23.0

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

@@ -294,7 +294,7 @@
       CACHED_PROPERTY_ATTRIBUTE_MAPPING.set(propName, attributeName);
       return attributeName;
   }
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -862,6 +862,14 @@
       }
   });
 
+  function updateComponentValue(vm, key, newValue) {
+      const { cmpFields } = vm;
+      if (newValue !== cmpFields[key]) {
+          cmpFields[key] = newValue;
+          componentValueMutated(vm, key);
+      }
+  }
+
   /**
    * Copyright (C) 2017 salesforce.com, inc.
    */
@@ -1345,10 +1353,7 @@
           },
           set(newValue) {
               const vm = getAssociatedVM(this);
-              if (newValue !== vm.cmpProps[propName]) {
-                  vm.cmpProps[propName] = newValue;
-                  componentValueMutated(vm, propName);
-              }
+              updateComponentValue(vm, propName, newValue);
               return set.call(vm.elm, newValue);
           },
       };
@@ -1577,10 +1582,7 @@
           },
           set(newValue) {
               const vm = getAssociatedVM(this);
-              if (newValue !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = newValue;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, newValue);
           },
           enumerable: true,
           configurable: true,
@@ -1732,10 +1734,7 @@
           set(newValue) {
               const vm = getAssociatedVM(this);
               const reactiveOrAnyValue = getReactiveProxy(newValue);
-              if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = reactiveOrAnyValue;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, reactiveOrAnyValue);
           },
           enumerable: true,
           configurable: true,
@@ -1771,10 +1770,7 @@
                * letting the author to do the wrong thing, but it will keep our
                * system to be backward compatible.
                */
-              if (value !== vm.cmpFields[key]) {
-                  vm.cmpFields[key] = value;
-                  componentValueMutated(vm, key);
-              }
+              updateComponentValue(vm, key, value);
           },
           enumerable: true,
           configurable: true,
@@ -2443,13 +2439,13 @@
       return owner;
   }
   function createStylesheet(vm, stylesheets) {
-      const { renderMode, shadowMode, renderer: { ssr, insertStylesheet }, } = vm;
+      const { renderMode, shadowMode, renderer: { insertStylesheet }, } = vm;
       if (renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */) {
           for (let i = 0; i < stylesheets.length; i++) {
               insertStylesheet(stylesheets[i]);
           }
       }
-      else if (ssr || vm.hydrated) {
+      else if (vm.hydrated) {
           // Note: We need to ensure that during hydration, the stylesheets method is the same as those in ssr.
           //       This works in the client, because the stylesheets are created, and cached in the VM
           //       the first time the VM renders.
@@ -2746,7 +2742,7 @@
           updateStaticChildren(c1, c2, parent, renderer);
       }
   }
-  function patch(n1, n2, renderer) {
+  function patch(n1, n2, parent, renderer) {
       var _a, _b;
       if (n1 === n2) {
           return;
@@ -2767,7 +2763,7 @@
               patchElement(n1, n2, (_a = n2.data.renderer) !== null && _a !== void 0 ? _a : renderer);
               break;
           case 3 /* VNodeType.CustomElement */:
-              patchCustomElement(n1, n2, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
+              patchCustomElement(n1, n2, parent, (_b = n2.data.renderer) !== null && _b !== void 0 ? _b : renderer);
               break;
       }
   }
@@ -2889,22 +2885,32 @@
           appendVM(vm);
       }
   }
-  function patchCustomElement(n1, n2, renderer) {
-      const elm = (n2.elm = n1.elm);
-      const vm = (n2.vm = n1.vm);
-      patchElementPropsAndAttrs$1(n1, n2, renderer);
-      if (!isUndefined$1(vm)) {
-          // in fallback mode, the allocation will always set children to
-          // empty and delegate the real allocation to the slot elements
-          allocateChildren(n2, vm);
+  function patchCustomElement(n1, n2, parent, renderer) {
+      if (n1.ctor !== n2.ctor) {
+          // If the constructor, unmount the current component and mount a new one using the new
+          // constructor.
+          const anchor = renderer.nextSibling(n1.elm);
+          unmount(n1, parent, renderer, true);
+          mountCustomElement(n2, parent, anchor, renderer);
       }
-      // in fallback mode, the children will be always empty, so, nothing
-      // will happen, but in native, it does allocate the light dom
-      patchChildren(n1.children, n2.children, elm, renderer);
-      if (!isUndefined$1(vm)) {
-          // this will probably update the shadowRoot, but only if the vm is in a dirty state
-          // this is important to preserve the top to bottom synchronous rendering phase.
-          rerenderVM(vm);
+      else {
+          // Otherwise patch the existing component with new props/attrs/etc.
+          const elm = (n2.elm = n1.elm);
+          const vm = (n2.vm = n1.vm);
+          patchElementPropsAndAttrs$1(n1, n2, renderer);
+          if (!isUndefined$1(vm)) {
+              // in fallback mode, the allocation will always set children to
+              // empty and delegate the real allocation to the slot elements
+              allocateChildren(n2, vm);
+          }
+          // in fallback mode, the children will be always empty, so, nothing
+          // will happen, but in native, it does allocate the light dom
+          patchChildren(n1.children, n2.children, elm, renderer);
+          if (!isUndefined$1(vm)) {
+              // this will probably update the shadowRoot, but only if the vm is in a dirty state
+              // this is important to preserve the top to bottom synchronous rendering phase.
+              rerenderVM(vm);
+          }
       }
   }
   function mountVNodes(vnodes, parent, renderer, anchor, start = 0, end = vnodes.length) {
@@ -3142,25 +3148,25 @@
               newEndVnode = newCh[--newEndIdx];
           }
           else if (isSameVnode(oldStartVnode, newStartVnode)) {
-              patch(oldStartVnode, newStartVnode, renderer);
+              patch(oldStartVnode, newStartVnode, parent, renderer);
               oldStartVnode = oldCh[++oldStartIdx];
               newStartVnode = newCh[++newStartIdx];
           }
           else if (isSameVnode(oldEndVnode, newEndVnode)) {
-              patch(oldEndVnode, newEndVnode, renderer);
+              patch(oldEndVnode, newEndVnode, parent, renderer);
               oldEndVnode = oldCh[--oldEndIdx];
               newEndVnode = newCh[--newEndIdx];
           }
           else if (isSameVnode(oldStartVnode, newEndVnode)) {
               // Vnode moved right
-              patch(oldStartVnode, newEndVnode, renderer);
+              patch(oldStartVnode, newEndVnode, parent, renderer);
               insertNode(oldStartVnode.elm, parent, renderer.nextSibling(oldEndVnode.elm), renderer);
               oldStartVnode = oldCh[++oldStartIdx];
               newEndVnode = newCh[--newEndIdx];
           }
           else if (isSameVnode(oldEndVnode, newStartVnode)) {
               // Vnode moved left
-              patch(oldEndVnode, newStartVnode, renderer);
+              patch(oldEndVnode, newStartVnode, parent, renderer);
               insertNode(newStartVnode.elm, parent, oldStartVnode.elm, renderer);
               oldEndVnode = oldCh[--oldEndIdx];
               newStartVnode = newCh[++newStartIdx];
@@ -3183,7 +3189,7 @@
                           mount(newStartVnode, parent, renderer, oldStartVnode.elm);
                       }
                       else {
-                          patch(elmToMove, newStartVnode, renderer);
+                          patch(elmToMove, newStartVnode, parent, renderer);
                           // Delete the old child, but copy the array since it is read-only.
                           // The `oldCh` will be GC'ed after `updateDynamicChildren` is complete,
                           // so we only care about the `oldCh` object inside this function.
@@ -3243,7 +3249,7 @@
               if (isVNode(n1)) {
                   if (isVNode(n2)) {
                       // both vnodes are equivalent, and we just need to patch them
-                      patch(n1, n2, renderer);
+                      patch(n1, n2, parent, renderer);
                       anchor = n2.elm;
                   }
                   else {
@@ -3472,13 +3478,6 @@
       }
       return url;
   }
-  /**
-   * Map to store an index value assigned to any dynamic component reference ingested
-   * by dc() api. This allows us to generate a unique unique per template per dynamic
-   * component reference to avoid diffing algo mismatches.
-   */
-  const DynamicImportedComponentMap = new Map();
-  let dynamicImportedComponentCounter = 0;
   /**
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
@@ -3490,18 +3489,7 @@
       if (!isComponentConstructor(Ctor)) {
           throw new Error(`Invalid LWC Constructor ${toString$1(Ctor)} for custom element <${sel}>.`);
       }
-      let idx = DynamicImportedComponentMap.get(Ctor);
-      if (isUndefined$1(idx)) {
-          idx = dynamicImportedComponentCounter++;
-          DynamicImportedComponentMap.set(Ctor, idx);
-      }
-      // the new vnode key is a mix of idx and compiler key, this is required by the diffing algo
-      // to identify different constructors as vnodes with different keys to avoid reusing the
-      // element used for previous constructors.
-      // Shallow clone is necessary here becuase VElementData may be shared across VNodes due to
-      // hoisting optimization.
-      const newData = Object.assign(Object.assign({}, data), { key: `dc:${idx}:${data.key}` });
-      return c(sel, Ctor, newData, children);
+      return c(sel, Ctor, data, children);
   }
   /**
    * slow children collection marking mechanism. this API allows the compiler to signal
@@ -4221,16 +4209,9 @@
     const {
       def: {
         renderedCallback
-      },
-      renderer: {
-        ssr
       }
     } = vm;
 
-    if (isTrue(ssr)) {
-      return;
-    }
-
     const {
       rendered
     } = Services;
@@ -4471,13 +4452,7 @@
     vm.velements = EmptyArray;
   }
   function scheduleRehydration(vm) {
-    const {
-      renderer: {
-        ssr
-      }
-    } = vm;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -4567,15 +4542,8 @@
   }
 
   function createFieldDataCallback(vm, name) {
-    const {
-      cmpFields
-    } = vm;
     return value => {
-      if (value !== vm.cmpFields[name]) {
-        // storing the value in the underlying storage
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
-      }
+      updateComponentValue(vm, name, value);
     };
   }
 
@@ -5230,7 +5198,7 @@
       }
       return ctor;
   }
-  /* version: 2.22.0 */
+  /* version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -5493,14 +5461,6 @@
       };
       HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
-  let hydrating = false;
-  function setIsHydrating(value) {
-      hydrating = value;
-  }
-  const ssr = false;
-  function isHydrating() {
-      return hydrating;
-  }
   const isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   const isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
   function cloneNode(node, deep) {
@@ -5527,15 +5487,11 @@
       return node.nextSibling;
   }
   function attachShadow(element, options) {
-      // `hydrating` will be true in two cases:
+      // `shadowRoot` will be non-null in two cases:
       //   1. upon initial load with an SSR-generated DOM, while in Shadow render mode
       //   2. when a webapp author places <c-app> in their static HTML and mounts their
-      //      root component with customeElement.define('c-app', Ctor)
-      //
-      // The second case can be treated as a failed hydration with nominal impact
-      // to performance. However, because <c-app> won't have a <template shadowroot>
-      // declarative child, `element.shadowRoot` is `null`.
-      if (hydrating && element.shadowRoot) {
+      //      root component with customElement.define('c-app', Ctor)
+      if (!isNull(element.shadowRoot)) {
           return element.shadowRoot;
       }
       return element.attachShadow(options);
@@ -5625,11 +5581,9 @@
   }
   const HTMLElementExported = HTMLElementConstructor;
   const renderer = {
-      ssr,
       isNativeShadowDefined,
       isSyntheticShadowDefined,
       HTMLElementExported,
-      isHydrating,
       insert,
       remove,
       cloneNode,
@@ -5715,13 +5669,8 @@
           return;
       }
       try {
-          // Let the renderer know we are hydrating, so it does not replace the existing shadowRoot
-          // and uses the same algo to create the stylesheets as in SSR.
-          setIsHydrating(true);
           const vm = createVMWithProps(element, Ctor, props);
           hydrateRoot(vm);
-          // set it back since now we finished hydration.
-          setIsHydrating(false);
       }
       catch (e) {
           // Fallback: In case there's an error while hydrating, let's log the error, and replace the element content
@@ -5732,13 +5681,8 @@
           resetShadowRootAndLightDom(element, Ctor);
           // we need to recreate the vm with the hydration flag on, so it re-uses the existing shadowRoot.
           createVMWithProps(element, Ctor, props);
-          setIsHydrating(false);
           connectRootElement(element);
       }
-      finally {
-          // in case there's an error during recovery
-          setIsHydrating(false);
-      }
   }
 
   /*
@@ -5955,7 +5899,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.22.0 */
+  /* version: 2.23.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;