refactor(migrations): update references for dom_trigger functions onInteract, onHover, onViewport to point to new location in core/primitives/defer (angular#61342)

steven008 · thePunderWoman · commit d7753988bdc8 · 2025-05-21T17:30:10.000Z
Moves the onInteract, onHover, onViewport dom_trigger functions to /packages/core/primitives/defer to be used as a shared library PR Close angular#61342
diff --git a/packages/core/BUILD.bazel b/packages/core/BUILD.bazel
@@ -42,6 +42,7 @@ ng_project(
         ],
     ),
     interop_deps = [
+        "//packages/core/primitives/defer:triggers",
         "//packages/core/primitives/di",
         "//packages/core/primitives/dom-navigation",
         "//packages/core/primitives/event-dispatch",
diff --git a/packages/core/primitives/defer/BUILD.bazel b/packages/core/primitives/defer/BUILD.bazel
@@ -0,0 +1,14 @@
+load("//tools:defaults.bzl", "ts_library")
+
+package(default_visibility = [
+    "//packages/core:__subpackages__",
+])
+
+ts_library(
+    name = "triggers",
+    srcs = glob(
+        [
+            "**/*.ts",
+        ],
+    ),
+)
diff --git a/packages/core/primitives/defer/src/triggers.ts b/packages/core/primitives/defer/src/triggers.ts
@@ -1,3 +1,10 @@
+/*!
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
 
 /** Configuration object used to register passive and capturing events. */
 const eventListenerOptions: AddEventListenerOptions = {
@@ -12,7 +19,7 @@ const hoverTriggers = new WeakMap<Element, DeferEventEntry>();
 const interactionTriggers = new WeakMap<Element, DeferEventEntry>();
 
 /** Currently-registered `viewport` triggers. */
-const viewportTriggers = new WeakMap<Element, DeferEventEntry>();
+export const viewportTriggers = new WeakMap<Element, DeferEventEntry>();
 
 /** Names of the events considered as interaction events. */
 export const interactionEventNames = ['click', 'keydown'] as const;
@@ -37,14 +44,12 @@ class DeferEventEntry {
   };
 }
 
-export function getViewportTriggers() {
-  return viewportTriggers;
-}
-
 /**
  * Registers an interaction trigger.
  * @param trigger Element that is the trigger.
  * @param callback Callback to be invoked when the trigger is interacted with.
+ * @return cleanup function which removes trigger Element from interactionTriggers map
+ * and interaction event listeners from the trigger Element
  */
 export function onInteraction(trigger: Element, callback: VoidFunction): VoidFunction {
   let entry = interactionTriggers.get(trigger);
@@ -86,11 +91,12 @@ export function onInteraction(trigger: Element, callback: VoidFunction): VoidFun
   };
 }
 
-
 /**
  * Registers a hover trigger.
  * @param trigger Element that is the trigger.
  * @param callback Callback to be invoked when the trigger is hovered over.
+ * @return cleanup function which removes trigger element from hoverTriggers map
+ * and removes hover interaction event listeners from the trigger element
  */
 export function onHover(trigger: Element, callback: VoidFunction): VoidFunction {
   let entry = hoverTriggers.get(trigger);
@@ -120,125 +126,63 @@ export function onHover(trigger: Element, callback: VoidFunction): VoidFunction
   };
 }
 
-export interface Observer {
-  observe: (target: Element) => void,
-  unobserve: (target: Element) => void,
-  disconnect: () => void;
+/**
+ * Used to create an IntersectionObserver instance.
+ * @return IntersectionObserver that is used by onViewport
+ */
+export function createIntersectionObserver() {
+  return new IntersectionObserver((entries) => {
+    for (const current of entries) {
+      if (current.isIntersecting && viewportTriggers.has(current.target)) {
+        viewportTriggers.get(current.target)!.listener();
+      }
+    }
+  });
 }
 
 /**
  * Registers a viewport trigger.
  * @param trigger Element that is the trigger.
  * @param callback Callback to be invoked when the trigger comes into the viewport.
- * @param observer Observer interface which provides a way to observe changes to target element
+ * @param observerFactoryFn Factory function which returns an IntersectionObserver
+ * @return cleanup function which removes trigger Element from viewportTriggers map
+ * and tells the intersection observer to stop observing trigger Element and set
+ * intersectionObserver to null if there are no more Elements to observe
  */
 export function onViewport(
   trigger: Element,
   callback: VoidFunction,
-  observer: Observer, 
+  observerFactoryFn: () => IntersectionObserver,
 ): VoidFunction {
   let entry = viewportTriggers.get(trigger);
 
+  intersectionObserver = intersectionObserver || observerFactoryFn();
+
   if (!entry) {
     entry = new DeferEventEntry();
-    observer.observe(trigger);
+    intersectionObserver!.observe(trigger);
     viewportTriggers.set(trigger, entry);
     observedViewportElements++;
   }
 
   entry.callbacks.add(callback);
 
   return () => {
-    // It's possible that a different cleanup callback fully removed this element already.
     if (!viewportTriggers.has(trigger)) {
       return;
     }
 
     entry!.callbacks.delete(callback);
 
     if (entry!.callbacks.size === 0) {
-      observer.unobserve(trigger);
+      intersectionObserver?.unobserve(trigger);
       viewportTriggers.delete(trigger);
       observedViewportElements--;
     }
 
     if (observedViewportElements === 0) {
-      observer.disconnect();
+      intersectionObserver?.disconnect();
+      intersectionObserver = null;
     }
   };
 }
-
-
-// function createIntersectionObserver(ngZone: NgZone | undefined): IntersectionObserver {
-//   return new IntersectionObserver((entries) => {
-//     for (const current of entries) {
-//       // Only invoke the callbacks if the specific element is intersecting.
-//       if (current.isIntersecting && viewportTriggers.has(current.target)) {
-//         if (ngZone) {
-//           ngZone!.run(viewportTriggers.get(current.target)!.listener);
-//         } else {
-//           viewportTriggers.get(current.target)!.listener();
-//         }
-//       }
-//     }
-//   })
-// }
-
-// /**
-//  * Registers a viewport trigger.
-//  * @param trigger Element that is the trigger.
-//  * @param callback Callback to be invoked when the trigger comes into the viewport.
-//  * @param injector Injector that can be used by the trigger to resolve DI tokens.
-//  */
-// export function onViewport(
-//   trigger: Element,
-//   callback: VoidFunction,
-//   injector?: Injector,
-// ): VoidFunction {
-//   const ngZone = injector?.get(NgZone);
-//   let entry = viewportTriggers.get(trigger);
-
-//   if (!intersectionObserver) {
-//     if (injector) {
-//       intersectionObserver = ngZone!.runOutsideAngular(() => {
-//         return createIntersectionObserver(ngZone);
-//       });
-//     } else {
-//       intersectionObserver = createIntersectionObserver(ngZone);
-//     }
-//   }
-
-//   if (!entry) {
-//     entry = new DeferEventEntry();
-//     if (ngZone) {
-//       ngZone.runOutsideAngular(() => intersectionObserver!.observe(trigger));
-//     } else {
-//       intersectionObserver!.observe(trigger);
-//     }
-//     viewportTriggers.set(trigger, entry);
-//     observedViewportElements++;
-//   }
-
-//   entry.callbacks.add(callback);
-
-//   return () => {
-//     // It's possible that a different cleanup callback fully removed this element already.
-//     if (!viewportTriggers.has(trigger)) {
-//       return;
-//     }
-
-//     entry!.callbacks.delete(callback);
-
-//     if (entry!.callbacks.size === 0) {
-//       intersectionObserver?.unobserve(trigger);
-//       viewportTriggers.delete(trigger);
-//       observedViewportElements--;
-//     }
-
-//     if (observedViewportElements === 0) {
-//       intersectionObserver?.disconnect();
-//       intersectionObserver = null;
-//     }
-//   };
-// }
-
diff --git a/packages/core/src/defer/dom_triggers.ts b/packages/core/src/defer/dom_triggers.ts
@@ -23,7 +23,7 @@ import {
 import {assertElement, assertEqual} from '../util/assert';
 import {NgZone} from '../zone';
 import {storeTriggerCleanupFn} from './cleanup';
-import {Observer, getViewportTriggers, onViewport} from '../../primitives/defer/src/triggers';
+import {onViewport, createIntersectionObserver} from '../../primitives/defer/src/triggers';
 import {
   DEFER_BLOCK_STATE,
   DeferBlockInternalState,
@@ -40,37 +40,12 @@ import {getLDeferBlockDetails} from './utils';
  * @param injector Injector that can be used by the trigger to resolve DI tokens.
  */
 export function onViewportWrapper(trigger: Element, callback: VoidFunction, injector: Injector) {
-  const angularInjectorObserver = new AngularIntersectionObserver(injector);
-  return onViewport(trigger, callback, angularInjectorObserver);
-}
-
-class AngularIntersectionObserver implements Observer{
-  private intersectionObserver: IntersectionObserver;
-  private ngZone: NgZone;
-  constructor(injector: Injector) {
-    this.ngZone = injector.get(NgZone);
-    this.intersectionObserver = this.ngZone.runOutsideAngular(() => {
-      return new IntersectionObserver((entries) => {
-        for (const current of entries) {
-          if (current.isIntersecting && getViewportTriggers().has(current.target)) {
-            this.ngZone.run(getViewportTriggers().get(current.target)!.listener)
-          }
-        }
-      })
-    })
-  }
-
-  observe(target: Element) {
-    this.ngZone.runOutsideAngular(() => this.intersectionObserver.observe(target));
-  }
-
-  unobserve(target: Element) {
-    this.intersectionObserver.unobserve(target);
-  }
-
-  disconnect() {
-    this.intersectionObserver.disconnect();
-  }
+  const ngZone = injector.get(NgZone);
+  return onViewport(
+    trigger,
+    () => ngZone.run(callback),
+    () => ngZone.runOutsideAngular(() => createIntersectionObserver()),
+  );
 }
 
 /**
diff --git a/packages/core/src/defer/instructions.ts b/packages/core/src/defer/instructions.ts
@@ -27,7 +27,6 @@ import {
 import {removeLViewOnDestroy, storeLViewOnDestroy} from '../render3/util/view_utils';
 import {performanceMarkFeature} from '../util/performance';
 import {invokeAllTriggerCleanupFns, storeTriggerCleanupFn} from './cleanup';
-//import {onHover, onInteraction, onViewport, registerDomTrigger} from './dom_triggers';
 import {onViewportWrapper, registerDomTrigger} from './dom_triggers';
 import {onHover, onInteraction} from '../../primitives/defer/src/triggers';
 import {onIdle} from './idle_scheduler';
diff --git a/packages/core/src/defer/triggering.ts b/packages/core/src/defer/triggering.ts
@@ -36,7 +36,7 @@ import {
   invokeTriggerCleanupFns,
   storeTriggerCleanupFn,
 } from './cleanup';
-import {onViewport} from './dom_triggers';
+import {onViewportWrapper} from './dom_triggers';
 import {onIdle} from './idle_scheduler';
 import {
   DEFER_BLOCK_STATE,
@@ -701,7 +701,7 @@ function setViewportTriggers(injector: Injector, elementTriggers: ElementTrigger
   if (elementTriggers.length > 0) {
     const registry = injector.get(DEHYDRATED_BLOCK_REGISTRY);
     for (let elementTrigger of elementTriggers) {
-      const cleanupFn = onViewport(
+      const cleanupFn = onViewportWrapper(
         elementTrigger.el,
         () => triggerHydrationFromBlockName(injector, elementTrigger.blockName),
         injector,
diff --git a/packages/core/src/hydration/utils.ts b/packages/core/src/hydration/utils.ts
@@ -36,7 +36,7 @@ import {
 import {IS_INCREMENTAL_HYDRATION_ENABLED, JSACTION_BLOCK_ELEMENT_MAP} from './tokens';
 import {RuntimeError, RuntimeErrorCode} from '../errors';
 import {DeferBlockTrigger, HydrateTriggerDetails} from '../defer/interfaces';
-import {hoverEventNames, interactionEventNames} from '../defer/dom_triggers';
+import {hoverEventNames, interactionEventNames} from '../../primitives/defer/src/triggers';
 import {DEHYDRATED_BLOCK_REGISTRY} from '../defer/registry';
 import {sharedMapFunction} from '../event_delegation_utils';
 import {isDetachedByI18n} from '../i18n/utils';
