From b8362b5a54bbc7d2a5d6dd243a59305ed42b06b0 Mon Sep 17 00:00:00 2001
From: Matheus Cardoso <matheus@cardo.so>
Date: Tue, 10 Dec 2024 12:21:18 -0300
Subject: [PATCH] fix(ssr): extra bookends for light dom forwarded slots
 @W-17363666 (#5005)

* fix(ssr): extra bookends for light dom forwarded slots

* fix(ssr): extra bookens for scoped slots

* fix(ssr): extra bookends for if directive

* chore: revert unneeded change

* test(ssr): slotted-content-nested

* fix(ssr): extra bookends in nested slotted content

* Update packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

* Update packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

* Update packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>

* test(ssr): expect failure slot-not-at-top-level/advanced/lwcIf/shadow/index.js

---------

Co-authored-by: Nolan Lawson <nolan@nolanlawson.com>
---
 .../fixtures/slotted-content-nested/error.txt |  0
 .../slotted-content-nested/expected.html      | 22 +++++++++++++++
 .../fixtures/slotted-content-nested/index.js  |  3 ++
 .../modules/x/another/another.html            |  3 ++
 .../modules/x/another/another.js              |  2 ++
 .../modules/x/receiver/receiver.html          |  3 ++
 .../modules/x/receiver/receiver.js            |  2 ++
 .../modules/x/slots/slots.html                | 12 ++++++++
 .../modules/x/slots/slots.js                  |  4 +++
 .../src/__tests__/utils/expected-failures.ts  |  4 ---
 .../transformers/component/slotted-content.ts |  6 ++++
 .../src/compile-template/transformers/if.ts   |  2 +-
 .../src/compile-template/transformers/slot.ts | 28 +++++++++++--------
 .../src/compile-template/types.ts             |  1 +
 14 files changed, 76 insertions(+), 16 deletions(-)
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/error.txt
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/expected.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/index.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.js
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.html
 create mode 100644 packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js

diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/error.txt
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/expected.html
new file mode 100644
index 0000000000..55df76a192
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/expected.html
@@ -0,0 +1,22 @@
+<x-slots>
+  <template shadowrootmode="open">
+    <x-receiver>
+      <template shadowrootmode="open">
+        <slot>
+        </slot>
+      </template>
+      <x-another>
+        <template shadowrootmode="open">
+          <slot>
+          </slot>
+        </template>
+        <div>
+          hello
+        </div>
+      </x-another>
+      <div>
+        world
+      </div>
+    </x-receiver>
+  </template>
+</x-slots>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/index.js
new file mode 100644
index 0000000000..ef585717fe
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/index.js
@@ -0,0 +1,3 @@
+export const tagName = 'x-slots';
+export { default } from 'x/slots';
+export * from 'x/slots';
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.html
new file mode 100644
index 0000000000..fba6288c0b
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.js
new file mode 100644
index 0000000000..dc6f09f6e5
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/another/another.js
@@ -0,0 +1,2 @@
+import { LightningElement } from 'lwc';
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.html
new file mode 100644
index 0000000000..fba6288c0b
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.html
@@ -0,0 +1,3 @@
+<template>
+    <slot></slot>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.js
new file mode 100644
index 0000000000..dc6f09f6e5
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/receiver/receiver.js
@@ -0,0 +1,2 @@
+import { LightningElement } from 'lwc';
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.html
new file mode 100644
index 0000000000..a0ab3d7b1b
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.html
@@ -0,0 +1,12 @@
+<template>
+    <x-receiver>
+        <x-another>
+            <template lwc:if={isTrue}>
+                <div>hello</div>
+            </template>
+        </x-another>
+        <template lwc:if={isTrue}>
+            <div>world</div>
+        </template>
+    </x-receiver>
+</template>
\ No newline at end of file
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js
new file mode 100644
index 0000000000..05ebd72e00
--- /dev/null
+++ b/packages/@lwc/engine-server/src/__tests__/fixtures/slotted-content-nested/modules/x/slots/slots.js
@@ -0,0 +1,4 @@
+import { LightningElement } from 'lwc';
+export default class extends LightningElement {
+    isTrue = true;
+}
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
index bcafe9dc93..f0c45d0a3d 100644
--- a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
+++ b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -25,14 +25,10 @@ export const expectedFailures = new Set([
     'scoped-slots/expression/index.js',
     'scoped-slots/mixed-with-light-dom-slots-inside/index.js',
     'scoped-slots/mixed-with-light-dom-slots-outside/index.js',
-    'slot-forwarding/scoped-slots/index.js',
     'slot-forwarding/slots/mixed/index.js',
     'slot-forwarding/slots/dangling/index.js',
-    'slot-forwarding/slots/light/index.js',
     'slot-not-at-top-level/advanced/lwcIf/light/index.js',
     'slot-not-at-top-level/advanced/lwcIf/shadow/index.js',
-    'slot-not-at-top-level/lwcIf/light/index.js',
-    'slot-not-at-top-level/lwcIf/shadow/index.js',
     'superclass/render-in-superclass/no-template-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-subclass/index.js',
     'superclass/render-in-superclass/unused-default-in-superclass/index.js',
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts
index 43eb53061c..9970bc7d45 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/slotted-content.ts
@@ -168,6 +168,10 @@ export function getSlottedContent(
     node: IrLwcComponent | IrComponent,
     cxt: TransformerContext
 ): EsStatement[] {
+    const { isSlotted } = cxt;
+
+    cxt.isSlotted = true;
+
     // Anything inside the slotted content is a normal slotted content except for `<template lwc:slot-data>` which is a scoped slot.
     const slottableChildren = node.children.filter((child) => child.type !== 'ScopedSlotFragment');
     const scopedSlottableChildren = node.children.filter(
@@ -199,6 +203,8 @@ export function getSlottedContent(
         lightSlotContent.length > 0 || scopedSlotContent.length > 0
     );
 
+    cxt.isSlotted = isSlotted;
+
     return bGenerateSlottedContent(
         hasShadowSlottedContent,
         shadowSlotContent,
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/if.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/if.ts
index 8da2b06fa9..222e774917 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/transformers/if.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/transformers/if.ts
@@ -63,7 +63,7 @@ function bIfStatement(
 
     return b.ifStatement(
         expressionIrToEs(condition, cxt),
-        bBlockStatement(children, cxt, true),
+        bBlockStatement(children, cxt, !cxt.isSlotted),
         elseBlock
     );
 }
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts
index 9a70ce4aec..ac404a0801 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/transformers/slot.ts
@@ -24,12 +24,15 @@ import type { Transformer } from '../types';
 const bConditionalSlot = esTemplateWithYield`
     if (isLightDom) {
         const isScopedSlot = ${/* isScopedSlot */ is.literal};
+        const isSlotted = ${/* isSlotted */ is.literal};
         // start bookend HTML comment for light DOM slot vfragment
-        yield '<!---->';
-
-        // scoped slot factory has its own vfragment hence its own bookend
-        if (isScopedSlot) {
+        if (!isSlotted) {
             yield '<!---->';
+
+            // scoped slot factory has its own vfragment hence its own bookend
+            if (isScopedSlot) {
+                yield '<!---->';
+            }
         }
 
         const generators = lightSlottedContent?.[${/* slotName */ is.expression} ?? ""];
@@ -45,14 +48,16 @@ const bConditionalSlot = esTemplateWithYield`
             // TODO: default/fallback slot content
             ${/* slot fallback content */ is.statement}
         }
-        
-        // scoped slot factory has its own vfragment hence its own bookend
-        if (isScopedSlot) {
-            yield '<!---->';
-        }
 
         // end bookend HTML comment for light DOM slot vfragment
-        yield '<!---->';
+        if (!isSlotted) {
+            yield '<!---->';
+
+            // scoped slot factory has its own vfragment hence its own bookend
+            if (isScopedSlot) {
+                yield '<!---->';
+            }
+        }
     } else {
         ${/* slot element AST */ is.statement}
     }
@@ -68,5 +73,6 @@ export const Slot: Transformer<IrSlot> = function Slot(node, ctx): EsStatement[]
     const slotAst = Element(node, ctx);
     const slotChildren = irChildrenToEs(node.children, ctx);
     const isScopedSlot = b.literal(Boolean(slotBound));
-    return [bConditionalSlot(isScopedSlot, slotName, slotBound, slotChildren, slotAst)];
+    const isSlotted = b.literal(Boolean(ctx.isSlotted));
+    return [bConditionalSlot(isScopedSlot, isSlotted, slotName, slotBound, slotChildren, slotAst)];
 };
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/types.ts b/packages/@lwc/ssr-compiler/src/compile-template/types.ts
index de6629b221..69d2c663c4 100644
--- a/packages/@lwc/ssr-compiler/src/compile-template/types.ts
+++ b/packages/@lwc/ssr-compiler/src/compile-template/types.ts
@@ -20,6 +20,7 @@ export interface TransformerContext {
     templateOptions: TemplateOpts;
     prevSibling?: IrNode;
     nextSibling?: IrNode;
+    isSlotted?: boolean;
     import: (
         imports: string | string[] | Record<string, string | undefined>,
         source?: string