refactor(compiler): validate references in selectorless (angular#60952)

Adds the follow validations to the selectorless template parsing:
* Local references with values are not allowed (e.g. `#foo="bar"`).
* Multiple local references with the same on a component or directive are not allowed.

PR Close angular#60952

Author: crisbeto

packages/compiler/src/render3/r3_template_transform.ts

@@ -378,6 +378,8 @@ class HtmlAstToIvyAst implements html.Visitor {
       i18nAttrsMeta,
     } = this.prepareAttributes(component.attrs, false);
 
+    this.validateSelectorlessReferences(references);
+
     const directives = this.extractDirectives(component);
     let children: t.Node[];
 
@@ -914,6 +916,8 @@ class HtmlAstToIvyAst implements html.Visitor {
 
       const {attributes, parsedProperties, boundEvents, references, i18nAttrsMeta} =
         this.prepareAttributes(directive.attrs, false);
+      this.validateSelectorlessReferences(references);
+
       const {bound: inputs} = this.categorizePropertyAttributes(
         elementName,
         parsedProperties,
@@ -1085,6 +1089,27 @@ class HtmlAstToIvyAst implements html.Visitor {
     addEvents(events, boundEvents);
   }
 
+  private validateSelectorlessReferences(references: t.Reference[]): void {
+    if (references.length === 0) {
+      return;
+    }
+
+    const seenNames = new Set<string>();
+
+    for (const ref of references) {
+      if (ref.value.length > 0) {
+        this.reportError(
+          'Cannot specify a value for a local reference in this context',
+          ref.valueSpan || ref.sourceSpan,
+        );
+      } else if (seenNames.has(ref.name)) {
+        this.reportError('Duplicate reference names are not allowed', ref.sourceSpan);
+      } else {
+        seenNames.add(ref.name);
+      }
+    }
+  }
+
   private reportError(
     message: string,
     sourceSpan: ParseSourceSpan,

packages/compiler/test/render3/r3_template_transform_spec.ts

@@ -2646,6 +2646,18 @@ describe('R3 template transform', () => {
           /Binding is not supported in a directive context/,
         );
       });
+
+      it('should not allow named references', () => {
+        const pattern = /Cannot specify a value for a local reference in this context/;
+        expect(() => parseSelectorless('<MyComp #foo="bar"/>')).toThrowError(pattern);
+        expect(() => parseSelectorless('<div @Dir(#foo="bar")></div>')).toThrowError(pattern);
+      });
+
+      it('should not allow duplicate references', () => {
+        const pattern = /Duplicate reference names are not allowed/;
+        expect(() => parseSelectorless('<MyComp #foo #foo/>')).toThrowError(pattern);
+        expect(() => parseSelectorless('<div @Dir(#foo #foo)></div>')).toThrowError(pattern);
+      });
     });
   });
 });