feat(syntaxes): add support for let declarations (#2042)

Adds highlighting support for the new `@let` syntax.

Author: crisbeto

.aspect/rules/external_repository_action_cache/npm_translate_lock_LTE4Nzc1MDcwNjU=

@@ -2,7 +2,7 @@
 # Input hashes for repository rule npm_translate_lock(name = "npm", pnpm_lock = "//:pnpm-lock.yaml").
 # This file should be checked into version control along with the pnpm-lock.yaml file.
 .npmrc=974837034
-pnpm-lock.yaml=915470004
+pnpm-lock.yaml=730915817
 yarn.lock=1032276408
-package.json=-1247013691
+package.json=-257701941
 pnpm-workspace.yaml=1711114604

package.json

@@ -185,6 +185,14 @@
           "expression.ng": "javascript"
         }
       },
+      {
+        "path": "./syntaxes/let-declaration.json",
+        "scopeName": "template.let.ng",
+        "injectTo": [
+          "text.html.derivative",
+          "source.ts"
+        ]
+      },
       {
         "path": "./syntaxes/template-tag.json",
         "scopeName": "template.tag.ng",

pnpm-lock.yaml

@@ -15,6 +15,7 @@ js_run_binary(
         "_template.json",
         "_template-blocks.json",
         "_template-tag.json",
+        "_let-declaration.json",
     ]
 )
 
@@ -27,6 +28,7 @@ write_source_files(
         "template.json": "_template.json",
         "template-blocks.json": "_template-blocks.json",
         "template-tag.json": "_template-tag.json",
+        "let-declaration.json": "_let-declaration.json",
     }
 )
 

syntaxes/BUILD.bazel

@@ -0,0 +1,52 @@
+{
+  "scopeName": "template.let.ng",
+  "injectionSelector": "L:text.html -comment -expression.ng -meta.tag -source.css -source.js",
+  "patterns": [
+    {
+      "include": "#letDeclaration"
+    }
+  ],
+  "repository": {
+    "letDeclaration": {
+      "begin": "(@let)\\s+([_$[:alpha:]][_$[:alnum:]]*)\\s*(=)?",
+      "beginCaptures": {
+        "1": {
+          "name": "storage.type.ng"
+        },
+        "2": {
+          "name": "meta.definition.variable.ng"
+        },
+        "3": {
+          "name": "keyword.operator.assignment.ng"
+        }
+      },
+      "patterns": [
+        {
+          "include": "#letInitializer"
+        }
+      ],
+      "contentName": "meta.definition.variable.ng",
+      "end": "(?<=;)"
+    },
+    "letInitializer": {
+      "begin": "\\s*",
+      "beginCaptures": {
+        "0": {
+          "name": "keyword.operator.assignment.ng"
+        }
+      },
+      "contentName": "meta.definition.variable.initializer.ng",
+      "patterns": [
+        {
+          "include": "expression.ng"
+        }
+      ],
+      "end": ";",
+      "endCaptures": {
+        "0": {
+          "name": "punctuation.terminator.statement.ng"
+        }
+      }
+    }
+  }
+}

syntaxes/let-declaration.json

@@ -13,6 +13,7 @@ import {InlineStyles} from './inline-styles';
 import {InlineTemplate} from './inline-template';
 import {Template} from './template';
 import {TemplateBlocks} from './template-blocks';
+import {LetDeclaration} from './template-let-declaration';
 import {TemplateTag} from './template-tag';
 import {GrammarDefinition, JsonObject} from './types';
 
@@ -57,3 +58,4 @@ build(InlineTemplate, 'inline-template');
 build(InlineStyles, 'inline-styles');
 build(TemplateBlocks, 'template-blocks');
 build(TemplateTag, 'template-tag');
+build(LetDeclaration, 'let-declaration');

syntaxes/src/build.ts

@@ -0,0 +1,45 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {GrammarDefinition} from './types';
+
+export const LetDeclaration: GrammarDefinition = {
+  scopeName: 'template.let.ng',
+  injectionSelector: 'L:text.html -comment -expression.ng -meta.tag -source.css -source.js',
+  patterns: [
+    {include: '#letDeclaration'},
+  ],
+  repository: {
+    letDeclaration: {
+      // Equals group is optional so that we start highlighting as
+      // soon as the user starts writing a valid name.
+      begin: /(@let)\s+([_$[:alpha:]][_$[:alnum:]]*)\s*(=)?/,
+      beginCaptures: {
+        1: {name: 'storage.type.ng'},
+        2: {name: 'meta.definition.variable.ng'},
+        3: {name: 'keyword.operator.assignment.ng'},
+      },
+      patterns: [{include: '#letInitializer'}],
+      contentName: 'meta.definition.variable.ng',
+      end: /(?<=;)/,
+    },
+
+    letInitializer: {
+      begin: /\s*/,
+      beginCaptures: {
+        0: {name: 'keyword.operator.assignment.ng'},
+      },
+      contentName: 'meta.definition.variable.initializer.ng',
+      patterns: [{include: 'expression.ng'}],
+      end: /;/,
+      endCaptures: {
+        0: {name: 'punctuation.terminator.statement.ng'},
+      },
+    },
+  },
+};

syntaxes/src/template-let-declaration.ts

@@ -37,5 +37,11 @@ export const cases = [
     'scopeName': 'template.ng',
     'grammarFiles': ['syntaxes/template.json', 'syntaxes/expression.json'],
     'testFile': 'syntaxes/test/data/expression.html'
-  }
+  },
+  {
+    'name': 'let syntax',
+    'scopeName': 'template.let.ng',
+    'grammarFiles': ['syntaxes/let-declaration.json', 'syntaxes/expression.json'],
+    'testFile': 'syntaxes/test/data/let-declaration.html'
+  },
 ];

syntaxes/test/cases.ts

@@ -0,0 +1,31 @@
+@let basicLet = 123 + 456;
+
+@let noSpaceAfterEquals =true;
+
+@let noSpaceBeforeEquals= true;
+
+@let noSpaceAroundEquals=true;
+
+@let                    lotOfSpaceAroundEquals      =            true;
+
+@let #invalid = true;
+@let invalidIn#TheMiddle = true;
+@letinvalid = true;
+
+@let stringContainingSemicolon = 'hello ;' + 'world';
+
+@let complexExpression = something ? 123 : {prop: 'hello' + true + 'world'};
+
+@let usingPipes = 123 + foo | async | multiply: 2 | separator: ';';
+
+@if (someExpr | async) {
+  @let inBlock = true;
+
+  @for (foo of bar; track foo) {
+    @let inNestedBlock = 123;
+  }
+}
+
+@let noEquals
+
+@let noValue =