lwc 2.33.0 → 2.34.0

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

@@ -339,7 +339,7 @@
       CACHED_ATTRIBUTE_PROPERTY_MAPPING.set(attrName, propertyName);
       return propertyName;
   }
-  /** version: 2.33.0 */
+  /** version: 2.34.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -362,6 +362,7 @@
       ENABLE_SCOPED_CUSTOM_ELEMENT_REGISTRY: null,
       ENABLE_FROZEN_TEMPLATE: null,
       DISABLE_ARIA_REFLECTION_POLYFILL: null,
+      ENABLE_PROGRAMMATIC_STYLESHEETS: null,
   };
   if (!_globalThis.lwcRuntimeFlags) {
       Object.defineProperty(_globalThis, 'lwcRuntimeFlags', { value: create(null) });
@@ -405,7 +406,7 @@
    */
   function setFeatureFlagForTest(name, value) {
   }
-  /** version: 2.33.0 */
+  /** version: 2.34.0 */
 
   /**
    * Copyright (C) 2018 salesforce.com, inc.
@@ -469,7 +470,7 @@
           }
       }
   }
-  /** version: 2.33.0 */
+  /** version: 2.34.0 */
 
   /*
    * Copyright (c) 2018, salesforce.com, inc.
@@ -541,6 +542,18 @@
       }
       return result;
   }
+  function flattenStylesheets(stylesheets) {
+      const list = [];
+      for (const stylesheet of stylesheets) {
+          if (!Array.isArray(stylesheet)) {
+              list.push(stylesheet);
+          }
+          else {
+              list.push(...flattenStylesheets(stylesheet));
+          }
+      }
+      return list;
+  }
   // Set a ref (lwc:ref) on a VM, from a template API
   function setRefVNode(vm, ref, vnode) {
       // If this method is called, then vm.refVNodes is set as the template has refs.
@@ -786,6 +799,9 @@
   // Global HTML Attributes & Properties
   // https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes
   // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+  //
+  // If you update this list, check for test files that recapitulate the same list. Searching the codebase
+  // for e.g. "dropzone" should suffice.
   assign(create(null), {
       accessKey: {
           attribute: 'accesskey',
@@ -2447,6 +2463,9 @@
       stylesheets: newStylesheets,
       stylesheetToken: newStylesheetToken
     } = template;
+    const {
+      stylesheets: newVmStylesheets
+    } = vm;
     const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
     const {
       hasScopedStyles
@@ -2470,7 +2489,9 @@
     }
     // 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.
-    if (!isUndefined$1(newStylesheets) && newStylesheets.length !== 0) {
+    const hasNewStylesheets = hasStyles(newStylesheets);
+    const hasNewVmStylesheets = hasStyles(newVmStylesheets);
+    if (hasNewStylesheets || hasNewVmStylesheets) {
       newToken = newStylesheetToken;
     }
     // Set the new styling token on the host element
@@ -2534,10 +2555,17 @@
       stylesheets,
       stylesheetToken
     } = template;
+    const {
+      stylesheets: vmStylesheets
+    } = vm;
     let content = [];
-    if (!isUndefined$1(stylesheets) && stylesheets.length !== 0) {
+    if (hasStyles(stylesheets)) {
       content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
     }
+    // VM (component) stylesheets apply after template stylesheets
+    if (hasStyles(vmStylesheets)) {
+      ArrayPush$1.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+    }
     return content;
   }
   // It might be worth caching this to avoid doing the lookup repeatedly, but
@@ -2575,10 +2603,13 @@
     const {
       template
     } = getComponentInternalDef(vnode.ctor);
+    const {
+      vm
+    } = vnode;
     const {
       stylesheetToken
     } = template;
-    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+    return !isUndefined$1(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
   }
   function getNearestNativeShadowComponent(vm) {
     const owner = getNearestShadowComponent(vm);
@@ -3161,6 +3192,28 @@
         // in fallback mode, the allocation will always set children to
         // empty and delegate the real allocation to the slot elements
         allocateChildren(n2, vm);
+        // Solves an edge case with slotted VFragments in native shadow mode.
+        //
+        // During allocation, in native shadow, slotted VFragment nodes are flattened and their text delimiters are removed
+        // to avoid interfering with native slot behavior. When this happens, if any of the fragments
+        // were not stable, the children must go through the dynamic diffing algo.
+        //
+        // If the new children (n2.children) contain no VFragments, but the previous children (n1.children) were dynamic,
+        // the new nodes must be marked dynamic so that all nodes are properly updated. The only indicator that the new
+        // nodes need to be dynamic comes from the previous children, so we check that to determine whether we need to
+        // mark the new children dynamic.
+        //
+        // Example:
+        // n1.children: [div, VFragment('', div, null, ''), div] => [div, div, null, div]; // marked dynamic
+        // n2.children: [div, null, div] => [div, null, div] // marked ???
+        const {
+          shadowMode,
+          renderMode
+        } = vm;
+        if (shadowMode == 0 /* ShadowMode.Native */ && renderMode !== 0 /* RenderMode.Light */ && hasDynamicChildren(n1.children)) {
+          // No-op if children has already been marked dynamic by 'allocateChildren()'.
+          markAsDynamicChildren(n2.children);
+        }
       }
       // in fallback mode, the children will be always empty, so, nothing
       // will happen, but in native, it does allocate the light dom
@@ -3322,20 +3375,65 @@
     //
     // In case #2, we will always get a fresh VCustomElement.
     const children = vnode.aChildren || vnode.children;
-    vm.aChildren = children;
     const {
       renderMode,
       shadowMode
     } = vm;
+    // If any of the children being allocated are VFragments, we remove the text delimiters and flatten all immediate
+    // children VFragments to avoid them interfering with default slot behavior.
+    const allocatedChildren = flattenFragmentsInChildren(children);
+    vnode.children = allocatedChildren;
+    vm.aChildren = allocatedChildren;
     if (shadowMode === 1 /* ShadowMode.Synthetic */ || renderMode === 0 /* RenderMode.Light */) {
       // slow path
-      allocateInSlot(vm, children, vnode.owner);
+      allocateInSlot(vm, allocatedChildren, vnode.owner);
       // save the allocated children in case this vnode is reused.
-      vnode.aChildren = children;
+      vnode.aChildren = allocatedChildren;
       // every child vnode is now allocated, and the host should receive none directly, it receives them via the shadow!
       vnode.children = EmptyArray;
     }
   }
+  /**
+   * Flattens the contents of all VFragments in an array of VNodes, removes the text delimiters on those VFragments, and
+   * marks the resulting children array as dynamic. Uses a stack (array) to iteratively traverse the nested VFragments
+   * and avoid the perf overhead of creating/destroying throwaway arrays/objects in a recursive approach.
+   *
+   * With the delimiters removed, the contents are marked dynamic so they are diffed correctly.
+   *
+   * This function is used for slotted VFragments to avoid the text delimiters interfering with slotting functionality.
+   */
+  function flattenFragmentsInChildren(children) {
+    const flattenedChildren = [];
+    // Initialize our stack with the direct children of the custom component and check whether we have a VFragment.
+    // If no VFragment is found in children, we don't need to traverse anything or mark the children dynamic and can return early.
+    const nodeStack = [];
+    let fragmentFound = false;
+    for (let i = children.length - 1; i > -1; i -= 1) {
+      const child = children[i];
+      ArrayPush$1.call(nodeStack, child);
+      fragmentFound = fragmentFound || !!(child && isVFragment(child));
+    }
+    if (!fragmentFound) {
+      return children;
+    }
+    let currentNode;
+    while (!isUndefined$1(currentNode = ArrayPop.call(nodeStack))) {
+      if (!isNull(currentNode) && isVFragment(currentNode)) {
+        const fChildren = currentNode.children;
+        // Ignore the start and end text node delimiters
+        for (let i = fChildren.length - 2; i > 0; i -= 1) {
+          ArrayPush$1.call(nodeStack, fChildren[i]);
+        }
+      } else {
+        ArrayPush$1.call(flattenedChildren, currentNode);
+      }
+    }
+    // We always mark the children as dynamic because nothing generates stable VFragments yet.
+    // If/when stable VFragments are generated by the compiler, this code should be updated to
+    // not mark dynamic if all flattened VFragments were stable.
+    markAsDynamicChildren(flattenedChildren);
+    return flattenedChildren;
+  }
   function createViewModelHook(elm, vnode, renderer) {
     let vm = getAssociatedVMIfPresent(elm);
     // There is a possibility that a custom element is registered under tagName, in which case, the
@@ -3357,22 +3455,20 @@
     });
     return vm;
   }
-  /**
-   * Collects all slots into a SlotSet, traversing through VFragment Nodes
-   */
-  function collectSlots(vm, children, cmpSlotsMapping) {
+  function allocateInSlot(vm, children, owner) {
     var _a, _b;
+    const {
+      cmpSlots: {
+        slotAssignments: oldSlotsMapping
+      }
+    } = vm;
+    const cmpSlotsMapping = create(null);
+    // Collect all slots into cmpSlotsMapping
     for (let i = 0, len = children.length; i < len; i += 1) {
       const vnode = children[i];
       if (isNull(vnode)) {
         continue;
       }
-      // Dive further iff the content is wrapped in a VFragment
-      if (isVFragment(vnode)) {
-        // Remove the text delimiter nodes to avoid overriding default slot content
-        collectSlots(vm, vnode.children.slice(1, -1), cmpSlotsMapping);
-        continue;
-      }
       let slotName = '';
       if (isVBaseElement(vnode)) {
         slotName = (_b = (_a = vnode.data.attrs) === null || _a === void 0 ? void 0 : _a.slot) !== null && _b !== void 0 ? _b : '';
@@ -3382,15 +3478,6 @@
       const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
       ArrayPush$1.call(vnodes, vnode);
     }
-  }
-  function allocateInSlot(vm, children, owner) {
-    const {
-      cmpSlots: {
-        slotAssignments: oldSlotsMapping
-      }
-    } = vm;
-    const cmpSlotsMapping = create(null);
-    collectSlots(vm, children, cmpSlotsMapping);
     vm.cmpSlots = {
       owner,
       slotAssignments: cmpSlotsMapping
@@ -3421,14 +3508,14 @@
     }
   }
   // Using a WeakMap instead of a WeakSet because this one works in IE11 :(
-  const FromIteration = new WeakMap();
-  // dynamic children means it was generated by an iteration
-  // in a template, and will require a more complex diffing algo.
+  const DynamicChildren = new WeakMap();
+  // dynamic children means it was either generated by an iteration in a template
+  // or part of an unstable fragment, and will require a more complex diffing algo.
   function markAsDynamicChildren(children) {
-    FromIteration.set(children, 1);
+    DynamicChildren.set(children, 1);
   }
   function hasDynamicChildren(children) {
-    return FromIteration.has(children);
+    return DynamicChildren.has(children);
   }
   function createKeyToOldIdx(children, beginIdx, endIdx) {
     const map = {};
@@ -4087,7 +4174,7 @@
                   // Create a brand new template cache for the swapped templated.
                   context.tplCache = create(null);
                   // Set the computeHasScopedStyles property in the context, to avoid recomputing it repeatedly.
-                  context.hasScopedStyles = computeHasScopedStyles(html);
+                  context.hasScopedStyles = computeHasScopedStyles(html, vm);
                   // Update the scoping token on the host element.
                   updateStylesheetToken(vm, html);
                   // Evaluate, create stylesheet and cache the produced VNode for future
@@ -4122,9 +4209,8 @@
       });
       return vnodes;
   }
-  function computeHasScopedStyles(template) {
-      const { stylesheets } = template;
-      if (!isUndefined$1(stylesheets)) {
+  function computeHasScopedStylesInStylesheets(stylesheets) {
+      if (hasStyles(stylesheets)) {
           for (let i = 0; i < stylesheets.length; i++) {
               if (isTrue(stylesheets[i][KEY__SCOPED_CSS])) {
                   return true;
@@ -4133,6 +4219,15 @@
       }
       return false;
   }
+  function computeHasScopedStyles(template, vm) {
+      const { stylesheets } = template;
+      const vmStylesheets = !isUndefined$1(vm) ? vm.stylesheets : null;
+      return (computeHasScopedStylesInStylesheets(stylesheets) ||
+          computeHasScopedStylesInStylesheets(vmStylesheets));
+  }
+  function hasStyles(stylesheets) {
+      return !isUndefined$1(stylesheets) && !isNull(stylesheets) && stylesheets.length > 0;
+  }
   let vmBeingConstructed = null;
   function isBeingConstructed(vm) {
       return vmBeingConstructed === vm;
@@ -4409,6 +4504,7 @@
       // Properties set right after VM creation.
       tro: null,
       shadowMode: null,
+      stylesheets: null,
       // Properties set by the LightningElement constructor.
       component: null,
       shadowRoot: null,
@@ -4418,6 +4514,7 @@
       getHook,
       renderer
     };
+    vm.stylesheets = computeStylesheets(vm, def.ctor);
     vm.shadowMode = computeShadowMode(vm, renderer);
     vm.tro = getTemplateReactiveObserver(vm);
     // Create component instance associated to the vm and the element.
@@ -4428,6 +4525,40 @@
     }
     return vm;
   }
+  function validateComponentStylesheets(vm, stylesheets) {
+    let valid = true;
+    const validate = arrayOrStylesheet => {
+      if (isArray$1(arrayOrStylesheet)) {
+        for (let i = 0; i < arrayOrStylesheet.length; i++) {
+          validate(arrayOrStylesheet[i]);
+        }
+      } else if (!isFunction$1(arrayOrStylesheet)) {
+        // function assumed to be a stylesheet factory
+        valid = false;
+      }
+    };
+    if (!isArray$1(stylesheets)) {
+      valid = false;
+    } else {
+      validate(stylesheets);
+    }
+    return valid;
+  }
+  // Validate and flatten any stylesheets defined as `static stylesheets`
+  function computeStylesheets(vm, ctor) {
+    if (lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+      const {
+        stylesheets
+      } = ctor;
+      if (!isUndefined$1(stylesheets)) {
+        const valid = validateComponentStylesheets(vm, stylesheets);
+        if (valid) {
+          return flattenStylesheets(stylesheets);
+        }
+      }
+    }
+    return null;
+  }
   function computeShadowMode(vm, renderer) {
     const {
       def
@@ -6383,7 +6514,7 @@
       function isNull(obj) {
           return obj === null;
       }
-      /** version: 2.33.0 */
+      /** version: 2.34.0 */
 
       /*
        * Copyright (c) 2018, salesforce.com, inc.
@@ -6936,7 +7067,7 @@
   });
   freeze(LightningElement);
   seal(LightningElement.prototype);
-  /* version: 2.33.0 */
+  /* version: 2.34.0 */
 
   exports.LightningElement = LightningElement;
   exports.__unstable__ProfilerControl = profilerControl;