lwc 2.22.0 → 2.23.0

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

@@ -368,9 +368,9 @@
   // Increment whenever the LWC template compiler changes
 
 
-  var LWC_VERSION = "2.22.0";
+  var LWC_VERSION = "2.23.0";
   var LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -549,7 +549,7 @@
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -1480,6 +1480,15 @@
   function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
   }
+
+  function updateComponentValue(vm, key, newValue) {
+    var cmpFields = vm.cmpFields;
+
+    if (newValue !== cmpFields[key]) {
+      cmpFields[key] = newValue;
+      componentValueMutated(vm, key);
+    }
+  }
   /**
    * Copyright (C) 2017 salesforce.com, inc.
    */
@@ -2375,11 +2384,7 @@
           assert.invariant(!isObject(newValue) || isNull(newValue), "Invalid value \"".concat(newValue, "\" for \"").concat(propName, "\" of ").concat(vm, ". Value cannot be an object, must be a primitive value."));
         }
 
-        if (newValue !== vm.cmpProps[propName]) {
-          vm.cmpProps[propName] = newValue;
-          componentValueMutated(vm, propName);
-        }
-
+        updateComponentValue(vm, propName, newValue);
         return _set.call(vm.elm, newValue);
       }
     };
@@ -2755,11 +2760,7 @@
       },
       set: function set(newValue) {
         var vm = getAssociatedVM(this);
-
-        if (newValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = newValue;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, newValue);
       },
       enumerable: true,
       configurable: true
@@ -2977,11 +2978,7 @@
         }
 
         var reactiveOrAnyValue = getReactiveProxy(newValue);
-
-        if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-          vm.cmpFields[key] = reactiveOrAnyValue;
-          componentValueMutated(vm, key);
-        }
+        updateComponentValue(vm, key, reactiveOrAnyValue);
       },
       enumerable: true,
       configurable: true
@@ -3025,10 +3022,7 @@
          * 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
@@ -4351,9 +4345,7 @@
   function createStylesheet(vm, stylesheets) {
     var renderMode = vm.renderMode,
         shadowMode = vm.shadowMode,
-        _vm$renderer2 = vm.renderer,
-        ssr = _vm$renderer2.ssr,
-        insertStylesheet = _vm$renderer2.insertStylesheet;
+        insertStylesheet = vm.renderer.insertStylesheet;
 
     if (renderMode === 1
     /* RenderMode.Shadow */
@@ -4363,7 +4355,7 @@
       for (var _i12 = 0; _i12 < stylesheets.length; _i12++) {
         insertStylesheet(stylesheets[_i12]);
       }
-    } 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.
@@ -4749,7 +4741,7 @@
     }
   }
 
-  function patch(n1, n2, renderer) {
+  function patch(n1, n2, parent, renderer) {
     var _a, _b;
 
     if (n1 === n2) {
@@ -4798,7 +4790,7 @@
       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;
     }
   }
@@ -4970,25 +4962,34 @@
     }
   }
 
-  function patchCustomElement(n1, n2, renderer) {
-    var elm = n2.elm = n1.elm;
-    var vm = n2.vm = n1.vm;
-    patchElementPropsAndAttrs$1(n1, n2, renderer);
+  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.
+      var anchor = renderer.nextSibling(n1.elm);
+      unmount(n1, parent, renderer, true);
+      mountCustomElement(n2, parent, anchor, renderer);
+    } else {
+      // Otherwise patch the existing component with new props/attrs/etc.
+      var elm = n2.elm = n1.elm;
+      var 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
+      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);
+      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);
+      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);
+      }
     }
   }
 
@@ -5357,22 +5358,22 @@
       } else if (!isVNode(newEndVnode)) {
         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];
@@ -5395,7 +5396,7 @@
               // New element
               mount(newStartVnode, parent, renderer, oldStartVnode.elm);
             } else {
-              patch(elmToMove, newStartVnode, renderer); // Delete the old child, but copy the array since it is read-only.
+              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.
               // To avoid cloning over and over again, we check `clonedOldCh`
@@ -5465,7 +5466,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 {
             // removing the old vnode since the new one is null
@@ -5880,19 +5881,11 @@
 
     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.
-   */
-
-
-  var DynamicImportedComponentMap = new Map();
-  var dynamicImportedComponentCounter = 0;
   /**
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
 
+
   function dc(sel, Ctor, data) {
     var children = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : EmptyArray;
 
@@ -5911,22 +5904,7 @@
       throw new Error("Invalid LWC Constructor ".concat(toString$1(Ctor), " for custom element <").concat(sel, ">."));
     }
 
-    var 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.
-
-
-    var newData = Object.assign(Object.assign({}, data), {
-      key: "dc:".concat(idx, ":").concat(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
@@ -6934,13 +6912,7 @@
   }
 
   function runRenderedCallback(vm) {
-    var renderedCallback = vm.def.renderedCallback,
-        ssr = vm.renderer.ssr;
-
-    if (isTrue(ssr)) {
-      return;
-    }
-
+    var renderedCallback = vm.def.renderedCallback;
     var rendered = Services.rendered;
 
     if (rendered) {
@@ -7172,9 +7144,7 @@
   }
 
   function scheduleRehydration(vm) {
-    var ssr = vm.renderer.ssr;
-
-    if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+    if (isTrue(vm.isScheduled)) {
       return;
     }
 
@@ -7296,13 +7266,8 @@
   }( /*#__PURE__*/_wrapNativeSuper(CustomEvent));
 
   function createFieldDataCallback(vm, name) {
-    var cmpFields = vm.cmpFields;
     return function (value) {
-      if (value !== vm.cmpFields[name]) {
-        // storing the value in the underlying storage
-        cmpFields[name] = value;
-        componentValueMutated(vm, name);
-      }
+      updateComponentValue(vm, name, value);
     };
   }
 
@@ -8301,7 +8266,7 @@
 
     return ctor;
   }
-  /* version: 2.22.0 */
+  /* version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8629,18 +8594,6 @@
     HTMLElementConstructor.prototype = HTMLElement.prototype;
   }
 
-  var hydrating = false;
-
-  function setIsHydrating(value) {
-    hydrating = value;
-  }
-
-  var ssr = false;
-
-  function isHydrating() {
-    return hydrating;
-  }
-
   var isNativeShadowDefined = _globalThis[KEY__IS_NATIVE_SHADOW_ROOT_DEFINED];
   var isSyntheticShadowDefined = hasOwnProperty$1.call(Element.prototype, KEY__SHADOW_TOKEN);
 
@@ -8673,15 +8626,11 @@
   }
 
   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;
     }
 
@@ -8799,11 +8748,9 @@
 
   var HTMLElementExported = HTMLElementConstructor;
   var renderer = {
-    ssr: ssr,
     isNativeShadowDefined: isNativeShadowDefined,
     isSyntheticShadowDefined: isSyntheticShadowDefined,
     HTMLElementExported: HTMLElementExported,
-    isHydrating: isHydrating,
     insert: insert,
     remove: remove,
     cloneNode: cloneNode,
@@ -8905,13 +8852,8 @@
     }
 
     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);
       var vm = createVMWithProps(element, Ctor, props);
-      hydrateRoot(vm); // set it back since now we finished hydration.
-
-      setIsHydrating(false);
+      hydrateRoot(vm);
     } catch (e) {
       // Fallback: In case there's an error while hydrating, let's log the error, and replace the element content
       //           with the client generated DOM.
@@ -8922,11 +8864,7 @@
       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);
     }
   }
   /*
@@ -9205,7 +9143,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.22.0 */
+  /* version: 2.23.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;