feat(platform-server): use EventManagerPlugin on the server (#24132)

Previously event handlers on the server were setup directly. This change makes it so that the event registration on the server go through EventManagerPlugin just like on client. This allows us to add custom event registration handlers on the server which allows us to hook up preboot event handlers cleanly.

PR Close #24132

packages/platform-server/src/server_renderer.ts

@@ -8,7 +8,7 @@
 
 import {DomElementSchemaRegistry} from '@angular/compiler';
 import {APP_ID, Inject, Injectable, NgZone, RenderComponentType, Renderer, Renderer2, RendererFactory2, RendererStyleFlags2, RendererType2, RootRenderer, ViewEncapsulation, ɵstringify as stringify} from '@angular/core';
-import {DOCUMENT, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵflattenStyles as flattenStyles, ɵgetDOM as getDOM, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute} from '@angular/platform-browser';
+import {DOCUMENT, EventManager, ɵNAMESPACE_URIS as NAMESPACE_URIS, ɵSharedStylesHost as SharedStylesHost, ɵflattenStyles as flattenStyles, ɵgetDOM as getDOM, ɵshimContentAttribute as shimContentAttribute, ɵshimHostAttribute as shimHostAttribute} from '@angular/platform-browser';
 
 const EMPTY_ARRAY: any[] = [];
 
@@ -19,9 +19,9 @@ export class ServerRendererFactory2 implements RendererFactory2 {
   private schema = new DomElementSchemaRegistry();
 
   constructor(
-      private ngZone: NgZone, @Inject(DOCUMENT) private document: any,
-      private sharedStylesHost: SharedStylesHost) {
-    this.defaultRenderer = new DefaultServerRenderer2(document, ngZone, this.schema);
+      private eventManager: EventManager, private ngZone: NgZone,
+      @Inject(DOCUMENT) private document: any, private sharedStylesHost: SharedStylesHost) {
+    this.defaultRenderer = new DefaultServerRenderer2(eventManager, document, ngZone, this.schema);
   }
 
   createRenderer(element: any, type: RendererType2|null): Renderer2 {
@@ -34,7 +34,8 @@ export class ServerRendererFactory2 implements RendererFactory2 {
         let renderer = this.rendererByCompId.get(type.id);
         if (!renderer) {
           renderer = new EmulatedEncapsulationServerRenderer2(
-              this.document, this.ngZone, this.sharedStylesHost, this.schema, type);
+              this.eventManager, this.document, this.ngZone, this.sharedStylesHost, this.schema,
+              type);
           this.rendererByCompId.set(type.id, renderer);
         }
         (<EmulatedEncapsulationServerRenderer2>renderer).applyToHost(element);
@@ -61,7 +62,8 @@ class DefaultServerRenderer2 implements Renderer2 {
   data: {[key: string]: any} = Object.create(null);
 
   constructor(
-      private document: any, private ngZone: NgZone, private schema: DomElementSchemaRegistry) {}
+      private eventManager: EventManager, protected document: any, private ngZone: NgZone,
+      private schema: DomElementSchemaRegistry) {}
 
   destroy(): void {}
 
@@ -69,10 +71,10 @@ class DefaultServerRenderer2 implements Renderer2 {
 
   createElement(name: string, namespace?: string, debugInfo?: any): any {
     if (namespace) {
-      return getDOM().createElementNS(NAMESPACE_URIS[namespace], name);
+      return getDOM().createElementNS(NAMESPACE_URIS[namespace], name, this.document);
     }
 
-    return getDOM().createElement(name);
+    return getDOM().createElement(name, this.document);
   }
 
   createComment(value: string, debugInfo?: any): any { return getDOM().createComment(value); }
@@ -166,14 +168,25 @@ class DefaultServerRenderer2 implements Renderer2 {
   listen(
       target: 'document'|'window'|'body'|any, eventName: string,
       callback: (event: any) => boolean): () => void {
-    // Note: We are not using the EventsPlugin here as this is not needed
-    // to run our tests.
     checkNoSyntheticProp(eventName, 'listener');
-    const el =
-        typeof target === 'string' ? getDOM().getGlobalEventTarget(this.document, target) : target;
-    const outsideHandler = (event: any) => this.ngZone.runGuarded(() => callback(event));
-    return this.ngZone.runOutsideAngular(
-        () => getDOM().onAndCancel(el, eventName, outsideHandler) as any);
+    if (typeof target === 'string') {
+      return <() => void>this.eventManager.addGlobalEventListener(
+          target, eventName, this.decoratePreventDefault(callback));
+    }
+    return <() => void>this.eventManager.addEventListener(
+               target, eventName, this.decoratePreventDefault(callback)) as() => void;
+  }
+
+  private decoratePreventDefault(eventHandler: Function): Function {
+    return (event: any) => {
+      // Run the event handler inside the ngZone because event handlers are not patched
+      // by Zone on the server. This is required only for tests.
+      const allowDefaultBehavior = this.ngZone.runGuarded(() => eventHandler(event));
+      if (allowDefaultBehavior === false) {
+        event.preventDefault();
+        event.returnValue = false;
+      }
+    };
   }
 }
 
@@ -190,9 +203,9 @@ class EmulatedEncapsulationServerRenderer2 extends DefaultServerRenderer2 {
   private hostAttr: string;
 
   constructor(
-      document: any, ngZone: NgZone, sharedStylesHost: SharedStylesHost,
+      eventManager: EventManager, document: any, ngZone: NgZone, sharedStylesHost: SharedStylesHost,
       schema: DomElementSchemaRegistry, private component: RendererType2) {
-    super(document, ngZone, schema);
+    super(eventManager, document, ngZone, schema);
     const styles = flattenStyles(component.id, component.styles, []);
     sharedStylesHost.addStyles(styles);
 
@@ -203,7 +216,7 @@ class EmulatedEncapsulationServerRenderer2 extends DefaultServerRenderer2 {
   applyToHost(element: any) { super.setAttribute(element, this.hostAttr, ''); }
 
   createElement(parent: any, name: string): Element {
-    const el = super.createElement(parent, name);
+    const el = super.createElement(parent, name, this.document);
     super.setAttribute(el, this.contentAttr, '');
     return el;
   }