refactor(core): Refactor parts of event_replay into a shared library that will be used with global event delegation. (angular#56172)

This also moves the code that stashes the jsaction more closely to the code that actually sets the event listener. PR Close angular#56172

Author: iteriani

goldens/public-api/core/primitives/event-dispatch/index.api.md

@@ -4,6 +4,16 @@
 
 ```ts
 
+// @public (undocumented)
+export const Attribute: {
+ JSACTION: string;
+ OI: string;
+ VED: string;
+ VET: string;
+ JSINSTANCE: string;
+ JSTRACK: string;
+};
+
 // @public
 export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes?: string[], captureEventTypes?: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
 
@@ -109,9 +119,27 @@ export const isCaptureEvent: (eventType: string) => boolean;
 // @public
 export const isSupportedEvent: (eventType: string) => boolean;
 
+// @public
+export const JSACTION = "jsaction";
+
+// @public
+export const JSINSTANCE = "jsinstance";
+
+// @public
+export const JSTRACK = "jstrack";
+
+// @public
+export const OI = "oi";
+
 // @public
 export function registerDispatcher(eventContract: UnrenamedEventContract, dispatcher: EventDispatcher): void;
 
+// @public
+export const VED = "ved";
+
+// @public
+export const VET = "vet";
+
 // (No @packageDocumentation comment for this package)
 
 ```

packages/core/primitives/event-dispatch/index.ts

@@ -15,3 +15,4 @@ export {bootstrapEarlyEventContract} from './src/register_events';
 export type {EventContractTracker} from './src/register_events';
 export {EventInfoWrapper} from './src/event_info';
 export {isSupportedEvent, isCaptureEvent} from './src/event_type';
+export * from './src/attribute';

packages/core/src/event_delegation_utils.ts

@@ -0,0 +1,84 @@
+/**
+ * @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.io/license
+ */
+
+// tslint:disable:no-duplicate-imports
+import {
+ EventContract,
+ EventContractContainer,
+ EventDispatcher,
+ registerDispatcher,
+} from '@angular/core/primitives/event-dispatch';
+import * as Attributes from '@angular/core/primitives/event-dispatch';
+import {Injectable, Injector} from './di';
+import {RElement} from './render3/interfaces/renderer_dom';
+import {EVENT_REPLAY_ENABLED_DEFAULT, IS_EVENT_REPLAY_ENABLED} from './hydration/tokens';
+
+declare global {
+ interface Element {
+ __jsaction_fns: Map<string, Function[]> | undefined;
+ }
+}
+
+export function invokeRegisteredListeners(event: Event) {
+ const handlerFns = (event.currentTarget as Element)?.__jsaction_fns?.get(event.type);
+ if (!handlerFns) {
+ return;
+ }
+ for (const handler of handlerFns) {
+ handler(event);
+ }
+}
+
+export function setJSActionAttribute(nativeElement: Element, eventTypes: string[]) {
+ if (!eventTypes.length) {
+ return;
+ }
+ const parts = eventTypes.reduce((prev, curr) => prev + curr + ':;', '');
+ const existingAttr = nativeElement.getAttribute(Attributes.JSACTION);
+ // This is required to be a module accessor to appease security tests on setAttribute.
+ nativeElement.setAttribute(Attributes.JSACTION, `${existingAttr ?? ''}${parts}`);
+}
+
+export const sharedStashFunction = (rEl: RElement, eventType: string, listenerFn: () => void) => {
+ const el = rEl as unknown as Element;
+ const eventListenerMap = el.__jsaction_fns ?? new Map();
+ const eventListeners = eventListenerMap.get(eventType) ?? [];
+ eventListeners.push(listenerFn);
+ eventListenerMap.set(eventType, eventListeners);
+ el.__jsaction_fns = eventListenerMap;
+};
+
+export const removeListeners = (el: Element) => {
+ el.removeAttribute(Attributes.JSACTION);
+ el.__jsaction_fns = undefined;
+};
+
+@Injectable({providedIn: 'root'})
+export class GlobalEventDelegation {
+ eventContract!: EventContract;
+ addEvent(el: Element, eventName: string) {
+ if (this.eventContract) {
+ this.eventContract.addEvent(eventName);
+ setJSActionAttribute(el, [eventName]);
+ return true;
+ }
+ return false;
+ }
+}
+
+export const initGlobalEventDelegation = (
+ eventDelegation: GlobalEventDelegation,
+ injector: Injector,
+) => {
+ if (injector.get(IS_EVENT_REPLAY_ENABLED, EVENT_REPLAY_ENABLED_DEFAULT)) {
+ return;
+ }
+ eventDelegation.eventContract = new EventContract(new EventContractContainer(document.body));
+ const dispatcher = new EventDispatcher(invokeRegisteredListeners);
+ registerDispatcher(eventDelegation.eventContract, dispatcher);
+};

packages/core/src/hydration/annotate.ts

@@ -38,11 +38,8 @@ import {unwrapLView, unwrapRNode} from '../render3/util/view_utils';
 import {TransferState} from '../transfer_state';
 
 import {unsupportedProjectionOfDomNodes} from './error_handling';
-import {
- collectDomEventsInfo,
- EVENT_REPLAY_ENABLED_DEFAULT,
- setJSActionAttribute,
-} from './event_replay';
+import {collectDomEventsInfo} from './event_replay';
+import {setJSActionAttribute} from '../event_delegation_utils';
 import {
  getOrComputeI18nChildren,
  isI18nHydrationEnabled,
@@ -64,7 +61,7 @@ import {
 } from './interfaces';
 import {calcPathForNode, isDisconnectedNode} from './node_lookup_utils';
 import {isInSkipHydrationBlock, SKIP_HYDRATION_ATTR_NAME} from './skip_hydration';
-import {IS_EVENT_REPLAY_ENABLED} from './tokens';
+import {EVENT_REPLAY_ENABLED_DEFAULT, IS_EVENT_REPLAY_ENABLED} from './tokens';
 import {
  getLNodeForHydration,
  NGH_ATTR_NAME,
@@ -440,10 +437,13 @@ function serializeLView(lView: LView, context: HydrationContext): SerializedView
  continue;
  }
 
- if (nativeElementsToEventTypes) {
- // Attach `jsaction` attribute to elements that have registered listeners,
- // thus potentially having a need to do an event replay.
- setJSActionAttribute(tNode, lView[i], nativeElementsToEventTypes);
+ // Attach `jsaction` attribute to elements that have registered listeners,
+ // thus potentially having a need to do an event replay.
+ if (nativeElementsToEventTypes && tNode.type & TNodeType.Element) {
+ const nativeElement = unwrapRNode(lView[i]) as Element;
+ if (nativeElementsToEventTypes.has(nativeElement)) {
+ setJSActionAttribute(nativeElement, nativeElementsToEventTypes.get(nativeElement)!);
+ }
  }
 
  if (Array.isArray(tNode.projection)) {

packages/core/src/hydration/event_replay.ts

@@ -7,51 +7,49 @@
  */
 
 import {
- EventDispatcher,
- EarlyJsactionDataContainer,
- EventContract,
- EventContractContainer,
- registerDispatcher,
  isSupportedEvent,
  isCaptureEvent,
+ EventContractContainer,
+ EventContract,
+ EventDispatcher,
+ registerDispatcher,
+ EarlyJsactionDataContainer,
 } from '@angular/core/primitives/event-dispatch';
 
 import {APP_BOOTSTRAP_LISTENER, ApplicationRef, whenStable} from '../application/application_ref';
-import {APP_ID} from '../application/application_tokens';
 import {ENVIRONMENT_INITIALIZER, Injector} from '../di';
 import {inject} from '../di/injector_compatibility';
 import {Provider} from '../di/interface/provider';
-import {setDisableEventReplayImpl} from '../render3/instructions/listener';
-import {TNode, TNodeType} from '../render3/interfaces/node';
-import {RElement, RNode} from '../render3/interfaces/renderer_dom';
+import {setStashFn} from '../render3/instructions/listener';
+import {RElement} from '../render3/interfaces/renderer_dom';
 import {CLEANUP, LView, TView} from '../render3/interfaces/view';
 import {isPlatformBrowser} from '../render3/util/misc_utils';
 import {unwrapRNode} from '../render3/util/view_utils';
 
-import {IS_EVENT_REPLAY_ENABLED} from './tokens';
-
-export const EVENT_REPLAY_ENABLED_DEFAULT = false;
-export const CONTRACT_PROPERTY = 'ngContracts';
+import {IS_EVENT_REPLAY_ENABLED, IS_GLOBAL_EVENT_DELEGATION_ENABLED} from './tokens';
+import {
+ GlobalEventDelegation,
+ sharedStashFunction,
+ removeListeners,
+ invokeRegisteredListeners,
+} from '../event_delegation_utils';
+import {APP_ID} from '../application/application_tokens';
 
 declare global {
  var ngContracts: {[key: string]: EarlyJsactionDataContainer};
- interface Element {
- __jsaction_fns: Map<string, Function[]> | undefined;
- }
-}
-
-// TODO: Upstream this back into event-dispatch.
-function getJsactionData(container: EarlyJsactionDataContainer) {
- return container._ejsa;
 }
 
-const JSACTION_ATTRIBUTE = 'jsaction';
+export const CONTRACT_PROPERTY = 'ngContracts';
 
 /**
  * A set of DOM elements with `jsaction` attributes.
  */
 const jsactionSet = new Set<Element>();
 
+function isGlobalEventDelegationEnabled(injector: Injector) {
+ return injector.get(IS_GLOBAL_EVENT_DELEGATION_ENABLED, false);
+}
+
 /**
  * Returns a set of providers required to setup support for event replay.
  * Requires hydration to be enabled separately.
@@ -65,21 +63,13 @@ export function withEventReplay(): Provider[] {
  {
  provide: ENVIRONMENT_INITIALIZER,
  useValue: () => {
- setDisableEventReplayImpl((rEl: RElement, eventName: string, listenerFn: VoidFunction) => {
- if (rEl.hasAttribute(JSACTION_ATTRIBUTE)) {
- const el = rEl as unknown as Element;
- // We don't immediately remove the attribute here because
- // we need it for replay that happens after hydration.
- if (!jsactionSet.has(el)) {
- jsactionSet.add(el);
- el.__jsaction_fns = new Map();
- }
- const eventMap = el.__jsaction_fns!;
- if (!eventMap.has(eventName)) {
- eventMap.set(eventName, []);
- }
- eventMap.get(eventName)!.push(listenerFn);
- }
+ const injector = inject(Injector);
+ if (isGlobalEventDelegationEnabled(injector)) {
+ return;
+ }
+ setStashFn((rEl: RElement, eventName: string, listenerFn: VoidFunction) => {
+ sharedStashFunction(rEl, eventName, listenerFn);
+ jsactionSet.add(rEl as unknown as Element);
  });
  },
  multi: true,
@@ -95,33 +85,15 @@ export function withEventReplay(): Provider[] {
  // of the application is completed. This timing is similar to the unclaimed
  // dehydrated views cleanup timing.
  whenStable(appRef).then(() => {
- const appId = injector.get(APP_ID);
- // This is set in packages/platform-server/src/utils.ts
- // Note: globalThis[CONTRACT_PROPERTY] may be undefined in case Event Replay feature
- // is enabled, but there are no events configured in an application.
- const container = globalThis[CONTRACT_PROPERTY]?.[appId];
- const earlyJsactionData = getJsactionData(container);
- if (earlyJsactionData) {
- const eventContract = new EventContract(
- new EventContractContainer(earlyJsactionData.c),
- );
- for (const et of earlyJsactionData.et) {
- eventContract.addEvent(et);
- }
- for (const et of earlyJsactionData.etc) {
- eventContract.addEvent(et);
- }
- eventContract.replayEarlyEvents(container);
- const dispatcher = new EventDispatcher(handleEvent);
- registerDispatcher(eventContract, dispatcher);
- for (const el of jsactionSet) {
- el.removeAttribute(JSACTION_ATTRIBUTE);
- el.__jsaction_fns = undefined;
- }
- // After hydration, we shouldn't need to do anymore work related to
- // event replay anymore.
- setDisableEventReplayImpl(() => {});
+ if (isGlobalEventDelegationEnabled(injector)) {
+ return;
  }
+ const globalEventDelegation = injector.get(GlobalEventDelegation);
+ initEventReplay(globalEventDelegation, injector);
+ jsactionSet.forEach(removeListeners);
+ // After hydration, we shouldn't need to do anymore work related to
+ // event replay anymore.
+ setStashFn(() => {});
  });
  };
  }
@@ -132,6 +104,32 @@ export function withEventReplay(): Provider[] {
  ];
 }
 
+// TODO: Upstream this back into event-dispatch.
+function getJsactionData(container: EarlyJsactionDataContainer) {
+ return container._ejsa;
+}
+
+const initEventReplay = (eventDelegation: GlobalEventDelegation, injector: Injector) => {
+ const appId = injector.get(APP_ID);
+ // This is set in packages/platform-server/src/utils.ts
+ // Note: globalThis[CONTRACT_PROPERTY] may be undefined in case Event Replay feature
+ // is enabled, but there are no events configured in an application.
+ const container = globalThis[CONTRACT_PROPERTY]?.[appId];
+ const earlyJsactionData = getJsactionData(container)!;
+ const eventContract = (eventDelegation.eventContract = new EventContract(
+ new EventContractContainer(earlyJsactionData.c),
+ ));
+ for (const et of earlyJsactionData.et) {
+ eventContract.addEvent(et);
+ }
+ for (const et of earlyJsactionData.etc) {
+ eventContract.addEvent(et);
+ }
+ eventContract.replayEarlyEvents(container);
+ const dispatcher = new EventDispatcher(invokeRegisteredListeners);
+ registerDispatcher(eventContract, dispatcher);
+};
+
 /**
  * Extracts information about all DOM events (added in a template) registered on elements in a give
  * LView. Maps collected events to a corresponding DOM element (an element is used as a key).
@@ -180,28 +178,3 @@ export function collectDomEventsInfo(
  }
  return events;
 }
-
-export function setJSActionAttribute(
- tNode: TNode,
- rNode: RNode,
- nativeElementToEvents: Map<Element, string[]>,
-) {
- if (tNode.type & TNodeType.Element) {
- const nativeElement = unwrapRNode(rNode) as Element;
- const events = nativeElementToEvents.get(nativeElement) ?? [];
- const parts = events.map((event) => `${event}:`);
- if (parts.length > 0) {
- nativeElement.setAttribute(JSACTION_ATTRIBUTE, parts.join(';'));
- }
- }
-}
-
-function handleEvent(event: Event) {
- const handlerFns = (event.currentTarget as Element)?.__jsaction_fns?.get(event.type);
- if (!handlerFns) {
- return;
- }
- for (const handler of handlerFns) {
- handler(event);
- }
-}

packages/core/src/hydration/tokens.ts

@@ -47,3 +47,12 @@ export const IS_I18N_HYDRATION_ENABLED = new InjectionToken<boolean>(
 export const IS_EVENT_REPLAY_ENABLED = new InjectionToken<boolean>(
  typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_EVENT_REPLAY_ENABLED' : '',
 );
+
+export const EVENT_REPLAY_ENABLED_DEFAULT = false;
+
+/**
+ * Internal token that indicates whether global event delegation support is enabled.
+ */
+export const IS_GLOBAL_EVENT_DELEGATION_ENABLED = new InjectionToken<boolean>(
+ typeof ngDevMode === 'undefined' || !!ngDevMode ? 'IS_GLOBAL_EVENT_DELEGATION_ENABLED' : '',
+);