@lwc/engine-core 2.33.0 → 2.34.0

package/dist/engine-core.cjs.js

@@ -309,6 +309,7 @@ function log(method, message, vm) {
     if (!shared.isUndefined(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);
@@ -378,6 +379,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 = shared.assign(shared.create(null), {
     accessKey: {
         attribute: 'accesskey',
@@ -2972,6 +2976,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
@@ -2995,7 +3002,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 (!shared.isUndefined(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
@@ -3067,10 +3076,17 @@ function getStylesheetsContent(vm, template) {
     stylesheets,
     stylesheetToken
   } = template;
+  const {
+    stylesheets: vmStylesheets
+  } = vm;
   let content = [];
-  if (!shared.isUndefined(stylesheets) && stylesheets.length !== 0) {
+  if (hasStyles(stylesheets)) {
     content = evaluateStylesheetsContent(stylesheets, stylesheetToken, vm);
   }
+  // VM (component) stylesheets apply after template stylesheets
+  if (hasStyles(vmStylesheets)) {
+    shared.ArrayPush.apply(content, evaluateStylesheetsContent(vmStylesheets, stylesheetToken, vm));
+  }
   return content;
 }
 // It might be worth caching this to avoid doing the lookup repeatedly, but
@@ -3108,10 +3124,13 @@ function getStylesheetTokenHost(vnode) {
   const {
     template
   } = getComponentInternalDef(vnode.ctor);
+  const {
+    vm
+  } = vnode;
   const {
     stylesheetToken
   } = template;
-  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template) ? makeHostToken(stylesheetToken) : null;
+  return !shared.isUndefined(stylesheetToken) && computeHasScopedStyles(template, vm) ? makeHostToken(stylesheetToken) : null;
 }
 function getNearestNativeShadowComponent(vm) {
   const owner = getNearestShadowComponent(vm);
@@ -3728,6 +3747,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
@@ -3920,7 +3961,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
@@ -3933,15 +3973,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];
+    shared.ArrayPush.call(nodeStack, child);
+    fragmentFound = fragmentFound || !!(child && isVFragment(child));
+  }
+  if (!fragmentFound) {
+    return children;
+  }
+  let currentNode;
+  while (!shared.isUndefined(currentNode = shared.ArrayPop.call(nodeStack))) {
+    if (!shared.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) {
+        shared.ArrayPush.call(nodeStack, fChildren[i]);
+      }
+    } else {
+      shared.ArrayPush.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
@@ -3966,22 +4052,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 = shared.create(null);
+  // Collect all slots into cmpSlotsMapping
   for (let i = 0, len = children.length; i < len; i += 1) {
     const vnode = children[i];
     if (shared.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 : '';
@@ -3991,15 +4075,6 @@ function collectSlots(vm, children, cmpSlotsMapping) {
     const vnodes = cmpSlotsMapping[slotName] = cmpSlotsMapping[slotName] || [];
     shared.ArrayPush.call(vnodes, vnode);
   }
-}
-function allocateInSlot(vm, children, owner) {
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = shared.create(null);
-  collectSlots(vm, children, cmpSlotsMapping);
   vm.cmpSlots = {
     owner,
     slotAssignments: cmpSlotsMapping
@@ -4030,14 +4105,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 = {};
@@ -4903,7 +4978,7 @@ function evaluateTemplate(vm, html) {
                 // Create a brand new template cache for the swapped templated.
                 context.tplCache = shared.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
@@ -4946,9 +5021,8 @@ function evaluateTemplate(vm, html) {
     }
     return vnodes;
 }
-function computeHasScopedStyles(template) {
-    const { stylesheets } = template;
-    if (!shared.isUndefined(stylesheets)) {
+function computeHasScopedStylesInStylesheets(stylesheets) {
+    if (hasStyles(stylesheets)) {
         for (let i = 0; i < stylesheets.length; i++) {
             if (shared.isTrue(stylesheets[i][shared.KEY__SCOPED_CSS])) {
                 return true;
@@ -4957,6 +5031,15 @@ function computeHasScopedStyles(template) {
     }
     return false;
 }
+function computeHasScopedStyles(template, vm) {
+    const { stylesheets } = template;
+    const vmStylesheets = !shared.isUndefined(vm) ? vm.stylesheets : null;
+    return (computeHasScopedStylesInStylesheets(stylesheets) ||
+        computeHasScopedStylesInStylesheets(vmStylesheets));
+}
+function hasStyles(stylesheets) {
+    return !shared.isUndefined(stylesheets) && !shared.isNull(stylesheets) && stylesheets.length > 0;
+}
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -5272,6 +5355,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,
@@ -5284,6 +5368,7 @@ function createVM(elm, ctor, renderer, options) {
   if (process.env.NODE_ENV !== 'production') {
     vm.debugInfo = shared.create(null);
   }
+  vm.stylesheets = computeStylesheets(vm, def.ctor);
   vm.shadowMode = computeShadowMode(vm, renderer);
   vm.tro = getTemplateReactiveObserver(vm);
   if (process.env.NODE_ENV !== 'production') {
@@ -5302,6 +5387,42 @@ function createVM(elm, ctor, renderer, options) {
   }
   return vm;
 }
+function validateComponentStylesheets(vm, stylesheets) {
+  let valid = true;
+  const validate = arrayOrStylesheet => {
+    if (shared.isArray(arrayOrStylesheet)) {
+      for (let i = 0; i < arrayOrStylesheet.length; i++) {
+        validate(arrayOrStylesheet[i]);
+      }
+    } else if (!shared.isFunction(arrayOrStylesheet)) {
+      // function assumed to be a stylesheet factory
+      valid = false;
+    }
+  };
+  if (!shared.isArray(stylesheets)) {
+    valid = false;
+  } else {
+    validate(stylesheets);
+  }
+  return valid;
+}
+// Validate and flatten any stylesheets defined as `static stylesheets`
+function computeStylesheets(vm, ctor) {
+  if (features.lwcRuntimeFlags.ENABLE_PROGRAMMATIC_STYLESHEETS) {
+    const {
+      stylesheets
+    } = ctor;
+    if (!shared.isUndefined(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
@@ -6661,4 +6782,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.33.0 */
+/* version: 2.34.0 */

package/dist/engine-core.js

@@ -1,7 +1,7 @@
 /* proxy-compat-disable */
 import { lwcRuntimeFlags } from '@lwc/features';
 export { setFeatureFlag, setFeatureFlagForTest } from '@lwc/features';
-import { seal, create, isUndefined as isUndefined$1, isFunction as isFunction$1, ArrayPush as ArrayPush$1, ArrayIndexOf, ArraySplice, StringToLowerCase, isNull, ArrayJoin, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, freeze, assert, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, isNumber, StringReplace, noop, ArrayUnshift, ArrayFilter, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
+import { seal, create, isUndefined as isUndefined$1, isFunction as isFunction$1, ArrayPush as ArrayPush$1, ArrayIndexOf, ArraySplice, StringToLowerCase, isNull, ArrayJoin, isFrozen, defineProperty, hasOwnProperty as hasOwnProperty$1, assign, forEach, keys, AriaPropNameToAttrNameMap, getPropertyDescriptor, defineProperties, getOwnPropertyNames as getOwnPropertyNames$1, getPrototypeOf as getPrototypeOf$1, setPrototypeOf, isObject, freeze, assert, KEY__SYNTHETIC_MODE, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, isFalse, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, htmlAttributeToProperty, isString, StringSlice, isTrue, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayPop, isNumber, StringReplace, noop, ArrayUnshift, ArrayFilter, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift } from '@lwc/shared';
 import { applyAriaReflection } from '@lwc/aria-reflection';
 
 /*
@@ -308,6 +308,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);
@@ -377,6 +378,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',
@@ -2971,6 +2975,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
@@ -2994,7 +3001,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
@@ -3066,10 +3075,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
@@ -3107,10 +3123,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);
@@ -3727,6 +3746,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
@@ -3919,7 +3960,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
@@ -3932,15 +3972,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
@@ -3965,22 +4051,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 : '';
@@ -3990,15 +4074,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
@@ -4029,14 +4104,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 = {};
@@ -4902,7 +4977,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
@@ -4945,9 +5020,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;
@@ -4956,6 +5030,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.
@@ -5271,6 +5354,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,
@@ -5283,6 +5367,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') {
@@ -5301,6 +5386,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
@@ -6624,4 +6745,4 @@ function getComponentConstructor(elm) {
 }
 
 export { LightningElement, profilerControl as __unstable__ProfilerControl, api$1 as api, connectRootElement, createContextProvider, createVM, disconnectRootElement, freezeTemplate, getAssociatedVMIfPresent, getComponentConstructor, getComponentDef, getComponentHtmlPrototype, hydrateRoot, isComponentConstructor, parseFragment, parseSVGFragment, readonly, register, registerComponent, registerDecorators, registerTemplate, sanitizeAttribute, setHooks, swapComponent, swapStyle, swapTemplate, track, unwrap, wire };
-/* version: 2.33.0 */
+/* version: 2.34.0 */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@lwc/engine-core",
-    "version": "2.33.0",
+    "version": "2.34.0",
     "description": "Core LWC engine APIs.",
     "homepage": "https://lwc.dev/",
     "repository": {
@@ -24,9 +24,9 @@
         "types/"
     ],
     "dependencies": {
-        "@lwc/aria-reflection": "2.33.0",
-        "@lwc/features": "2.33.0",
-        "@lwc/shared": "2.33.0"
+        "@lwc/aria-reflection": "2.34.0",
+        "@lwc/features": "2.34.0",
+        "@lwc/shared": "2.34.0"
     },
     "devDependencies": {
         "observable-membrane": "2.0.0"

package/types/framework/base-lightning-element.d.ts

@@ -10,6 +10,7 @@ import { AccessibleElementProperties } from '@lwc/shared';
 import { ShadowSupportMode } from './vm';
 import { Template } from './template';
 import { HTMLElementConstructor } from './base-bridge-element';
+import { TemplateStylesheetFactories } from './stylesheet';
 export interface LightningElementConstructor {
     new (): LightningElement;
     readonly prototype: LightningElement;
@@ -17,6 +18,7 @@ export interface LightningElementConstructor {
     delegatesFocus?: boolean;
     renderMode?: 'light' | 'shadow';
     shadowSupportMode?: ShadowSupportMode;
+    stylesheets: TemplateStylesheetFactories;
 }
 type HTMLElementTheGoodParts = Pick<Object, 'toString'> & Pick<HTMLElement, 'accessKey' | 'addEventListener' | 'children' | 'childNodes' | 'classList' | 'dir' | 'dispatchEvent' | 'draggable' | 'firstChild' | 'firstElementChild' | 'getAttribute' | 'getAttributeNS' | 'getBoundingClientRect' | 'getElementsByClassName' | 'getElementsByTagName' | 'hasAttribute' | 'hasAttributeNS' | 'hidden' | 'id' | 'isConnected' | 'lang' | 'lastChild' | 'lastElementChild' | 'querySelector' | 'querySelectorAll' | 'removeAttribute' | 'removeAttributeNS' | 'removeEventListener' | 'setAttribute' | 'setAttributeNS' | 'spellcheck' | 'tabIndex' | 'title'>;
 type RefNodes = {

package/types/framework/template.d.ts

@@ -21,4 +21,5 @@ export declare function setVMBeingRendered(vm: VM | null): void;
 export declare const parseFragment: (strings: string[], ...keys: number[]) => () => Element;
 export declare const parseSVGFragment: (strings: string[], ...keys: number[]) => () => Element;
 export declare function evaluateTemplate(vm: VM, html: Template): VNodes;
-export declare function computeHasScopedStyles(template: Template): boolean;
+export declare function computeHasScopedStyles(template: Template, vm: VM | undefined): boolean;
+export declare function hasStyles(stylesheets: TemplateStylesheetFactories | undefined | null): stylesheets is TemplateStylesheetFactories;

package/types/framework/vm.d.ts

@@ -4,6 +4,7 @@ import { ComponentDef } from './def';
 import { LightningElement, LightningElementConstructor } from './base-lightning-element';
 import { ReactiveObserver } from './mutation-tracker';
 import { VNodes, VCustomElement, VNode, VBaseElement } from './vnodes';
+import { TemplateStylesheetFactories } from './stylesheet';
 type ShadowRootMode = 'open' | 'closed';
 export interface TemplateCache {
     [key: string]: any;
@@ -132,6 +133,9 @@ export interface VM<N = HostNode, E = HostElement> {
     /**
      * Debug info bag. Stores useful debug information about the component. */
     debugInfo?: Record<string, any>;
+    /**
+     * Any stylesheets associated with the component */
+    stylesheets: TemplateStylesheetFactories | null;
 }
 type VMAssociable = HostNode | LightningElement;
 export declare function rerenderVM(vm: VM): void;