lwc 2.22.0 → 2.23.0

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

@@ -415,9 +415,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.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) 2020, salesforce.com, inc.
@@ -526,7 +526,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.22.0 */
+/** version: 2.23.0 */
 
 /* proxy-compat-disable */
 
@@ -1175,6 +1175,13 @@ function patchLightningElementPrototypeWithRestrictions(proto) {
     defineProperties(proto, getLightningElementPrototypeRestrictionsDescriptors(proto));
 }
 
+function updateComponentValue(vm, key, newValue) {
+    const { cmpFields } = vm;
+    if (newValue !== cmpFields[key]) {
+        cmpFields[key] = newValue;
+    }
+}
+
 /**
  * Copyright (C) 2017 salesforce.com, inc.
  */
@@ -1799,9 +1806,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;
-            }
+            updateComponentValue(vm, propName, newValue);
             return set.call(vm.elm, newValue);
         },
     };
@@ -2094,9 +2099,7 @@ function createObservedFieldPropertyDescriptor(key) {
         },
         set(newValue) {
             const vm = getAssociatedVM(this);
-            if (newValue !== vm.cmpFields[key]) {
-                vm.cmpFields[key] = newValue;
-            }
+            updateComponentValue(vm, key, newValue);
         },
         enumerable: true,
         configurable: true,
@@ -2258,9 +2261,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;
-            }
+            updateComponentValue(vm, key, reactiveOrAnyValue);
         },
         enumerable: true,
         configurable: true,
@@ -2298,9 +2299,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;
-            }
+            updateComponentValue(vm, key, value);
         },
         enumerable: true,
         configurable: true,
@@ -3258,38 +3257,20 @@ function getScopeTokenClass(owner) {
     const { cmpTemplate, context } = owner;
     return (context.hasScopedStyles && (cmpTemplate === null || cmpTemplate === void 0 ? void 0 : cmpTemplate.stylesheetToken)) || null;
 }
-function getNearestNativeShadowComponent(vm) {
-    const owner = getNearestShadowComponent(vm);
-    if (!isNull(owner) && owner.shadowMode === 1 /* ShadowMode.Synthetic */) {
-        // Synthetic-within-native is impossible. So if the nearest shadow component is
-        // synthetic, we know we won't find a native component if we go any further.
-        return null;
-    }
-    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 {
         // 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.
         // native shadow or light DOM, SSR
         return ArrayMap.call(stylesheets, createInlineStyleVNode);
     }
-    else {
-        // native shadow or light DOM, DOM renderer
-        const root = getNearestNativeShadowComponent(vm);
-        // null root means a global style
-        const target = isNull(root) ? undefined : root.shadowRoot;
-        for (let i = 0; i < stylesheets.length; i++) {
-            insertStylesheet(stylesheets[i], target);
-        }
-    }
     return null;
 }
 
@@ -3575,7 +3556,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;
@@ -3604,7 +3585,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;
     }
 }
@@ -3731,22 +3712,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) {
@@ -4016,25 +4007,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];
@@ -4057,7 +4048,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.
@@ -4117,7 +4108,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 {
@@ -4451,13 +4442,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}>`
  */
@@ -4474,18 +4458,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
@@ -5321,46 +5294,7 @@ function patchShadowRoot(vm, newCh) {
 
   if (vm.state === 1
   /* VMState.connected */
-  ) {
-    // If the element is connected, that means connectedCallback was already issued, and
-    // any successive rendering should finish with the call to renderedCallback, otherwise
-    // the connectedCallback will take care of calling it in the right order at the end of
-    // the current rehydration process.
-    runRenderedCallback(vm);
-  }
-}
-
-function runRenderedCallback(vm) {
-  const {
-    def: {
-      renderedCallback
-    },
-    renderer: {
-      ssr
-    }
-  } = vm;
-
-  if (isTrue(ssr)) {
-    return;
-  }
-
-  const {
-    rendered
-  } = Services;
-
-  if (rendered) {
-    invokeServiceHook(vm, rendered);
-  }
-
-  if (!isUndefined$1(renderedCallback)) {
-    logOperationStart(4
-    /* OperationId.RenderedCallback */
-    , vm);
-    invokeComponentCallback(vm, renderedCallback);
-    logOperationEnd(4
-    /* OperationId.RenderedCallback */
-    , vm);
-  }
+  ) ;
 }
 
 function runConnectedCallback(vm) {
@@ -5627,14 +5561,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;
-    }
+    updateComponentValue(vm, name, value);
   };
 }
 
@@ -6048,7 +5976,7 @@ function freezeTemplate(tmpl) {
         });
     }
 }
-/* version: 2.22.0 */
+/* version: 2.23.0 */
 
 /*
  * Copyright (c) 2020, salesforce.com, inc.
@@ -6131,10 +6059,6 @@ class HTMLElementImpl {
         return createElement(tagName);
     }
 }
-const ssr = true;
-function isHydrating() {
-    return false;
-}
 const isNativeShadowDefined = false;
 const isSyntheticShadowDefined = false;
 function insert(node, parent, anchor) {
@@ -6373,11 +6297,9 @@ const HTMLElementExported = HTMLElementImpl;
 /* noop */
 const assertInstanceOfHTMLElement = noop;
 const renderer = {
-    ssr,
     isNativeShadowDefined,
     isSyntheticShadowDefined,
     HTMLElementExported,
-    isHydrating,
     insert,
     remove,
     cloneNode,
@@ -6524,6 +6446,6 @@ function renderComponent(tagName, Ctor, props = {}) {
  */
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.22.0 */
+/* version: 2.23.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 };

package/dist/synthetic-shadow/esm/es2017/synthetic-shadow.js

@@ -148,7 +148,7 @@ const KEY__SYNTHETIC_MODE = '$$lwc-synthetic-mode';
 // We use this to detect symbol support in order to avoid the expensive symbol polyfill. Note that
 // we can't use typeof since it will fail when transpiling.
 const hasNativeSymbolSupport = /*@__PURE__*/ (() => Symbol('x').toString() === 'Symbol(x)')();
-/** version: 2.22.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -299,7 +299,7 @@ const elementsFromPoint = hasOwnProperty.call(Document.prototype, 'elementsFromP
 // defaultView can be null when a document has no browsing context. For example, the owner document
 // of a node in a template doesn't have a default view: https://jsfiddle.net/hv9z0q5a/
 const defaultViewGetter = getOwnPropertyDescriptor(Document.prototype, 'defaultView').get;
-const { createComment, createTreeWalker, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName, getElementsByTagNameNS, } = Document.prototype;
+const { createComment, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName, getElementsByTagNameNS, } = Document.prototype;
 // In Firefox v57 and lower, getElementsByName is defined on HTMLDocument.prototype
 // In all other browsers have the method on Document.prototype
 const { getElementsByName } = HTMLDocument.prototype;
@@ -1124,7 +1124,7 @@ if (!_globalThis.lwcRuntimeFlags) {
     Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
 }
 const runtimeFlags = _globalThis.lwcRuntimeFlags;
-/** version: 2.22.0 */
+/** version: 2.23.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -4953,16 +4953,19 @@ defineProperty(Element.prototype, KEY__SHADOW_TOKEN, {
     },
     configurable: true,
 });
+function recursivelySetShadowResolver(node, fn) {
+    node[KEY__SHADOW_RESOLVER] = fn;
+    const childNodes = childNodesGetter.call(node);
+    for (let i = 0, n = childNodes.length; i < n; i++) {
+        recursivelySetShadowResolver(childNodes[i], fn);
+    }
+}
 defineProperty(Element.prototype, KEY__SHADOW_STATIC, {
     set(v) {
         // Marking an element as static will propagate the shadow resolver to the children.
-        const fn = this[KEY__SHADOW_RESOLVER];
         if (v) {
-            const treeWalker = createTreeWalker.call(getOwnerDocument(this), this, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, () => NodeFilter.FILTER_ACCEPT, false);
-            let currentNode;
-            while ((currentNode = treeWalker.nextNode())) {
-                currentNode[KEY__SHADOW_RESOLVER] = fn;
-            }
+            const fn = this[KEY__SHADOW_RESOLVER];
+            recursivelySetShadowResolver(this, fn);
         }
         this[KEY__SHADOW_STATIC_PRIVATE] = v;
     },
@@ -5111,4 +5114,4 @@ if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     }));
   });
 }
-/** version: 2.22.0 */
+/** version: 2.23.0 */

package/dist/synthetic-shadow/iife/es2017/synthetic-shadow.js

@@ -151,7 +151,7 @@
   // We use this to detect symbol support in order to avoid the expensive symbol polyfill. Note that
   // we can't use typeof since it will fail when transpiling.
   const hasNativeSymbolSupport = /*@__PURE__*/ (() => Symbol('x').toString() === 'Symbol(x)')();
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -302,7 +302,7 @@
   // defaultView can be null when a document has no browsing context. For example, the owner document
   // of a node in a template doesn't have a default view: https://jsfiddle.net/hv9z0q5a/
   const defaultViewGetter = getOwnPropertyDescriptor(Document.prototype, 'defaultView').get;
-  const { createComment, createTreeWalker, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName, getElementsByTagNameNS, } = Document.prototype;
+  const { createComment, querySelectorAll, getElementById, getElementsByClassName, getElementsByTagName, getElementsByTagNameNS, } = Document.prototype;
   // In Firefox v57 and lower, getElementsByName is defined on HTMLDocument.prototype
   // In all other browsers have the method on Document.prototype
   const { getElementsByName } = HTMLDocument.prototype;
@@ -1127,7 +1127,7 @@
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
   }
   const runtimeFlags = _globalThis.lwcRuntimeFlags;
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -4956,16 +4956,19 @@
       },
       configurable: true,
   });
+  function recursivelySetShadowResolver(node, fn) {
+      node[KEY__SHADOW_RESOLVER] = fn;
+      const childNodes = childNodesGetter.call(node);
+      for (let i = 0, n = childNodes.length; i < n; i++) {
+          recursivelySetShadowResolver(childNodes[i], fn);
+      }
+  }
   defineProperty(Element.prototype, KEY__SHADOW_STATIC, {
       set(v) {
           // Marking an element as static will propagate the shadow resolver to the children.
-          const fn = this[KEY__SHADOW_RESOLVER];
           if (v) {
-              const treeWalker = createTreeWalker.call(getOwnerDocument(this), this, NodeFilter.SHOW_ELEMENT | NodeFilter.SHOW_COMMENT | NodeFilter.SHOW_TEXT, () => NodeFilter.FILTER_ACCEPT, false);
-              let currentNode;
-              while ((currentNode = treeWalker.nextNode())) {
-                  currentNode[KEY__SHADOW_RESOLVER] = fn;
-              }
+              const fn = this[KEY__SHADOW_RESOLVER];
+              recursivelySetShadowResolver(this, fn);
           }
           this[KEY__SHADOW_STATIC_PRIVATE] = v;
       },
@@ -5114,6 +5117,6 @@
       }));
     });
   }
-  /** version: 2.22.0 */
+  /** version: 2.23.0 */
 
 })();