@lwc/engine-core 2.27.0 → 2.28.1

package/dist/engine-core.cjs.js

@@ -3229,6 +3229,9 @@ function isSameVnode(vnode1, vnode2) {
 function isVCustomElement(vnode) {
     return vnode.type === 3 /* VNodeType.CustomElement */;
 }
+function isVFragment(vnode) {
+    return vnode.type === 5 /* VNodeType.Fragment */;
+}
 function isVScopedSlotFragment(vnode) {
     return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
 }
@@ -3756,9 +3759,14 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     if (features.lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       disconnectRootElement(elm);
     }
-  };
+  }; // Should never get a tag with upper case letter at this point; the compiler
+  // should produce only tags with lowercase letters. However, the Java
+  // compiler may generate tagnames with uppercase letters so - for backwards
+  // compatibility, we lower case the tagname here.
+
 
-  const elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
+  const normalizedTagname = sel.toLowerCase();
+  const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
@@ -4064,6 +4072,17 @@ function allocateChildren(vnode, vm) {
     shadowMode
   } = vm;
 
+  if (process.env.NODE_ENV !== 'production') {
+    // If any of the children being allocated is a scoped slot fragment, make sure the receiving
+    // component is a light DOM component. This is mainly to validate light dom parent running
+    // in native shadow mode.
+    if (renderMode !== 0
+    /* RenderMode.Light */
+    && shared.ArraySome.call(children, child => !shared.isNull(child) && isVScopedSlotFragment(child))) {
+      logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
+    }
+  }
+
   if (shadowMode === 1
   /* ShadowMode.Synthetic */
   || renderMode === 0
@@ -4105,26 +4124,26 @@ function createViewModelHook(elm, vnode, renderer) {
 
   return vm;
 }
+/**
+ * Collects all slots into a SlotSet, traversing through VFragment Nodes
+ */
 
-function allocateInSlot(vm, children, owner) {
-  var _a, _b;
 
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = shared.create(null);
-  vm.cmpSlots = {
-    owner,
-    slotAssignments: cmpSlotsMapping
-  };
+function collectSlots(vm, children, cmpSlotsMapping) {
+  var _a, _b;
 
   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 = '';
@@ -4138,6 +4157,20 @@ function allocateInSlot(vm, children, owner) {
     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
+  };
 
   if (shared.isFalse(vm.isDirty)) {
     // We need to determine if the old allocation is really different from the new one
@@ -4458,27 +4491,42 @@ function s(slotName, data, children, slotset) {
         !shared.isUndefined(slotset.slotAssignments) &&
         !shared.isUndefined(slotset.slotAssignments[slotName]) &&
         slotset.slotAssignments[slotName].length !== 0) {
-        children = slotset.slotAssignments[slotName].reduce((acc, vnode) => {
-            // If the passed slot content is factory, evaluate it and use the produced vnodes
-            if (vnode && isVScopedSlotFragment(vnode)) {
-                const vmBeingRenderedInception = getVMBeingRendered();
-                let children = [];
-                // Evaluate in the scope of the slot content's owner
-                // if a slotset is provided, there will always be an owner. The only case where owner is
-                // undefined is for root components, but root components cannot accept slotted content
-                setVMBeingRendered(slotset.owner);
-                try {
-                    children = vnode.factory(data.slotData);
+        children = slotset.slotAssignments[slotName].reduce((accumulator, vnode) => {
+            if (vnode) {
+                const assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
+                // The only sniff test for a scoped <slot> element is the presence of `slotData`
+                const isScopedSlotElement = !shared.isUndefined(data.slotData);
+                // Check if slot types of parent and child are matching
+                if (assignedNodeIsScopedSlot !== isScopedSlotElement) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        logError(`Mismatched slot types for ${slotName === '' ? '(default)' : slotName} slot. Both parent and child component must use standard type or scoped type for a given slot.`, slotset.owner);
+                    }
+                    // Ignore slot content from parent
+                    return accumulator;
+                }
+                // If the passed slot content is factory, evaluate it and add the produced vnodes
+                if (assignedNodeIsScopedSlot) {
+                    const vmBeingRenderedInception = getVMBeingRendered();
+                    let scopedSlotChildren = [];
+                    // Evaluate in the scope of the slot content's owner
+                    // if a slotset is provided, there will always be an owner. The only case where owner is
+                    // undefined is for root components, but root components cannot accept slotted content
+                    setVMBeingRendered(slotset.owner);
+                    try {
+                        scopedSlotChildren = vnode.factory(data.slotData);
+                    }
+                    finally {
+                        setVMBeingRendered(vmBeingRenderedInception);
+                    }
+                    return shared.ArrayConcat.call(accumulator, scopedSlotChildren);
                 }
-                finally {
-                    setVMBeingRendered(vmBeingRenderedInception);
+                else {
+                    // If the slot content is standard type, the content is static, no additional
+                    // processing needed on the vnode
+                    return shared.ArrayConcat.call(accumulator, vnode);
                 }
-                return shared.ArrayConcat.call(acc, children);
-            }
-            else {
-                // If the slot content is a static list of child nodes provided by the parent, nothing to do
-                return shared.ArrayConcat.call(acc, vnode);
             }
+            return accumulator;
         }, []);
     }
     const vmBeingRendered = getVMBeingRendered();
@@ -6612,11 +6660,12 @@ function validateClassAttr(vnode, elm, renderer) {
         }
     }
     let nodesAreCompatible = true;
-    let vnodeClassName;
-    if (!shared.isUndefined(className) && String(className) !== getProperty(elm, 'className')) {
+    let readableVnodeClassname;
+    const elmClassName = getProperty(elm, 'className');
+    if (!shared.isUndefined(className) && String(className) !== elmClassName) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
-        vnodeClassName = className;
+        readableVnodeClassname = className;
     }
     else if (!shared.isUndefined(classMap)) {
         // classMap is used when class is set to static value.
@@ -6629,14 +6678,19 @@ function validateClassAttr(vnode, elm, renderer) {
                 nodesAreCompatible = false;
             }
         }
-        vnodeClassName = computedClassName.trim();
+        readableVnodeClassname = computedClassName.trim();
         if (classList.length > shared.keys(classMap).length) {
             nodesAreCompatible = false;
         }
     }
+    else if (shared.isUndefined(className) && elmClassName !== '') {
+        // SSR contains a className but client-side VDOM does not
+        nodesAreCompatible = false;
+        readableVnodeClassname = '';
+    }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${readableVnodeClassname}" but found "${elmClassName}"`, vnode.owner);
         }
     }
     return nodesAreCompatible;
@@ -6888,4 +6942,4 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/* version: 2.27.0 */
+/* version: 2.28.1 */

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, isFalse, isTrue, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArrayConcat as ArrayConcat$1, 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, isFalse, isTrue, toString as toString$1, getOwnPropertyDescriptor as getOwnPropertyDescriptor$1, LWC_VERSION_COMMENT_REGEX, LWC_VERSION, htmlPropertyToAttribute, ArraySlice, ArrayMap, isArray as isArray$1, KEY__SCOPED_CSS, StringCharCodeAt, XML_NAMESPACE, XLINK_NAMESPACE, isString, StringSlice, SVG_NAMESPACE, KEY__SHADOW_STATIC, KEY__SHADOW_RESOLVER, ArraySome, ArrayConcat as ArrayConcat$1, isNumber, StringReplace, noop, ArrayUnshift, ArrayFilter, ArrayCopyWithin, ArrayFill, ArraySort, ArrayReverse, ArrayShift, ArrayPop } from '@lwc/shared';
 
 /*
  * Copyright (c) 2018, salesforce.com, inc.
@@ -3226,6 +3226,9 @@ function isSameVnode(vnode1, vnode2) {
 function isVCustomElement(vnode) {
     return vnode.type === 3 /* VNodeType.CustomElement */;
 }
+function isVFragment(vnode) {
+    return vnode.type === 5 /* VNodeType.Fragment */;
+}
 function isVScopedSlotFragment(vnode) {
     return vnode.type === 6 /* VNodeType.ScopedSlotFragment */;
 }
@@ -3753,9 +3756,14 @@ function mountCustomElement(vnode, parent, anchor, renderer) {
     if (lwcRuntimeFlags.ENABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE) {
       disconnectRootElement(elm);
     }
-  };
+  }; // Should never get a tag with upper case letter at this point; the compiler
+  // should produce only tags with lowercase letters. However, the Java
+  // compiler may generate tagnames with uppercase letters so - for backwards
+  // compatibility, we lower case the tagname here.
+
 
-  const elm = createCustomElement(sel, upgradeCallback, connectedCallback, disconnectedCallback);
+  const normalizedTagname = sel.toLowerCase();
+  const elm = createCustomElement(normalizedTagname, upgradeCallback, connectedCallback, disconnectedCallback);
   vnode.elm = elm;
   vnode.vm = vm;
   linkNodeToShadow(elm, owner, renderer);
@@ -4061,6 +4069,17 @@ function allocateChildren(vnode, vm) {
     shadowMode
   } = vm;
 
+  if (process.env.NODE_ENV !== 'production') {
+    // If any of the children being allocated is a scoped slot fragment, make sure the receiving
+    // component is a light DOM component. This is mainly to validate light dom parent running
+    // in native shadow mode.
+    if (renderMode !== 0
+    /* RenderMode.Light */
+    && ArraySome.call(children, child => !isNull(child) && isVScopedSlotFragment(child))) {
+      logError(`Invalid usage of 'lwc:slot-data' on ${getComponentTag(vm)} tag. Scoped slot content can only be passed to a light dom child.`);
+    }
+  }
+
   if (shadowMode === 1
   /* ShadowMode.Synthetic */
   || renderMode === 0
@@ -4102,26 +4121,26 @@ function createViewModelHook(elm, vnode, renderer) {
 
   return vm;
 }
+/**
+ * Collects all slots into a SlotSet, traversing through VFragment Nodes
+ */
 
-function allocateInSlot(vm, children, owner) {
-  var _a, _b;
 
-  const {
-    cmpSlots: {
-      slotAssignments: oldSlotsMapping
-    }
-  } = vm;
-  const cmpSlotsMapping = create(null);
-  vm.cmpSlots = {
-    owner,
-    slotAssignments: cmpSlotsMapping
-  };
+function collectSlots(vm, children, cmpSlotsMapping) {
+  var _a, _b;
 
   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 = '';
@@ -4135,6 +4154,20 @@ function allocateInSlot(vm, children, owner) {
     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
+  };
 
   if (isFalse(vm.isDirty)) {
     // We need to determine if the old allocation is really different from the new one
@@ -4455,27 +4488,42 @@ function s(slotName, data, children, slotset) {
         !isUndefined$1(slotset.slotAssignments) &&
         !isUndefined$1(slotset.slotAssignments[slotName]) &&
         slotset.slotAssignments[slotName].length !== 0) {
-        children = slotset.slotAssignments[slotName].reduce((acc, vnode) => {
-            // If the passed slot content is factory, evaluate it and use the produced vnodes
-            if (vnode && isVScopedSlotFragment(vnode)) {
-                const vmBeingRenderedInception = getVMBeingRendered();
-                let children = [];
-                // Evaluate in the scope of the slot content's owner
-                // if a slotset is provided, there will always be an owner. The only case where owner is
-                // undefined is for root components, but root components cannot accept slotted content
-                setVMBeingRendered(slotset.owner);
-                try {
-                    children = vnode.factory(data.slotData);
+        children = slotset.slotAssignments[slotName].reduce((accumulator, vnode) => {
+            if (vnode) {
+                const assignedNodeIsScopedSlot = isVScopedSlotFragment(vnode);
+                // The only sniff test for a scoped <slot> element is the presence of `slotData`
+                const isScopedSlotElement = !isUndefined$1(data.slotData);
+                // Check if slot types of parent and child are matching
+                if (assignedNodeIsScopedSlot !== isScopedSlotElement) {
+                    if (process.env.NODE_ENV !== 'production') {
+                        logError(`Mismatched slot types for ${slotName === '' ? '(default)' : slotName} slot. Both parent and child component must use standard type or scoped type for a given slot.`, slotset.owner);
+                    }
+                    // Ignore slot content from parent
+                    return accumulator;
+                }
+                // If the passed slot content is factory, evaluate it and add the produced vnodes
+                if (assignedNodeIsScopedSlot) {
+                    const vmBeingRenderedInception = getVMBeingRendered();
+                    let scopedSlotChildren = [];
+                    // Evaluate in the scope of the slot content's owner
+                    // if a slotset is provided, there will always be an owner. The only case where owner is
+                    // undefined is for root components, but root components cannot accept slotted content
+                    setVMBeingRendered(slotset.owner);
+                    try {
+                        scopedSlotChildren = vnode.factory(data.slotData);
+                    }
+                    finally {
+                        setVMBeingRendered(vmBeingRenderedInception);
+                    }
+                    return ArrayConcat$1.call(accumulator, scopedSlotChildren);
                 }
-                finally {
-                    setVMBeingRendered(vmBeingRenderedInception);
+                else {
+                    // If the slot content is standard type, the content is static, no additional
+                    // processing needed on the vnode
+                    return ArrayConcat$1.call(accumulator, vnode);
                 }
-                return ArrayConcat$1.call(acc, children);
-            }
-            else {
-                // If the slot content is a static list of child nodes provided by the parent, nothing to do
-                return ArrayConcat$1.call(acc, vnode);
             }
+            return accumulator;
         }, []);
     }
     const vmBeingRendered = getVMBeingRendered();
@@ -6609,11 +6657,12 @@ function validateClassAttr(vnode, elm, renderer) {
         }
     }
     let nodesAreCompatible = true;
-    let vnodeClassName;
-    if (!isUndefined$1(className) && String(className) !== getProperty(elm, 'className')) {
+    let readableVnodeClassname;
+    const elmClassName = getProperty(elm, 'className');
+    if (!isUndefined$1(className) && String(className) !== elmClassName) {
         // className is used when class is bound to an expr.
         nodesAreCompatible = false;
-        vnodeClassName = className;
+        readableVnodeClassname = className;
     }
     else if (!isUndefined$1(classMap)) {
         // classMap is used when class is set to static value.
@@ -6626,14 +6675,19 @@ function validateClassAttr(vnode, elm, renderer) {
                 nodesAreCompatible = false;
             }
         }
-        vnodeClassName = computedClassName.trim();
+        readableVnodeClassname = computedClassName.trim();
         if (classList.length > keys(classMap).length) {
             nodesAreCompatible = false;
         }
     }
+    else if (isUndefined$1(className) && elmClassName !== '') {
+        // SSR contains a className but client-side VDOM does not
+        nodesAreCompatible = false;
+        readableVnodeClassname = '';
+    }
     if (!nodesAreCompatible) {
         if (process.env.NODE_ENV !== 'production') {
-            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${vnodeClassName}" but found "${getProperty(elm, 'className')}"`, vnode.owner);
+            logError(`Mismatch hydrating element <${getProperty(elm, 'tagName').toLowerCase()}>: attribute "class" has different values, expected "${readableVnodeClassname}" but found "${elmClassName}"`, vnode.owner);
         }
     }
     return nodesAreCompatible;
@@ -6849,4 +6903,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.27.0 */
+/* version: 2.28.1 */

package/package.json

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

package/types/framework/vnodes.d.ts

@@ -88,4 +88,5 @@ export interface VElementData extends VNodeData {
 export declare function isVBaseElement(vnode: VNode): vnode is VElement | VCustomElement;
 export declare function isSameVnode(vnode1: VNode, vnode2: VNode): boolean;
 export declare function isVCustomElement(vnode: VBaseElement): vnode is VCustomElement;
+export declare function isVFragment(vnode: VNode): vnode is VFragment;
 export declare function isVScopedSlotFragment(vnode: VNode): vnode is VScopedSlotFragment;