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

This also fixes an existing bug where we erase the jsaction attribute too early.

Now the event contract binary is 608 bytes :D.

PR Close angular#55587

Author: iteriani

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

@@ -5,29 +5,18 @@
 ```ts
 
 // @public
-export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes: string[], captureEventTypes: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
-
-// @public
-export function bootstrapEventContract(field: string, container: Element, appId: string, events: string[], earlyJsactionTracker?: EventContractTracker<EventContract>): void;
-
-// @public
-export class Dispatcher {
-    constructor(getHandler?: ((eventInfoWrapper: EventInfoWrapper) => EventInfoWrapperHandler | void) | undefined, { stopPropagation, eventReplayer, }?: {
-        stopPropagation?: boolean;
+export class BaseDispatcher {
+    constructor(dispatchDelegate: (eventInfoWrapper: EventInfoWrapper) => void, { eventReplayer }?: {
         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;
+    dispatch(eventInfo: EventInfo): void;
+    queueEventInfoWrapper(eventInfoWrapper: EventInfoWrapper): void;
+    scheduleEventReplay(): void;
 }
 
+// @public
+export function bootstrapEarlyEventContract(field: string, container: HTMLElement, appId: string, eventTypes?: string[], captureEventTypes?: string[], earlyJsactionTracker?: EventContractTracker<EarlyJsactionDataContainer>): void;
+
 // @public (undocumented)
 export interface EarlyJsactionDataContainer {
     // (undocumented)
@@ -46,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;
 }
 
@@ -112,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,11 +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`).
@@ -63,6 +34,6 @@ export function bootstrapEarlyEventContract(
   }
   earlyJsactionTracker[field][appId] = {};
   const eventContract = new EarlyEventContract(earlyJsactionTracker[field][appId], container);
-  eventTypes && eventContract.addEvents(eventTypes);
-  captureEventTypes && 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",

packages/platform-server/test/event_replay_spec.ts

@@ -8,7 +8,6 @@
 
 import {DOCUMENT} from '@angular/common';
 import {Component, destroyPlatform, getPlatform, Type} from '@angular/core';
-import {EventContract} from '@angular/core/primitives/event-dispatch';
 import {TestBed} from '@angular/core/testing';
 import {
   withEventReplay,
@@ -83,7 +82,6 @@ describe('event replay', () => {
 
     describe('server rendering', () => {
       let doc: Document;
-      let eventContract: EventContract | undefined = undefined;
       const originalDocument = globalThis.document;
       const originalWindow = globalThis.window;
 
@@ -96,8 +94,6 @@ describe('event replay', () => {
             eval(script.textContent);
           }
         }
-        eventContract = globalThis.window['ngContracts']['ng'];
-        expect(eventContract).toBeDefined();
       }
 
       beforeAll(async () => {
@@ -111,51 +107,55 @@ describe('event replay', () => {
 
       afterEach(() => {
         doc.body.textContent = '';
-        eventContract?.cleanUp();
-        eventContract = undefined;
       });
       afterAll(() => {
         globalThis.window = originalWindow;
         globalThis.document = originalDocument;
       });
-      it('should serialize event types to be listened to and jsaction', async () => {
+      it('should serialize event types to be listened to and jsaction attribute', async () => {
         const clickSpy = jasmine.createSpy('onClick');
-        const blurSpy = jasmine.createSpy('onBlur');
+        const focusSpy = jasmine.createSpy('onFocus');
         @Component({
           standalone: true,
           selector: 'app',
           template: `
-            <div (click)="onClick()" id="1">
-              <div (blur)="onClick()" id="2"></div>
+            <div (click)="onClick()" id="click-element">
+              <div id="focus-container">
+                <div id="focus-action-element" (focus)="onFocus()">
+                  <button id="focus-target-element">Focus Button</button>
+                </div>
+              </div>
             </div>
           `,
         })
         class SimpleComponent {
           onClick = clickSpy;
-          onBlur = blurSpy;
+          onFocus = focusSpy;
         }
 
         const docContents = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
         const html = await ssr(SimpleComponent, {doc: docContents});
         const ssrContents = getAppContents(html);
         expect(ssrContents).toContain(
-          `<script>window.__jsaction_bootstrap('ngContracts', document.body, "ng", ["click","blur"]);</script>`,
-        );
-        expect(ssrContents).toContain(
-          '<div id="1" jsaction="click:"><div id="2" jsaction="blur:"></div></div>',
+          `<script>window.__jsaction_bootstrap('ngContracts', document.body, "ng", ["click"],["focus"]);</script>`,
         );
 
         render(doc, ssrContents);
-        const el = doc.getElementById('1')!;
+        const el = doc.getElementById('click-element')!;
+        const button = doc.getElementById('focus-target-element')!;
         const clickEvent = new CustomEvent('click', {bubbles: true});
         el.dispatchEvent(clickEvent);
+        const focusEvent = new CustomEvent('focus');
+        button.dispatchEvent(focusEvent);
         expect(clickSpy).not.toHaveBeenCalled();
+        expect(focusSpy).not.toHaveBeenCalled();
         resetTViewsFor(SimpleComponent);
         const appRef = await hydrate(doc, SimpleComponent, {
           hydrationFeatures: [withEventReplay()],
         });
         appRef.tick();
         expect(clickSpy).toHaveBeenCalled();
+        expect(focusSpy).toHaveBeenCalled();
       });
 
       it('should remove jsaction attributes, but continue listening to events.', async () => {
@@ -175,24 +175,17 @@ describe('event replay', () => {
         const docContents = `<html><head></head><body>${EVENT_DISPATCH_SCRIPT}<app></app></body></html>`;
         const html = await ssr(SimpleComponent, {doc: docContents});
         const ssrContents = getAppContents(html);
-        const removeEventListenerSpy = spyOn(
-          document.body,
-          'removeEventListener',
-        ).and.callThrough();
         render(doc, ssrContents);
         const el = doc.getElementById('1')!;
         expect(el.hasAttribute('jsaction')).toBeTrue();
         expect((el.firstChild as Element).hasAttribute('jsaction')).toBeTrue();
         resetTViewsFor(SimpleComponent);
-        expect(removeEventListenerSpy).not.toHaveBeenCalled();
         const appRef = await hydrate(doc, SimpleComponent, {
           hydrationFeatures: [withEventReplay()],
         });
         appRef.tick();
         expect(el.hasAttribute('jsaction')).toBeFalse();
         expect((el.firstChild as Element).hasAttribute('jsaction')).toBeFalse();
-        // Event contract is still listening even if jsaction attributes are removed.
-        expect(removeEventListenerSpy).not.toHaveBeenCalled();
       });
 
       it(`should add 'nonce' attribute to event record script when 'ngCspNonce' is provided`, async () => {