refactor(core): Refactor EarlyEventContract to prepare for using it as a container. (angular#56900)

This is the first step towards combining `EarlyEventContract` and `EventContract`. It contains a few refactors, such as making names more consistent.

The goal of this refactor is to remove the `EarlyEventContract` class altogether, as well as `EventContract`.

To install the early event contract with the default events in early script tag, users will call:

`bootstrapGlobalEarlyEventContract()`

And for boostraping:

`registerGlobalDispatcher(dispatcher)`

PR Close angular#56900

Author: tbondwilkinson

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

@@ -9,13 +9,14 @@ export const Attribute: {
     JSACTION: "jsaction";
 };
 
-// @public
-export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes?: string[], captureEventTypes?: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
-
 // @public (undocumented)
 export interface EarlyJsactionDataContainer {
     // (undocumented)
     _ejsa?: EarlyJsactionData;
+    // (undocumented)
+    _ejsas?: {
+        [appId: string]: EarlyJsactionData | undefined;
+    };
 }
 
 // @public
@@ -30,7 +31,7 @@ export class EventContract implements UnrenamedEventContract {
     // (undocumented)
     static MOUSE_SPECIAL_SUPPORT: boolean;
     registerDispatcher(dispatcher: Dispatcher, restriction: Restriction): void;
-    replayEarlyEvents(earlyJsactionContainer?: EarlyJsactionDataContainer): void;
+    replayEarlyEvents(earlyJsactionData?: EarlyJsactionData | undefined): void;
 }
 
 // @public
@@ -42,13 +43,6 @@ export class EventContractContainer implements EventContractContainerManager {
     readonly element: Element;
 }
 
-// @public (undocumented)
-export type EventContractTracker<T> = {
-    [key: string]: {
-        [appId: string]: T;
-    };
-};
-
 // @public
 export class EventDispatcher {
     constructor(dispatchDelegate: (event: Event, actionName: string) => void);
@@ -105,19 +99,18 @@ export const EventPhase: {
 };
 
 // @public
-export const isCaptureEvent: (eventType: string) => boolean;
+export function getActionCache(element: Element): {
+    [key: string]: string | undefined;
+};
 
 // @public
-export const isSupportedEvent: (eventType: string) => boolean;
+export const isCaptureEventType: (eventType: string) => boolean;
 
 // @public
-export function registerDispatcher(eventContract: UnrenamedEventContract, dispatcher: EventDispatcher): void;
-
-// @public (undocumented)
-export function registerEventType(element: Element, eventType: string, action: string): void;
+export const isEarlyEventType: (eventType: string) => boolean;
 
-// @public (undocumented)
-export function unregisterEventType(element: Element, eventType: string): void;
+// @public
+export function registerDispatcher(eventContract: UnrenamedEventContract, dispatcher: EventDispatcher): void;
 
 // (No @packageDocumentation comment for this package)
 

goldens/size-tracking/integration-payloads.json

@@ -56,7 +56,7 @@
     "uncompressed": {
       "main": 207890,
       "polyfills": 33807,
-      "event-dispatch-contract.min": 648
+      "event-dispatch-contract.min": 476
     }
   }
 }

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

@@ -6,6 +6,6 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {bootstrapEarlyEventContract} from './src/register_events';
+import {bootstrapAppScopedEarlyEventContract} from './src/bootstrap_app_scoped';
 
-(window as any)['__jsaction_bootstrap'] = bootstrapEarlyEventContract;
+(window as any)['__jsaction_bootstrap'] = bootstrapAppScopedEarlyEventContract;

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

@@ -6,14 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {EventDispatcher, EventPhase, registerDispatcher} from './src/event_dispatcher';
-export {EventContractContainer} from './src/event_contract_container';
+export {Attribute} from './src/attribute';
+export {getDefaulted as getActionCache} from './src/cache';
 export type {EarlyJsactionDataContainer} from './src/earlyeventcontract';
-export {EventContract} from './src/eventcontract';
-export {bootstrapEarlyEventContract} from './src/register_events';
-
-export type {EventContractTracker} from './src/register_events';
+export {EventContractContainer} from './src/event_contract_container';
+export {EventDispatcher, EventPhase, registerDispatcher} from './src/event_dispatcher';
 export {EventInfoWrapper} from './src/event_info';
-export {isSupportedEvent, isCaptureEvent} from './src/event_type';
-export {Attribute} from './src/attribute';
-export {registerEventType, unregisterEventType} from './src/cache';
+export {isEarlyEventType, isCaptureEventType} from './src/event_type';
+export {EventContract} from './src/eventcontract';

packages/core/primitives/event-dispatch/src/a11y_click.ts

@@ -46,7 +46,7 @@ export function preventDefaultForA11yClick(eventInfo: eventInfoLib.EventInfo) {
 export function populateClickOnlyAction(
   actionElement: Element,
   eventInfo: eventInfoLib.EventInfo,
-  actionMap: {[key: string]: string},
+  actionMap: {[key: string]: string | undefined},
 ) {
   if (
     // If there's already an action, don't attempt to set a CLICKONLY
@@ -60,5 +60,5 @@ export function populateClickOnlyAction(
     return;
   }
   eventInfoLib.setEventType(eventInfo, EventType.CLICKONLY);
-  eventInfoLib.setAction(eventInfo, actionMap[EventType.CLICKONLY], actionElement);
+  eventInfoLib.setAction(eventInfo, actionMap[EventType.CLICKONLY]!, actionElement);
 }

packages/core/primitives/event-dispatch/src/action_resolver.ts

@@ -41,7 +41,7 @@ export class ActionResolver {
   private populateClickOnlyAction?: (
     actionElement: Element,
     eventInfo: eventInfoLib.EventInfo,
-    actionMap: {[key: string]: string},
+    actionMap: {[key: string]: string | undefined},
   ) => void = undefined;
 
   constructor({
@@ -243,8 +243,8 @@ export class ActionResolver {
    * @param actionElement The DOM node to retrieve the jsaction map from.
    * @return Map from event to qualified name of the jsaction bound to it.
    */
-  private parseActions(actionElement: Element): {[key: string]: string} {
-    let actionMap: {[key: string]: string} | undefined = cache.get(actionElement);
+  private parseActions(actionElement: Element): {[key: string]: string | undefined} {
+    let actionMap: {[key: string]: string | undefined} | undefined = cache.get(actionElement);
     if (!actionMap) {
       const jsactionAttribute = actionElement.getAttribute(Attribute.JSACTION);
       if (!jsactionAttribute) {

packages/core/primitives/event-dispatch/src/bootstrap_app_scoped.ts

@@ -0,0 +1,44 @@
+/**
+ * @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
+ */
+
+import {Restriction} from './restriction';
+import {EarlyJsactionDataContainer, addEvents, createEarlyJsactionData} from './earlyeventcontract';
+import {EventInfo} from './event_info';
+
+/**
+ * Creates an `EarlyJsactionData`, adds events to it, and populates it on a nested object on
+ * the window.
+ */
+export function bootstrapAppScopedEarlyEventContract(
+  container: HTMLElement,
+  appId: string,
+  bubbleEventTypes: string[],
+  captureEventTypes: string[],
+  dataContainer: EarlyJsactionDataContainer = window,
+) {
+  const earlyJsactionData = createEarlyJsactionData(container);
+  if (!dataContainer._ejsas) {
+    dataContainer._ejsas = {};
+  }
+  dataContainer._ejsas[appId] = earlyJsactionData;
+  addEvents(earlyJsactionData, bubbleEventTypes);
+  addEvents(earlyJsactionData, captureEventTypes, /* capture= */ true);
+}
+
+/**
+ * Registers a dispatcher function on the `EarlyJsactionData` present on the nested object on the
+ * window.
+ */
+export function registerAppScopedDispatcher(
+  restriction: Restriction,
+  appId: string,
+  dispatcher: (eventInfo: EventInfo) => void,
+  dataContainer: EarlyJsactionDataContainer = window,
+) {
+  dataContainer._ejsas![appId]!.d = dispatcher;
+}

packages/core/primitives/event-dispatch/src/bootstrap_global.ts

@@ -0,0 +1,28 @@
+/**
+ * @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
+ */
+
+import {BUBBLE_EVENT_TYPES, CAPTURE_EVENT_TYPES} from './event_type';
+import {Restriction} from './restriction';
+import {addEvents, createEarlyJsactionData} from './earlyeventcontract';
+import {EventInfo} from './event_info';
+
+/** Creates an `EarlyJsactionData`, adds events to it, and populates it on the window. */
+export function bootstrapGlobalEarlyEventContract() {
+  const earlyJsactionData = createEarlyJsactionData(window.document.documentElement);
+  addEvents(earlyJsactionData, BUBBLE_EVENT_TYPES);
+  addEvents(earlyJsactionData, CAPTURE_EVENT_TYPES, /* capture= */ true);
+  window._ejsa = earlyJsactionData;
+}
+
+/** Registers a dispatcher function on the `EarlyJsactionData` present on the window. */
+export function registerGlobalDispatcher(
+  restriction: Restriction,
+  dispatcher: (eventInfo: EventInfo) => void,
+) {
+  window._ejsa!.d = dispatcher;
+}

packages/core/primitives/event-dispatch/src/cache.ts

@@ -11,41 +11,29 @@ import {Property} from './property';
 /**
  * Map from jsaction annotation to a parsed map from event name to action name.
  */
-const parseCache: {[key: string]: {[key: string]: string}} = {};
-
-export function registerEventType(element: Element, eventType: string, action: string) {
-  const cache = get(element) || {};
-  cache[eventType] = action;
-  set(element, cache);
-}
-
-export function unregisterEventType(element: Element, eventType: string) {
-  const cache = get(element);
-  if (cache) {
-    cache[eventType] = undefined as unknown as string;
-  }
-}
+const parseCache: {[key: string]: {[key: string]: string | undefined}} = {};
 
 /**
  * Reads the jsaction parser cache from the given DOM Element.
- *
- * @param element .
- * @return Map from event to qualified name of the jsaction bound to it.
  */
-export function get(element: Element): {[key: string]: string} {
-  // @ts-ignore
+export function get(element: Element): {[key: string]: string | undefined} | undefined {
   return element[Property.JSACTION];
 }
 
+/**
+ * Reads the jsaction parser cache for the given DOM element. If no cache is yet present,
+ * creates an empty one.
+ */
+export function getDefaulted(element: Element): {[key: string]: string | undefined} {
+  const cache = get(element) ?? {};
+  set(element, cache);
+  return cache;
+}
+
 /**
  * Writes the jsaction parser cache to the given DOM Element.
- *
- * @param element .
- * @param actionMap Map from event to qualified name of the jsaction bound to
- *     it.
  */
-export function set(element: Element, actionMap: {[key: string]: string}) {
-  // @ts-ignore
+export function set(element: Element, actionMap: {[key: string]: string | undefined}) {
   element[Property.JSACTION] = actionMap;
 }
 
@@ -55,7 +43,7 @@ export function set(element: Element, actionMap: {[key: string]: string}) {
  * @param text Unparsed jsaction attribute value.
  * @return Parsed jsaction attribute value, if already present in the cache.
  */
-export function getParsed(text: string): {[key: string]: string} | undefined {
+export function getParsed(text: string): {[key: string]: string | undefined} | undefined {
   return parseCache[text];
 }
 
@@ -65,7 +53,7 @@ export function getParsed(text: string): {[key: string]: string} | undefined {
  * @param text Unparsed jsaction attribute value.
  * @param parsed Attribute value parsed into the action map.
  */
-export function setParsed(text: string, parsed: {[key: string]: string}) {
+export function setParsed(text: string, parsed: {[key: string]: string | undefined}) {
   parseCache[text] = parsed;
 }