fix(ssr): add comments to the output of lwc:if blocks @W-16946260 (#4622

)

* refactor: list all IR nodes explicitly

* feat(ssr): implement iterator:* directive

* test(ssr): add test for multiple iterator blocks

* fix(ssr-for-of): use empty array as default for missing iterator

* fix(ssr): update error in for-of directive for invalid value

* chore(eslint): don't enforce header in spec files

* test(lwc-if): add tests for lwc:if, lwc:elseif, and lwc:else

* feat(ssr): handle lwc:elseif

* fix(ssr): add comments to lwc:if output

* fix(ssr): don't add comments for if:true and if:false

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean copy/expected.html

@@ -0,0 +1,5 @@
+<x-attribute-boolean>
+ <template shadowrootmode="open">
+ <input checked readonly required type="checkbox">
+ </template>
+</x-attribute-boolean>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean copy/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-attribute-boolean';
+export { default } from 'x/attribute-boolean';
+export * from 'x/attribute-boolean';

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean copy/modules/x/attribute-boolean/attribute-boolean.html

@@ -0,0 +1,3 @@
+<template>
+ <input type="checkbox" required readonly checked />
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/attribute-boolean copy/modules/x/attribute-boolean/attribute-boolean.js

@@ -0,0 +1,3 @@
+import { LightningElement } from 'lwc';
+
+export default class AttributeBoolean extends LightningElement {}

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else-if-else/expected.html

@@ -0,0 +1,10 @@
+<x-component>
+ <template shadowrootmode="open">
+ <!---->
+ I am rendered.
+ <!---->
+ <!---->
+ Render me!
+ <!---->
+ </template>
+</x-component>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else-if-else/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-component';
+export { default } from 'x/component';
+export * from 'x/component';

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else-if-else/modules/x/component/component.html

@@ -0,0 +1,21 @@
+<template>
+ <template lwc:if={isFalse}>
+ I am not rendered.
+ </template>
+ <template lwc:elseif={isTrue}>
+ I am rendered.
+ </template>
+ <template lwc:else>
+ I am also not rendered.
+ </template>
+
+ <template lwc:if={isFalse}>
+ I am not rendered.
+ </template>
+ <template lwc:elseif={isFalse}>
+ I, too, do not render.
+ </template>
+ <template lwc:else>
+ Render me!
+ </template>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else-if-else/modules/x/component/component.js

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class IfBlock extends LightningElement {
+ isTrue = true;
+ isFalse = false;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else/expected.html

@@ -0,0 +1,10 @@
+<x-component>
+ <template shadowrootmode="open">
+ <!---->
+ I am true!
+ <!---->
+ <!---->
+ I am not false!
+ <!---->
+ </template>
+</x-component>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-component';
+export { default } from 'x/component';
+export * from 'x/component';

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else/modules/x/component/component.html

@@ -0,0 +1,15 @@
+<template>
+ <template lwc:if={isTrue}>
+ I am true!
+ </template>
+ <template lwc:else>
+ I am not true!
+ </template>
+
+ <template lwc:if={isFalse}>
+ I am false!
+ </template>
+ <template lwc:else>
+ I am not false!
+ </template>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if-else/modules/x/component/component.js

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class IfBlock extends LightningElement {
+ isTrue = true;
+ isFalse = false;
+}

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if/expected.html

@@ -0,0 +1,7 @@
+<x-component>
+ <template shadowrootmode="open">
+ <!---->
+ I am rendered!
+ <!---->
+ </template>
+</x-component>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if/index.js

@@ -0,0 +1,3 @@
+export const tagName = 'x-component';
+export { default } from 'x/component';
+export * from 'x/component';

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if/modules/x/component/component.html

@@ -0,0 +1,8 @@
+<template>
+ <template lwc:if={isTrue}>
+ I am rendered!
+ </template>
+ <template lwc:if={isFalse}>
+ I am not rendered!
+ </template>
+</template>

packages/@lwc/engine-server/src/__tests__/fixtures/lwc-if/modules/x/component/component.js

@@ -0,0 +1,6 @@
+import { LightningElement, api } from 'lwc';
+
+export default class IfBlock extends LightningElement {
+ isTrue = true;
+ isFalse = false;
+}

packages/@lwc/ssr-compiler/src/compile-template/if.ts

@@ -19,10 +19,18 @@ import type {
 import type { BlockStatement as EsBlockStatement, IfStatement as EsIfStatement } from 'estree';
 import type { Transformer, TransformerContext } from './types';
 
-function bBlockStatement(childNodes: IrChildNode[], cxt: TransformerContext): EsBlockStatement {
- return b.blockStatement(
- optimizeAdjacentYieldStmts(childNodes.flatMap((childNode) => irToEs(childNode, cxt)))
- );
+function bYieldComment(text = '') {
+ return b.expressionStatement(b.yieldExpression(b.literal(`<!--${text}-->`)));
+}
+
+function bBlockStatement(
+ childNodes: IrChildNode[],
+ cxt: TransformerContext,
+ insertComments: boolean
+): EsBlockStatement {
+ let statements = childNodes.flatMap((childNode) => irToEs(childNode, cxt));
+ if (insertComments) statements = [bYieldComment(), ...statements, bYieldComment()];
+ return b.blockStatement(optimizeAdjacentYieldStmts(statements));
 }
 
 export const If: Transformer<IrIf> = function If(node, cxt) {
@@ -35,7 +43,7 @@ export const If: Transformer<IrIf> = function If(node, cxt) {
  expressionIrToEs(condition, cxt)
  );
 
- return [b.ifStatement(comparison, bBlockStatement(children, cxt))];
+ return [b.ifStatement(comparison, bBlockStatement(children, cxt, false))];
 };
 
 function bIfStatement(
@@ -47,19 +55,19 @@ function bIfStatement(
  let elseBlock = null;
  if (elseNode) {
  if (elseNode.type === 'ElseBlock') {
- elseBlock = bBlockStatement(elseNode.children, cxt);
+ elseBlock = bBlockStatement(elseNode.children, cxt, true);
  } else {
  elseBlock = bIfStatement(elseNode, cxt);
  }
  }
 
  return b.ifStatement(
  expressionIrToEs(condition, cxt),
- bBlockStatement(children, cxt),
+ bBlockStatement(children, cxt, true),
  elseBlock
  );
 }
 
-export const IfBlock: Transformer<IrIfBlock> = function IfBlock(node, cxt) {
+export const IfBlock: Transformer<IrIfBlock | IrElseifBlock> = function IfBlock(node, cxt) {
  return [bIfStatement(node, cxt)];
 };

packages/@lwc/ssr-compiler/src/compile-template/ir-to-es.ts

@@ -51,7 +51,9 @@ const transformers: Transformers = {
  IfBlock,
  Root,
  Text,
+ // lwc:elseif cannot exist without an lwc:if (IfBlock); this gets handled by that transformer
  ElseifBlock: defaultTransformer,
+ // lwc:elseif cannot exist without an lwc:elseif (IfBlock); this gets handled by that transformer
  ElseBlock: defaultTransformer,
  ScopedSlotFragment: defaultTransformer,
  Slot: defaultTransformer,
@@ -70,7 +72,7 @@ export function irChildrenToEs(children: IrChildNode[], cxt: TransformerContext)
 }
 
 export function irToEs<T extends IrNode>(node: T, cxt: TransformerContext): EsStatement[] {
- const transformer = (transformers[node.type] as Transformer<T>) ?? defaultTransformer;
+ const transformer = transformers[node.type] as Transformer<T>;
  return transformer(node, cxt);
 }