refactor(core): Use the early event contract instead of the event contract in the bootstrap.

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

@@ -5,27 +5,22 @@
 ```ts
 
 // @public
-export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes: string[], captureEventTypes: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
+export class BaseDispatcher {
+    constructor(dispatchDelegate: (eventInfoWrapper: EventInfoWrapper) => void, { eventReplayer }?: {
+        eventReplayer?: Replayer;
+    });
+    dispatch(eventInfo: EventInfo): void;
+    queueEventInfoWrapper(eventInfoWrapper: EventInfoWrapper): void;
+    scheduleEventReplay(): void;
+}
 
 // @public
-export function bootstrapEventContract(field: string, container: Element, appId: string, events: string[], earlyJsactionTracker?: EventContractTracker<EventContract>): void;
+export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes?: string[], captureEventTypes?: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
 
-// @public
-export class Dispatcher {
-    constructor(getHandler?: ((eventInfoWrapper: EventInfoWrapper) => EventInfoWrapperHandler | void) | undefined, { stopPropagation, eventReplayer, }?: {
-        stopPropagation?: boolean;
-        eventReplayer?: Replayer;
-    });
-    canDispatch(eventInfoWrapper: EventInfoWrapper): boolean;
-    dispatch(eventInfo: EventInfo, isGlobalDispatch?: boolean): void;
-    hasAction(name: string): boolean;
-    registerEventInfoHandlers<T>(namespace: string, instance: T | null, methods: {
-        [key: string]: EventInfoWrapperHandler;
-    }): void;
-    registerGlobalHandler(eventType: string, handler: GlobalHandler): void;
-    setEventReplayer(eventReplayer: Replayer): void;
-    unregisterGlobalHandler(eventType: string, handler: GlobalHandler): void;
-    unregisterHandler(namespace: string, name: string): void;
+// @public (undocumented)
+export interface EarlyJsactionDataContainer {
+    // (undocumented)
+    _ejsa?: EarlyJsactionData;
 }
 
 // @public
@@ -40,12 +35,12 @@ export class EventContract implements UnrenamedEventContract {
     static CUSTOM_EVENT_SUPPORT: boolean;
     // (undocumented)
     ecaacs?: (updateEventInfoForA11yClick: typeof a11yClickLib.updateEventInfoForA11yClick, preventDefaultForA11yClick: typeof a11yClickLib.preventDefaultForA11yClick, populateClickOnlyAction: typeof a11yClickLib.populateClickOnlyAction) => void;
-    ecrd(dispatcher: Dispatcher_2, restriction: Restriction): void;
+    ecrd(dispatcher: Dispatcher, restriction: Restriction): void;
     exportAddA11yClickSupport(): void;
     handler(eventType: string): EventHandler | undefined;
     // (undocumented)
     static MOUSE_SPECIAL_SUPPORT: boolean;
-    registerDispatcher(dispatcher: Dispatcher_2, restriction: Restriction): void;
+    registerDispatcher(dispatcher: Dispatcher, restriction: Restriction): void;
     replayEarlyEvents(earlyJsactionContainer?: EarlyJsactionDataContainer): void;
 }
 
@@ -106,7 +101,7 @@ export class EventInfoWrapper {
 }
 
 // @public
-export function registerDispatcher(eventContract: UnrenamedEventContract, dispatcher: Dispatcher): void;
+export function registerDispatcher(eventContract: UnrenamedEventContract, dispatcher: BaseDispatcher): void;
 
 // (No @packageDocumentation comment for this package)
 

goldens/size-tracking/integration-payloads.json

@@ -54,9 +54,9 @@
   },
   "platform-server-hydration/browser": {
     "uncompressed": {
-      "main": 200584,
+      "main": 207890,
       "polyfills": 33807,
-      "event-dispatch-contract.min": 11293
+      "event-dispatch-contract.min": 704
     }
   }
 }

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

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

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

@@ -6,10 +6,11 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-export {Dispatcher, registerDispatcher} from './src/dispatcher';
+export {BaseDispatcher, registerDispatcher} from './src/base_dispatcher';
 export {EventContractContainer} from './src/event_contract_container';
+export type {EarlyJsactionDataContainer} from './src/earlyeventcontract';
 export {EventContract} from './src/eventcontract';
-export {bootstrapEventContract, bootstrapEarlyEventContract} from './src/register_events';
+export {bootstrapEarlyEventContract} from './src/register_events';
 
 export type {EventContractTracker} from './src/register_events';
 export {EventInfoWrapper} from './src/event_info';

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

@@ -7,38 +7,9 @@
  */
 
 import {EarlyEventContract, EarlyJsactionDataContainer} from './earlyeventcontract';
-import {EventContractContainer} from './event_contract_container';
-import {EventContract} from './eventcontract';
 
 export type EventContractTracker<T> = {[key: string]: {[appId: string]: T}};
 
-/**
- * Provides a factory function for bootstrapping an event contract on a
- * specified object (by default, exposed on the `window`).
- * @param field The property on the object that the event contract will be placed on.
- * @param container The container that listens to events
- * @param appId A given identifier for an application. If there are multiple apps on the page
- *              then this is how contracts can be initialized for each one.
- * @param events An array of event names that should be listened to.
- * @param earlyJsactionTracker The object that should receive the event contract.
- */
-export function bootstrapEventContract(
-  field: string,
-  container: Element,
-  appId: string,
-  events: string[],
-  earlyJsactionTracker: EventContractTracker<EventContract> = window as unknown as EventContractTracker<EventContract>,
-) {
-  if (!earlyJsactionTracker[field]) {
-    earlyJsactionTracker[field] = {};
-  }
-  const eventContract = new EventContract(new EventContractContainer(container));
-  earlyJsactionTracker[field][appId] = eventContract;
-  for (const ev of events) {
-    eventContract.addEvent(ev);
-  }
-}
-
 /**
  * Provides a factory function for bootstrapping an event contract on a
  * specified object (by default, exposed on the `window`).
@@ -54,15 +25,15 @@ export function bootstrapEarlyEventContract(
   field: string,
   container: HTMLElement,
   appId: string,
-  eventTypes: string[],
-  captureEventTypes: string[],
+  eventTypes?: string[],
+  captureEventTypes?: string[],
   earlyJsactionTracker: EventContractTracker<EarlyJsactionDataContainer> = window as unknown as EventContractTracker<EarlyJsactionDataContainer>,
 ) {
   if (!earlyJsactionTracker[field]) {
     earlyJsactionTracker[field] = {};
   }
   earlyJsactionTracker[field][appId] = {};
   const eventContract = new EarlyEventContract(earlyJsactionTracker[field][appId], container);
-  eventContract.addEvents(eventTypes);
-  eventContract.addEvents(captureEventTypes, true);
+  if (eventTypes) eventContract.addEvents(eventTypes);
+  if (captureEventTypes) eventContract.addEvents(captureEventTypes, true);
 }

packages/core/src/hydration/event_replay.ts

@@ -7,8 +7,10 @@
  */
 
 import {
-  Dispatcher,
+  BaseDispatcher,
+  EarlyJsactionDataContainer,
   EventContract,
+  EventContractContainer,
   EventInfoWrapper,
   registerDispatcher,
 } from '@angular/core/primitives/event-dispatch';
@@ -32,7 +34,12 @@ export const EVENT_REPLAY_ENABLED_DEFAULT = false;
 export const CONTRACT_PROPERTY = 'ngContracts';
 
 declare global {
-  var ngContracts: {[key: string]: EventContract};
+  var ngContracts: {[key: string]: EarlyJsactionDataContainer};
+}
+
+// TODO: Upstream this back into event-dispatch.
+function getJsactionData(container: EarlyJsactionDataContainer) {
+  return container._ejsa;
 }
 
 const JSACTION_ATTRIBUTE = 'jsaction';
@@ -76,11 +83,27 @@ export function withEventReplay(): Provider[] {
               // 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 eventContract = globalThis[CONTRACT_PROPERTY]?.[appId] as EventContract;
-              if (eventContract) {
-                const dispatcher = new Dispatcher();
-                setEventReplayer(dispatcher);
-                // Event replay is kicked off as a side-effect of executing this function.
+              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 BaseDispatcher(() => {}, {
+                  eventReplayer: (queue) => {
+                    for (const event of queue) {
+                      handleEvent(event);
+                    }
+                    queue.length = 0;
+                  },
+                });
                 registerDispatcher(eventContract, dispatcher);
                 for (const el of removeJsactionQueue) {
                   el.removeAttribute(JSACTION_ATTRIBUTE);
@@ -154,17 +177,6 @@ export function setJSActionAttribute(
   }
 }
 
-/**
- * Registers a function that should be invoked to replay events.
- */
-function setEventReplayer(dispatcher: Dispatcher) {
-  dispatcher.setEventReplayer((queue) => {
-    for (const event of queue) {
-      handleEvent(event);
-    }
-  });
-}
-
 /**
  * Finds an LView that a given DOM element belongs to.
  */

packages/core/test/bundling/defer/bundle.golden_symbols.json

@@ -1328,9 +1328,6 @@
   {
     "name": "init_discovery_utils"
   },
-  {
-    "name": "init_dispatcher"
-  },
   {
     "name": "init_document"
   },

packages/platform-server/src/utils.ts

@@ -142,10 +142,33 @@ function insertEventRecordScript(
   const eventDispatchScript = findEventDispatchScript(doc);
   if (eventDispatchScript) {
     const events = Array.from(eventTypesToBeReplayed);
+    const captureEventTypes = [];
+    const eventTypes = [];
+    for (const eventType of events) {
+      if (
+        eventType === 'mouseenter' ||
+        eventType === 'mouseleave' ||
+        eventType === 'pointerenter' ||
+        eventType === 'pointerleave'
+      ) {
+        continue;
+      }
+      if (
+        eventType === 'focus' ||
+        eventType === 'blur' ||
+        eventType === 'error' ||
+        eventType === 'load' ||
+        eventType === 'toggle'
+      ) {
+        captureEventTypes.push(eventType);
+      } else {
+        eventTypes.push(eventType);
+      }
+    }
     // This is defined in packages/core/primitives/event-dispatch/contract_binary.ts
     const replayScriptContents = `window.__jsaction_bootstrap('ngContracts', document.body, ${JSON.stringify(
       appId,
-    )}, ${JSON.stringify(events)});`;
+    )}, ${JSON.stringify(eventTypes)}${captureEventTypes.length ? ',' + JSON.stringify(captureEventTypes) : ''});`;
 
     const replayScript = createScript(doc, replayScriptContents, nonce);
 

packages/platform-server/test/BUILD.bazel

@@ -16,7 +16,7 @@ circular_dependency_test(
 ts_library(
     name = "test_lib",
     testonly = True,
-    srcs = glob(["**/*.ts"]),
+    srcs = glob(["*.ts"]),
     deps = [
         "//packages:types",
         "//packages/animations",