refactor: partially fix slot forwarding in SSR (#4999)

jmsjtu · web-flow · commit 6b40dc643a84 · 2024-12-04T19:50:41.000Z
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/expected.html
@@ -0,0 +1,16 @@
+<x-dangling-container>
+  <x-slot>
+    <x-leaf>
+      <!---->
+      <h1 slot="bottom">
+        bottom content
+      </h1>
+      <!---->
+      <!---->
+      <h1>
+        top content
+      </h1>
+      <!---->
+    </x-leaf>
+  </x-slot>
+</x-dangling-container>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/index.js
@@ -0,0 +1,4 @@
+export const tagName = 'x-dangling-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/container/container.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.html
@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <slot name="top" slot="bottom"></slot>
+    <slot name="bottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/leaf/leaf.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/dangling/modules/x/slot/slot.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/expected.html
@@ -0,0 +1,16 @@
+<x-light-container>
+  <x-slot>
+    <x-leaf>
+      <!---->
+      <h1>
+        bottom content
+      </h1>
+      <!---->
+      <!---->
+      <h1>
+        top content
+      </h1>
+      <!---->
+    </x-leaf>
+  </x-slot>
+</x-light-container>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/index.js
@@ -0,0 +1,4 @@
+export const tagName = 'x-light-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/container/container.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.html
@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <slot name="top"></slot>
+    <slot name="bottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/leaf/leaf.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/light/modules/x/slot/slot.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/expected.html
@@ -0,0 +1,40 @@
+<x-mixed-container>
+  <template shadowrootmode="open">
+    <x-light-parent>
+      <x-shadow-leaf>
+        <template shadowrootmode="open">
+          <slot name="top">
+          </slot>
+          <slot name="bottom">
+          </slot>
+        </template>
+        <div slot="bottom">
+          top of light parent
+        </div>
+        <div slot="top">
+          bottom of light parent
+        </div>
+      </x-shadow-leaf>
+    </x-light-parent>
+    <x-shadow-parent>
+      <template shadowrootmode="open">
+        <x-light-leaf>
+          <!---->
+          <slot name="bottom">
+          </slot>
+          <!---->
+          <!---->
+          <slot name="top">
+          </slot>
+          <!---->
+        </x-light-leaf>
+      </template>
+      <div slot="top">
+        top of shadow parent
+      </div>
+      <div slot="bottom">
+        bottom of shadow parent
+      </div>
+    </x-shadow-parent>
+  </template>
+</x-mixed-container>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/index.js
@@ -0,0 +1,4 @@
+export const tagName = 'x-mixed-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.html
@@ -0,0 +1,11 @@
+<template>
+    <x-light-parent>
+        <div slot="top">top of light parent</div>
+        <div slot="bottom">bottom of light parent</div>
+    </x-light-parent>
+
+    <x-shadow-parent>
+        <div slot="top">top of shadow parent</div>
+        <div slot="bottom">bottom of shadow parent</div>
+    </x-shadow-parent>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/container/container.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.html
@@ -0,0 +1,4 @@
+<template lwc:render-mode="light">
+    <slot name="top"></slot>
+    <slot name="bottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightLeaf/lightLeaf.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.html
@@ -0,0 +1,6 @@
+<template lwc:render-mode="light">
+    <x-shadow-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-shadow-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/lightParent/lightParent.js
@@ -0,0 +1,5 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {
+    static renderMode = 'light';
+}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.html
@@ -0,0 +1,4 @@
+<template>
+    <slot name="top"></slot>
+    <slot name="bottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowLeaf/shadowLeaf.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.html
@@ -0,0 +1,6 @@
+<template>
+    <x-light-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-light-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/mixed/modules/x/shadowParent/shadowParent.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/error.txt b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/error.txt
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/expected.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/expected.html
@@ -0,0 +1,26 @@
+<x-shadow-container>
+  <template shadowrootmode="open">
+    <x-slot>
+      <template shadowrootmode="open">
+        <x-leaf>
+          <template shadowrootmode="open">
+            <slot name="top">
+            </slot>
+            <slot name="bottom">
+            </slot>
+          </template>
+          <slot name="top" slot="bottom">
+          </slot>
+          <slot name="bottom" slot="top">
+          </slot>
+        </x-leaf>
+      </template>
+      <h1 slot="top">
+        top content
+      </h1>
+      <h1 slot="bottom">
+        bottom content
+      </h1>
+    </x-slot>
+  </template>
+</x-shadow-container>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/index.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/index.js
@@ -0,0 +1,4 @@
+export const tagName = 'x-shadow-container';
+export { default } from 'x/container';
+export * from 'x/container';
+export const features = [];
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.html
@@ -0,0 +1,6 @@
+<template>
+    <x-slot>
+        <h1 slot="top">top content</h1>
+        <h1 slot="bottom">bottom content</h1>
+    </x-slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/container/container.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.html
@@ -0,0 +1,4 @@
+<template>
+    <slot name="top"></slot>
+    <slot name="bottom"></slot>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/leaf/leaf.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.html b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.html
@@ -0,0 +1,6 @@
+<template>
+    <x-leaf>
+        <slot name="top" slot="bottom"></slot>
+        <slot name="bottom" slot="top"></slot>
+    </x-leaf>
+</template>
diff --git a/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.js b/packages/@lwc/engine-server/src/__tests__/fixtures/slot-forwarding/slots/shadow/modules/x/slot/slot.js
@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class extends LightningElement {}
diff --git a/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts b/packages/@lwc/ssr-compiler/src/__tests__/utils/expected-failures.ts
@@ -26,6 +26,9 @@ export const expectedFailures = new Set([
     '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',
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/component.ts
@@ -23,7 +23,7 @@ const bYieldFromChildGenerator = esTemplateWithYield`
             /*
                 Slotted content is inserted here.
                 Note that the slotted content will be stored in variables named 
-                `shadowSlottedContent`/`lightSlottedContent` which are used below 
+                `shadowSlottedContent`/`lightSlottedContentMap` which are used below 
                 when the child's generateMarkup function is invoked.
             */
             is.statement
@@ -37,7 +37,7 @@ const bYieldFromChildGenerator = esTemplateWithYield`
             childProps, 
             childAttrs, 
             shadowSlottedContent,
-            lightSlottedContent,
+            lightSlottedContentMap,
             instance,
             scopeToken,
         );
diff --git a/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts b/packages/@lwc/ssr-compiler/src/compile-template/transformers/component/lwc-component.ts
@@ -29,7 +29,7 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
             /*
                 Slotted content is inserted here.
                 Note that the slotted content will be stored in variables named 
-                `shadowSlottedContent`/`lightSlottedContent` which are used below 
+                `shadowSlottedContent`/`lightSlottedContentMap` which are used below 
                 when the child's generateMarkup function is invoked.
             */
             is.statement
@@ -42,7 +42,7 @@ const bYieldFromDynamicComponentConstructorGenerator = esTemplateWithYield`
             childProps,
             childAttrs,
             shadowSlottedContent,
-            lightSlottedContent,
+            lightSlottedContentMap,
             scopeToken
         );
     }
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
@@ -29,6 +29,7 @@ import type {
     LwcComponent as IrLwcComponent,
     ScopedSlotFragment as IrScopedSlotFragment,
     Text as IrText,
+    Slot as IrSlot,
 } from '@lwc/template-compiler';
 import type { TransformerContext } from '../../types';
 
@@ -40,17 +41,17 @@ const bGenerateSlottedContent = esTemplateWithYield`
             // Avoid creating the object unnecessarily
             : null;
 
-        const lightSlottedContent = ${/* hasLightSlottedContent */ is.literal} 
+        const lightSlottedContentMap = ${/* hasLightSlottedContent */ is.literal} 
             ? Object.create(null)
             // Avoid creating the object unnecessarily
             : null;
         
         function addLightContent(name, fn) {
-            let contentList = lightSlottedContent[name];
+            let contentList = lightSlottedContentMap[name];
             if (contentList) {
                 contentList.push(fn);
             } else {
-                lightSlottedContent[name] = [fn];
+                lightSlottedContentMap[name] = [fn];
             }
         }
 
@@ -97,7 +98,7 @@ const bAddLightContent = esTemplate`
 // relevant to slots (as mentioned above).
 function getLightSlottedContent(rootNodes: IrChildNode[], cxt: TransformerContext) {
     type SlottableAncestorIrType = IrIf | IrIfBlock | IrElseifBlock | IrElseBlock;
-    type SlottableLeafIrType = IrElement | IrText | IrComponent | IrExternalComponent;
+    type SlottableLeafIrType = IrElement | IrText | IrComponent | IrExternalComponent | IrSlot;
 
     const results: EsExpressionStatement[] = [];
 
@@ -140,6 +141,7 @@ function getLightSlottedContent(rootNodes: IrChildNode[], cxt: TransformerContex
                     break;
                 }
                 // SlottableLeafIrType
+                case 'Slot':
                 case 'Element':
                 case 'Text':
                 case 'Component':
