refactor(compiler): Implement the remaining defer on triggers (angular#52387)

The previous commits provided the scaffolding for `defer on`. In this commit, we build on that work, adding triggers for `immediate`, `timer`, `hover`, and `viewport`.

PR Close angular#52387

Author: dylhunn

packages/compiler-cli/test/compliance/test_cases/r3_view_compiler_deferred/TEST_CASES.json

@@ -68,8 +68,7 @@
           ],
           "failureMessage": "Incorrect template"
         }
-      ],
-      "skipForTemplatePipeline": true
+      ]
     },
     {
       "description": "should generate a deferred block with local dependencies",

packages/compiler/src/template/pipeline/ir/src/enums.ts

@@ -527,5 +527,9 @@ export enum Namespace {
  */
 export enum DeferTriggerKind {
   Idle,
+  Immediate,
+  Timer,
+  Hover,
   Interaction,
+  Viewport,
 }

packages/compiler/src/template/pipeline/ir/src/ops/create.ts

@@ -718,13 +718,7 @@ interface DeferTriggerBase {
   kind: DeferTriggerKind;
 }
 
-interface DeferIdleTrigger extends DeferTriggerBase {
-  kind: DeferTriggerKind.Idle;
-}
-
-interface DeferInteractionTrigger extends DeferTriggerBase {
-  kind: DeferTriggerKind.Interaction;
-
+interface DeferTriggerWithTargetBase extends DeferTriggerBase {
   targetName: string|null;
 
   /**
@@ -746,10 +740,37 @@ interface DeferInteractionTrigger extends DeferTriggerBase {
   targetSlotViewSteps: number|null;
 }
 
+interface DeferIdleTrigger extends DeferTriggerBase {
+  kind: DeferTriggerKind.Idle;
+}
+
+interface DeferImmediateTrigger extends DeferTriggerBase {
+  kind: DeferTriggerKind.Immediate;
+}
+
+interface DeferHoverTrigger extends DeferTriggerWithTargetBase {
+  kind: DeferTriggerKind.Hover;
+}
+
+interface DeferTimerTrigger extends DeferTriggerBase {
+  kind: DeferTriggerKind.Timer;
+
+  delay: number;
+}
+
+interface DeferInteractionTrigger extends DeferTriggerWithTargetBase {
+  kind: DeferTriggerKind.Interaction;
+}
+
+interface DeferViewportTrigger extends DeferTriggerWithTargetBase {
+  kind: DeferTriggerKind.Viewport;
+}
+
 /**
  * The union type of all defer trigger interfaces.
  */
-export type DeferTrigger = DeferIdleTrigger|DeferInteractionTrigger;
+export type DeferTrigger = DeferIdleTrigger|DeferImmediateTrigger|DeferTimerTrigger|
+    DeferHoverTrigger|DeferInteractionTrigger|DeferViewportTrigger;
 
 export interface DeferOnOp extends Op<CreateOp> {
   kind: OpKind.DeferOn;

packages/compiler/src/template/pipeline/src/ingest.ts

@@ -375,6 +375,8 @@ function ingestDeferBlock(unit: ViewCompilationUnit, deferBlock: t.DeferredBlock
 
   // Configure all defer `on` conditions.
 
+  // TODO: refactor prefetch triggers to use a separate op type, with a shared superclass. This will
+  // make it easier to refactor prefetch behavior in the future.
   let prefetch = false;
   let deferOnOps: ir.DeferOnOp[] = [];
   for (const triggers of [deferBlock.triggers, deferBlock.prefetchTriggers]) {
@@ -383,6 +385,30 @@ function ingestDeferBlock(unit: ViewCompilationUnit, deferBlock: t.DeferredBlock
           ir.createDeferOnOp(deferXref, {kind: ir.DeferTriggerKind.Idle}, prefetch, null!);
       deferOnOps.push(deferOnOp);
     }
+    if (triggers.immediate !== undefined) {
+      const deferOnOp =
+          ir.createDeferOnOp(deferXref, {kind: ir.DeferTriggerKind.Immediate}, prefetch, null!);
+      deferOnOps.push(deferOnOp);
+    }
+    if (triggers.timer !== undefined) {
+      const deferOnOp = ir.createDeferOnOp(
+          deferXref, {kind: ir.DeferTriggerKind.Timer, delay: triggers.timer.delay}, prefetch, null!
+      );
+      deferOnOps.push(deferOnOp);
+    }
+    if (triggers.hover !== undefined) {
+      const deferOnOp = ir.createDeferOnOp(
+          deferXref, {
+            kind: ir.DeferTriggerKind.Hover,
+            targetName: triggers.hover.reference,
+            targetXref: null,
+            targetSlot: null,
+            targetView: null,
+            targetSlotViewSteps: null,
+          },
+          prefetch, null!);
+      deferOnOps.push(deferOnOp);
+    }
     if (triggers.interaction !== undefined) {
       const deferOnOp = ir.createDeferOnOp(
           deferXref, {
@@ -396,11 +422,27 @@ function ingestDeferBlock(unit: ViewCompilationUnit, deferBlock: t.DeferredBlock
           prefetch, null!);
       deferOnOps.push(deferOnOp);
     }
+    if (triggers.viewport !== undefined) {
+      const deferOnOp = ir.createDeferOnOp(
+          deferXref, {
+            kind: ir.DeferTriggerKind.Viewport,
+            targetName: triggers.viewport.reference,
+            targetXref: null,
+            targetSlot: null,
+            targetView: null,
+            targetSlotViewSteps: null,
+          },
+          prefetch, null!);
+      deferOnOps.push(deferOnOp);
+    }
+    // If no (non-prefetching) defer triggers were provided, default to `idle`.
+    if (deferOnOps.length === 0) {
+      deferOnOps.push(
+          ir.createDeferOnOp(deferXref, {kind: ir.DeferTriggerKind.Idle}, false, null!));
+    }
     prefetch = true;
   }
-  if (deferOnOps.length === 0) {
-    deferOnOps.push(ir.createDeferOnOp(deferXref, {kind: ir.DeferTriggerKind.Idle}, false, null!));
-  }
+
   unit.create.push(deferOnOps);
 }
 

packages/compiler/src/template/pipeline/src/instruction.ts

@@ -186,7 +186,8 @@ export function text(
 export function defer(
     selfSlot: number, primarySlot: number, dependencyResolverFn: null, loadingSlot: number|null,
     placeholderSlot: number|null, errorSlot: number|null, loadingConfig: o.Expression|null,
-    placeholderConfig: o.Expression|null, sourceSpan: ParseSourceSpan|null): ir.CreateOp {
+    placeholderConfig: o.Expression|null, enableTimerScheduling: boolean,
+    sourceSpan: ParseSourceSpan|null): ir.CreateOp {
   const args: Array<o.Expression> = [
     o.literal(selfSlot),
     o.literal(primarySlot),
@@ -196,6 +197,7 @@ export function defer(
     o.literal(errorSlot),
     loadingConfig ?? o.literal(null),
     placeholderConfig ?? o.literal(null),
+    enableTimerScheduling ? o.importExpr(Identifiers.deferEnableTimerScheduling) : o.literal(null),
   ];
 
   let expr: o.Expression;
@@ -209,10 +211,19 @@ export function defer(
 
 const deferTriggerToR3TriggerInstructionsMap = new Map([
   [ir.DeferTriggerKind.Idle, [Identifiers.deferOnIdle, Identifiers.deferPrefetchOnIdle]],
+  [
+    ir.DeferTriggerKind.Immediate,
+    [Identifiers.deferOnImmediate, Identifiers.deferPrefetchOnImmediate]
+  ],
+  [ir.DeferTriggerKind.Timer, [Identifiers.deferOnTimer, Identifiers.deferPrefetchOnTimer]],
+  [ir.DeferTriggerKind.Hover, [Identifiers.deferOnHover, Identifiers.deferPrefetchOnHover]],
   [
     ir.DeferTriggerKind.Interaction,
     [Identifiers.deferOnInteraction, Identifiers.deferPrefetchOnInteraction]
   ],
+  [
+    ir.DeferTriggerKind.Viewport, [Identifiers.deferOnViewport, Identifiers.deferPrefetchOnViewport]
+  ],
 ]);
 
 export function deferOn(

packages/compiler/src/template/pipeline/src/phases/defer_resolve_targets.ts

@@ -46,8 +46,12 @@ export function phaseDeferResolveTargets(job: ComponentCompilationJob): void {
       placeholderView: ir.XrefId|null): void {
     switch (op.trigger.kind) {
       case ir.DeferTriggerKind.Idle:
+      case ir.DeferTriggerKind.Immediate:
+      case ir.DeferTriggerKind.Timer:
         return;
+      case ir.DeferTriggerKind.Hover:
       case ir.DeferTriggerKind.Interaction:
+      case ir.DeferTriggerKind.Viewport:
         if (op.trigger.targetName === null) {
           return;
         }

packages/compiler/src/template/pipeline/src/phases/reify.ts

@@ -141,21 +141,30 @@ function reifyCreateOperations(unit: CompilationUnit, ops: ir.OpList<ir.CreateOp
         }
         break;
       case ir.OpKind.Defer:
+        const timerScheduling =
+            !!op.loadingMinimumTime || !!op.loadingAfterTime || !!op.placeholderMinimumTime;
         ir.OpList.replace(
             op,
             ng.defer(
                 op.slot.slot!, op.mainSlot.slot!, null, op.loadingSlot?.slot ?? null,
                 op.placeholderSlot?.slot! ?? null, op.errorSlot?.slot ?? null, op.loadingConfig,
-                op.placeholderConfig, op.sourceSpan));
+                op.placeholderConfig, timerScheduling, op.sourceSpan));
         break;
       case ir.OpKind.DeferOn:
         let args: number[] = [];
         switch (op.trigger.kind) {
           case ir.DeferTriggerKind.Idle:
+          case ir.DeferTriggerKind.Immediate:
+            break;
+          case ir.DeferTriggerKind.Timer:
+            args = [op.trigger.delay];
             break;
           case ir.DeferTriggerKind.Interaction:
+          case ir.DeferTriggerKind.Hover:
+          case ir.DeferTriggerKind.Viewport:
             if (op.trigger.targetSlot?.slot == null || op.trigger.targetSlotViewSteps === null) {
-              throw new Error('Slot or view steps not set in trigger reification');
+              throw new Error(`Slot or view steps not set in trigger reification for trigger kind ${
+                  op.trigger.kind}`);
             }
             args = [op.trigger.targetSlot.slot];
             if (op.trigger.targetSlotViewSteps !== 0) {