fix(compiler): Support empty cases

Before this commit empty @Cases ended up being interpreted as consecutive cases.

Author: JeanMeche

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/GOLDEN_PARTIAL.js

@@ -2342,6 +2342,7 @@ export class MyApp {
     <div>
       {{message}}
       @switch (value()) {
+        @case (-1) {}
         @case (0) @case(1) {
           case 01
         }
@@ -2362,6 +2363,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "0.0.0-PLACEHOLDE
     <div>
       {{message}}
       @switch (value()) {
+        @case (-1) {}
         @case (0) @case(1) {
           case 01
         }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/switch_multiple_cases.ts

@@ -1,10 +1,11 @@
-import {Component} from '@angular/core';
+import { Component } from '@angular/core';
 
 @Component({
     template: `
     <div>
       {{message}}
       @switch (value()) {
+        @case (-1) {}
         @case (0) @case(1) {
           case 01
         }

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/switch_multiple_cases_template.js

@@ -1,16 +1,18 @@
-function MyApp_Case_2_Template(rf, ctx) {
+function MyApp_Case_2_Template(rf, ctx)  {}
+
+function MyApp_Case_3_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0, " case 01 ");
   }
 }
 
-function MyApp_Case_3_Template(rf, ctx) {
+function MyApp_Case_4_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0, " case 2 ");
   }
 }
 
-function MyApp_Case_4_Template(rf, ctx) {
+function MyApp_Case_5_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0, " default ");
   }
@@ -20,14 +22,14 @@ function MyApp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "div");
     $r3$.ɵɵtext(1);
-    $r3$.ɵɵconditionalCreate(2, MyApp_Case_2_Template, 1, 0)(3, MyApp_Case_3_Template, 1, 0)(4, MyApp_Case_4_Template, 1, 0);
+    $r3$.ɵɵconditionalCreate(2, MyApp_Case_2_Template, 0, 0)(3, MyApp_Case_3_Template, 1, 0)(4, MyApp_Case_4_Template, 1, 0)(5, MyApp_Case_5_Template, 1, 0);
     $r3$.ɵɵelementEnd();
   }
   if (rf & 2) {
   let $MyApp_contFlowTmp$;
     $r3$.ɵɵadvance();
     $r3$.ɵɵtextInterpolate1(" ", ctx.message, " ");
     $r3$.ɵɵadvance();
-    $r3$.ɵɵconditional(($MyApp_contFlowTmp$ = ctx.value()) === 0 ? 2 : $MyApp_contFlowTmp$ === 1 ? 2 : $MyApp_contFlowTmp$ === 2 ? 3 : 4);
+    $r3$.ɵɵconditional((tmp_1_0 = ctx.value()) === -1 ? 2 : tmp_1_0 === 0 ? 3 : tmp_1_0 === 1 ? 3 : tmp_1_0 === 2 ? 4 : 5);
   }
 }

packages/compiler/src/render3/r3_control_flow.ts

@@ -260,7 +260,12 @@ export function createSwitchBlock(
     );
     collectedCases.push(switchCase);
 
-    const caseWithoutBody = node.children.length === 0;
+    // We need to take into account that some cases might have an empty body. ({})
+    const caseWithoutBody =
+      node.children.length === 0 &&
+      node.endSourceSpan !== null &&
+      node.endSourceSpan.start.offset === node.endSourceSpan.end.offset;
+
     if (caseWithoutBody) {
       if (firstCaseStart === null) {
         firstCaseStart = node.sourceSpan;

packages/compiler/test/ml_parser/html_parser_spec.ts

@@ -8,8 +8,8 @@
 
 import * as html from '../../src/ml_parser/ast';
 import {HtmlParser} from '../../src/ml_parser/html_parser';
-import {ParseTreeResult, TreeError} from '../../src/ml_parser/parser';
 import {TokenizeOptions} from '../../src/ml_parser/lexer';
+import {ParseTreeResult, TreeError} from '../../src/ml_parser/parser';
 import {ParseError} from '../../src/parse_util';
 
 import {
@@ -1093,6 +1093,30 @@ describe('HtmlParser', () => {
         ]);
       });
 
+      it('should parse empty cases in a switch block', () => {
+        expect(
+          humanizeDom(
+            parser.parse(
+              `@switch (expr) {@case ('foo') {} @case ('bar') {bar} @case('baz') { baz }}`,
+              `TestComp`,
+            ),
+          ),
+        ).toEqual([
+          [html.Block, 'switch', 0],
+          [html.BlockParameter, 'expr'],
+          [html.Block, 'case', 1],
+          [html.BlockParameter, `'foo'`],
+          [html.Text, ' ', 1, [' ']],
+          [html.Block, 'case', 1],
+          [html.BlockParameter, `'bar'`],
+          [html.Text, 'bar', 2, ['bar']],
+          [html.Text, ' ', 1, [' ']],
+          [html.Block, 'case', 1],
+          [html.BlockParameter, `'baz'`],
+          [html.Text, ' baz ', 2, [' baz ']],
+        ]);
+      });
+
       it('should close void elements used right before a block', () => {
         expect(humanizeDom(parser.parse('<img>@defer {hello}', 'TestComp'))).toEqual([
           [html.Element, 'img', 0],

packages/core/test/acceptance/control_flow_switch_spec.ts

@@ -322,4 +322,36 @@ describe('control flow - switch', () => {
     fixture.detectChanges();
     expect(fixture.nativeElement.textContent).toBe(' default or case 1 ');
   });
+
+  it('should support an empty case block', () => {
+    @Component({
+      template: `
+        @switch (case) {
+          @case (0) {}
+          @case (1) {
+            case 1
+          }
+          @default {
+            default
+          }
+        }
+      `,
+    })
+    class TestComponent {
+      case = 0;
+    }
+
+    const fixture = TestBed.createComponent(TestComponent);
+    fixture.detectChanges();
+
+    expect(fixture.nativeElement.textContent).toBe('');
+
+    fixture.componentInstance.case = 1;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe(' case 1 ');
+
+    fixture.componentInstance.case = 5;
+    fixture.detectChanges();
+    expect(fixture.nativeElement.textContent).toBe(' default ');
+  });
 });