lwc 2.33.0 → 2.34.0

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

@@ -344,9 +344,9 @@ function htmlAttributeToProperty(attrName) {
  * 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.33.0";
+const LWC_VERSION = "2.34.0";
 const LWC_VERSION_COMMENT_REGEX = /\/\*LWC compiler v([\d.]+)\*\/\s*}/;
-/** version: 2.33.0 */
+/** version: 2.34.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -369,6 +369,7 @@ const features = {
     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) });
@@ -422,7 +423,7 @@ function setFeatureFlagForTest(name, value) {
         setFeatureFlag(name, value);
     }
 }
-/** version: 2.33.0 */
+/** version: 2.34.0 */
 
 /**
  * Copyright (C) 2018 salesforce.com, inc.
@@ -486,7 +487,7 @@ function applyAriaReflection(prototype = Element.prototype) {
         }
     }
 }
-/** version: 2.33.0 */
+/** version: 2.34.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -815,6 +816,7 @@ function log(method, message, vm) {
     if (!isUndefined$1(vm)) {
         msg = `${msg}\n${getComponentStack(vm)}`;
     }
+    // In Jest tests, reduce the warning and error verbosity by not printing the callstack
     if (process.env.NODE_ENV === 'test') {
         /* eslint-disable-next-line no-console */
         console[method](msg);
@@ -884,6 +886,9 @@ function offsetPropertyErrorMessage(name) {
 // 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.
 const globalHTMLProperties = assign(create(null), {
     accessKey: {
         attribute: 'accesskey',
@@ -3476,6 +3481,9 @@ function updateStylesheetToken(vm, template) {
     stylesheets: newStylesheets,
     stylesheetToken: newStylesheetToken
   } = template;
+  const {
+    stylesheets: newVmStylesheets
+  } = vm;
   const isSyntheticShadow = renderMode === 1 /* RenderMode.Shadow */ && shadowMode === 1 /* ShadowMode.Synthetic */;
   const {
     hasScopedStyles
@@ -3499,7 +3507,9 @@ function updateStylesheetToken(vm, template) {
   }
   // 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
@@ -3571,10 +3581,17 @@ function getStylesheetsContent(vm, template) {
     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
@@ -3612,10 +3629,13 @@ function getStylesheetTokenHost(vnode) {
   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);
@@ -4228,6 +4248,28 @@ function patchCustomElement(n1, n2, parent, renderer) {
       // 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
@@ -4420,7 +4462,6 @@ function allocateChildren(vnode, vm) {
   //
   // In case #2, we will always get a fresh VCustomElement.
   const children = vnode.aChildren || vnode.children;
-  vm.aChildren = children;
   const {
     renderMode,
     shadowMode
@@ -4433,15 +4474,61 @@ function allocateChildren(vnode, vm) {
       logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
     }
   }
+  // 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
@@ -4466,22 +4553,20 @@ function createViewModelHook(elm, vnode, renderer) {
   }
   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 : '';
@@ -4491,15 +4576,6 @@ function collectSlots(vm, children, cmpSlotsMapping) {
     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
@@ -4530,14 +4606,14 @@ function allocateInSlot(vm, children, owner) {
   }
 }
 // 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 = {};
@@ -5403,7 +5479,7 @@ function evaluateTemplate(vm, html) {
                 // 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
@@ -5446,9 +5522,8 @@ function evaluateTemplate(vm, html) {
     }
     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;
@@ -5457,6 +5532,15 @@ function computeHasScopedStyles(template) {
     }
     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;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5772,6 +5856,7 @@ function createVM(elm, ctor, renderer, options) {
     // Properties set right after VM creation.
     tro: null,
     shadowMode: null,
+    stylesheets: null,
     // Properties set by the LightningElement constructor.
     component: null,
     shadowRoot: null,
@@ -5784,6 +5869,7 @@ function createVM(elm, ctor, renderer, options) {
   if (process.env.NODE_ENV !== 'production') {
     vm.debugInfo = create(null);
   }
+  vm.stylesheets = computeStylesheets(vm, def.ctor);
   vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
   if (process.env.NODE_ENV !== 'production') {
@@ -5802,6 +5888,42 @@ function createVM(elm, ctor, renderer, options) {
   }
   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);
+      } else if (process.env.NODE_ENV !== 'production') {
+        logError(`static stylesheets must be an array of CSS stylesheets. Found invalid stylesheets on <${vm.tagName}>`, vm);
+      }
+    }
+  }
+  return null;
+}
 function computeShadowMode(vm, renderer) {
   const {
     def
@@ -7120,7 +7242,7 @@ function getComponentConstructor(elm) {
     }
     return ctor;
 }
-/* version: 2.33.0 */
+/* version: 2.34.0 */
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -7227,7 +7349,9 @@ const stylesheetCache = new Map();
 //
 // Test utilities
 //
-if (process.env.NODE_ENV === 'development') {
+// Only used in LWC's Karma tests
+// @ts-ignore
+if (process.env.NODE_ENV !== 'production' && typeof __karma__ !== 'undefined') {
     // @ts-ignore
     window.__lwcResetGlobalStylesheets = () => {
         stylesheetCache.clear();
@@ -8093,7 +8217,7 @@ function rendererFactory(baseRenderer) {
     function isNull(obj) {
         return obj === null;
     }
-    /** version: 2.33.0 */
+    /** version: 2.34.0 */
 
     /*
      * Copyright (c) 2018, salesforce.com, inc.
@@ -8654,6 +8778,6 @@ defineProperty(LightningElement, 'CustomElementConstructor', {
 });
 freeze(LightningElement);
 seal(LightningElement.prototype);
-/* version: 2.33.0 */
+/* version: 2.34.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, rendererFactory, sanitizeAttribute, setFeatureFlag, setFeatureFlagForTest, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };