lwc 2.22.0 → 2.23.0

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

@@ -299,9 +299,9 @@ function htmlPropertyToAttribute(propName) {
  * 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.22.0";
+const LWC_VERSION = "2.23.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.22.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -455,7 +455,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.22.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -1260,6 +1260,14 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
 
+function updateComponentValue(vm, key, newValue) {
+    const { cmpFields } = vm;
+    if (newValue !== cmpFields[key]) {
+        cmpFields[key] = newValue;
+        componentValueMutated(vm, key);
+    }
+}
+
 /**
  * Copyright (C) 2017 salesforce.com, inc.
  */
@@ -1892,10 +1900,7 @@ function createBridgeToElementDescriptor(propName, descriptor) {
                 assert.isFalse(isBeingConstructed(vm), `Failed to construct '${getComponentTag(vm)}': The result must not have attributes.`);
                 assert.invariant(!isObject(newValue) || isNull(newValue), `Invalid value "${newValue}" for "${propName}" of ${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);
         },
     };
@@ -2190,10 +2195,7 @@ function createObservedFieldPropertyDescriptor(key) {
         },
         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,
@@ -2380,10 +2382,7 @@ function internalTrackDecorator(key) {
                 assert.invariant(!isUpdatingTemplate, `Updating the template of ${vmBeingRendered} has side effects on the state of ${vm}.${toString$1(key)}`);
             }
             const reactiveOrAnyValue = getReactiveProxy(newValue);
-            if (reactiveOrAnyValue !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = reactiveOrAnyValue;
-                componentValueMutated(vm, key);
-            }
+            updateComponentValue(vm, key, reactiveOrAnyValue);
         },
         enumerable: true,
         configurable: true,
@@ -2422,10 +2421,7 @@ function internalWireFieldDecorator(key) {
              * 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,
@@ -3514,13 +3510,13 @@ function getNearestNativeShadowComponent(vm) {
     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.
@@ -3821,7 +3817,7 @@ function patchChildren(c1, c2, parent, renderer) {
         updateStaticChildren(c1, c2, parent, renderer);
     }
 }
-function patch(n1, n2, renderer) {
+function patch(n1, n2, parent, renderer) {
     var _a, _b;
     if (n1 === n2) {
         return;
@@ -3850,7 +3846,7 @@ function patch(n1, n2, renderer) {
             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;
     }
 }
@@ -3977,22 +3973,32 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
         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) {
@@ -4262,25 +4268,25 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
             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];
@@ -4303,7 +4309,7 @@ function updateDynamicChildren(oldCh, newCh, parent, renderer) {
                         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.
@@ -4363,7 +4369,7 @@ function updateStaticChildren(c1, c2, parent, renderer) {
             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 {
@@ -4697,13 +4703,6 @@ function fid(url) {
     }
     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}>`
  */
@@ -4720,18 +4719,7 @@ function dc(sel, Ctor, data, children = EmptyArray) {
     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
@@ -5625,16 +5613,9 @@ function runRenderedCallback(vm) {
   const {
     def: {
       renderedCallback
-    },
-    renderer: {
-      ssr
     }
   } = vm;
 
-  if (isTrue(ssr)) {
-    return;
-  }
-
   const {
     rendered
   } = Services;
@@ -5884,13 +5865,7 @@ function resetComponentRoot(vm) {
   vm.velements = EmptyArray;
 }
 function scheduleRehydration(vm) {
-  const {
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (isTrue(ssr) || isTrue(vm.isScheduled)) {
+  if (isTrue(vm.isScheduled)) {
     return;
   }
 
@@ -5997,15 +5972,8 @@ class WireContextRegistrationEvent extends CustomEvent {
 }
 
 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);
   };
 }
 
@@ -6829,7 +6797,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.22.0 */
+/* version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7101,14 +7069,6 @@ else {
     };
     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) {
@@ -7135,15 +7095,11 @@ function nextSibling(node) {
     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);
@@ -7239,11 +7195,9 @@ function assertInstanceOfHTMLElement(elm, msg) {
 }
 const HTMLElementExported = HTMLElementConstructor;
 const renderer = {
-    ssr,
     isNativeShadowDefined,
     isSyntheticShadowDefined,
     HTMLElementExported,
-    isHydrating,
     insert,
     remove,
     cloneNode,
@@ -7329,13 +7283,8 @@ function hydrateComponent(element, Ctor, props = {}) {
         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
@@ -7346,13 +7295,8 @@ function hydrateComponent(element, Ctor, props = {}) {
         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);
-    }
 }
 
 /*
@@ -7577,6 +7521,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.22.0 */
+/* version: 2.23.0 */
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, freezeTemplate, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, renderer, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };