prettier · fisker · Jul 13, 2025 · Jul 13, 2025 · Jul 13, 2025
diff --git a/package.json b/package.json
@@ -27,30 +27,30 @@
     "release": "release-it"
   },
   "devDependencies": {
-    "@angular/compiler": "20.0.0",
+    "@angular/compiler": "20.1.0",
     "@babel/code-frame": "7.27.1",
-    "@babel/parser": "7.27.3",
-    "@babel/types": "7.27.3",
+    "@babel/parser": "7.28.0",
+    "@babel/types": "7.28.1",
     "@types/babel__code-frame": "7.0.6",
-    "@types/node": "22.15.23",
-    "@vitest/coverage-v8": "3.1.4",
+    "@types/node": "24.0.13",
+    "@vitest/coverage-v8": "3.2.4",
     "del-cli": "6.0.0",
-    "eslint": "9.27.0",
+    "eslint": "9.31.0",
     "eslint-config-prettier": "10.1.5",
     "eslint-plugin-simple-import-sort": "12.1.1",
     "eslint-plugin-unicorn": "59.0.1",
-    "globals": "16.2.0",
+    "globals": "16.3.0",
     "jest-snapshot-serializer-raw": "2.0.0",
     "lines-and-columns": "2.0.4",
     "npm-run-all2": "8.0.4",
-    "prettier": "3.5.3",
-    "release-it": "19.0.2",
+    "prettier": "3.6.2",
+    "release-it": "19.0.3",
     "typescript": "5.8.3",
-    "typescript-eslint": "8.33.0",
-    "vitest": "3.1.4"
+    "typescript-eslint": "8.36.0",
+    "vitest": "3.2.4"
   },
   "peerDependencies": {
-    "@angular/compiler": "^20.0.0"
+    "@angular/compiler": "^20.1.0"
   },
   "engines": {
     "node": ">= 20"

diff --git a/src/angular-parser.ts b/src/angular-parser.ts
@@ -1,13 +1,23 @@
 import {
   type ASTWithSource,
   Lexer,
+  ParseLocation,
   Parser,
+  ParseSourceFile,
+  ParseSourceSpan,
   type TemplateBindingParseResult,
 } from '@angular/compiler';
 
 import { type CommentLine } from './types.js';
 import { sourceSpanToLocationInformation } from './utils.js';
 
+// https://github.com/angular/angular/blob/5e9707dc84e6590ec8c9d41e7d3be7deb2fa7c53/packages/compiler/test/expression_parser/utils/span.ts
+function getFakeSpan(fileName = 'test.html') {
+  const file = new ParseSourceFile('', fileName);
+  const location = new ParseLocation(file, 0, 0, 0);
+  return new ParseSourceSpan(location, location);
+}
+
 const getCommentStart = (text: string): number | null =>
   // @ts-expect-error -- need to call private _commentStart
   Parser.prototype._commentStart(text);
@@ -59,23 +69,23 @@ function createAngularParseFunction<
 }
 
 export const parseBinding = createAngularParseFunction((text, parser) =>
-  parser.parseBinding(text, '', 0),
+  parser.parseBinding(text, getFakeSpan(), 0),
 );
 
 export const parseSimpleBinding = createAngularParseFunction((text, parser) =>
-  parser.parseSimpleBinding(text, '', 0),
+  parser.parseSimpleBinding(text, getFakeSpan(), 0),
 );
 
 export const parseAction = createAngularParseFunction((text, parser) =>
-  parser.parseAction(text, '', 0),
+  parser.parseAction(text, getFakeSpan(), 0),
 );
 
 export const parseInterpolationExpression = createAngularParseFunction(
-  (text, parser) => parser.parseInterpolationExpression(text, '', 0),
+  (text, parser) => parser.parseInterpolationExpression(text, getFakeSpan(), 0),
 );
 
 export const parseTemplateBindings = createAngularParseFunction(
-  (text, parser) => parser.parseTemplateBindings('', text, '', 0, 0),
+  (text, parser) => parser.parseTemplateBindings('', text, getFakeSpan(), 0, 0),
   /* shouldExtractComment */ false,
 );
 

diff --git a/src/transform-node.ts b/src/transform-node.ts
@@ -39,6 +39,20 @@ type NodeTransformOptions = {
   parent?: angular.AST;
 };
 
+const assignmentOperators = new Set([
+  '=',
+  // https://github.com/angular/angular/pull/62064
+  '+=', // addition assignment
+  '-=', // subtraction assignment
+  '*=', // multiplication assignment
+  '/=', // division assignment
+  '%=', // remainder assignment
+  '**=', // exponentiation assignment
+  '&&=', // logical AND assignment
+  '||=', // logical OR assignment
+  '??=', // nullish coalescing assignment
+]);
+
 class Transformer extends Source {
   #node;
   #text;
@@ -170,6 +184,19 @@ class Transformer extends Source {
         );
       }
 
+      if (assignmentOperators.has(operator)) {
+        return this.#create<babel.AssignmentExpression>(
+          {
+            ...properties,
+            type: 'AssignmentExpression',
+            left: left as babel.MemberExpression,
+            operator,
+            ...node.sourceSpan,
+          },
+          { hasParentParens: isInParentParens },
+        );
+      }
+
       return this.#create<babel.BinaryExpression>(
         {
           ...properties,
@@ -263,13 +290,19 @@ class Transformer extends Source {
       node instanceof angular.KeyedRead ||
       node instanceof angular.SafeKeyedRead
     ) {
+      // TODO: Use `node.sourceSpan.end` directly
+      // https://github.com/angular/angular/issues/62617
+      const end =
+        this.text.charAt(node.sourceSpan.end - 1) === '='
+          ? this.getCharacterLastIndex(/\S/, node.sourceSpan.end - 2) + 1
+          : node.sourceSpan.end;
       return this.#transformReceiverAndName(
         node.receiver,
         this.#transform<babel.Expression>(node.key),
         {
           computed: true,
           optional: node instanceof angular.SafeKeyedRead,
-          end: node.sourceSpan.end, // ]
+          end: end, // ]
           hasParentParens: isInParentParens,
         },
       );
@@ -485,14 +518,11 @@ class Transformer extends Source {
       node instanceof angular.SafePropertyRead
     ) {
       const { receiver, name } = node;
-      const nameEnd =
-        this.getCharacterLastIndex(/\S/, node.sourceSpan.end - 1) + 1;
       const tName = this.#create<babel.Identifier>(
         {
           type: 'Identifier',
           name,
-          start: nameEnd - name.length,
-          end: nameEnd,
+          ...node.nameSpan,
         },
         isImplicitThis(receiver, this.#text)
           ? { hasParentParens: isInParentParens }
@@ -505,58 +535,6 @@ class Transformer extends Source {
       });
     }
 
-    if (node instanceof angular.KeyedWrite) {
-      const key = this.#transform<babel.Expression>(node.key);
-      const right = this.#transform<babel.Expression>(node.value);
-      const left = this.#transformReceiverAndName(node.receiver, key, {
-        computed: true,
-        optional: false,
-        end: this.getCharacterIndex(']', getOuterEnd(key)) + 1,
-      });
-      return this.#create<babel.AssignmentExpression>(
-        {
-          type: 'AssignmentExpression',
-          left: left as babel.MemberExpression,
-          operator: '=',
-          right,
-          start: getOuterStart(left),
-          end: getOuterEnd(right),
-        },
-        { hasParentParens: isInParentParens },
-      );
-    }
-
-    if (node instanceof angular.PropertyWrite) {
-      const { receiver, name, value } = node;
-      const tValue = this.#transform<babel.Expression>(value);
-      const nameEnd =
-        this.getCharacterLastIndex(
-          /\S/,
-          this.getCharacterLastIndex('=', getOuterStart(tValue) - 1) - 1,
-        ) + 1;
-      const tName = this.#create<babel.Identifier>({
-        type: 'Identifier',
-        name,
-        start: nameEnd - name.length,
-        end: nameEnd,
-      });
-      const tReceiverAndName = this.#transformReceiverAndName(receiver, tName, {
-        computed: false,
-        optional: false,
-      });
-      return this.#create<babel.AssignmentExpression>(
-        {
-          type: 'AssignmentExpression',
-          left: tReceiverAndName as babel.MemberExpression,
-          operator: '=',
-          right: tValue,
-          start: getOuterStart(tReceiverAndName),
-          end: getOuterEnd(tValue),
-        },
-        { hasParentParens: isInParentParens },
-      );
-    }
-
     if (node instanceof angular.TaggedTemplateLiteral) {
       return this.#create<babel.TaggedTemplateExpression>({
         type: 'TaggedTemplateExpression',
@@ -619,8 +597,6 @@ class Transformer extends Source {
 type SupportedNodes =
   | angular.ASTWithSource // Not handled
   | angular.PropertyRead
-  | angular.PropertyWrite
-  | angular.KeyedWrite
   | angular.Call
   | angular.LiteralPrimitive
   | angular.Unary

diff --git a/tests/helpers.ts b/tests/helpers.ts
@@ -157,14 +157,12 @@ const KNOWN_AST_TYPES = [
   'KeyedRead',
   'SafeKeyedRead',
   'TypeofExpression',
-  'KeyedWrite',
   'LiteralArray',
   'LiteralMap',
   'LiteralPrimitive',
   'NonNullAssert',
   'PrefixNot',
   'PropertyRead',
-  'PropertyWrite',
   'SafeCall',
   'SafePropertyRead',
   'ThisReceiver',

diff --git a/tests/transform.test.ts b/tests/transform.test.ts
@@ -51,7 +51,7 @@ describe.each`
   ${'SafeKeyedRead'}         | ${'OptionalMemberExpression'} | ${' a ?. b ?. [ c ] '}                          | ${true}     | ${true}      | ${true}            | ${true}
   ${'KeyedRead'}             | ${'OptionalMemberExpression'} | ${' a ?. b () [ c ] '}                          | ${true}     | ${true}      | ${true}            | ${true}
   ${'SafeKeyedRead'}         | ${'OptionalMemberExpression'} | ${' a ?. b () ?. [ c ] '}                       | ${true}     | ${true}      | ${true}            | ${true}
-  ${'KeyedWrite'}            | ${'AssignmentExpression'}     | ${' a [ b ] = 1 '}                              | ${true}     | ${true}      | ${true}            | ${true}
+  ${'Binary'}                | ${'AssignmentExpression'}     | ${' a [ b ] = 1 '}                              | ${true}     | ${true}      | ${true}            | ${true}
   ${'ImplicitReceiver'}      | ${'ThisExpression'}           | ${' this '}                                     | ${true}     | ${true}      | ${true}            | ${true}
   ${'LiteralArray'}          | ${'ArrayExpression'}          | ${' [ 1 ] '}                                    | ${true}     | ${true}      | ${true}            | ${true}
   ${'LiteralMap'}            | ${'ObjectExpression'}         | ${' ( { "a" : 1 } )'}                           | ${true}     | ${true}      | ${true}            | ${true}
@@ -88,8 +88,8 @@ describe.each`
   ${'PropertyRead'}          | ${'MemberExpression'}         | ${' this . a '}                                 | ${true}     | ${true}      | ${true}            | ${true}
   ${'PropertyRead'}          | ${'OptionalMemberExpression'} | ${' a ?. b . c '}                               | ${true}     | ${true}      | ${true}            | ${true}
   ${'PropertyRead'}          | ${'OptionalMemberExpression'} | ${' a ?. b ( ) . c '}                           | ${true}     | ${true}      | ${true}            | ${true}
-  ${'PropertyWrite'}         | ${'AssignmentExpression'}     | ${' a . b = 1 '}                                | ${true}     | ${false}     | ${false}           | ${false}
-  ${'PropertyWrite'}         | ${'AssignmentExpression'}     | ${' a = 1 '}                                    | ${true}     | ${false}     | ${false}           | ${false}
+  ${'Binary'}                | ${'AssignmentExpression'}     | ${' a . b = 1 '}                                | ${true}     | ${false}     | ${false}           | ${false}
+  ${'Binary'}                | ${'AssignmentExpression'}     | ${' a = 1 '}                                    | ${true}     | ${false}     | ${false}           | ${false}
   ${'Call'}                  | ${'OptionalCallExpression'}   | ${' a ?. b ( ) '}                               | ${true}     | ${true}      | ${true}            | ${true}
   ${'SafeCall'}              | ${'OptionalCallExpression'}   | ${' a ?. b ?. ( ) '}                            | ${true}     | ${true}      | ${true}            | ${true}
   ${'SafePropertyRead'}      | ${'OptionalMemberExpression'} | ${' a ?. b '}                                   | ${true}     | ${true}      | ${true}            | ${true}
@@ -106,6 +106,7 @@ describe.each`
   ${'TaggedTemplateLiteral'} | ${'TaggedTemplateExpression'} | ${' ( ( ( ( tag ) ) ` a ${ b } \\u0063 ` ) ) '} | ${true}     | ${true}      | ${true}            | ${true}
   ${'LiteralMap'}            | ${'ObjectExpression'}         | ${' ( ( {foo: ` a ${ b } ` } ) ) '}             | ${true}     | ${true}      | ${true}            | ${true}
   ${'LiteralMap'}            | ${'ObjectExpression'}         | ${' ( ( {foo: tag ` a ${ b } ` } ) ) '}         | ${true}     | ${true}      | ${true}            | ${true}
+  ${'Binary'}                | ${'AssignmentExpression'}     | ${' a ??= b '}                                  | ${true}     | ${false}     | ${false}           | ${false}
 `('($expectedAngularType -> $expectedEstreeType)', (fields) => {
   for (const method of PARSE_METHODS) {
     testSection(method, fields);