reactor(compiler-cli): account for babel types change (#45967)

This commit accounts for the Babel types changes. Some properties
can now also be `undefined` so existing checks/assertions had to
be adjusted to also capture `undefined` (along with `null`).

Additionally, in preparation for a new ECMA proposal, Babel types
seem to have been updated to include private names in object property
keys. This is not necessarily the case for object expressions, but
could be for object patterns (in the future -- when implemented).

More details: babel/babel#14304 and
https://github.com/tc39/proposal-destructuring-private.

PR Close #45967

packages/compiler-cli/linker/babel/src/ast/babel_ast_host.ts

@@ -71,7 +71,8 @@ export class BabelAstHost implements AstHost<t.Expression> {
     for (const property of obj.properties) {
       assert(property, t.isObjectProperty, 'a property assignment');
       assert(property.value, t.isExpression, 'an expression');
-      assert(property.key, isPropertyName, 'a property name');
+      assert(property.key, isObjectExpressionPropertyName, 'a property name');
+
       const key = t.isIdentifier(property.key) ? property.key.name : property.key.value;
       result.set(`${key}`, property.value);
     }
@@ -124,7 +125,7 @@ export class BabelAstHost implements AstHost<t.Expression> {
   }
 
   getRange(node: t.Expression): Range {
-    if (node.loc == null || node.start === null || node.end === null) {
+    if (node.loc == null || node.start == null || node.end == null) {
       throw new FatalLinkerError(
           node, 'Unable to read range for node - it is missing location information.');
     }
@@ -156,10 +157,14 @@ function isNotSpreadElement(e: t.Expression|t.SpreadElement): e is t.Expression
 
 
 /**
- * Return true if the expression can be considered a text based property name.
+ * Return true if the node can be considered a text based property name for an
+ * object expression.
+ *
+ * Notably in the Babel AST, object patterns (for destructuring) could be of type
+ * `t.PrivateName` so we need a distinction between object expressions and patterns.
  */
-function isPropertyName(e: t.Expression): e is t.Identifier|t.StringLiteral|t.NumericLiteral {
-  return t.isIdentifier(e) || t.isStringLiteral(e) || t.isNumericLiteral(e);
+function isObjectExpressionPropertyName(n: t.Node): n is t.Identifier|t.StringLiteral|t.NumericLiteral {
+  return t.isIdentifier(n) || t.isStringLiteral(n) || t.isNumericLiteral(n);
 }
 
 /**

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/ng_for_simple_partial.js

@@ -1,11 +1,11 @@
-.ɵɵelementStart(0, "div");\n // SOURCE: "/ng_for_simple.ts" "<div *ngFor="let item "
+.ɵɵelementStart(0, "div");\n     // SOURCE: "/ng_for_simple.ts" "<div *ngFor="let item "
 …
-.ɵɵtext(1);\n // SOURCE: "/ng_for_simple.ts" "{{ item }}"
+.ɵɵtext(1);\n     // SOURCE: "/ng_for_simple.ts" "{{ item }}"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
 .ɵɵelem // SOURCE: "/ng_for_simple.ts" "</div>'"
 …
-.ɵɵadvance(1);\n // SOURCE: "/ng_for_simple.ts" "{{ item }}"
+.ɵɵadvance(1);\n     // SOURCE: "/ng_for_simple.ts" "{{ item }}"
 …
 .ɵɵtextInterpolate(item_r1);\n  }\n}\n\n // SOURCE: "/ng_for_simple.ts" "{{ item }}"
 …

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/ng_for_templated_partial.js

@@ -1,4 +1,4 @@
-.ɵɵtext(0);\n  }\n\n  if (rf & 2) {\n    const item_r1 = ctx.$implicit;\n // SOURCE: "/ng_for_templated.ts" "{{ item }}</ng-template>`"
+.ɵɵtext(0);\n  }\n\n  if (rf & 2) {\n    const item_r1 = ctx.$implicit;\n     // SOURCE: "/ng_for_templated.ts" "{{ item }}</ng-template>`"
 …
 // TODO - map the bindings better
 // TODO: Work out how to fix the broken segment for the last item in a template

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/ng_if_simple_partial.js

@@ -1,6 +1,6 @@
-.ɵɵelementStart(0, "div");\n // SOURCE: "/ng_if_simple.ts" "<div *"
+.ɵɵelementStart(0, "div");\n     // SOURCE: "/ng_if_simple.ts" "<div *"
 …
-.ɵɵtext(1);\n // SOURCE: "/ng_if_simple.ts" "{{ name }}"
+.ɵɵtext(1);\n     // SOURCE: "/ng_if_simple.ts" "{{ name }}"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
 .ɵɵelem // SOURCE: "/ng_if_simple.ts" "</div>'"

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/ng_if_templated_partial.js

@@ -1,8 +1,8 @@
-.ɵɵelementStart(0, "div");\n // SOURCE: "/ng_if_templated.ts" "<div>"
+.ɵɵelementStart(0, "div");\n     // SOURCE: "/ng_if_templated.ts" "<div>"
 …
 // TODO - map the bindings better
 // TODO: Work out how to fix the broken segment for the last item in a template
-.ɵɵelementEnd();\n // SOURCE: "/ng_if_templated.ts" "</div>\n"
+.ɵɵelementEnd();\n     // SOURCE: "/ng_if_templated.ts" "</div>\n"
 …
 // TODO: the `ctx_r...` appears to be dependent upon previous tests!!!
 // TODO: expectMapping(mappings, {  source: '{{ name }}',  generated: 'i0.ɵɵtextInterpolate(ctx_r0.name)',  sourceUrl: '../ng_if_templated.ts'});

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_complex_partial.js

@@ -1,6 +1,6 @@
 .ɵɵelementStart(0, "button", 0) // SOURCE: "/output_binding_complex.ts" "<button "
 …
-.ɵɵlistener("click", function TestCmp_Template_button_click_0_listener() {\n // SOURCE: "/output_binding_complex.ts" "(click)=""
+.ɵɵlistener("click", function TestCmp_Template_button_click_0_listener() {\n         // SOURCE: "/output_binding_complex.ts" "(click)=""
 …
 ctx.items.push( // SOURCE: "/output_binding_complex.ts" "items.push("
 …

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/output_binding_simple_partial.js

@@ -1,6 +1,6 @@
 .ɵɵelementStart(0, "button", 0) // SOURCE: "/output_binding_simple.ts" "<button "
 …
-.ɵɵlistener("click", function TestCmp_Template_button_click_0_listener() {\n // SOURCE: "/output_binding_simple.ts" "(click)=\""
+.ɵɵlistener("click", function TestCmp_Template_button_click_0_listener() {\n         // SOURCE: "/output_binding_simple.ts" "(click)=\""
 …
 ctx.doSomething() // SOURCE: "/output_binding_simple.ts" "doSomething()\">"
 …

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_longhand_partial.js

@@ -1,7 +1,7 @@
 .ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_longhand.ts" "<input "
 …
 // TODO: improve mappings here
-.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\">'"
+.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_longhand.ts" "bindon-ngModel=\"name\">'"
 …
 // TODO: Work out how to fix the broken segment for the last item in a template
 .ɵɵelementEnd() // SOURCE: "/two_way_binding_longhand.ts" "<input "

packages/compiler-cli/test/compliance/test_cases/source_mapping/inline_templates/two_way_binding_simple_partial.js

@@ -2,6 +2,6 @@
 .ɵɵelementStart(1, "input", 0) // SOURCE: "/two_way_binding_simple.ts" "<input "
 …
 // TODO: improve mappings here
-.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\">'"
+.ɵɵlistener("ngModelChange", function TestCmp_Template_input_ngModelChange_1_listener($event) {\n         // SOURCE: "/two_way_binding_simple.ts" "[(ngModel)]=\"name\">'"
 …
 .ɵɵelementEnd() // SOURCE: "/two_way_binding_simple.ts" "<input "