lwc 2.8.0 → 2.9.0

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

@@ -303,7 +303,7 @@ function htmlPropertyToAttribute(propName) {
 const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
 const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
 const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-/** version: 2.8.0 */
+/** version: 2.9.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -480,7 +480,7 @@ function setFeatureFlagForTest(name, value) {
     setFeatureFlag(name, value);
   }
 }
-/** version: 2.8.0 */
+/** version: 2.9.0 */
 
 /* proxy-compat-disable */
 
@@ -554,6 +554,19 @@ function parseStyleText(cssText) {
   }
 
   return styleMap;
+} // Make a shallow copy of an object but omit the given key
+
+
+function cloneAndOmitKey(object, keyToOmit) {
+  const result = {};
+
+  for (const key of Object.keys(object)) {
+    if (key !== keyToOmit) {
+      result[key] = object[key];
+    }
+  }
+
+  return result;
 } //
 // Primitives
 //
@@ -4792,11 +4805,13 @@ function fallbackElmHook(elm, vnode) {
     ) {
       // this element will now accept any manual content inserted into it
       observeElementChildNodes(elm);
-    } // when running in synthetic shadow mode, we need to set the shadowToken value
-    // into each element from the template, so they can be styled accordingly.
-
+    }
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      // when running in synthetic shadow mode, we need to set the shadowToken value
+      // into each element from the template, so they can be styled accordingly.
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   if (process.env.NODE_ENV !== 'production') {
@@ -4883,7 +4898,9 @@ function createViewModelHook(elm, vnode) {
     } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
     // into each element from the template, so they can be styled accordingly.
 
-    setElementShadowToken(elm, stylesheetToken);
+    if (!isUndefined$1(stylesheetToken)) {
+      setElementShadowToken(elm, stylesheetToken);
+    }
   }
 
   vm = createVM(elm, ctor, {
@@ -5064,6 +5081,7 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
   let idxInOld;
   let elmToMove;
   let before;
+  let clonedOldCh = false;
 
   while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
     if (!isVNode(oldStartVnode)) {
@@ -5115,7 +5133,18 @@ function updateDynamicChildren(parentElm, oldCh, newCh) {
             newStartVnode.hook.create(newStartVnode);
             newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
           } else {
-            patchVnode(elmToMove, newStartVnode);
+            patchVnode(elmToMove, newStartVnode); // 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`
+            // and only clone once.
+
+            if (!clonedOldCh) {
+              clonedOldCh = true;
+              oldCh = [...oldCh];
+            } // We've already cloned at least once, so it's no longer read-only
+
+
             oldCh[idxInOld] = undefined;
             newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
           }
@@ -5212,7 +5241,7 @@ function addVNodeToChildLWC(vnode) {
 } // [h]tml node
 
 
-function h(sel, data, children) {
+function h(sel, data, children = EmptyArray) {
   const vmBeingRendered = getVMBeingRendered();
 
   if (process.env.NODE_ENV !== 'production') {
@@ -5610,7 +5639,7 @@ let dynamicImportedComponentCounter = 0;
  * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
  */
 
-function dc(sel, Ctor, data, children) {
+function dc(sel, Ctor, data, children = EmptyArray) {
   if (process.env.NODE_ENV !== 'production') {
     assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
     assert.isTrue(isObject(data), `dc() 3nd argument data must be an object.`);
@@ -5634,10 +5663,14 @@ function dc(sel, Ctor, data, children) {
   } // 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.
 
 
-  data.key = `dc:${idx}:${data.key}`;
-  return c(sel, Ctor, data, children);
+  const newData = Object.assign(Object.assign({}, data), {
+    key: `dc:${idx}:${data.key}`
+  });
+  return c(sel, Ctor, newData, children);
 }
 /**
  * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5757,12 +5790,14 @@ function updateStylesheetToken(vm, template) {
     hasTokenInAttribute: oldHasTokenInAttribute
   } = context;
 
-  if (oldHasTokenInClass) {
-    getClassList$1(elm).remove(makeHostToken(oldToken));
-  }
+  if (!isUndefined$1(oldToken)) {
+    if (oldHasTokenInClass) {
+      getClassList$1(elm).remove(makeHostToken(oldToken));
+    }
 
-  if (oldHasTokenInAttribute) {
-    removeAttribute$1(elm, makeHostToken(oldToken));
+    if (oldHasTokenInAttribute) {
+      removeAttribute$1(elm, makeHostToken(oldToken));
+    }
   } // Apply the new template styling token to the host element, if the new template has any
   // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -6567,7 +6602,10 @@ function hydrateElement(vnode, node) {
 
     if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
       if (elm.innerHTML === props.innerHTML) {
-        delete props.innerHTML;
+        // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+        vnode.data = Object.assign(Object.assign({}, vnode.data), {
+          props: cloneAndOmitKey(props, 'innerHTML')
+        });
       } else {
         logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
       }
@@ -7864,7 +7902,7 @@ function setHooks(hooks) {
   hooksAreSet = true;
   setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
 }
-/* version: 2.8.0 */
+/* version: 2.9.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -8495,30 +8533,31 @@ function getComponentConstructor(elm) {
 
 const _Node = Node;
 /**
- * EXPERIMENTAL: This function detects whether or not a Node is controlled by a LWC template. This
- * API is subject to change or being removed.
+ * EXPERIMENTAL: The purpose of this function is to detect shadowed nodes. THIS API WILL BE REMOVED
+ * ONCE LOCKER V1 IS NO LONGER SUPPORTED.
  */
 
-function isNodeFromTemplate(node) {
+function isNodeShadowed(node) {
   if (isFalse(node instanceof _Node)) {
     return false;
-  } // TODO [#1250]: skipping the shadowRoot instances itself makes no sense, we need to revisit
-  // this with locker
+  } // It's debatable whether shadow root instances should be considered as shadowed, but we keep
+  // this unchanged for legacy reasons (#1250).
 
 
   if (node instanceof ShadowRoot) {
     return false;
   }
 
-  if (isSyntheticShadowDefined) {
-    // TODO [#1252]: old behavior that is still used by some pieces of the platform,
-    // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
-    // used, will be considered global elements.
-    return !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
-  }
+  const rootNode = node.getRootNode(); // Handle the native case. We can return early here because an invariant of LWC is that
+  // synthetic roots cannot be descendants of native roots.
+
+  if (rootNode instanceof ShadowRoot && isFalse(hasOwnProperty$1.call(getPrototypeOf$1(rootNode), 'synthetic'))) {
+    return true;
+  } // TODO [#1252]: Old behavior that is still used by some pieces of the platform. Manually
+  // inserted nodes without the `lwc:dom=manual` directive will be considered as global elements.
+
 
-  const root = node.getRootNode();
-  return root instanceof ShadowRoot;
+  return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
 }
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -8563,6 +8602,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.8.0 */
+/* version: 2.9.0 */
 
-export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
+export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, deprecatedBuildCustomElementConstructor as buildCustomElementConstructor, createContextProvider, createElement, getComponentConstructor, getComponentDef, hydrateComponent, isComponentConstructor, isNodeShadowed as isNodeFromTemplate, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };

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

@@ -306,7 +306,7 @@ var LWC = (function (exports) {
   const XML_NAMESPACE = 'http://www.w3.org/XML/1998/namespace';
   const SVG_NAMESPACE = 'http://www.w3.org/2000/svg';
   const XLINK_NAMESPACE = 'http://www.w3.org/1999/xlink';
-  /** version: 2.8.0 */
+  /** version: 2.9.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -483,7 +483,7 @@ var LWC = (function (exports) {
       setFeatureFlag(name, value);
     }
   }
-  /** version: 2.8.0 */
+  /** version: 2.9.0 */
 
   /* proxy-compat-disable */
 
@@ -557,6 +557,19 @@ var LWC = (function (exports) {
     }
 
     return styleMap;
+  } // Make a shallow copy of an object but omit the given key
+
+
+  function cloneAndOmitKey(object, keyToOmit) {
+    const result = {};
+
+    for (const key of Object.keys(object)) {
+      if (key !== keyToOmit) {
+        result[key] = object[key];
+      }
+    }
+
+    return result;
   } //
   // Primitives
   //
@@ -4795,11 +4808,13 @@ var LWC = (function (exports) {
       ) {
         // this element will now accept any manual content inserted into it
         observeElementChildNodes(elm);
-      } // when running in synthetic shadow mode, we need to set the shadowToken value
-      // into each element from the template, so they can be styled accordingly.
-
+      }
 
-      setElementShadowToken(elm, stylesheetToken);
+      if (!isUndefined$1(stylesheetToken)) {
+        // when running in synthetic shadow mode, we need to set the shadowToken value
+        // into each element from the template, so they can be styled accordingly.
+        setElementShadowToken(elm, stylesheetToken);
+      }
     }
 
     if (process.env.NODE_ENV !== 'production') {
@@ -4886,7 +4901,9 @@ var LWC = (function (exports) {
       } = owner.context; // when running in synthetic shadow mode, we need to set the shadowToken value
       // into each element from the template, so they can be styled accordingly.
 
-      setElementShadowToken(elm, stylesheetToken);
+      if (!isUndefined$1(stylesheetToken)) {
+        setElementShadowToken(elm, stylesheetToken);
+      }
     }
 
     vm = createVM(elm, ctor, {
@@ -5067,6 +5084,7 @@ var LWC = (function (exports) {
     let idxInOld;
     let elmToMove;
     let before;
+    let clonedOldCh = false;
 
     while (oldStartIdx <= oldEndIdx && newStartIdx <= newEndIdx) {
       if (!isVNode(oldStartVnode)) {
@@ -5118,7 +5136,18 @@ var LWC = (function (exports) {
               newStartVnode.hook.create(newStartVnode);
               newStartVnode.hook.insert(newStartVnode, parentElm, oldStartVnode.elm);
             } else {
-              patchVnode(elmToMove, newStartVnode);
+              patchVnode(elmToMove, newStartVnode); // 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`
+              // and only clone once.
+
+              if (!clonedOldCh) {
+                clonedOldCh = true;
+                oldCh = [...oldCh];
+              } // We've already cloned at least once, so it's no longer read-only
+
+
               oldCh[idxInOld] = undefined;
               newStartVnode.hook.move(elmToMove, parentElm, oldStartVnode.elm);
             }
@@ -5215,7 +5244,7 @@ var LWC = (function (exports) {
   } // [h]tml node
 
 
-  function h(sel, data, children) {
+  function h(sel, data, children = EmptyArray) {
     const vmBeingRendered = getVMBeingRendered();
 
     if (process.env.NODE_ENV !== 'production') {
@@ -5613,7 +5642,7 @@ var LWC = (function (exports) {
    * create a dynamic component via `<x-foo lwc:dynamic={Ctor}>`
    */
 
-  function dc(sel, Ctor, data, children) {
+  function dc(sel, Ctor, data, children = EmptyArray) {
     if (process.env.NODE_ENV !== 'production') {
       assert.isTrue(isString(sel), `dc() 1st argument sel must be a string.`);
       assert.isTrue(isObject(data), `dc() 3nd argument data must be an object.`);
@@ -5637,10 +5666,14 @@ var LWC = (function (exports) {
     } // 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.
 
 
-    data.key = `dc:${idx}:${data.key}`;
-    return c(sel, Ctor, data, children);
+    const newData = Object.assign(Object.assign({}, data), {
+      key: `dc:${idx}:${data.key}`
+    });
+    return c(sel, Ctor, newData, children);
   }
   /**
    * slow children collection marking mechanism. this API allows the compiler to signal
@@ -5760,12 +5793,14 @@ var LWC = (function (exports) {
       hasTokenInAttribute: oldHasTokenInAttribute
     } = context;
 
-    if (oldHasTokenInClass) {
-      getClassList$1(elm).remove(makeHostToken(oldToken));
-    }
+    if (!isUndefined$1(oldToken)) {
+      if (oldHasTokenInClass) {
+        getClassList$1(elm).remove(makeHostToken(oldToken));
+      }
 
-    if (oldHasTokenInAttribute) {
-      removeAttribute$1(elm, makeHostToken(oldToken));
+      if (oldHasTokenInAttribute) {
+        removeAttribute$1(elm, makeHostToken(oldToken));
+      }
     } // Apply the new template styling token to the host element, if the new template has any
     // associated stylesheets. In the case of light DOM, also ensure there is at least one scoped stylesheet.
 
@@ -6570,7 +6605,10 @@ var LWC = (function (exports) {
 
       if (!isUndefined$1(props) && !isUndefined$1(props.innerHTML)) {
         if (elm.innerHTML === props.innerHTML) {
-          delete props.innerHTML;
+          // Do a shallow clone since VNodeData may be shared across VNodes due to hoist optimization
+          vnode.data = Object.assign(Object.assign({}, vnode.data), {
+            props: cloneAndOmitKey(props, 'innerHTML')
+          });
         } else {
           logWarn(`Mismatch hydrating element <${elm.tagName.toLowerCase()}>: innerHTML values do not match for element, will recover from the difference`, vnode.owner);
         }
@@ -7867,7 +7905,7 @@ var LWC = (function (exports) {
     hooksAreSet = true;
     setSanitizeHtmlContentHook(hooks.sanitizeHtmlContent);
   }
-  /* version: 2.8.0 */
+  /* version: 2.9.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8498,30 +8536,31 @@ var LWC = (function (exports) {
 
   const _Node = Node;
   /**
-   * EXPERIMENTAL: This function detects whether or not a Node is controlled by a LWC template. This
-   * API is subject to change or being removed.
+   * EXPERIMENTAL: The purpose of this function is to detect shadowed nodes. THIS API WILL BE REMOVED
+   * ONCE LOCKER V1 IS NO LONGER SUPPORTED.
    */
 
-  function isNodeFromTemplate(node) {
+  function isNodeShadowed(node) {
     if (isFalse(node instanceof _Node)) {
       return false;
-    } // TODO [#1250]: skipping the shadowRoot instances itself makes no sense, we need to revisit
-    // this with locker
+    } // It's debatable whether shadow root instances should be considered as shadowed, but we keep
+    // this unchanged for legacy reasons (#1250).
 
 
     if (node instanceof ShadowRoot) {
       return false;
     }
 
-    if (isSyntheticShadowDefined) {
-      // TODO [#1252]: old behavior that is still used by some pieces of the platform,
-      // specifically, nodes inserted manually on places where `lwc:dom="manual"` directive is not
-      // used, will be considered global elements.
-      return !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
-    }
+    const rootNode = node.getRootNode(); // Handle the native case. We can return early here because an invariant of LWC is that
+    // synthetic roots cannot be descendants of native roots.
+
+    if (rootNode instanceof ShadowRoot && isFalse(hasOwnProperty$1.call(getPrototypeOf$1(rootNode), 'synthetic'))) {
+      return true;
+    } // TODO [#1252]: Old behavior that is still used by some pieces of the platform. Manually
+    // inserted nodes without the `lwc:dom=manual` directive will be considered as global elements.
+
 
-    const root = node.getRootNode();
-    return root instanceof ShadowRoot;
+    return isSyntheticShadowDefined && !isUndefined$1(node[KEY__SHADOW_RESOLVER]);
   }
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -8566,7 +8605,7 @@ var LWC = (function (exports) {
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.8.0 */
+  /* version: 2.9.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;
@@ -8578,7 +8617,7 @@ var LWC = (function (exports) {
   exports.getComponentDef = getComponentDef;
   exports.hydrateComponent = hydrateComponent;
   exports.isComponentConstructor = isComponentConstructor;
-  exports.isNodeFromTemplate = isNodeFromTemplate;
+  exports.isNodeFromTemplate = isNodeShadowed;
   exports.readonly = readonly;
   exports.register = register;
   exports.registerComponent = registerComponent;