@lwc/engine-core 4.0.1 → 5.0.1

package/dist/framework/vnodes.d.ts

@@ -45,8 +45,8 @@ export interface VFragment extends BaseVNode, BaseVParent {
     sel: undefined;
     type: VNodeType.Fragment;
     stable: 0 | 1;
-    leading: VText;
-    trailing: VText;
+    leading: VText | VComment;
+    trailing: VText | VComment;
 }
 export interface VText extends BaseVNode {
     type: VNodeType.Text;

package/dist/index.cjs.js

@@ -4167,17 +4167,16 @@ function unmount(vnode, parent, renderer, doRemove = false) {
     const { type, elm, sel } = vnode;
     // When unmounting a VNode subtree not all the elements have to removed from the DOM. The
     // subtree root, is the only element worth unmounting from the subtree.
-    if (doRemove) {
-        if (type === 5 /* VNodeType.Fragment */) {
-            unmountVNodes(vnode.children, parent, renderer, doRemove);
-        }
-        else {
-            // The vnode might or might not have a data.renderer associated to it
-            // but the removal used here is from the owner instead.
-            removeNode(elm, parent, renderer);
-        }
+    if (doRemove && type !== 5 /* VNodeType.Fragment */) {
+        // The vnode might or might not have a data.renderer associated to it
+        // but the removal used here is from the owner instead.
+        removeNode(elm, parent, renderer);
     }
     switch (type) {
+        case 5 /* VNodeType.Fragment */: {
+            unmountVNodes(vnode.children, parent, renderer, doRemove);
+            break;
+        }
         case 2 /* VNodeType.Element */: {
             // Slot content is removed to trigger slotchange event when removing slot.
             // Only required for synthetic shadow.
@@ -4716,8 +4715,10 @@ function st(fragment, key, parts) {
 }
 // [fr]agment node
 function fr(key, children, stable) {
-    const leading = t('');
-    const trailing = t('');
+    const owner = getVMBeingRendered();
+    const useCommentNodes = shared.isAPIFeatureEnabled(5 /* APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS */, owner.apiVersion);
+    const leading = useCommentNodes ? co('') : t('');
+    const trailing = useCommentNodes ? co('') : t('');
     return {
         type: 5 /* VNodeType.Fragment */,
         sel: undefined,
@@ -4725,7 +4726,7 @@ function fr(key, children, stable) {
         elm: undefined,
         children: [leading, ...children, trailing],
         stable,
-        owner: getVMBeingRendered(),
+        owner,
         leading,
         trailing,
     };
@@ -6571,7 +6572,7 @@ function hydrateVM(vm) {
     // reset the refs; they will be set during `hydrateChildren`
     resetRefVNodes(vm);
     const { renderRoot: parentNode, renderer: { getFirstChild }, } = vm;
-    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm);
+    hydrateChildren(getFirstChild(parentNode), children, parentNode, vm, false);
     runRenderedCallback(vm);
 }
 function hydrateNode(node, vnode, renderer) {
@@ -6683,7 +6684,7 @@ function hydrateStaticElement(elm, vnode, renderer) {
 }
 function hydrateFragment(elm, vnode, renderer) {
     const { children, owner } = vnode;
-    hydrateChildren(elm, children, renderer.getProperty(elm, 'parentNode'), owner);
+    hydrateChildren(elm, children, renderer.getProperty(elm, 'parentNode'), owner, true);
     return (vnode.elm = children[children.length - 1].elm);
 }
 function hydrateElement(elm, vnode, renderer) {
@@ -6715,7 +6716,7 @@ function hydrateElement(elm, vnode, renderer) {
     patchElementPropsAndAttrsAndRefs(vnode, renderer);
     if (!isDomManual) {
         const { getFirstChild } = renderer;
-        hydrateChildren(getFirstChild(elm), vnode.children, elm, owner);
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, owner, false);
     }
     return elm;
 }
@@ -6757,12 +6758,16 @@ function hydrateCustomElement(elm, vnode, renderer) {
         const { getFirstChild } = renderer;
         // VM is not rendering in Light DOM, we can proceed and hydrate the slotted content.
         // Note: for Light DOM, this is handled while hydrating the VM
-        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm);
+        hydrateChildren(getFirstChild(elm), vnode.children, elm, vm, false);
     }
     hydrateVM(vm);
     return elm;
 }
-function hydrateChildren(node, children, parentNode, owner) {
+function hydrateChildren(node, children, parentNode, owner, 
+// When rendering the children of a VFragment, additional siblings may follow the
+// last node of the fragment. Hydration should not fail if a trailing sibling is
+// found in this case.
+expectAddlSiblings) {
     let hasWarned = false;
     let nextNode = node;
     const { renderer } = owner;
@@ -6785,7 +6790,17 @@ function hydrateChildren(node, children, parentNode, owner) {
             }
         }
     }
-    if (nextNode) {
+    const useCommentsForBookends = shared.isAPIFeatureEnabled(5 /* APIFeature.USE_COMMENTS_FOR_FRAGMENT_BOOKENDS */, owner.apiVersion);
+    if (
+    // If 1) comments are used for bookends, and 2) we're not expecting additional siblings,
+    // and 3) there exists an additional sibling, that's a hydration failure.
+    //
+    // This preserves the previous behavior for text-node bookends where mismatches
+    // would incorrectly occur but which is unfortunately baked into the SSR hydration
+    // contract. It also preserves the behavior of valid hydration failures where the server
+    // rendered more nodes than the client.
+    (!useCommentsForBookends || !expectAddlSiblings) &&
+        nextNode) {
         hasMismatch = true;
         if (process.env.NODE_ENV !== 'production') {
             if (!hasWarned) {
@@ -7337,5 +7352,5 @@ exports.swapTemplate = swapTemplate;
 exports.track = track;
 exports.unwrap = unwrap;
 exports.wire = wire;
-/** version: 4.0.1 */
+/** version: 5.0.1 */
 //# sourceMappingURL=index.cjs.js.map