Update @angular/compiler to v14 (#13609)

changelog_unreleased/angular/13609.md

@@ -0,0 +1,28 @@
+#### Update `@angular/compiler` to v14 (#13609 by @fisker)
+
+- Support shorthand object
+- [Drop support for quote expressions](https://github.com/angular/angular/pull/44915)
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<div [input]="{a, b   :   2 }"></div>
+
+<!-- Prettier stable -->
+Error: Cannot find front char /:/ from index 0 in "{a, b   :   2 }"
+
+<!-- Prettier main -->
+<div [input]="{ a, b: 2 }"></div>
+```
+
+<!-- prettier-ignore -->
+```html
+<!-- Input -->
+<a [href]="http://google.com">Click me</a>
+
+<!-- Prettier stable -->
+<a [href]="http:  //google.com">Click me</a>
+
+<!-- Prettier main -->
+<div [href]="http://google.com"></div>
+```

cspell.json

@@ -101,6 +101,7 @@
         "execa",
         "fbglyph",
         "fdescribe",
+        "fesm",
         "Ficarra",
         "Filipe",
         "Fiorini",

package.json

@@ -29,7 +29,7 @@
     "bin"
   ],
   "dependencies": {
-    "@angular/compiler": "12.2.16",
+    "@angular/compiler": "14.2.5",
     "@babel/code-frame": "7.18.6",
     "@babel/parser": "7.19.3",
     "@babel/types": "7.19.0",
@@ -40,7 +40,7 @@
     "@typescript-eslint/visitor-keys": "5.39.0",
     "acorn": "8.8.0",
     "acorn-jsx": "5.3.2",
-    "angular-estree-parser": "3.0.3",
+    "angular-estree-parser": "4.0.1",
     "angular-html-parser": "2.0.0",
     "camelcase": "7.0.0",
     "chalk": "5.0.1",

scripts/build/config.mjs

@@ -131,14 +131,33 @@ const pluginFiles = [
   "src/language-js/parse/meriyah.js",
   {
     input: "src/language-js/parse/angular.js",
-    replaceModule: ["ast.js", "lexer.js", "parser.js"].map((file) => ({
-      module: require.resolve(
-        `@angular/compiler/src/expression_parser/${file}`
-      ),
-      path: require.resolve(
-        `@angular/compiler/esm2015/src/expression_parser/${file}`
-      ),
-    })),
+    replaceModule: [
+      // We only use a small set of `@angular/compiler` from `esm2020/src/expression_parser/`
+      // Those files can't be imported, they also not directly runnable, because `.mjs` extension is missing
+      {
+        module: path.join(
+          path.dirname(require.resolve("@angular/compiler/package.json")),
+          "fesm2020/compiler.mjs"
+        ),
+        text: /* indent */ `
+          export * from '../esm2020/src/expression_parser/ast.mjs';
+          export {Lexer} from '../esm2020/src/expression_parser/lexer.mjs';
+          export {Parser} from '../esm2020/src/expression_parser/parser.mjs';
+        `,
+      },
+      ...[
+        "expression_parser/lexer.mjs",
+        "expression_parser/parser.mjs",
+        "ml_parser/interpolation_config.mjs",
+      ].map((file) => ({
+        module: path.join(
+          path.dirname(require.resolve("@angular/compiler/package.json")),
+          `esm2020/src/${file}`
+        ),
+        process: (text) =>
+          text.replaceAll(/(?<=import .*? from )'(.{1,2}\/.*)'/g, "'$1.mjs'"),
+      })),
+    ],
   },
   {
     input: "src/language-css/parser-postcss.js",

src/language-js/print/angular.js

@@ -36,8 +36,6 @@ function printAngular(path, options, print) {
       );
     case "NGEmptyExpression":
       return "";
-    case "NGQuotedExpression":
-      return [node.prefix, ": ", node.value.trim()];
     case "NGMicrosyntax":
       return path.map(
         (childPath, index) => [

src/language-js/traverse/visitor-keys.evaluate.js

@@ -8,7 +8,6 @@ const angularVisitorKeys = {
   NGPipeExpression: ["left", "right", "arguments"],
   NGChainedExpression: ["expressions"],
   NGEmptyExpression: [],
-  NGQuotedExpression: [],
   NGMicrosyntax: ["body"],
   NGMicrosyntaxKey: [],
   NGMicrosyntaxExpression: ["expression", "alias"],

tests/format/angular/angular/__snapshots__/jsfmt.spec.js.snap

@@ -466,7 +466,7 @@ printWidth: 80
   [target]="a"
   [target]="a // hello"
   [target]="a.b"
-  [target]="javascript: 'hello world'"
+  [target]=" javascript : 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"
@@ -737,7 +737,7 @@ printWidth: 80
   [target]="a"
   [target]="a // hello"
   [target]="a.b"
-  [target]="javascript: 'hello world'"
+  [target]=" javascript : 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"
@@ -1088,9 +1088,7 @@ printWidth: 1
   [target]="
     a.b
   "
-  [target]="
-    javascript: 'hello world'
-  "
+  [target]=" javascript : 'hello world' "
   [target]="
     a?.b()
   "
@@ -1608,7 +1606,7 @@ trailingComma: "es5"
   [target]="a"
   [target]="a // hello"
   [target]="a.b"
-  [target]="javascript: 'hello world'"
+  [target]=" javascript : 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"
@@ -1879,7 +1877,7 @@ trailingComma: "none"
   [target]="a"
   [target]="a // hello"
   [target]="a.b"
-  [target]="javascript: 'hello world'"
+  [target]=" javascript : 'hello world' "
   [target]="a?.b()"
   [target]="a?.b"
   [target]="this.a"

tests/format/angular/shorthand/__snapshots__/jsfmt.spec.js.snap

@@ -7,9 +7,11 @@ printWidth: 80
                                                                                 | printWidth
 =====================================input======================================
 <ng-container *ngTemplateOutlet="someTmpl; context: {app}"></ng-container>
+<div dir [input]="{   a,   b:   2   }"></div>
 
 =====================================output=====================================
 <ng-container *ngTemplateOutlet="someTmpl; context: { app }"></ng-container>
+<div dir [input]="{ a, b: 2 }"></div>
 
 ================================================================================
 `;

tests/format/angular/shorthand/basic.html

@@ -1 +1,2 @@
 <ng-container *ngTemplateOutlet="someTmpl; context: {app}"></ng-container>
+<div dir [input]="{   a,   b:   2   }"></div>

tests/unit/__snapshots__/visitor-keys.js.snap

@@ -487,7 +487,6 @@ exports[`visitor keys estree 1`] = `
     "right",
     "arguments",
   ],
-  "NGQuotedExpression": [],
   "NGRoot": [
     "node",
   ],

yarn.lock

@@ -15,12 +15,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@angular/compiler@npm:12.2.16":
-  version: 12.2.16
-  resolution: "@angular/compiler@npm:12.2.16"
+"@angular/compiler@npm:14.2.5":
+  version: 14.2.5
+  resolution: "@angular/compiler@npm:14.2.5"
   dependencies:
-    tslib: ^2.2.0
-  checksum: 87e4d5df658c73c5ed25269c72f8797a006213a98ce13607377205d5faa7dbc204ca8127d589c1c4848ab8616b4aa58005b29eb76da16a34f635e054d679ff69
+    tslib: ^2.3.0
+  peerDependencies:
+    "@angular/core": 14.2.5
+  peerDependenciesMeta:
+    "@angular/core":
+      optional: true
+  checksum: 665718c8384a7bd7aa150342658775afac2375ba41fa896fba74bee2f0ca29173ce3dfba2cce6aa483d486afa968235f4b1c8647050740bf74aaeb3fb89f1e42
   languageName: node
   linkType: hard
 
@@ -1715,15 +1720,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"angular-estree-parser@npm:3.0.3":
-  version: 3.0.3
-  resolution: "angular-estree-parser@npm:3.0.3"
+"angular-estree-parser@npm:4.0.1":
+  version: 4.0.1
+  resolution: "angular-estree-parser@npm:4.0.1"
   dependencies:
     lines-and-columns: ^2.0.3
     tslib: ^2.4.0
   peerDependencies:
-    "@angular/compiler": ^9.1.0 || ^10.0.0 || ^11.0.0 || ^12.0.0
-  checksum: bdcadb3e9cde9bfbfc826bfaca8d30c218c45f00c3271f33484a0bc8c05e86d2ce91e84c1eca7ef289a57a350e16f5ab0ffcb508ec2825a9339d0ccc9d37ccaf
+    "@angular/compiler": ^14.0.0
+  checksum: b04a8b8fee56811c5d3b58a7fb13c3cf8a623203cde6a393633e1e2f0605770a90cc8b9b20ef242d6e99de3d47e0314a9bf0247c0c74b7ebb1b0b6ef94c2cabc
   languageName: node
   linkType: hard
 
@@ -6592,7 +6597,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "prettier@workspace:."
   dependencies:
-    "@angular/compiler": 12.2.16
+    "@angular/compiler": 14.2.5
     "@babel/code-frame": 7.18.6
     "@babel/generator": 7.19.0
     "@babel/parser": 7.19.3
@@ -6611,7 +6616,7 @@ __metadata:
     "@typescript-eslint/visitor-keys": 5.39.0
     acorn: 8.8.0
     acorn-jsx: 5.3.2
-    angular-estree-parser: 3.0.3
+    angular-estree-parser: 4.0.1
     angular-html-parser: 2.0.0
     benchmark: 2.1.4
     browserslist-to-esbuild: 1.2.0
@@ -7874,7 +7879,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tslib@npm:2.4.0, tslib@npm:^2.2.0, tslib@npm:^2.4.0":
+"tslib@npm:2.4.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
   version: 2.4.0
   resolution: "tslib@npm:2.4.0"
   checksum: 8c4aa6a3c5a754bf76aefc38026134180c053b7bd2f81338cb5e5ebf96fefa0f417bff221592bf801077f5bf990562f6264fecbc42cd3309b33872cb6fc3b113