Move geteventlisteners to be imported from renderer (#54)

AOT tree-shook imports in the module

Author: bengry

libs/core/src/lib/angular-react-browser.module.ts

@@ -3,7 +3,6 @@
 
 import { NgModule } from '@angular/core';
 import { BrowserModule, ɵDomRendererFactory2 } from '@angular/platform-browser';
-import './external/geteventlisteners';
 import { AngularReactRendererFactory } from './renderer/renderer';
 
 @NgModule({

libs/core/src/lib/external/geteventlisteners.ts renamed to libs/core/src/lib/renderer/geteventlisteners.ts

@@ -1,8 +1,13 @@
 // Taken and modified from https://github.com/colxi/getEventListeners to be compiled into ES5, allowing running in older browsers
 
-(function() {
-  'use strict';
-
+/**
+ * Monkey-patches `Element`'s `addEventListener` & `removeEventListener` and adds `getEventListeners`.
+ * This later allows the renderer to emit any event handlers attached to React-wrapped components as Angular Outputs:
+```html
+<my-component (arbitraryEvent)="onEventHandler($event)"></my-component>
+```
+ */
+export function initHooks() {
   // save the original methods before overwriting them
   Element.prototype['_addEventListener'] = Element.prototype.addEventListener;
   Element.prototype['_removeEventListener'] = Element.prototype.removeEventListener;
@@ -83,4 +88,4 @@
         }
     };
     */
-})();
+}

libs/core/src/lib/renderer/renderer.ts

@@ -8,6 +8,7 @@ import { Disguise } from './components/Disguise';
 import { ReactContent } from './react-content';
 import { isReactNode, ReactNode } from './react-node';
 import { registerElement } from './registry';
+import { initHooks as initGetEventListeners } from './geteventlisteners';
 
 const DEBUG = false;
 
@@ -83,6 +84,9 @@ export class ReactRenderer implements Renderer2 {
   };
 
   constructor(public readonly rootRenderer: AngularReactRendererFactory) {
+    // Attach hooks to event handlers so we can intercept and re-emit any event handlers passed to React-wrapper components
+    initGetEventListeners();
+
     // These two elements are essential for the whole experience to be smooth for the user - register them from the get-go.
     registerElement('ReactContent', () => ReactContent);
     registerElement('Disguise', () => Disguise);

libs/fabric/package.json

@@ -11,31 +11,34 @@
         "@angular-react/core": "ɵa",
         "office-ui-fabric-react/lib/Breadcrumb": "Breadcrumb",
         "office-ui-fabric-react/lib/Button": "Button",
-        "office-ui-fabric-react/lib/Image": "Image",
-        "office-ui-fabric-react/lib/Icon": "Icon",
-        "office-ui-fabric-react/lib/Dialog": "Dialog",
-        "office-ui-fabric-react/lib/Fabric": "Fabric",
+        "office-ui-fabric-react/lib/Calendar": "Calendar",
         "office-ui-fabric-react/lib/Callout": "Callout",
         "office-ui-fabric-react/lib/Checkbox": "Checkbox",
         "office-ui-fabric-react/lib/ChoiceGroup": "ChoiceGroup",
         "office-ui-fabric-react/lib/ComboBox": "ComboBox",
         "office-ui-fabric-react/lib/CommandBar": "CommandBar",
         "office-ui-fabric-react/lib/DatePicker": "DatePicker",
+        "office-ui-fabric-react/lib/DetailsList": "DetailsList",
+        "office-ui-fabric-react/lib/Dialog": "Dialog",
         "office-ui-fabric-react/lib/Divider": "Divider",
+        "office-ui-fabric-react/lib/Fabric": "Fabric",
         "office-ui-fabric-react/lib/GroupedList": "GroupedList",
+        "office-ui-fabric-react/lib/HoverCard": "HoverCard",
+        "office-ui-fabric-react/lib/Icon": "Icon",
+        "office-ui-fabric-react/lib/Image": "Image",
+        "office-ui-fabric-react/lib/Link": "Link",
+        "office-ui-fabric-react/lib/MarqueeSelection": "MarqueeSelection",
+        "office-ui-fabric-react/lib/MessageBar": "MessageBar",
+        "office-ui-fabric-react/lib/Modal": "Modal",
         "office-ui-fabric-react/lib/Panel": "Panel",
         "office-ui-fabric-react/lib/Persona": "Persona",
-        "office-ui-fabric-react/lib/Spinner": "Spinner",
-        "office-ui-fabric-react/lib/MessageBar": "MessageBar",
-        "office-ui-fabric-react/lib/Link": "Link",
         "office-ui-fabric-react/lib/Pivot": "Pivot",
-        "office-ui-fabric-react/lib/Toggle": "Toggle",
-        "office-ui-fabric-react/lib/HoverCard": "HoverCard",
-        "office-ui-fabric-react/lib/Tooltip": "Tooltip",
-        "office-ui-fabric-react/lib/Modal": "Modal",
+        "office-ui-fabric-react/lib/SearchBox": "SearchBox",
         "office-ui-fabric-react/lib/Shimmer": "Shimmer",
         "office-ui-fabric-react/lib/Slider": "Slider",
-        "office-ui-fabric-react/lib/SearchBox": "SearchBox"
+        "office-ui-fabric-react/lib/Spinner": "Spinner",
+        "office-ui-fabric-react/lib/Toggle": "Toggle",
+        "office-ui-fabric-react/lib/Tooltip": "Tooltip"
       },
       "comments": "none"
     },