refactor(compiler): Add conditionalCreate instruction (angular#60425)

This adds a new instruction for dealing with creating conditionals. It ensures flags are set on the TNode for later identification during hydration.

PR Close angular#60425

Author: thePunderWoman

packages/compiler-cli/test/compliance/test_cases/r3_compiler_compliance/components_and_directives/content_projection/ng_content_fallback.js

@@ -65,7 +65,8 @@ $r3$.ɵɵdefineComponent({
       $r3$.ɵɵelementStart(2, "div");
       $r3$.ɵɵprojection(3, 1, null, TestComponent_ProjectionFallback_3_Template, 5, 1);
       $r3$.ɵɵelementEnd();
-      $r3$.ɵɵtemplate(5, TestComponent_Conditional_5_Template, 2, 0)(6, TestComponent_ng_content_6_Template, 2, 0, "ng-content", 0);
+      $r3$.ɵɵconditionalCreate(5, TestComponent_Conditional_5_Template, 2, 0);
+      $r3$.ɵɵtemplate(6, TestComponent_ng_content_6_Template, 2, 0, "ng-content", 0);
     }
     if (rf & 2) {
       $r3$.ɵɵadvance(5);

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/basic_if_else_if_template.js

@@ -26,7 +26,7 @@ function MyApp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "div");
     $r3$.ɵɵtext(1);
-    $r3$.ɵɵtemplate(2, MyApp_Conditional_2_Template, 1, 0)(3, MyApp_Conditional_3_Template, 1, 0)(4, MyApp_Conditional_4_Template, 1, 0)(5, MyApp_Conditional_5_Template, 1, 0);
+    $r3$.ɵɵconditionalCreate(2, MyApp_Conditional_2_Template, 1, 0)(3, MyApp_Conditional_3_Template, 1, 0)(4, MyApp_Conditional_4_Template, 1, 0)(5, MyApp_Conditional_5_Template, 1, 0);
     $r3$.ɵɵelementEnd();
   }
   if (rf & 2) {

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/basic_if_else_template.js

@@ -14,7 +14,7 @@ function MyApp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "div");
     $r3$.ɵɵtext(1);
-    $r3$.ɵɵtemplate(2, MyApp_Conditional_2_Template, 1, 0)(3, MyApp_Conditional_3_Template, 1, 0);
+    $r3$.ɵɵconditionalCreate(2, MyApp_Conditional_2_Template, 1, 0)(3, MyApp_Conditional_3_Template, 1, 0);
     $r3$.ɵɵelementEnd();
   }
   if (rf & 2) {

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/basic_if_template.js

@@ -8,7 +8,7 @@ function MyApp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "div");
     $r3$.ɵɵtext(1);
-    $r3$.ɵɵtemplate(2, MyApp_Conditional_2_Template, 1, 0);
+    $r3$.ɵɵconditionalCreate(2, MyApp_Conditional_2_Template, 1, 0);
     $r3$.ɵɵelementEnd();
   }
   if (rf & 2) {

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/basic_switch_template.js

@@ -26,7 +26,7 @@ function MyApp_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵelementStart(0, "div");
     $r3$.ɵɵtext(1);
-    $r3$.ɵɵtemplate(2, MyApp_Case_2_Template, 1, 0)(3, MyApp_Case_3_Template, 1, 0)(4, MyApp_Case_4_Template, 1, 0)(5, MyApp_Case_5_Template, 1, 0);
+    $r3$.ɵɵconditionalCreate(2, MyApp_Case_2_Template, 1, 0)(3, MyApp_Case_3_Template, 1, 0)(4, MyApp_Case_4_Template, 1, 0)(5, MyApp_Case_5_Template, 1, 0);
     $r3$.ɵɵelementEnd();
   }
   if (rf & 2) {

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_element_root_node_at_end_template.js

@@ -1 +1 @@
-$r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 3, 2)(1, MyApp_Conditional_1_Template, 3, 2)(2, MyApp_Conditional_2_Template, 3, 2);
+$r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Template, 3, 2)(1, MyApp_Conditional_1_Template, 3, 2)(2, MyApp_Conditional_2_Template, 3, 2);

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_element_root_node_template.js

@@ -1,3 +1,3 @@
 consts: [["foo", "1", "bar", "2", 3, "binding"], ["foo", "4", "bar", "5", 3, "binding"], ["foo", "7", "bar", "8", 3, "binding"]],
 …
-$r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 2, 2, "div", 0)(1, MyApp_Conditional_1_Template, 2, 2, "div", 1)(2, MyApp_Conditional_2_Template, 2, 2, "div", 2);
+$r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Template, 2, 2, "div", 0)(1, MyApp_Conditional_1_Template, 2, 2, "div", 1)(2, MyApp_Conditional_2_Template, 2, 2, "div", 2);

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_nested_alias_listeners_template.js

@@ -24,7 +24,7 @@ function MyApp_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) {
 		return $r3$.ɵɵresetView($ctx_r10$.log($ctx_r10$.value(), $root_r1$, $inner_r3$));
 	  });
 	  $r3$.ɵɵelementEnd();
-	  $r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0, "button");
+	  $r3$.ɵɵconditionalCreate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 0, "button");
 	}
 	if (rf & 2) {
 	  let $MyApp_Conditional_0_Conditional_1_contFlowTmp$;
@@ -44,7 +44,7 @@ function MyApp_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) {
 		return $r3$.ɵɵresetView($ctx_r13$.log($ctx_r13$.value(), $root_r1$));
 	  });
 	  $r3$.ɵɵelementEnd();
-	  $r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Template, 2, 1);
+	  $r3$.ɵɵconditionalCreate(1, MyApp_Conditional_0_Conditional_1_Template, 2, 1);
 	}
 	if (rf & 2) {
 	  let $MyApp_Conditional_0_contFlowTmp$;
@@ -56,7 +56,7 @@ function MyApp_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) {
   …
   function MyApp_Template(rf, ctx) {
 	if (rf & 1) {
-	  $r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 2, 1);
+	  $r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Template, 2, 1);
 	}
 	if (rf & 2) {
 	  let $MyApp_contFlowTmp$;

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_nested_alias_template.js

@@ -13,7 +13,7 @@ function MyApp_Conditional_0_Conditional_1_Conditional_1_Template(rf, ctx) {
 function MyApp_Conditional_0_Conditional_1_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0);
-    $r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 4);
+    $r3$.ɵɵconditionalCreate(1, MyApp_Conditional_0_Conditional_1_Conditional_1_Template, 1, 4);
   }
   if (rf & 2) {
     // NOTE: TODO: These ellipses were added because of a different variable order between
@@ -32,7 +32,7 @@ function MyApp_Conditional_0_Conditional_1_Template(rf, ctx) {
 function MyApp_Conditional_0_Template(rf, ctx) {
   if (rf & 1) {
     $r3$.ɵɵtext(0);
-    $r3$.ɵɵtemplate(1, MyApp_Conditional_0_Conditional_1_Template, 2, 4);
+    $r3$.ɵɵconditionalCreate(1, MyApp_Conditional_0_Conditional_1_Template, 2, 4);
   }
   if (rf & 2) {
     …
@@ -46,7 +46,7 @@ function MyApp_Conditional_0_Template(rf, ctx) {
 …
 function MyApp_Template(rf, ctx) {
   if (rf & 1) {
-    $r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 2, 3);
+    $r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Template, 2, 3);
   }
   if (rf & 2) {
     let $MyApp_contFlowTmp$;

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_control_flow/if_template_root_node_template.js

@@ -1,3 +1,3 @@
 consts: [["foo", "1", "bar", "2", 3, "binding"], ["foo", "4", "bar", "5", 3, "binding"], ["foo", "7", "bar", "8", 3, "binding"]],
 …
-$r3$.ɵɵtemplate(0, MyApp_Conditional_0_Template, 1, 1, null, 0)(1, MyApp_Conditional_1_Template, 1, 1, null, 1)(2, MyApp_Conditional_2_Template, 1, 1, null, 2);
+$r3$.ɵɵconditionalCreate(0, MyApp_Conditional_0_Template, 1, 1, null, 0)(1, MyApp_Conditional_1_Template, 1, 1, null, 1)(2, MyApp_Conditional_2_Template, 1, 1, null, 2);