Skip to content

Move geteventlisteners to be imported from renderer #54

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Dec 9, 2018
Merged

Move geteventlisteners to be imported from renderer #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion libs/core/src/lib/angular-react-browser.module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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({
Expand Down
13 changes: 9 additions & 4 deletions ...ore/src/lib/external/geteventlisteners.ts → ...ore/src/lib/renderer/geteventlisteners.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -83,4 +88,4 @@
}
};
*/
})();
}
4 changes: 4 additions & 0 deletions libs/core/src/lib/renderer/renderer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -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);
Expand Down
27 changes: 15 additions & 12 deletions libs/fabric/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
},
Expand Down