fix(compiler): allow comments between connected blocks (#55966)

crisbeto · dylhunn · commit 33d0102304e2 · 2024-05-21T10:37:58.000-07:00
Fixes that the logic which looks for connected blocks didn't allow for comments between them. Fixes #55954. PR Close #55966
diff --git a/packages/compiler/src/render3/r3_template_transform.ts b/packages/compiler/src/render3/r3_template_transform.ts
@@ -478,6 +478,11 @@ class HtmlAstToIvyAst implements html.Visitor {
     for (let i = primaryBlockIndex + 1; i < siblings.length; i++) {
       const node = siblings[i];
 
+      // Skip over comments.
+      if (node instanceof html.Comment) {
+        continue;
+      }
+
       // Ignore empty text nodes between blocks.
       if (node instanceof html.Text && node.value.trim().length === 0) {
         // Add the text node to the processed nodes since we don't want
diff --git a/packages/compiler/test/render3/r3_template_transform_spec.ts b/packages/compiler/test/render3/r3_template_transform_spec.ts
@@ -918,6 +918,25 @@ describe('R3 template transform', () => {
       ]);
     });
 
+    it('should parse a deferred block with comments between the connected blocks', () => {
+      expectFromHtml(
+        '@defer {<calendar-cmp [date]="current"/>}' +
+          '<!-- Show this while loading --> @loading {Loading...}' +
+          '<!-- Show this on the server --> @placeholder {Placeholder content!}' +
+          '<!-- Show this on error --> @error {Loading failed :(}',
+      ).toEqual([
+        ['DeferredBlock'],
+        ['Element', 'calendar-cmp'],
+        ['BoundAttribute', 0, 'date', 'current'],
+        ['DeferredBlockPlaceholder'],
+        ['Text', 'Placeholder content!'],
+        ['DeferredBlockLoading'],
+        ['Text', 'Loading...'],
+        ['DeferredBlockError'],
+        ['Text', 'Loading failed :('],
+      ]);
+    });
+
     it(
       'should parse a deferred block with connected blocks that have an arbitrary ' +
         'amount of whitespace between them when preserveWhitespaces is enabled',
@@ -2070,6 +2089,31 @@ describe('R3 template transform', () => {
       ]);
     });
 
+    it('should parse an if block containing comments between the branches', () => {
+      expectFromHtml(`
+        @if (cond.expr; as foo) {
+          Main case was true!
+        }
+        <!-- Extra case -->
+        @else if (other.expr) {
+          Extra case was true!
+        }
+        <!-- False case -->
+        @else {
+          False case!
+        }
+        `).toEqual([
+        ['IfBlock'],
+        ['IfBlockBranch', 'cond.expr'],
+        ['Variable', 'foo', 'foo'],
+        ['Text', ' Main case was true! '],
+        ['IfBlockBranch', 'other.expr'],
+        ['Text', ' Extra case was true! '],
+        ['IfBlockBranch', null],
+        ['Text', ' False case! '],
+      ]);
+    });
+
     describe('validations', () => {
       it('should report an if block without a condition', () => {
         expect(() =>
